常用UI控件

常用UI控件

本节小结知识点：

可能用得上的UI控件

什么是UILabel

什么是UIImageView

什么是UIImage

什么是UIButton

UIButton、UIImageView、UILabel的选择

Storyboard到代码的转换

1. 可能用得上的UI控件

为了便于开发者打造各式各样的优秀App，UIKit框架提供了非常多功能强大又易用的UI控件

以下列举一些在开发中可能用得上的UI控件：

- UIButton 按钮
- UILabel 文本标签
- UITextField 文本输入框
- UIImageView 图片显示
- UIScrollView  滚动的控件
- UITableView  表格
- UICollectionView 九宫格
- UIWebView 网页显示控件
- UIAlertView  对话框（中间弹框）
- UINavigationBar导航条

- UIPageControl  分页控件
- UITextView  能滚动的文字显示控件
- UIActivityIndicator 圈圈
- UISwitch 开关
- UIActionSheet 底部弹框
- UIDatePicker 日期选择器

UIToolbar 工具条

UIProgressView 进度条

UISlider 滑块

UISegmentControl 选项卡

UIPickerView 选择器

红色表明最常用，黑色代表一般，灰色代表几乎不用（这不是绝对的，仅供参考）

2. 什么是UILabel

UILabel极其常用，功能比较专一：显示文字

UILabel的常见属性

@property(nonatomic,copy)   NSString           *text;
//显示的文字

@property(nonatomic,retain) UIFont             *font;
//字体

@property(nonatomic,retain) UIColor            *textColor;
//文字颜色

@property(nonatomic)        NSTextAlignment    textAlignment;
//对齐模式（比如左对齐、居中对齐、右对齐）

@property(nonatomic) NSInteger numberOfLines;
//文字行数

@property(nonatomic)        NSLineBreakMode    lineBreakMode;
//换行模式

UIFont

//UIFont代表字体，常见创建方法有以下几个：
+ (UIFont *)systemFontOfSize:(CGFloat)fontSize;   系统默认字体
+ (UIFont *)boldSystemFontOfSize:(CGFloat)fontSize;  粗体
+ (UIFont *)italicSystemFontOfSize:(CGFloat)fontSize;  斜体

UILabel的基本设置

要想让UILabel自动换行，设置Lines为0即可;

若设置Lines为 N 则表示最多可显示 N 行



让UILabel的文字居中显示

3. 什么是UIImageView

UIKit框架提供了非常多的UI控件，但并不是每一个都很常用，有些控件可能1年内都用不上，有些控件天天用，比如UIButton、UILabel、UIImageView、UITableView等等

UIImageView极其常用，功能比较专一：显示图片

UIImageView的常见属性

@property(nonatomic,retain) UIImage *image;
//显示的图片

@property(nonatomic,copy) NSArray *animationImages;
//显示的动画图片

@property(nonatomic) NSTimeInterval animationDuration;
//动画图片的持续时间

@property(nonatomic) NSInteger      animationRepeatCount;
//动画的播放次数（默认是0，代表无限播放）

UIImageView的常见方法

- (void)startAnimating; // 开始动画
- (void)stopAnimating; // 停止动画
- (BOOL)isAnimating; // 是否正在执行动画

4. 什么是UIImage

一个UIImage对象代表一张图片，一般通过图片名称获取

UIImage *image = [UIImage imageNamed:@"lufy"];

5. 什么是按钮

还有一个非常重要的UI控件—UIButton，俗称“按钮”

一般情况下，点击某个控件后，会做出相应反应的都是按钮

按钮的功能比较多，既能显示文字，又能显示图片，还能随时调整内部图片和文字的位置

UIButton的 3 种状态

normal（普通状态）

+ 默认情况（Default）
+ 对应的枚举常量：UIControlStateNormal

highlighted（高亮状态）

+ 按钮被按下去的时候（手指还未松开）
+ 对应的枚举常量：UIControlStateHighlighted

disabled（失效状态，不可用状态）

+ 如果enabled属性为NO，就是处于disable状态，代表按钮不可以被点击
+ 对应的枚举常量：UIControlStateDisabled

设置按钮的背景图片

设置按钮在不同状态下的背景图片

（为了保证高亮状态下的图片正常显示，必须设置按钮的type为custom）



按钮的样式

实际上，UIButton自带了很多种不同的样式



代码创建按钮的同时指定按钮样式

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
//等价 UIButton *btn = [[UIButton alloc] init];
UIButtonTypeCustom：无类型，按钮的内容需要自定义：位置尺寸、背景色，等（如果没有自定义这些可能会看不到）
UIButtonTypeDetailDisclosure：
UIButtonTypeInfoLight：
UIButtonTypeInfoDark：
UIButtonTypeContactAdd：

UIButton的常见设置

- (void)setTitle:(NSString *)title forState:(UIControlState)state;
//设置按钮的文字

- (void)setTitleColor:(UIColor *)color forState:(UIControlState)state;
//设置按钮的文字颜色

- (void)setImage:(UIImage *)image forState:(UIControlState)state;
//设置按钮内部的小图片

- (void)setBackgroundImage:(UIImage *)image forState:(UIControlState)state;
//设置按钮的背景图片

//设置按钮的文字字体（需要拿到按钮内部的label来设置）
btn.titleLabel.font = [UIFont systemFontOfSize:13];

- (NSString *)titleForState:(UIControlState)state;
//获得按钮的文字

- (UIColor *)titleColorForState:(UIControlState)state;
//获得按钮的文字颜色

- (UIImage *)imageForState:(UIControlState)state;
//获得按钮内部的小图片

- (UIImage *)backgroundImageForState:(UIControlState)state;
//获得按钮的背景图片

6. UIButton、UIImageView、UILabel的选择

特点

UIButton

既能显示文字，又能显示图片（能显示2张图片，背景图片、内容图片）

长按高亮的时候可以切换图片\文字

直接通过addTarget…方法监听点击

UIImageView

能显示图片，不能直接通过addTarget…方法监听点击

UILabel

能显示文字，不能直接通过addTarget…方法监听点击

选择

仅仅是显示数据，不需要点击

建议选择UIImageView、UILabel

不仅显示数据，还需要监听点击

建议选择UIButton

其实UIImageView、UILabel也可以通过手势识别器来监听（后面课程会学）

长按控件后，会改变显示的内容

选择UIButton（因为UIButton有highlighted这种状态）

同时显示2张图片：背景图片、内容图片

选择UIButton

7. Storyboard到代码的转换

Storyboard上的设置



代码实现

// 创建一个自定义的按钮，同时定义按钮类型
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
// 默认状态的背景
[btn setBackgroundImage:[UIImage imageNamed:@"btn_01"] forState:UIControlStateNormal];
// 默认状态的文字
[btn setTitle:@"点我啊" forState:UIControlStateNormal];
// 默认状态的文字颜色
[btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];