UI之各种控件的属性及使用方法说明（一）

最近学习UI发现，各种控件太多，很多属性及方法都掌握的不够全面，所以有了这篇文章，把控件的常用属性及方法的使用方法罗列出来，以后还会继续更新。

这里只介绍跟UI有关系的控件，想看OC的帖子，请看我其他的博客，其中有介绍很多常用的类及类的方法。

我做了一个思维导图，接下来会我一一介绍每一个控件的常用方法及设计模式：

我所讲的控件都是NSObject的子类，而与用户响应的控件又都是UIResponder的子类，换言之所有与用户交流的控件都是UIResponder的子类，我们所用到在画面上显示的控件都是UIView的子类，只要把这些层级关系搞清楚，会对以后的学习有很大的帮助

首先创建一个空工程（Empty Application），在xcode5.0以后，你会发现Empty Application模板已经不存在了，怎么创建Empty Application工程，请参照：

在xcode6 上创建Empty Application工程

将工程模式调成mrc模式（及手动释放内存）

为了方便，直接使用导航控制器（UINavigationController），对于导航控制器的原理请参照：

UI之UINavigationController

UI之UILabel：

作用：显示文字

用法：

    // 初始化Label，并确定label位置
    self.myLabel = [[[UILabel alloc] initWithFrame:CGRectMake(20, 80, 100, 35)] autorelease];
    
    // label显示文字
    _myLabel.text = @"Hello iOS";
    
    // 给label添加指定颜色
    // _myLabel.backgroundColor = [UIColor blueColor];
    
    // 设置文字的颜色
    // _myLabel.textColor = [UIColor yellowColor];
    
    // 设置文字对齐方式
    // _myLabel.textAlignment = NSTextAlignmentLeft;
    
    // 设置显示文字的行数（赋值为0的场合，默认将文字全部显示，长度不够时换行，但宽度不足的场合，不会显示全部的文字）
    _myLabel.numberOfLines = 0;
    // 将label追加到view中显示
    [self addSubview:_myLabel];

显示结果：

UI之UIButton：

用法：

    // 初始化button对象，并确定button样式
    self.myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    
    // 设置button显示位置
    _myButton.frame = CGRectMake(130, 80, 100, 35);
    
    // 设置按钮显示文字，及样式
    [_myButton setTitle:@"我是按钮" forState:UIControlStateNormal];
    
    // 设置按钮文字的颜色及样式
//    [_myButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    
    // 设置按钮阴影颜色及样式
//    [_myButton setTitleShadowColor:[UIColor blackColor] forState:UIControlStateNormal];
    
    // 设置按钮图片及样式
//    [_myButton setImage:[UIImage imageNamed:@"btn.png"] forState:UIControlStateNormal];
    
    // 设置按钮边框图片及样式
//    [_myButton setBackgroundImage:[UIImage imageNamed:@"btn.png"] forState:UIControlStateNormal];
    
    // 获取按钮的titleLabel属性
//    _myButton.titleLabel;
    
    // 设置按钮边框宽度
    _myButton.layer.borderWidth = 2.0;
    
    // 设置按钮边框圆角半径
    _myButton.layer.cornerRadius = 10;

    // 设置按钮可用状态（NO 不可用 YES 可用）
//    _myButton.enabled = NO;
    
    // 将button追加到view中显示
    [self addSubview:_myButton];

效果图：

按钮的设计模式：

Targer....Action（事件）

    // 设置按钮点击事件及触发场合
    [_rootView.myButton addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside];

buttonAction:方法是我们自定义的方法，现在来看看这个方法是如何定义和实现的

#pragma mark - 设置按钮点击事件
- (void)buttonAction:(UIButton *)sender
{
    // 消息提示视图
    UIAlertView *alertView = [[[UIAlertView alloc] initWithTitle:@"提示" message:@"您点击了一下按钮" 
delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:@"确认", nil] autorelease];
    
    // 显示消息提示视图
    [alertView show];
}

方法的返回值类型是void 参数就是按钮本身
看看点击一下按钮后的效果：

UI之UIAlertView

作用：消息提示视图

