IOS基础UI控件简介

视图 & 视图控制器

“设置”应用程序演示

演示细节说明

•点击选项，切换到一个新的界面，每个新界面都是一个新的UIView（视图），尺寸接近屏幕大小

•通常，一个“满屏”的UIView（视图）会交给对应的UIViewController（视图控制器）去管理，上图中的三个UIView，都有自己的UIViewController

•UIViewController（视图控制器）内部默认有一个UIView（视图）属性，是控制器负责管理的UIView对象

UIView——视图

•在屏幕上，能看得见、摸得着的东西都是UIView，比如按钮、图片、文字等，所有控件最终都继承自UIView

•每一个UIView都是一个容器，可以容纳其他UIView。其中容器视图被称为父视图，而被包含的视图或者控件被成为子视图或者子控件

•视图对应的文件通常是storyboard或者xib文件。在许多iOS应用程序中，通常不必为视图编写任何代码，也有的IOS应用的视图是用纯代码编写的。

UIViewController——视图控制器

•UIViewController的作用是：

–创建/销毁自己的UIView

–显示/隐藏UIView

–处理UIView和用户之间的交互（事件处理）

“设置”应用中的界面显示过程如下：

–创建一个UIViewController

–由UIViewController创建自己的UIView

–把UIView显示到用户眼前

–UIViewController监听并处理UIView的事件

程序启动过Main程简述

•1.读取Storyboard.storyboard文件

•2.创建ViewController对象

•3.根据storyboard文件中的描述创建ViewController的UIView对象

•4.将UIView对象显示到用户眼前

•5. 监听并响应用户交互

演练——加法计算器

分析：

通过分析，界面上有7个UI元素，他们分别是：3个UILabel,2个UITextField,1个用于显示黄色背景的UIView及1个UIButton。

参与交互的UI元素为：2个UITextField用于显示2个相加数，一个用于显示计算结果的UILabel和一个用于计算的UIButton。

功能实现：

UIViewController.h

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController 
// 数字1
@property (weak, nonatomic) IBOutlet UITextField *number1;
// 数字2
@property (weak, nonatomic) IBOutlet UITextField *number2;
// 结果标签
@property (weak, nonatomic) IBOutlet UILabel *resultLabel;
- (IBAction)calculate;
@end

UIViewController.m

#import "ViewController.h"
@interface ViewController ()

@end

@implementation ViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - Actions
// 计算结果
- (IBAction)calculate
{
    // 获取界面控件的数值
    NSInteger number1 = [_number1.text integerValue];
    NSInteger number2 = [_number2.text integerValue];

    // 用计算结果设置标签内容
    [_resultLabel setText:[NSString stringWithFormat:@"%d", number1 + number2]];

    // 关闭键盘
    [self.view endEditing:YES];
}
@end

加法计算器的扩充——监听文本控件的回车事件

1、在UIViewController.h中加入：

@interface ViewController : UIViewController <UITextFieldDelegate>

2、在UIViewController.m中加入如下代码：

#pragmamark -UITextField代理方法

- (BOOL)textFieldShouldReturn:(UITextField *)textField

{

   //判断接收回车事件的是哪一个文本控件

   if (_number1 ==textField) {

        [_number2 becomeFirstResponder];

   } else {

        [selfcalculate];

   }

   returnYES;

}

演练2——模拟QQ登录界面

界面分析：

界面有7个UI元素：1个UIView，UIView内部包含2个UILabel和2个UITextField，1个UIButton和UILabel。

注意：在设置控件属性时，注意键盘的设置。

功能实现：
ViewController.h

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController <UITextFieldDelegate>
// 用户名
@property (weak, nonatomic) IBOutlet UITextField *qqNoTextField;
// 密码
@property (weak, nonatomic) IBOutlet UITextField *passwordTextField;
// 消息标签
@property (weak, nonatomic) IBOutlet UILabel *messageLabel;
// 登录
- (IBAction)login;
@end

ViewController.m
#import "ViewController.h"
@interface ViewController ()

@end
@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - UITextField代理方法
- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
    if (_qqNoTextField == textField) {
        [_passwordTextField becomeFirstResponder];
    } else {
        [self login];
    }

    return YES;
}

#pragma mark - Actions
- (IBAction)login
{
    // 获取输入信息
    NSString *text = [NSString stringWithFormat:@"%@QQ号的密码是：\n[%@]", _qqNoTextField.text, _passwordTextField.text];
    // 设置标签信息
    [_messageLabel setText:text];
    // 关闭键盘
    [self.view endEditing:YES];
}
@end

