黑马程序员——IOS学习—基本UI控件的代码创建

-----------Java培训、Android培训、IOS培训、.Net培训、期待与您交流！------------

本节采用代码的方式系统了解一下IOS主要UI控件的创建和使用，在开始之前首先要创建一个新的单页面IOS工程，这里我们的项目名称为baseUIs，将平台设置为ipad2（屏幕大），设置Main.storyboard中的主view的尺寸为iPad Full Screen。

1、屏幕布局

ipad2的屏幕分辨率为1024x768，为了合理使用界面，我们首先计划一下各个UI控件的摆放，我们假设每排放3个控件，计划放4排，采用如下的方式来摆放，这种方式要求我们通过UI空间的中心点来定位（另一种是通过左上角定位）。



我们首先在控制器头文件中采用宏定义的方式来定义这些坐标点，假设横排采用A、B、C、D命名，竖排采用1、2、3命名，命名如下：

#define A1 CGPointMake(192, 100)
#define A2 CGPointMake(384, 100)
#define A3 CGPointMake(576, 100)

#define B1 CGPointMake(192, 300)
#define B2 CGPointMake(384, 300)
#define B3 CGPointMake(576, 300)

#define C1 CGPointMake(192, 500)
#define C2 CGPointMake(384, 500)
#define C3 CGPointMake(576, 500)

#define D1 CGPointMake(192, 700)
#define D2 CGPointMake(384, 700)
#define D3 CGPointMake(576, 700)

2、UIButton 控件
UIButton按钮控件可以响应用户的点击事件，为了验证这种响应事件的控件，我们首先要在控制器类里声明和实现一个用来检测事件触发的方法，实现如下：

- (void)testWithTarget:(id)target{
NSLog(@"%@ calls this method",[target class]);
}

该方法可以响应点各种事件，并能访问事件源对象。

我们采用代码的方式来创建本节的所有控件，这些代码需要创建在ViewController的ViewDidLoad方法内（可以保证在控制器加载的时候运行），UIButton按钮控件的代码创建如下：