用法：

    // 消息提示视图
    UIAlertView *alertView = [[[UIAlertView alloc] initWithTitle:@"提示" message:@"您点击了一下按钮" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确认", nil] autorelease];
    
    // 显示消息提示视图
    [alertView show];

消息提示视图的设计模式

delegate（代理）

遵守协议

@interface RootViewController () 

实现协议方法

#pragma mark - 设置消息提示视图的代理方法
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
{
    NSLog(@"%ld", buttonIndex);
}

参数buttonIndex代表消息提示视图按钮的下标

UI之TextField

作用：可输入的文本框

用法：

    // 初始化textField，并设置视图中得位置及大小
    self.myTextField = [[[UITextField alloc] initWithFrame:CGRectMake(20, 150, 200, 35)] autorelease];
    
    // 设置文本框边框样式
    _myTextField.borderStyle = UITextBorderStyleRoundedRect;
    
    // 设置文本框圆角半径
    _myTextField.layer.cornerRadius = 10;
    
    // 设置文本框边框宽度
    _myTextField.layer.borderWidth = 2;
    
    // 设置文本框文字颜色
    _myTextField.textColor = [UIColor blueColor];
    
    // 设置文本框文字对齐方法
    _myTextField.textAlignment = NSTextAlignmentLeft;
    
    // 设置文本框默认提示文字
    _myTextField.placeholder = @"请输入内容";
    
    // 设置文本框文字加密
    _myTextField.secureTextEntry = YES;
    
    // 设置文本框左侧显示图片
    UIImageView *imageView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"password.png"]] autorelease];
    _myTextField.leftView = imageView;
    // 设置左侧显示图片的出现场合
    _myTextField.leftViewMode = UITextFieldViewModeAlways;
    // 设置文本框右侧显示和左侧使用的方法是相同的
    
    // 将文本框追加到view中显示
    [self addSubview:_myTextField];

效果图

文本框的设计模式：

delegate（代理模式）

给文本框设置代理

    // 给文本框设置代理
    _rootView.myTextField.delegate = self;

遵守协议

@interface RootViewController () 

实现协议方法

#pragma mark - 文本框点击虚拟键盘的return按钮后，隐藏虚拟键盘
- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
    // 隐藏虚拟键盘方法
    [textField resignFirstResponder];
    return YES;
}

这里介绍一下其他协议方法的使用场合

#pragma mark - 光标进入文本框时触发的事件
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField
{
    NSLog(@"%d %s", __LINE__, __FUNCTION__);
    return YES;
}

#pragma mark - 光标进入文本框后准备输入的事件
- (void)textFieldDidBeginEditing:(UITextField *)textField
{
    NSLog(@"%d %s", __LINE__, __FUNCTION__);
}

#pragma mark - 输入文字触发的事件
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string
{
    NSLog(@"%d %s", __LINE__, __FUNCTION__);
    return YES;
}

#pragma mark - 光标离开文本框时触发的事件
- (BOOL)textFieldShouldEndEditing:(UITextField *)textField
{
    NSLog(@"%d %s", __LINE__, __FUNCTION__);
    return YES;
}

#pragma mark - 光标已经离开文本框后触发的事件
- (void)textFieldDidEndEditing:(UITextField *)textField
{
    NSLog(@"%d %s", __LINE__, __FUNCTION__);
}

- (BOOL)textFieldShouldClear:(UITextField *)textField
{
    NSLog(@"%d %s", __LINE__, __FUNCTION__);
    return YES;
}

- (BOOL)textFieldShouldClear:(UITextField *)textField的触发条件，我没有想到，欢迎知道的朋友补充

UI之UIImageView及UIImage

作用：显示图片（通常UIImageView和UIImage一起使用）

用法：

    // 初始化image，并将图片放在image中
    self.myImage = [UIImage imageNamed:@"apple.png"];
    
    // 初始化image视图，将image放在image视图中
    self.myImageView = [[[UIImageView alloc] initWithImage:_myImage] autorelease];
    
    // 设置image视图的位置及大小
    _myImageView.frame = CGRectMake(20, 200, 200, 200);
    
    // 设置边框宽度
    _myImageView.layer.borderWidth = 2;
    
    // 设置圆角半径
    _myImageView.layer.cornerRadius = 10;
    
    // 打开image视图的响应者链（image视图可以触发触碰事件）
//    _myImageView.userInteractionEnabled = YES;
    
    // 将image视图追加到view中显示
    [self addSubview:_myImageView];

效果图

总结：

UIView的子类：UIAlertView（消息提示视图） UIImageView（图片视图）UILabel（标签视图）UITextField（文本框）UIButton（按钮）

NSObject的子类：UIColor（颜色）UIImage（图片）

的使用场景

UI非常重要的两种设计模式

Delegate（代理）Targer Action（事件）