UIView的常用属性

UIView的常用属性1——父子视图属性

•1.  superview：获得自己的父控件对象

•2.  subviews：获得自己的所有子控件对象

•注意：

–一个视图最多只能有一个父视图

–一个视图可以有多个子视图

UIView的常用属性2——位置尺寸属性

•1.  frame ：控件所在矩形框的位置和尺寸（以父控件的左上角为坐标原点）

•2.  bounds：控件所在矩形框的位置和尺寸（以自己左上角为坐标原点，所以bounds的x和y永远为0）

•3.  center：控件中点的位置（以父控件的左上角为坐标原点），通过center属性设置视图位置更加方便

•注意

–用frame和center可以修改UIView的位置

–用frame和bounds可以修改UIView的尺寸

–通常：修改自身位置大小时使用frame，而子视图（控件）在设置位置时，会相对父视图的bounds进行设置

frame和bounds属性区别的示意图

UIView的常用属性3——标记属性

•tag整数：控件的ID（标记），父控件可以通过tag来找到或区分子控件

UIView的常用属性4——形变属性

•transform：控件的形变属性（可以设置旋转角度、比例缩放、平移等属性）

•注意

–UIView一次只能应用一个形变属性

–设置transfrom会改变UIView的frame属性，但不会改变bounds属性

–CGAffineTransformMakeScale相对UIView的初始状态进行形变

–CGAffineTransformScale相对UIView的当前状态进行形变

UIView封装的简单动画效果

[UIView beginAnimations:nil context:nil];

// 设置动画持续时间

[UIView setAnimationDuration:.3];

// 需要动画的代码段

[UIView commitAnimations];

UIView封装的块动画

1.[UIView animateWithDuration:animations:]

2.[UIView animateWithDuration:animations:completion:]

3.[UIView animateWithDuration:delay:options:animations:completion:]

对比beginAnimations动画的方式，块动画具有以下几点优势：

1.可以在动画完成时做一些其他的任务

2.可以设置动画延迟及动画效果选项

3.块动画支持嵌套

UIButton的常用属性

可以通过代码的方式创建UIButton

•通用实例化对象方法：

UIButton *button=[[UIButton alloc] initWithFrame:rect];

•快速实例化对象方法：

UIButton*button = [UIButton buttonWithType:UIButtonTypeRoundedRect];

•提示：

在OC开发中，实例化任何类型的非自定义对象，都请首先尝试一下是否存在快速定义方法。如果存在快速定义方法，就尽量不要使用init之类的方法实例化对象！

UIButton的常用属性1——按钮类型

•1.  UIButtonTypeCustom：按钮的内容需要自定义

•2.  UIButtonTypeRoundedRect：圆角矩形按钮

•3.  UIButtonTypeDetailDisclosure：显示明细按钮

•4.  UIButtonTypeInfoLight：亮色信息按钮，用于深色背景

•5.  UIButtonTypeInfoDark：深色信息按钮，用户浅色背景

•6.  UIButtonTypeContactAdd：添加按钮

•说明：

–前两种类型的按钮最常用

–后四种类型的按钮设计，是为了保持用户统一的使用习惯

UIButton的常用属性2——按钮文字

•正常状态下按钮文字

[button setTitle:@"按钮" forState:UIControlStateNormal];

•长按按钮状态下的按钮文字

[button setTitle:@"有人摸我" forState:UIControlStateHighlighted];

•注意

–在设置按钮文字时，需要指定文字对应的按钮状态

UIButton的常用属性3——按钮文字颜色

