UIButton详解及示例

• UIButton是iOS UI中最简单的一个控件了。
• 这里给出5类示例。如下图。

1.button 类型
2.button 属性及方法（详见代码）
3.xib 实现图片、标题一体
4.纯代码实现图片、标题一体
5.button 按标题长度设置大小且可选返回示例

• 1、能够定义的button类型有以下6种，但是现在已经没有这么多形态了，因为苹果UI全部换成扁平化，现在只剩下四种形态：系统的，自定义的，加号，叹号,最后那种圆角可以画的。

 typedef enum {
 UIButtonTypeCustom = 0,  //自定义风格
 UIButtonTypeRoundedRect, //圆角矩形 
 UIButtonTypeDetailDisclosure, //蓝色小箭头按钮，主要做详细说明用
 UIButtonTypeInfoLight,// 亮色感叹号
 UIButtonTypeInfoDark, //暗色感叹号
 UIButtonTypeContactAdd,// 十字加号按钮
 } UIButtonType;

• 2、button属性及方法（详见代码）

//btn 类型
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    //btn frame
    btn.frame = CGRectMake(0, 0, 100, 50);
    btn.center = self.view.center;
    //背景色
    btn.backgroundColor = [UIColor cyanColor];
    //设置button 的填充图片
    [btn setImage:[UIImage imageNamed:@"share_qq"] forState:UIControlStateNormal];
    //选中状态下的图片
    [btn setImage:[UIImage imageNamed:@"share_pengyouquan"] forState:UIControlStateSelected];
    //背静图片
    [btn setBackgroundImage:[UIImage imageNamed:@"share_weixin"] forState:UIControlStateNormal];
    //设置tag值
    btn.tag = 12345;
    //添加事件
    [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    //加载到view上
    [self.view addSubview:btn];

//取消按钮已经添加的所有事件:(这个比较重要,若添加了两个事件  两个事件都会被触发)
[btn removeTarget:nil action:nil forControlEvents:UIControlEventTouchUpInside];

• 3、xib 实现图片、标题一体

一个button 有图片有标题的时候我们应该怎么来合理的安排它们在button 中的位置呢？
3.1 在UIButton中有三个对EdgeInsets的设置：ContentEdgeInsets、titleEdgeInsets、imageEdgeInsets

UIEdgeInsetsMake
里面的四个参数表示距离上边界、左边界、下边界、右边界的距离，默认都为零，title／image在button的正中央

UIKIT_STATIC_INLINE UIEdgeInsets UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right) {
    UIEdgeInsets insets = {top, left, bottom, right};
    return insets;
}

设置imageEdgeInsets 是图片相对于button的位置
设置titleEdgeInsets是标题相对于button的位置
设置ContentEdgeInsets是图片和标题一起变化

方法

如果是xib设置的话，看到一个button控件上放了一张填充图片和一个标题，然后右侧的工具栏看到 Edge这一栏，可选的有Image,Title,Content,下面有Inset栏我们一般选择Title和Image调整即可。如图可以随便得到你想要的效果。

4.纯代码实现图片、标题一体
示例代码：

- (void)setUI {
//第一种
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(0, 0, 48, 70);
    btn.center = CGPointMake(self.view.frame.size.width/2, 200);
    btn.backgroundColor = [UIColor orangeColor];
    //1.给 btn 添加图片
    [btn setImage:[UIImage imageNamed:@"share_mesage"] forState:UIControlStateNormal];
    //2.设置image 在 btn 上的位置(上，左，下，右)
    btn.imageEdgeInsets = UIEdgeInsetsMake(-15, 0, 0, 0);
    //3.添加标题
    [btn setTitle:@"短信" forState:UIControlStateNormal];
    btn.titleLabel.font = [UIFont systemFontOfSize:12];
    [btn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor redColor] forState:UIControlStateSelected];
    //4.设置 title 在 btn 上的位置
    btn.titleEdgeInsets = UIEdgeInsetsMake(60, -48, 5, 0);
    btn.tag = 10001;
    [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
//第二种
    UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn1.frame = CGRectMake(0, 0, 48, 70);
    btn1.center = CGPointMake(self.view.frame.size.width/2, 300);
    btn1.backgroundColor = [UIColor orangeColor];
    //1.给 btn 添加图片
    [btn1 setImage:[UIImage imageNamed:@"share_mesage"] forState:UIControlStateNormal];
    //2.设置image 在 btn 上的位置(上，左，下，右)
    btn1.imageEdgeInsets = UIEdgeInsetsMake(20, 0, 0, 0);
    //3.添加标题
    [btn1 setTitle:@"短信" forState:UIControlStateNormal];
    btn1.titleLabel.font = [UIFont systemFontOfSize:12];
    [btn1 setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    [btn1 setTitleColor:[UIColor redColor] forState:UIControlStateSelected];
    //4.设置 title 在 btn 上的位置
    btn1.titleEdgeInsets = UIEdgeInsetsMake(-50, -48, 0, 0);
    btn1.tag = 10002;
    [btn1 addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
    [self.view addSubview:btn1];
}

效果图：

5.button 按标题长度设置大小且可选返回示例

1.按button标题的长度计算button的frame
2.可以选择或取消选择
3.完成后可以用block把选择的按钮值传回上一级菜单

最后本文的代码地址请见github

☞ UIButton详解及示例