iOS UIButton控件

UIButton是UIControl的子类，实现了按钮功能，交互事件和控件状态可查看iOS UIControl控件。

1. 初始化

通过指定按钮类型来创建UIButton对象

+ (instancetype)buttonWithType:(UIButtonType)buttonType;

UIButtonType是一个枚举类型

值	说明
UIButtonTypeCustom	按钮的外观行为主要依靠开发者的设置
UIButtonTypeSystem	IOS系统默认的按钮风格
UIButtonTypeDetailDisclosure	显示当前列表项的详情
UIButtonTypeInfoLight	显示简短的说明
UIButtonTypeInfoDark	显示简短的说明
UIButtonTypeContactAdd	添加联系人

显示如下

按钮创建好之后，按钮的类型是不可以被修改，buttonType是只读属性。

2. 设置按钮样式

UIButton可以只设置一个UILabel或者一个UIImageView，也可以同时具有UILabel和UIImageView，默认是图片在左，标题在右，而且image和title之间没有空隙。

// 设置按钮某状态下的标题
- (void)setTitle:(nullable NSString *)title forState:(UIControlState)state;
// 设置按钮某状态下的富文本标题
- (void)setAttributedTitle:(nullable NSAttributedString *)title forState:(UIControlState)state;

// 设置按钮某状态下的文本颜色
- (void)setTitleColor:(nullable UIColor *)color forState:(UIControlState)state;
// 设置某状态下标题的阴影颜色
- (void)setTitleShadowColor:(nullable UIColor *)color forState:(UIControlState)state;

// 设置某状态下的标题图片，图片不会被拉伸，原比例显示
- (void)setImage:(nullable UIImage *)image forState:(UIControlState)state;
// 设置某状态下的背景图片，图片会被拉伸，充满整个按钮
- (void)setBackgroundImage:(nullable UIImage *)image forState:(UIControlState)state

示例代码

- (void)viewDidLoad {
    [super viewDidLoad];

    self.btn = [UIButton buttonWithType:UIButtonTypeCustom];
    self.btn.frame = CGRectMake(20, 100, 320, 30);
    [self.btn setTitle:@"未选" forState:UIControlStateNormal];
    [self.btn setTitleColor:[UIColor convertStringToColor:@"#FFCACACA"] forState: UIControlStateNormal];
    [self.btn setImage:[UIImage imageNamed:@"choice"] forState:UIControlStateNormal];

    [self.btn setTitle:@"已选" forState:UIControlStateSelected];
    [self.btn setTitleColor:[UIColor convertStringToColor:@"#FFC19A79"] forState: UIControlStateSelected];
    [self.btn setImage:[UIImage imageNamed:@"choice_s"] forState:UIControlStateSelected];

    [self.btn addTarget:self action:@selector(singleTap:) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:self.btn];
}

- (void)singleTap:(id)sender {
    self.btn.selected = !self.btn.selected;
}

但当按钮被点击时，图片会显示高亮效果

我们可以设置一个高亮状态下的图片

[self.btn setImage:[UIImage imageNamed:@"choice"] forState:UIControlStateHighlighted];

虽然解决了高亮的问题，但当按钮被点击时，同样的问题又出现了，图片显示高亮效果，文字也同样被修改了。

这个高亮状态是UIControlStateSelected|UIControlStateHighlighted，这次我们不仅需要修改图片，还需要修改文字和颜色。

[self.btn setTitle:@"已选" forState:UIControlStateSelected|UIControlStateHighlighted];
[self.btn setTitleColor:[UIColor convertStringToColor:@"#FFC19A79"] forState: UIControlStateSelected|UIControlStateHighlighted];
[self.btn setImage:[UIImage imageNamed:@"choice_s"] forState:UIControlStateSelected|UIControlStateHighlighted];

效果如下

setTitleShadowColor方法要和UIButton.titleLabel的setShadowOffset方法配合使用

获取不同状态下显示

//  获取指定状态的标题
- (nullable NSString *)titleForState:(UIControlState)state;
//  获取指定状态的富文本
- (nullable NSAttributedString *)attributedTitleForState:(UIControlState)state;

// 获取指定状态的标题颜色
- (nullable UIColor *)titleColorForState:(UIControlState)state;
// 获取指定状态的标题阴影颜色

- (nullable UIColor *)titleShadowColorForState:(UIControlState)state;
// 获取指定状态的标题图片
- (nullable UIImage *)imageForState:(UIControlState)state;
// 获取指定状态的背景图片
- (nullable UIImage *)backgroundImageForState:(UIControlState)state;

我们也可以通过修改属性来设置不同状态下的显示

// 点击按钮时，图像是否变化，默认是YES
@property(nonatomic) BOOL adjustsImageWhenHighlighted;
// 该按钮被禁用时，图像是否变化，默认是YES
@property(nonatomic) BOOL adjustsImageWhenDisabled;
// 点击按钮时是否发光，默认是NO
@property(nonatomic) BOOL showsTouchWhenHighlighted

3. UIEdgeInsets属性

UIEdgeInsets是一个结构体，它的四个参数: top, left, bottom, right, 分别表示距离上边界，左边界，下边界，右边界的位移，默认值均为0。

typedef struct UIEdgeInsets {
    CGFloat top, left, bottom, right;
} UIEdgeInsets;

UIButton的UIEdgeInsets属性

// 按钮的内容整体进行偏移
@property(nonatomic) UIEdgeInsets contentEdgeInsets
// title的UIEdgeInsets属性的top，bottom，right都是相对于按钮的，left是相对于image
@property(nonatomic) UIEdgeInsets titleEdgeInsets;
// image的UIEdgeInsets属性的top，left，bottom都是相对于按钮的，right是相对于title
@property(nonatomic) UIEdgeInsets imageEdgeInsets;

示例代码

contentEdgeInsets = UIEdgeInsetsMake(10, 50, -10, -10)
titleEdgeInsets = UIEdgeInsetsMake(10, 50, 0, 0);
imageEdgeInsets = UIEdgeInsetsMake(0, 0, -10, 50);

显示如下