[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

[button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];

•注意

–在设置按钮文字颜色时，同样需要指定颜色应用的按钮状态

UIButton的常用属性4——按钮背景颜色

[button setBackgroundColor:[UIColor orangeColor]];

•注意

–在设置背景颜色时，按钮需要是自定义类型

UIButton的常用属性5——设置图片及背景图像

UIImage*image = [UIImage imageNamed:@"sub_black_add.png"];// 加载图像

[button setImage:image forState:UIControlStateNormal];// 设置按钮图像

[buttonsetBackgroundImage:image forState:UIControlStateNormal];// 设置按钮背景图像

•注意

–背景图像会根据按钮的尺寸拉伸

–按钮图像会居中显示在按钮中央位置

–如果同时设置了按钮的图像和文字

•按钮区域足够大，会并列显示图像和文字

•如果区域不够大，优先显示图像

设置UIButton的监听器

[button addTarget:self action:@selector(tapButton) forControlEvents:UIControlEventTouchUpInside];// 设置按钮点击监听

•注意

–调用自定义方法需要使用@selector指令

–注意void和IBAction的区别

–按钮事件最多只可以带一个参数

练习

•以代码的方式建立右图的界面中的橘色按钮

•思考右图下方的8个按钮的实现方式

•注意：素材文件中，每个按钮图片都对应有正常和高亮两张图片

•通过代码的方式实现右图下方的八个按钮

•编程思路

–1. 创建被虐的按钮

–2.新建两个子视图作为两个操控板的容器视图

–3.使用NSArray定义按钮，以方便代码创建按钮

–4.在容器视图中添加按钮，并定义按钮的监听事件

–5.按钮事件的响应

•代码实现

ViewController.h

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController

@end

ViewController.m

#import "ViewController.h"
@interface ViewController ()
{
    // 在定义成员变量时，变量名必须要使用下划线！！！
    UIButton *_button;
}
@end
@implementation ViewController

// 按钮监听
- (void)tapButton
{
    NSLog(@"我被摸了");
}

- (void)viewDidLoad
{
    [super viewDidLoad];
 
    // 1. 创建黄色按钮
    // 1.1 实例化按钮
    _button = [UIButton buttonWithType:UIButtonTypeCustom];
    // 1.2 设置按钮文字
    [_button setTitle:@"我是按钮" forState:UIControlStateNormal];
    // 1.3 设置按钮背景颜色
    [_button setBackgroundColor:[UIColor orangeColor]];
    // 1.4 设置按钮监听事件
    [_button addTarget:self action:@selector(tapButton) forControlEvents:UIControlEventTouchUpInside];
    // 1.5 设置按钮位置
    [_button setFrame:CGRectMake(110.0, 100.0, 100.0, 100.0)];
    // 1.6 将按钮添加到视图
    [self.view addSubview:_button];
    
    // 2. 创建两个容器视图
    UIView *view1 = [[UIView alloc]initWithFrame:CGRectMake(0, 300.0, 160.0, 160.0)];
    [self.view addSubview:view1];
    
    // 2.1 需要添加4个按钮
    // 有一个问题，就图片的文件名好像没有什么规律
    // 想法：可不可以用NSArray记录住图像的文件名，然后通过循环的方式创建按钮
    // 初始化一个按钮文件名的数组
    NSArray *imageNames = @[@"up", @"down", @"prev", @"next"];
    NSLog(@"%@", imageNames);
    [self addActionButtonsToView:view1 images:imageNames action:@selector(translationAction:)];
    
    UIView *view2 = [[UIView alloc]initWithFrame:CGRectMake(160.0, 300.0, 160.0, 160.0)];
    [self.view addSubview:view2];
    
    NSArray *imageNames2 = @[@"rotate_ccw", @"rotate_cw", @"add", @"remove"];
    [self addActionButtonsToView:view2 images:imageNames2 action:@selector(transformAction:)];
    // 3. 分别将4个按钮加入不同的容器视图
}

#pragma mark - 创建操作按钮
- (void)addActionButtonsToView:(UIView *)view images:(NSArray *)images action:(SEL)action
{
    // 通过循环的方式建立4个按钮
    for (NSInteger i = 0; i < 4; i++) {
        // 1) 实例化按钮
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        // 2) 设置按钮边框
        CGRect frame = CGRectMake((i % 2) * 80, (i / 2) * 80, 80.0, 80.0);
        [btn setFrame:frame];
        
        // 3) 设置按钮普通图像
        // 3.1 需要普通图片的文件名 sub_black_xxx.png，其中的xxx是在数组中定义的
        NSString *textNormal = [NSString stringWithFormat:@"sub_black_%@.png", images[i]];
        UIImage *imageNormal = [UIImage imageNamed:textNormal];
        [btn setImage:imageNormal forState:UIControlStateNormal];
        // 4) 设置按钮长按图像
        NSString *textHigh = [NSString stringWithFormat:@"sub_blue_%@.png", images[i]];
        UIImage *imageHigh = [UIImage imageNamed:textHigh];
        [btn setImage:imageHigh forState:UIControlStateHighlighted];
        
        // 5) 设置按钮监听方法
        [btn addTarget:self action:action forControlEvents:UIControlEventTouchUpInside];
        
        // 6) 设置按钮的Tag，以区分按钮
        [btn setTag:i];
        // 7) 将按钮添加到容器视图
        [view addSubview:btn];
    }
}

#pragma mark - 按钮操作
// 按钮的上下左右移动操作
- (void)translationAction:(UIButton *)sender
{
    NSLog(@"我干活了 %d", sender.tag);
    // 移动按钮位置可以通过设置中心点实现
    CGPoint point = [_button center];
    switch (sender.tag) {
        case 0:         // 上
            point.y -= 50.0;
            if(point.y <= -100)
            {
                point.y = 480;
            }
            break;
        case 1:         // 下
            point.y += 50.0;
            if(point.y >= 580)
            {
                point.y = -100;
            }
            break;
        case 2:         // 左
            point.x -= 50.0;
            if(point.x <= -100)
            {
                point.x = 320;
            }
            break;
        case 3:         // 右
            point.x += 50.0;
            if(point.x >= 420)
            {
                point.x = 0;
            }
            break;
        default:
            break;
    }
    
    // 设置按钮的中心点
    [_button setCenter:point];
}

// 按钮的形变操作
- (void)transformAction:(UIButton *)sender
{
    NSLog(@"我要变形了 %d", sender.tag);
    CGAffineTransform transform;
    switch (sender.tag) {
        case 0:         // 逆时针
            transform = CGAffineTransformRotate(_button.transform, -M_PI_4);
            break;
        case 1:         // 顺时针
            transform = CGAffineTransformRotate(_button.transform, M_PI_4);
            break;
        case 2:         // 放大
            transform = CGAffineTransformScale(_button.transform, 1.2, 1.2);
            break;
        case 3:         // 缩小
            transform = CGAffineTransformScale(_button.transform, 1.0 / 1.2, 1.0 / 1.2);
            break;
        default:
            break;
    }
    
    // 设置按钮的形变
    [UIView animateWithDuration:1.0f animations:^{
        [_button setTransform:transform];
    }];
}
@end

UILabel的常用属性

UILabel常用属性1——实例化和设置文字

UILabel*label = [[UILabel alloc]initWithFrame:CGRectMake(0.0, 210.0, 320.0, 40.0)];// 实例化UILabel并指定其边框

[label setText:@"HelloWorld"];// 设置label显示的文本

[label setFont:[UIFont fontWithName:@"Helvetica-Bold" size:40]];// 设置字体和字体大小

UILabel常用属性2——设置文字颜色及阴影效果

[label setBackgroundColor:[UIColor greenColor]];// 设置背景色

[label setTextColor:[UIColor whiteColor]];// 设置文本的颜色

[label setShadowColor:[UIColor colorWithWhite:0.1f alpha:0.8f]];// 设置文本的阴影色彩和透明度

[label setShadowOffset:CGSizeMake(2.0f, 2.0f)];// 设置阴影的偏移量

UILabel常用属性3——设置对齐方式及换行

[label setTextAlignment:NSTextAlignmentCenter];// 设置文本在label中的对齐方式

[label setLineBreakMode:NSLineBreakByWordWrapping];// 换行技巧：如下换行可实现多行显示，但要求label有足够的宽度。 指定换行模式

[label setNumberOfLines:2];// 指定label的行数，为0时没有最大行数限制

UILabel常用属性4——设置形变参数

[label setTransform:CGAffineTransformMakeRotation(M_PI_4)];// 设置label的旋转角度

演练

•以代码的方式实现右图的UILabel显示效果

功能实现代码：
#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 实例化UILabel并指定其边框
    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0.0, 80.0, 320.0, 300.0)];
    // 设置label显示的文本
    [label setText:@"Hello World Hello World Hello World Hello World Hello World"];
    // 设置字体和字体大小
    [label setFont:[UIFont fontWithName:@"Helvetica-Bold" size:40]];

    // 设置背景色
    [label setBackgroundColor:[UIColor greenColor]];
    // 设置文本的颜色
    [label setTextColor:[UIColor whiteColor]];
    // 设置文本的阴影色彩和透明度
    [label setShadowColor:[UIColor colorWithWhite:0.1f alpha:0.8f]];
    // 设置阴影的偏移量
    [label setShadowOffset:CGSizeMake(2.0f, 2.0f)];

    // 设置文本在label中的对齐方式
    [label setTextAlignment:NSTextAlignmentCenter];

    // 换行技巧：如下换行可实现多行显示，但要求label有足够的宽度。
    // 指定换行模式
    [label setLineBreakMode:NSLineBreakByWordWrapping];
    // 指定label的行数，为0时没有最大行数限制
    [label setNumberOfLines:0];

    // 设置label的旋转角度
    [label setTransform:CGAffineTransformMakeRotation(M_PI_4)];

    [self.view addSubview:label];
}

@end