#pragma mark -- UIButton按钮
// 实例创建
UIButton *newButton = [UIButton new];
// 框架设置
newButton.frame = CGRectMake(0, 0, 100, 100);
newButton.center = A1;
// 背景颜色
newButton.backgroundColor=[UIColor lightGrayColor];
// 按钮文字
[newButton setTitle:@"ClickMe" forState:UIControlStateNormal];
[newButton setTitle:@"Clicked" forState:UIControlStateHighlighted];
// 文字颜色
[newButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[newButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
// 按钮图片
[newButton setBackgroundImage:[UIImage imageNamed:@"01_btn_image1.png"] forState:UIControlStateNormal];
[newButton setBackgroundImage:[UIImage imageNamed:@"01_btn_image2.png"] forState:UIControlStateHighlighted];

// 监听设置
[newButton addTarget:self action:@selector(testWithTarget:) forControlEvents:UIControlEventTouchUpInside];

// 按钮添加
[self.view addSubview:newButton];

该按钮控件需要调用两个用户自己定义的图片资源，我们需要加载到我们的项目，图片资源如下：



3、UILabel 控件
UILabel标签控件用来在屏幕上显示文本提示信息，文本信息是可以改变的，需要注意的是他也可以响应用户点击动作，但是没按钮的效果丰富，代码如下：

#pragma mark -- Label标签
// 实例创建
UILabel *newLabel=[UILabel new];
// 框架设置
newLabel.frame=CGRectMake(50, 100, 200, 100);
newLabel.center = A2;
// 标签文本
newLabel.text=@"This is a label!";
newLabel.tintColor=[UIColor redColor];
// 标签背景颜色
newLabel.backgroundColor=[UIColor lightGrayColor];
// 自动换行
newLabel.numberOfLines=0;

// 标签添加
[self.view addSubview:newLabel];

4、UITextField 控件
UITextField文本控件用于用户输入数据，他在掌上产品是和虚拟键盘相关联的，一个控制器如果包含文本控件，需要遵守<UITextFieldDelegate>协议，该协议的方法全部为可选，我们在控制器的实现里实现他的方法：

#pragma mark - UITextFieldDelegate
// 检测文本变动
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string{
NSLog(@"%@ shouldChangeCharactersInRange:{%d - %d}, replacementString:%@", textField.class, range.location, range.length, string);
return YES;
};
// 监听编辑操作
- (void)textFieldDidBeginEditing:(UITextField *)textField{
NSLog(@"%@ textFieldDidBeginEditing", textField.class);
}
// 监听编辑结束
- (void)textFieldDidEndEditing:(UITextField *)textField{
NSLog(@"%@ textFieldDidEndEditing", textField.class);
}
// 编辑之前执行的操作
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField{
NSLog(@"%@ textFieldShouldBeginEditing", textField.class);
return YES;
}
// 清空之前执行
- (BOOL)textFieldShouldClear:(UITextField *)textField{
NSLog(@"%@ textFieldShouldClear", textField.class);
return YES;
}
// 编辑完成前执行
- (BOOL)textFieldShouldEndEditing:(UITextField *)textField{
NSLog(@"%@ textFieldShouldEndEditing", textField.class);
return YES;
}
// 回车键方法（主要用在iphone，在ipad中有隐去键盘键）
- (BOOL)textFieldShouldReturn:(UITextField *)textField{
// 放弃焦点，隐藏键盘
[textField resignFirstResponder];
return YES;
}

接下来就可以通过代码来创建文本控件：

#pragma mark -- UITextFeild文本框
// 文本框实例化
UITextField *newTextField = [UITextField new];
// 框架设置
newTextField.frame = CGRectMake(0, 0, 150, 70);
newTextField.center = A3;
// 样式
newTextField.borderStyle = UITextBorderStyleBezel;
// 文字提示
newTextField.placeholder = @"Insert some text!";
// 清除按钮
newTextField.clearButtonMode = UITextFieldViewModeWhileEditing;
// 键盘样式
newTextField.keyboardType = UIKeyboardTypeDefault;
newTextField.returnKeyType = UIReturnKeyDone;

// 代理设置
newTextField.delegate=self;

// 文本框添加
[self.view addSubview:newTextField];

5、UITextView 控件
UITextView编辑框用来编辑一个文本片段，也可以实现图文效果，和文本框的简单输入有很大区别，我们也需要遵守一个<UITextFieldDelegate>协议来响应文本编辑框的各种操作，我们在控制器内实现他的方法：

#pragma mark - UITextViewDelegate
// 文本变化
- (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text{
NSLog(@"%@ shouldChangeCharactersInRange:{%d - %d}, replacementString:%@", textView.class, range.location, range.length, text);
return YES;
}
// 导入富文本（图文）
- (BOOL)textView:(UITextView *)textView shouldInteractWithTextAttachment:(NSTextAttachment *)textAttachment inRange:(NSRange)characterRange{
NSLog(@"%@ shouldInteractWithTextAttachment:%@, inRange:{%d - %d} ",textView.class, textAttachment, characterRange.location, characterRange.length);
return YES;
}
// 网络导入数据
- (BOOL)textView:(UITextView *)textView shouldInteractWithURL:(NSURL *)URL inRange:(NSRange)characterRange{
return YES;
}
// 开始编辑时执行
- (void)textViewDidBeginEditing:(UITextView *)textView{
NSLog(@"%@ textViewDidBeginEditing", textView.class);
}
// 文本变化监听
- (void)textViewDidChange:(UITextView *)textView{
NSLog(@"%@ textViewDidChange", textView.class);
}
// 文本选择变更
- (void)textViewDidChangeSelection:(UITextView *)textView{
NSLog(@"%@ textViewDidChangeSelection", textView.class);
}
// 编辑结束触发
- (void)textViewDidEndEditing:(UITextView *)textView{
NSLog(@"%@ textViewDidEndEditing", textView.class);
}
// 编辑前预处理
- (BOOL)textViewShouldBeginEditing:(UITextView *)textView{
NSLog(@"%@ textViewShouldBeginEditing", textView.class);
return YES;
}
// 编辑结束预处理
- (BOOL)textViewShouldEndEditing:(UITextView *)textView{
NSLog(@"%@ textViewShouldEndEditing", textView.class);
return YES;
}

代码创建文本编辑框：

#pragma mark -- UITextView文本区域
// 文本创建
UITextView *newTextView = [UITextView new];
newTextView.frame = CGRectMake(0, 0, 200, 200);
newTextView.center = B1;
// 文本样式
newTextView.backgroundColor = [UIColor lightGrayColor];
// 文字样式
newTextView.font = [UIFont fontWithName:@"Arial" size:20];
newTextView.textColor = [UIColor purpleColor];
// 文字内容
newTextView.text = @"Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam liber te conscient to factor tum poen legum odioque civiuda.";
// 键盘样式
newTextView.keyboardType = UIKeyboardTypeDefault;
// 设置代理
newTextView.delegate = self;

// 添加文本
[self.view addSubview:newTextView];

6、UIImage 控件
这个控件可以用来装载一个图片，具体实现代码如下：

#pragma mark -- UIImageView图片框
// 图片框创建
UIImageView *newImageView = [UIImageView new];
newImageView.frame = CGRectMake(0, 0, 100, 200);
newImageView.center = B2;
// 加载图片
newImageView.image = [UIImage imageNamed:@"02_image.jpg"];
// 图片样式
newImageView.contentMode = UIViewContentModeScaleAspectFill;

// 图片框添加
[self.view addSubview:newImageView];

在这里使用到了一个图片资源，他的使用方法和按钮图片的使用方法一样，放在工程中即可。

7、UISlider 控件
这是一个滑块控件，我们人为的设置他的最大值和最小值，通过上面的滑块在最大值和最小值之间拖拽，可以连续触发事件，通过该对象事件可以取得滑块当前的数值，他的实现如下：

#pragma mark -- UISlider滑块
// 滑块创建
UISlider *newSlider = [UISlider new];
newSlider.frame = CGRectMake(0, 0, 100, 30);
newSlider.center = B3;
// 数值范围
newSlider.minimumValue = 0;
newSlider.maximumValue = 9;
// 监听滑块
[newSlider addTarget:self action:@selector(testWithTarget:) forControlEvents:UIControlEventValueChanged];

// 添加滑块
[self.view addSubview:newSlider];

8、UISwitch 控件
开关控件，类似我们的电灯开关，他有两个状态，on和off，点击他，状态改变，同时触发事件，在事件中，可以直接通过该对象的isOn属性来得到他的当前状态。他的实现如下：

#pragma mark -- UISwitch开关
// 开关创建
UISwitch *newSwitch = [UISwitch new];
newSwitch.center = C1;
// 开关样式
newSwitch.thumbTintColor = [UIColor purpleColor];
newSwitch.tintColor = [UIColor redColor];
// 监听开关
[newSwitch addTarget:self action:@selector(testWithTarget:) forControlEvents:UIControlEventValueChanged];

// 添加开关
[self.view addSubview:newSwitch];

9.UISegmentControl 控件
分段控制器，他由多个可以点击的小按钮组成，这些按钮同时只有一个处于按下的状态，我们点击任一个小按钮，都会触发事件，通过该控件的selectedSegmentIndex属性可以获取分段控制器的当前状态。实现如下：

#pragma mark -- UISegmentedControl分段控制器
// 实例创建
UISegmentedControl *newSegment = [UISegmentedControl new];
// 框架设置
newSegment.frame = CGRectMake(0, 0, 150, 50);
newSegment.center = C2;
// 内容添加
[newSegment insertSegmentWithTitle:@"Seg3" atIndex:0 animated:NO];
[newSegment insertSegmentWithTitle:@"Seg2" atIndex:0 animated:NO];
[newSegment insertSegmentWithTitle:@"Seg1" atIndex:0 animated:NO];
[newSegment insertSegmentWithTitle:@"Seg0" atIndex:0 animated:NO];
// 样式设置
newSegment.backgroundColor = [UIColor blackColor];
newSegment.tintColor = [UIColor lightGrayColor];
// 初始位置
newSegment.selectedSegmentIndex = 0;
// 监听设置
[newSegment addTarget:self action:@selector(testWithTarget:) forControlEvents:UIControlEventValueChanged];

// 添加到视图
[self.view addSubview:newSegment];

10、项目完善
在前面所用的事件监听，我们都在使用testWithTarget方法，为了区别开来，便于学习，我们把该方法修正一下：

- (void)testWithTarget:(id)target{
Class class = [target class];
// 根据不同对象输出不同的参数
if (class == [UIButton class]) {
NSLog(@"%@ calls this method", class);
}else if (class == [UISlider class]){
NSLog(@"%@ calls this method, currentValue: %f", class, [(UISlider*)target value]);
}else if (class == [UISegmentedControl class]){
NSLog(@"%@ calls this method, selectedSegmentIndex: %d", class, [(UISegmentedControl*)target selectedSegmentIndex]);
}else if(class == [UISwitch class]){
NSLog(@"%@ calls this method, currentState: %d", class, [(UISwitch*)target isOn]);
}

}

现在我们可以执行查看运行效果，并通过界面操作来熟悉各种事件监听的机制（包括代理方法的响应），这些方法都会将调用信息反馈到调试窗口中，程序的最终运行效果如下：



操作按钮、滑块等，会在调试窗口指示调试信息，在这里不做演示。

selectedSegmentIndex

-----------Java培训、Android培训、IOS培训、.Net培训、期待与您交流！------------