#Objective - C - UI-design - 第二天 - UIKit框架-UIKit-基本控件-相关习题

---

UI四大常用控件:UILabel, UITextField, UIButton, UIImageView及相关小习题

---

UILabel

• UILabel(标签): 是显示文本的控件
• UILabel是UIView子类,UILabel是能显⽰示文字的视图。

    UILabel *userNameLabel = [[UILabel alloc]initWithFrame:CGRectMake(30, 100, 100, 30)];
    userNameLabel.text = @“用户名”; 
    [containerView addSubview:userNameLabel]; 
    [userNameLabel release];
注:containerView 已经添加到根视图上

UILabel属性设置:

---

UITextField

• UITextField(输入框):是控制文本输入和显示的控件。
• UITextField允许用户编辑文字(输入)

// 使⽤用初始化⽅方法创建对象
    UITextField *userNameTextField = [[UITextField
 alloc] initWithFrame:CGRectMake(100, 100, 190, 30)];
// 设置边框⻛风格
    userNameTextField.borderStyle =
 UITextBorderStyleRoundedRect;
// 设置占位符
    userNameTextField.placeholder = @“⼿手机号/邮箱";
    [containerView addSubview:userNameTextField];
    [userNameTextField release];

占位符:
placeholder:占位字符串(没有任何输入时,给出的提示字符串)

    textField.placeholder = @“请输⼊入⽤用户名”;

---

输入控制属性:

外观属性:

---

TextField常用代理方法:

    //当textField将要开始编辑的时候告诉委托人
 - (BOOL)textFieldShouldBeginEditing:(UITextField
 *)textField
    //当textField已经编辑的时候告诉委托人
 - (void)textFieldDidBeginEditing:(UITextField
 *)textField
    //当textField将要完成编辑的时候告诉委托人
 - (BOOL)textFieldShouldEndEditing:(UITextField
 *)textField
    //当textField已经完成编辑的时候告诉委托人
 - (void)textFieldDidEndEditing:(UITextField *)textField 
    //当点击键盘上回车按键时候告诉委托人
 - (BOOL)textFieldShouldReturn:(UITextField *)textField 
    //- 注: 委托⼈人即delegate

---

UIButton

• UIButton(按钮):是响应用户点击的控件。

UIbutton初始化方法相对不同

// 便利构造器方法创建对象
    UIButton *loginButton = [UIButton buttonWithType:UIButtonTypeSystem];
    loginButton.frame = CGRectMake(30, 200, 60, 30);
// 设置button的标题 
    [loginButton setTitle:@"登录" forState:UIControlStateNormal];
// 添加点击事件
    [loginButton addTarget:self action:@selector(login:) forControlEvents:UIControlEventTouchUpInside];
    [containerView addSubview:loginButton];

---

UIButton外观

外观二

---

UIImageView

• UIImageView是IOS里用来显示图片的类

创建image:

// 图片文件路径
    NSString *path = [[NSBundle mainBundle]
pathForResource:@"1" ofType:@"jpg"];
// 创建一个UIImage对象,使用initWithContentOfFile: 方法
    UIImage *image = [UIImage
imageWithContentsOfFile:path];
// 创建一个UIImageView对象,使用initWithImage: 方法
    UIImageView *imageView = [[UIImageView alloc]
initWithImage:image];
    imageView.frame = CGRectMake(100, 100, 100, 100);
    [self.view addSubview:imageView];

UIImageView的动态图(实现动画)

• animationImages //设置一组动态图片
• animationDuration //设置播放一组动态图片的时间
• animationRepeatCount //设置重复次数
• startAnimating //开始动画
• stopAnimating //结束动画

---

几道小习题

---

按钮换图

有四张小JPG图片

//创建图片
UIImageView *image = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 330)];

//创建按钮
    UIButton *butt = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 300)];
//添加事件
    [butt addTarget:self action:@selector(buttomClick) forControlEvents:UIControlEventTouchDown];
//加入视图    
    [self.view addSubview:butt];
    [self.view addSubview:image];

//按钮功能
-(void)buttomClick{
    if (a > 4) {
        a = 1;
    }
    NSString *string = [NSString stringWithFormat:@"0%d.jpg",a++];
    [image setImage:[UIImage imageNamed:string]];
}

---

按钮单选或多选

    NSMutableArray *ar = [NSMutableArray array];

    for (int i = 50; i < 50 + 90*3; i = i + 90) {
        for (int j = 50; j < 50 + 50*2; j += 50) {
            UIButton *b1 = [[UIButton alloc]initWithFrame:CGRectMake(i, j, 70, 30)];
            [b1 setBackgroundColor:[UIColor grayColor]];
            [b1 setTitle:@"未选中" forState:UIControlStateNormal];
            [b1 setTitle:@"已选中" forState:UIControlStateSelected];//选择状态后文本变为已选中
            [b1 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];//正常状态下颜色
            [b1 addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchDown];
            [ar addObject:b1];//加入数组(单选用)
            [self.view addSubview:b1];
        }
    }

//-------多选的按钮实现方法
-(void)buttonClick:(UIButton *)bu{
    if (bu.selected == YES) {
        [bu setSelected:NO];
    }else{
        [bu setSelected:YES];
    }
    //bu.selected =! bu.selected;
}


//-------单选通过遍历实现
-(void)buttonClick:(UIButton *)bu{
    for (UIButton *b1 in ar) {
        if (b1 == bu) {
            b1.selected = YES;
        }else{
            b1.selected = NO;
        }
    }
}

---

综合练习(按钮换图单选Label和Text传值)

效果为:

(全注释):

全局变量,添加代理方法

@interface ViewController ()<UITextFieldDelegate>
{
    //私有全局变量
    UIImageView *image;
    UILabel *label;
    UITextField *field;
    UIButton *button;
    NSMutableArray *ar;
    int a;
    UIControl *control;
}
@end

实现:

    //初始化不可变数组
    ar = [NSMutableArray array];
#pragma mark- 图片
    //初始化UIimage
    image = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 300)];//
    //添加图片
    [image setImage:[UIImage imageNamed:@"1.jpg"]];
    //设置边框 layer
    [image.layer setMasksToBounds:YES];
    [image.layer setBorderWidth:1.5];
    image.layer.borderColor = [[UIColor blackColor]CGColor];
    //按钮用来触发切换图片
    UIButton *ibut = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 300)];
    //touchdown按下时触发 Click方法 对象为自己触发
    [ibut addTarget:self action:@selector(Click) forControlEvents:UIControlEventTouchDown];
    //放入屏幕
    [self.view addSubview:ibut];
    [self.view addSubview:image];

