UIButton的基础

按钮示例

目标

• 掌握按钮的不同样式
• 掌握按钮的图像的设置
• 掌握 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 可以给按钮添加监听方法，如果要带参数，需要在方法名后面添加 :

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

图像视图 vs 按钮

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

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