实现一个图像视图、一个滑动条、两个不同的文板框、一个分段控件、两个开关控件和一个更符合UIS风格的按钮。
将了解如何设置和获取各种控件的值,还会介绍如何使用操作表单强制用户做出选择,以及使用警告视图向用户显示重要的反馈信息。并讨论控件状态,以及如何使用可拉伸图像让按钮变得更加美观。
1.创建视图:
一个图像视图、下面两个文本框,一个允许输入字母和数字,另一个只允许输入数字、一个滑动条、分段控制、开关
2.向imges.xcassets中插入要使用的图片:在编辑区左下角单击'+'号按钮,选择New Image Set。
3.进行视图构建:
(1)添加图像视图:
Image View控件,选择 Editor -> Size to Fit Content 可以将图像视图的大小自动调整到与其中图像完全一致。
按下Option键,可以看到一些红色的辅助线。
属性说明:
Tag:用于标识界面对象的一种与语言无关的方法。(很好用,经常存在多个相同控件调用同一方法时,使用Tag属性来确定到底是哪个控件。)
Interaction:User Interaction Enabled 用户能否与之交互; Multiple Touch 是否支持多点触控。
Alpha:设置图像透明度 0.0 ~ 1.0
Background:设置背景色
Tint:设置高光颜色
Drawing:Opaque 、Hidden 隐藏某个对象、Clip Subviews 是否绘制超出父视图的部分(选中代表不绘制)、Autoresize Subviews 父视图变化时自动调整子视图大小、Stretching 拉伸
(2)添加文本框
Placholder 占位符,以灰色显示在文本框内,提示用户进行输入、Clear Button 设置清除按钮、 Return Key 确认输入完毕(一般为搜索时,设置为Done)、Secure 是密码框时选中、Keyboard type 选择输入内容要求。
(3)创建关联输出接口: nameField / numberField
(4)输入完毕后关闭键盘:
原理:当用户按下键盘上的Done按钮时,会产生一个Did End On Exit事件,此时需要让文本框交出控制权,以关闭键盘。
在.m中加入以下代码:
-(IBAction) textFieldDoneEditing:(id)sender{
[sender resignFirstResponder]; //关闭键盘事件
}
之后对于文本框组件,在事件选择中,Did End On Exit 事件与上述函数相连接。
(5)对于没有Done按钮的处理:通过触摸背景关闭键盘
在.m中刚加入以下代码:
-(IBAction)backgroundTap:(id)sender{ //触摸背景,关闭所有键盘
[self.nameFiled resignFirstResponder];
[self.numberField resignFirstResponder];
}
之后在大纲视图中,单击View以选中它,注意不要选择视图的子项。
将View的Class类型改为: UIControl,之后在事件关联中,将事件Touch Down关联到上述事件上。
此时效果图如下:
·此时点击背景,即可隐藏键盘。
(6)添加滑动条和标签
Com + '=' 调整控件为一个合适大小
设置滑动条最大最小值
创建并关联操作方法和输出接口
.m中加入方法:
- (IBAction)sliderChanged:(UISlider *)sender {
int progress = (int)lroundf(sender.value);
self.sliderLabel.text = [NSString stringWithFormat:@"%d",progress];
}
(7)实现开关、按钮和分段控件
添加相应分段控件、开关与相应变量;
添加开关操作:
//开关
- (IBAction)switchChanged:(UISwitch *)sender {
BOOL setting = sender.isOn;
[self.leftSwitch setOn:setting animated:YES];
[self.rightSwitch setOn:setting animated:YES];
}
添加按钮(美化控件)
分段函数操作:
//Switches / Button
- (IBAction)toggleControl:(UISegmentedControl *)sender {
if(sender.selectedSegmentIndex == 0){
self.leftSwitch.hidden = NO;
self.rightSwitch.hidden = NO;
self.doSomethingButton.hidden = YES;
}else{
self.leftSwitch.hidden = YES;
self.rightSwitch.hidden = YES;
self.doSomethingButton.hidden = NO;
}
}
表单操作和警告:
- (IBAction)buttonPressed:(UIButton *)sender {
UIActionSheet *actionSheet = [[UIActionSheet alloc]initWithTitle:@"Are you sure?"
delegate:self
cancelButtonTitle:@"No way!"
destructiveButtonTitle:@"Yes,I'm suew!"
otherButtonTitles: nil];
[actionSheet showInView:self.view];
}
-(void) actionSheet:(UIActionSheet *)actionSheet didDismissWithButtonIndex:(NSInteger)buttonIndex{
if(buttonIndex != [actionSheet cancelButtonIndex]){
NSString *msg = nil;
if([self.nameFiled.text length]>0) {
msg = [NSString stringWithFormat:@"You can breathe easy,%@,everything went OK.",self.nameFiled.text ];
}else{
msg = @"You can breathe easy,everything went OK.";
}
UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"Something was done" message:msg delegate:self cancelButtonTitle:@"Phew!" otherButtonTitles: nil];
[alert show];
}
}
最终效果图: