UI基础 - UIButton
■ 简言
1. UIButton 是 iOS 中很普通的一种控件，就是按钮，我们往往会通过对按钮的一些属性进行修改以达到美观且功能强大目的
■ 使用方式
1. 常用 API
1 - (void)viewDidLoad { 2 [super viewDidLoad]; 3 4 UIButton *btnA = [UIButton buttonWithType:UIButtonTypeSystem]; 5 btnA.backgroundColor = [UIColor orangeColor]; 6 btnA.frame = CGRectMake(50, 200, 220, 30); 7 [btnA setTitle:@"点我" forState:UIControlStateNormal]; // 正常状态 8 [btnA setTitle:@"松开" forState:UIControlStateHighlighted]; // 高亮状态 9 10 // button 可以通过 titleLabel 属性访问 Label 下的很多功能 11 btnA.tintColor = [UIColor blueColor]; // 字体颜色 12 btnA.titleLabel.font = [UIFont systemFontOfSize:15.0];// 字体大小 13 14 // 修改字体颜色并设置 button 触发状态 15 [btnA setTitleColor:[UIColor redColor] forState:UIControlStateNormal]; 16 [btnA setTitleColor:[UIColor purpleColor] forState:UIControlStateHighlighted]; 17 [btnA setTitleShadowColor:[UIColor cyanColor] forState:UIControlStateNormal];// 阴影 18 btnA.titleLabel.shadowOffset = CGSizeMake(5, 5); // 偏移量 19 20 // 关联方法 21 [btnA addTarget:self action:@selector(doClick:) forControlEvents:UIControlEventTouchUpInside]; 22 [self.view addSubview:btnA]; 23 24 } 25 26 - (void)doClick:(UIButton *)button{ 27 28 // 获取指定状态下的标题 29 NSString *HLStr = [button titleForState:UIControlStateHighlighted]; 30 // 获取指定状态下的标题颜色 31 UIColor *normalTitleColor = [button titleColorForState:UIControlStateNormal]; 32 // 获取指定状态下的标题阴影颜色 33 UIColor *normalTitleShadowColor = [button titleColorForState:UIControlStateNormal]; 34 // 获取指定状态下的背景图片 35 UIImage *normalBackImage = [button backgroundImageForState:UIControlStateNormal]; 36 // 移除按钮点击事件 37 [button removeTarget:self action:@selector(doClick:) forControlEvents:UIControlEventTouchUpInside]; 38 }
2. setBackgroundImage | setImage
1 - (void)viewDidLoad { 2 [super viewDidLoad]; 3 // ------------- UIButtonTypeCustom ----------------- 4 // setBackgroundImage：图片会随着 button 的大小而改变（填充），且所设置的 title 位置不受影响 5 UIButton *cusBT1 = [UIButton buttonWithType:UIButtonTypeCustom]; 6 cusBT1.backgroundColor = [UIColor yellowColor]; 7 cusBT1.frame = CGRectMake(20, 80, 120, 120); 8 [cusBT1 setTitle:@"Cus1" forState:UIControlStateNormal]; 9 [cusBT1 setBackgroundImage:[UIImage imageNamed:@"1N.png"] forState:UIControlStateNormal]; 10 [cusBT1 setBackgroundImage:[UIImage imageNamed:@"1H.png"] forState:UIControlStateHighlighted]; 11 [self.view addSubview:cusBT1]; 12 13 // setImage: 图片同样会随着 button 的大小而改变（非填充），且所设置的 title 位置受影响 14 // 如果 button 尺寸大于图片原有尺寸，title 会偏移至右侧 15 UIButton *cusBT2 = [UIButton buttonWithType:UIButtonTypeCustom]; 16 cusBT2.backgroundColor = [UIColor redColor]; 17 cusBT2.frame = CGRectMake(cusBT1.frame.origin.x+160, cusBT1.frame.origin.y, 200, 200); 18 [cusBT2 setTitle:@"Cus2" forState:UIControlStateNormal]; 19 [cusBT2 setImage:[UIImage imageNamed:@"2N.png"] forState:UIControlStateNormal]; 20 [cusBT2 setImage:[UIImage imageNamed:@"2H.png"] forState:UIControlStateHighlighted]; 21 [self.view addSubview:cusBT2]; 22 23 // 如果 button 尺寸小于图片原有尺寸，title 会被覆盖 24 UIButton *cusBT3 = [UIButton buttonWithType:UIButtonTypeCustom]; 25 cusBT3.backgroundColor = [UIColor cyanColor]; 26 cusBT3.frame = CGRectMake(cusBT1.frame.origin.x, cusBT1.frame.origin.y+150, 80, 80); 27 [cusBT3 setTitle:@"Cus3" forState:UIControlStateNormal]; 28 [cusBT3 setImage:[UIImage imageNamed:@"2N.png"] forState:UIControlStateNormal]; 29 [cusBT3 setImage:[UIImage imageNamed:@"2H.png"] forState:UIControlStateHighlighted]; 30 [self.view addSubview:cusBT3]; 31 32 33 // -------------- UIButtonTypeSystem --------------- 34 // setBackgroundImage 图片会随着 button 的大小而改变（填充），且所设置的 title 位置不受影响 35 // 但是高亮状态变成了系统暗色系 36 UIButton *sysBT1 = [UIButton buttonWithType:UIButtonTypeSystem]; 37 sysBT1.backgroundColor = [UIColor yellowColor]; 38 sysBT1.frame = CGRectMake(cusBT1.frame.origin.x, cusBT3.frame.origin.y +160, cusBT1.frame.size.width, cusBT1.frame.size.height); 39 [sysBT1 setTitle:@"Sys1" forState:UIControlStateNormal]; 40 [sysBT1 setBackgroundImage:[UIImage imageNamed:@"1N.png"] forState:UIControlStateNormal]; 41 [sysBT1 setBackgroundImage:[UIImage imageNamed:@"1H.png"] forState:UIControlStateHighlighted]; 42 [self.view addSubview:sysBT1]; 43 44 // setImage 图片不会显示 45 UIButton *sysBT2 = [UIButton buttonWithType:UIButtonTypeSystem]; 46 sysBT2.backgroundColor = [UIColor redColor]; 47 sysBT2.frame = CGRectMake(cusBT2.frame.origin.x,sysBT1.frame.origin.y,cusBT2.frame.size.width, cusBT2.frame.size.height); 48 [sysBT2 setTitle:@"Sys2" forState:UIControlStateNormal]; 49 [self.view addSubview:sysBT2]; 50 // 这里设置的图片不会显示，需要处理才可以进行显示 51 [sysBT2 setImage:[UIImage imageNamed:@"2N.png"] forState:UIControlStateNormal]; 52 [sysBT2 setImage:[UIImage imageNamed:@"2H.png"] forState:UIControlStateHighlighted]; 53 54 // 解决办法如下 55 // 图片同样会随着 button 的大小而改变（非填充），且所设置的 title 位置受影响且亮状态变成了系统暗色系 56 // 如果 button 尺寸大于图片原有尺寸，title 会偏移至右侧 57 UIImage *aImage01 = [[UIImage imageNamed:@"2N.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; 58 UIImage *aImage02 = [[UIImage imageNamed:@"2H.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; 59 [sysBT2 setImage:aImage01 forState:UIControlStateNormal]; 60 [sysBT2 setImage:aImage02 forState:UIControlStateHighlighted]; 61 62 // 如果 button 尺寸小于图片原有尺寸，title 会被覆盖 63 UIButton *sysBT3 = [UIButton buttonWithType:UIButtonTypeSystem]; 64 sysBT3.backgroundColor = [UIColor redColor]; 65 sysBT3.frame = CGRectMake(cusBT3.frame.origin.x, sysBT1.frame.origin.y+150, cusBT3.frame.size.width, cusBT3.frame.size.height); 66 [sysBT3 setTitle:@"2" forState:UIControlStateNormal]; 67 UIImage * aImage1 = [[UIImage imageNamed:@"2N.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; 68 UIImage * aImage2 = [[UIImage imageNamed:@"2H.pn"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; 69 [sysBT3 setImage:aImage1 forState:UIControlStateNormal]; 70 [sysBT3 setImage:aImage2 forState:UIControlStateHighlighted]; 71 [self.view addSubview:sysBT3]; 72 }
运行效果
■ 应用场景
1. 模拟两盏灯：当触摸其中一盏时，点亮该盏灯，而另外一盏灯则熄灭掉
1 #import "ViewController.h" 2 @interface ViewController () 3 4 @property(nonatomic,retain) UIButton *firstButton; 5 @property(nonatomic,retain) UIButton *secondButton; 6 7 @end 8 9 @implementation ViewController 10 - (void)viewDidLoad { 11 [super viewDidLoad]; 12 self.view.backgroundColor = [UIColor cyanColor]; 13 14 // 默认关闭 15 self.firstButton = [UIButton buttonWithType:UIButtonTypeCustom]; 16 _firstButton.frame = CGRectMake((self.view.frame.size.width-150)/2.0, 100, 150, 150); 17 [_firstButton setBackgroundImage:[UIImage imageNamed:@"LC.png"] forState:UIControlStateNormal]; 18 _firstButton.clipsToBounds = YES; 19 _firstButton.layer.cornerRadius = 150/2.0; 20 [_firstButton addTarget:self action:@selector(changeColor:) forControlEvents:UIControlEventTouchUpInside]; 21 [self.view addSubview:_firstButton]; 22 23 // 默认开启 24 self.secondButton = [UIButton buttonWithType:UIButtonTypeCustom]; 25 _secondButton.frame = CGRectMake(self.firstButton.frame.origin.x, self.firstButton.frame.origin.y+200, 150, 150); 26 [_secondButton setBackgroundImage:[UIImage imageNamed:@"LO.png"] forState:UIControlStateNormal]; 27 [_secondButton addTarget:self action:@selector(changeColor:) forControlEvents:UIControlEventTouchUpInside]; 28 _secondButton.clipsToBounds = YES; 29 _secondButton.layer.cornerRadius = 150/2.0; 30 [self.view addSubview:_secondButton]; 31 32 } 33 34 - (void)changeColor:(UIButton *)btn{ 35 36 // 第一步：首先变更自身背景图片 37 [self changPics:btn]; 38 39 // 改变另外一个按钮的背景图片 40 if ([btn isEqual:self.firstButton]) { 41 [self changPics:self.secondButton]; 42 } 43 44 if ([btn isEqual:self.secondButton]) { 45 [self changPics:self.firstButton]; 46 } 47 } 48 49 -(void)changPics:(UIButton *)btn{ 50 51 if ([[btn backgroundImageForState:UIControlStateNormal] isEqual: [UIImage imageNamed:@"LC.png"]]) { 52 [btn setBackgroundImage:[UIImage imageNamed:@"LO.png"] forState:UIControlStateNormal]; 53 }else{ 54 [btn setBackgroundImage:[UIImage imageNamed:@"LC.png"] forState:UIControlStateNormal]; 55 } 56 } 57 58 @end
运行效果
| 
■ 结语
1. UIButton 无法触发的几种常见情况
Btn 的父视图交互是关闭的，会导致所有的子视图不会响应用户交互，比如 UIImageView、UILabel 的交互默认都是关闭的
Btn 超出了父视图的范围
Btn 被视图覆盖，比如一个按钮上方放置了透明视图
