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