UIButton的基础

    xiaoxiao2021-03-25  93

    按钮示例

    目标

    掌握按钮的不同样式掌握按钮的图像的设置掌握 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 按钮

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

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

    转载请注明原文地址: https://ju.6miu.com/read-13965.html

    最新回复(0)