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 () <UIAlertViewDelegate>

实现协议方法

#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 () <UIAlertViewDelegate, UITextFieldDelegate>

实现协议方法

#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（事件）