#pragma mark- 单选
    //两个循环添加6个按钮
    for (int i = 130; i < 130 + 80*2; i += 80) {
        for (int j = 350; j < 330 + 50*3; j += 50) {
            //按钮样式
            button = [UIButton buttonWithType:UIButtonTypeSystem];
            //位置
            [button setFrame:CGRectMake(i, j, 60, 30)];
            //颜色
            [button setBackgroundColor:[UIColor grayColor]];
            //未选择时的状态(state)
            [button setTitle:@"未选中" forState:UIControlStateNormal];
            //选择后的状态
            [button setTitle:@"朕已阅" forState:UIControlStateSelected];
            //按钮标题颜色
            [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
            //添加触发方法
            [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchDown];
            //边框和圆角
            [button.layer setMasksToBounds:YES];
            [button.layer setCornerRadius:5.0];
            [button.layer setBorderWidth:1.5];
            button.layer.borderColor = [[UIColor blackColor]CGColor];
            //加入数组(遍历时用)
            [ar addObject:button];
            [self.view addSubview:button];
        }
    }

#pragma mark- Label
    //初始化位置
    label = [[UILabel alloc]initWithFrame:CGRectMake(0, 550, self.view.bounds.size.width, 40)];
    //开始时 显示内容为0
    [label setText:@"0"];
    //文本居中(枚举)
    [label setTextAlignment:1];
    //边框
    [label.layer setMasksToBounds:YES];
    [label.layer setBorderWidth:2];
    label.layer.borderColor = [[UIColor blackColor]CGColor];
    //加入屏幕
    [self.view addSubview:label];

#pragma mark- TextField
    //初始化位置
    field = [[UITextField alloc]initWithFrame:CGRectMake(0, 630, self.view.bounds.size.width, 40)];
    //文本居中
    [field setTextAlignment:NSTextAlignmentCenter];
    //输入前提示语句
    [field setPlaceholder:@"请输入数值"];
    //字体颜色
    [field setTextColor:[UIColor magentaColor]];
    //如下
    [field setBorderStyle:UITextBorderStyleRoundedRect];//设置边框
    [field setClearButtonMode:UITextFieldViewModeAlways];//清除按钮
    [field setKeyboardType:UIKeyboardTypeDefault];//输入类型
    [field setReturnKeyType:UIReturnKeyDefault];//返回类型
    //圆角
    [field.layer setMasksToBounds:YES];
    [field.layer setBorderWidth:2];
    field.layer.borderColor = [[UIColor blackColor]CGColor];
    [field.layer setCornerRadius:8.0];//圆角
#pragma mark- control
    //control组件,覆盖范围为整个屏幕
    control = [[UIControl alloc]initWithFrame:self.view.bounds];
    //设置不可见
    [control setAlpha:0];
    //触发事件
    [control addTarget:self action:@selector(knock) forControlEvents:UIControlEventTouchDragInside];
    //隐藏
    [control setHidden:YES];
    //加入大屏幕
    [self.view addSubview:control];
    [self.view addSubview:field];
#pragma mark- 代理
    //指定代理人为本类
    [field setDelegate:self];
}

点击事件:

#pragma mark- 换图片方法
-(void)Click{
    //当图片到第12张 下一张变为第一张
    if (a > 12) {
        a = 1;
    }
    //通过数字文件名来切换图片
    NSString *path = [NSString stringWithFormat:@"%d.jpg",a++];
    [image setImage:[UIImage imageNamed:path]];
}
#pragma mark- 单选方法
-(void)buttonClick:(UIButton *)butt{
    //遍历ar数组(里面装了UIButton)
    for (UIButton *b in ar) {
        if (butt == b) {    //如果得到的按钮与数组内的相等
            b.selected = YES;//那么数组内的按钮状态更改为被选中
        }else{
            b.selected = NO;//反之 其他全部更改为未选中状态
        }
    }
}
#pragma mark- 控制输入框
-(void)knock{
    //使textfield成为第一响应者(输入)
    [field becomeFirstResponder];
}
#pragma mark- 协议内输入框状态下修改
//编辑状态下
-(BOOL)textFieldShouldBeginEditing:(UITextField *)textField{
    //使control变为可见(可触发-点击屏幕->缩小输入法)
    [control setHidden:NO];
    //输入法出现时,整个屏幕向上移动
    [self.view setFrame:CGRectMake(self.view.bounds.origin.x, self.view.bounds.origin.y - 230, self.view.bounds.size.width, self.view.bounds.size.height)];
    //返回方法实现成功
    return YES;
}
//结束编辑后
-(BOOL)textFieldShouldEndEditing:(UITextField *)textField{
    //使control隐藏
    [control setHidden:YES];
    //屏幕回到原来位置
    [self.view setFrame:CGRectMake(self.view.bounds.origin.x, self.view.bounds.origin.y, self.view.bounds.size.width, self.view.bounds.size.height)];
    return YES;
}
//输入法点击return后
-(BOOL)textFieldShouldReturn:(UITextField *)textField{
    //使textfield放弃第一响应者资格
    [field resignFirstResponder];
    //且label获取field输入的文本
    [label setText:field.text];
    return YES;
}

---

小结:

一接触到几个控件宇神就给我们来了一个大招,各种穿插一起,本来以为要弄挺久的
但是当做完的时候才发现 原来也并不是那么复杂 哈哈