按钮示例

目标

掌握按钮的不同样式掌握按钮的图像的设置掌握 UIKit 坐标系掌握修改 frame 的方法通过纯代码的方式创建并使用按钮代码重构的简单演练

代码演练

按钮的几种状态

storyboard 开发

/// 方向枚举类型 typedef enum : NSUInteger { CZDirectoryLeft = 100, CZDirectoryTop = 101, CZDirectoryRigth = 102, CZDirectoryBottom = 103, } CZDirectoryType; @interface ViewController () @property (weak, nonatomic) IBOutlet UIButton *heroButton; @end @implementation ViewController - (IBAction)clickDirectoryButton:(UIButton *)sender { CGRect rect = _heroButton.frame; CGFloat distance = 10; switch (sender.tag) { case CZDirectoryLeft: NSLog(@"左"); rect.origin.x -= distance; break; case CZDirectoryTop: NSLog(@"上"); rect.origin.y -= distance; break; case CZDirectoryRigth: NSLog(@"右"); rect.origin.x += distance; break; case CZDirectoryBottom: NSLog(@"下"); rect.origin.y += distance; break; default: break; } _heroButton.frame = rect; } @end

小结

不要使用魔法数字（Magic Number）

设置按钮图像时，一定注意状态

修改按钮的 frame 时，因为 frame 是结构体不是对象，因此不能直接设置

设置控件的 tag 值时，不要从 0 开始，因为整数的默认值是 0

UIKit 坐标系示意图如下：

纯代码开发

搭建设置背景界面 & 飞机按钮 #pragma mark - 准备界面 /// 设置界面 - (void)setupUI { // 0 准备背景 UIImage *backgroundImage = [UIImage imageNamed:@"background"]; UIImageView *backgroundImageView = [[UIImageView alloc] initWithImage:backgroundImage]; [self.view addSubview:backgroundImageView]; backgroundImageView.frame = self.view.bounds; // 1. 准备飞机 UIImage *heroNormalImage = [UIImage imageNamed:@"hero1"]; UIImage *heroHighlightImage = [UIImage imageNamed:@"hero2"]; UIButton *heroButton = [[UIButton alloc] init]; [heroButton setImage:heroNormalImage forState:UIControlStateNormal]; [heroButton setImage:heroHighlightImage forState:UIControlStateHighlighted]; [heroButton sizeToFit]; heroButton.center = self.view.center; [self.view addSubview:heroButton]; // 记录属性 _heroButton = heroButton; // 2. 准备操作按钮 [self setupActionButtons]; } 实现 setupActionButtons 方法添加按钮 /// 设置操作按钮 - (void)setupActionButtons { CGPoint center = self.view.center; CGFloat width = 40; CGRect rect = CGRectMake(center.x - width * 0.5, center.y + 200, width, width); [self buttonWithImageName:@"left" rect:rect offsetX:-40 offsetY:0 tag:CZDirectoryLeft]; [self buttonWithImageName:@"right" rect:rect offsetX:40 offsetY:0 tag:CZDirectoryRight]; [self buttonWithImageName:@"top" rect:rect offsetX:0 offsetY:-40 tag:CZDirectoryTop]; [self buttonWithImageName:@"bottom" rect:rect offsetX:0 offsetY:40 tag:CZDirectoryBottom]; } - (UIButton *)buttonWithImageName:(NSString *)imageName rect:(CGRect)rect offsetX:(CGFloat)offsetX offsetY:(CGFloat)offsetY tag:(NSInteger)tag { // 1. 实例化按钮 - 自定义类型的按钮 UIButton *button = [[UIButton alloc] init]; // 2. 设置按钮图像 NSString *normalName = [imageName stringByAppendingString:@"_normal"]; NSString *highlightedName = [imageName stringByAppendingString:@"_highlighted"]; [button setImage:[UIImage imageNamed:normalName] forState:UIControlStateNormal]; [button setImage:[UIImage imageNamed:highlightedName] forState:UIControlStateHighlighted]; // 3. 添加到视图 [self.view addSubview:button]; // 4. 设置按钮位置 button.frame = CGRectOffset(rect, offsetX, offsetY); // 5. 设置按钮 tag button.tag = tag; // 6. 添加监听方法 [button addTarget:self action:@selector(clickDirectoryButton:) forControlEvents:UIControlEventTouchUpInside]; return button; }

小结

以下内容必须掌握！！！

视图相关

向视图添加子视图的方法

[self.view addSubview:button]; CGRectOffset 可以方便基于一个已有的 CGRect 计算偏移结果

图像相关

实例化图像

[UIImage imageNamed:normalName]

实例化图像视图

UIImageView *backgroundImageView = [[UIImageView alloc] initWithImage:backgroundImage];

图像视图会使用给定的图像设置大小

图像 vs 图像视图

图像类似于照片，是一个二进制的数据

图像视图类似于相框，用于显示图像内容

按钮相关

创建按钮

// 1. 实例化按钮 - 自定义类型的按钮 UIButton *button = [[UIButton alloc] init];

设置按钮图像／标题一定要指定状态

[heroButton setImage:heroNormalImage forState:UIControlStateNormal];

addTarget 可以给按钮添加监听方法，如果要带参数，需要在方法名后面添加 :

按钮的监听事件是 UIControlEventTouchUpInsidesizeToFit 可以应用于 按钮、标签、图像视图，会根据当前的内容自动调整大小

图像视图 vs 按钮

图像视图只显示一张图像，默认不能交互，没有状态

按钮可以设置多张图像，默认可以交互，有四个状态：默认、高亮、禁用、选中，其中禁用和选中状态需要通过代码设置