写给设计师的iOS前端教程（四）UIButton

一、点语法 vs Set方法

能看到第四篇的，说明前面的你都能消化了。在开始进入今天的正题之前，先讲两个简单的概念，「点语法」与「Set方法」。

举个例子：

Lily.hair = [UIColor RedColor];
[Lily setHair:[UIColor RedColor]];

第一行是「点语法」，第二行是「Set方法」，这两行代码意思是一样的，都是把Lily的头发染成红色。要是咱们不仅要染头发，还要把指甲涂成蓝色呢？

//点语法得用两行
Lily.hair = [UIColor RedColor];
Lily.fingernail = [UIColor BlueColor];

//Set语法只用一行
[Lily setHair:[UIColor RedColor] andFingernail:[UIColor BlueColor]];

看到差异了吧？总结一下，点语法的好处是写起来简单，读起来也简单。Set方法的好处是效率高，适用面广。点语法的代码都可以转成Set方法，而Set方法的代码未必能转成点语法。

台下有位同学说「我会了」。那你来造个句子吧，她灵机一动，答道：

[myDream SetMyFather:@"马云" andMyHusband:@"王思聪"];

嗯，非常好，会举一反三了，这也是我的梦想，请坐吧。

二、UIButton出场

有两种按钮比较常见：第一种是按钮有个背景色，文字居中，再加个圆角；第二种是在前一种的基础上，多了个图标，图标在文字的左边；我们先从简单的第一种说起吧：

例子一：

    UIButton *myButton = [[UIButton alloc] initWithFrame:CGRectMake(20, 380, 160, 44)];
    [myButton setTitle:@"按钮的文字" forState:UIControlStateNormal];
    [myButton.titleLabel setFont:[UIFont systemFontOfSize:17]];
    [myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
    //[myButton setBackgroundColor:[UIColor blueColor]];
    [myButton setBackgroundImage:[UIImage imageNamed:@"button_blue"] forState:UIControlStateNormal];
    [myButton setBackgroundImage:[UIImage imageNamed:@"button_orange"] forState:UIControlStateHighlighted];
    [myButton.layer setMasksToBounds:YES];
    [myButton.layer setCornerRadius:6];
    [self.view addSubview:myButton];

三、代码详解

别看到一大段代码就晕啊，我们一句句来解释。

1、赋值、坐标、尺寸（必选）

    UIButton *myButton = [[UIButton alloc] initWithFrame:CGRectMake(20, 380, 160, 44)];

看过前两篇的应该都知道什么意思了，不解释了。

2、文字

    [myButton setTitle:@"按钮的文字" forState:UIControlStateNormal];

这行代码是设置按钮上显示的文字。这句话只能用Set方法来写，不能转成点语法，UIbutton好多属性都是这样，所以干脆就全用Set方法来写啦，美观一些。forState:UIControlStateNormal是什么鬼？别急啊，先放一放，稍后再解释。

3、文字的字体

    [myButton.titleLabel setFont:[UIFont systemFontOfSize:17]];

这句话初学者很容易写错成：

    \\ 以下错误的示范
    [myButton setFont:[UIFont systemFontOfSize:17]];
    [myButton setTitleFont:[UIFont systemFontOfSize:17]];

4、文字的颜色

    [myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];

刚才已经碰到过一回forState:xxx了，咱们来解释解释吧。按钮有六种状态，最常见的有四种：

• 普通：UIControlStateNormal
• 高亮：UIControlStateHighlighted，就是被点中的状态，类似网页里的Hover
• 不可用：UIControlStateDisabled
• 被选中：UIControlStateSelected

上面两行代码意思是：设置按钮在普通和高亮状态下，文字都是白色的。如果不写第二句，系统会在按钮被点击时，盖上一层淡淡的黑色。

5、背景色或背景图

    [myButton setBackgroundColor:[UIColor blueColor]];

这是设置背景颜色。

    [myButton setBackgroundImage:[UIImage imageNamed:@"button_blue"] forState:UIControlStateNormal];
    [myButton setBackgroundImage:[UIImage imageNamed:@"button_orange"] forState:UIControlStateHighlighted];

这是设置背景图片。

需要注意的是，背景色是不支持按钮状态的，如果你不提前告诉工程师按钮还有高亮状态，他们就会用简单的setBackgroundColor来做了。

在扁平风横行的今天，按钮大多是纯色的了，很少再用渐变或者纹理什么的，本没必要用图片的。设计师要的效果，无非是普通状态一个颜色，高亮状态一个颜色。但要支持不同状态，就得用setBackgroundImage，就非得用图片才行。

从一个按钮来看，工作量不大，但你考虑到整个app，多少按钮，多少种尺寸啊！那得做多少套图片啊？

方法肯定比问题多，我摸索出两个比较简单的方法：

• 可拉伸的图片做背景，图片再小都无所谓，反正是平铺的；
• 用代码来生成一张虚拟的图片，如下面的代码；

    [button setBackgroundImage:[UIImage imageForColor:[UIColor px_tomatoRed] size:CGSizeMake(1, 1)] forState:UIControlStateNormal];
    [button setBackgroundImage:[UIImage imageForColor:[UIColor px_orangeColor] size:CGSizeMake(1, 1)] forState:UIControlStateHighlighted];

其中imageForColor这种方法不是系统自带的，需要另外写一些扩展的代码，这里就不赘述了。

6、圆角

    [myButton.layer setMasksToBounds:YES];
    [myButton.layer setCornerRadius:6];

之前说UIImageView的时候介绍过了。

7、显示出来

    [self.view addSubview:myButton];

一回生，两回熟。这都第三次见了，老相识就不客套了。

四、带图标的UIButton

本文开头时提到，有两种常见的按钮，第一种介绍过了，还有一种是带图标的按钮。这位仁兄在后台已经等很久了，终于轮到他上场啦。

    UIButton *anotherButton = [[UIButton alloc] initWithFrame:CGRectMake(190, 380, 165, 44)];
    [anotherButton setTitle:@"别点我" forState:UIControlStateNormal];
    [anotherButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 8, 0, 0)];
    [anotherButton setContentEdgeInsets:UIEdgeInsetsMake(0, -12, 0, 0)];
    [anotherButton setImage:[UIImage imageNamed:@"ic_diamond"] forState:UIControlStateNormal];
    [anotherButton setImage:[UIImage imageNamed:@"ic_diamond"] forState:UIControlStateHighlighted];
    [anotherButton setBackgroundImage:[UIImage imageNamed:@"button_blue"] forState:UIControlStateNormal];
    [anotherButton setBackgroundImage:[UIImage imageNamed:@"button_orange"] forState:UIControlStateHighlighted];
    [anotherButton.layer setMasksToBounds:YES];
    [anotherButton.layer setCornerRadius:6];
    [self.view addSubview:anotherButton];

五、代码再详解

别看代码多，好多前面都已经讲过了，只有三个看起来很面生。

1、文字的位移

    [anotherButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 8, 0, 0)];
    [anotherButton setImageEdgeInsets:UIEdgeInsetsMake(0, 8, 0, 0)];

默认情况下，图标在左，文字在右。setTitleEdgeInsets 可以移动文字的位置， setImageEdgeInsets 可以移动图片的位置。

UIEdgeInsetsMake 括号里四个数字，分别对应「上、左、下、右」，逆时针方向的。

比如说，你希望图标和文字之间增加 4pt 的距离，如果工程师告诉你，「你自己把图片增加一些透明区域吧」，别听他的，只要以下两行代码就行了：

[anotherButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 4, 0, -4)];
[anotherButton setImageEdgeInsets:UIEdgeInsetsMake(0, -4, 0, 4)];

注：之所以要同时设置 setTitleEdgeInsets 和 setImageEdgeInsets，那是因为大多数按钮是居中排列的，如果只设置其中一个属性就会偏了。如果按钮本来就是居左或者居右，那就只需要设置一个属性了。

2、文字+图标的位移

    [anotherButton setContentEdgeInsets:UIEdgeInsetsMake(0, -12, 0, 0)];

setContentEdgeInsets是文字+图标一起移动。UIEdgeInsetsMake(0, -12, 0, 0)就是文字+图标一起向左移动12pt。

3、图标

    [anotherButton setImage:[UIImage imageNamed:@"ic_diamond"] forState:UIControlStateNormal];
    [anotherButton setImage:[UIImage imageNamed:@"ic_diamond"] forState:UIControlStateHighlighted];

setImage就是设置图标的图片地址啦，要分别设置普通和高亮时候的状态。

4、怎么把图标放在右边呢？

默认情况下，图标在左边，文字在右边。那有些时候我们想左右对换一下，比如文字的右侧放一个向右的箭头，那该怎么办呢？

见证奇迹的时候到了：

    CGFloat spacing = 5.0;
    CGSize imageSize = anotherButton.imageView.frame.size;
    CGSize titleSize = anotherButton.titleLabel.frame.size;
    [anotherButton setTitleEdgeInsets:UIEdgeInsetsMake(0, -imageSize.width, 0, imageSize.width)];
    [anotherButton setImageEdgeInsets:UIEdgeInsetsMake(0, titleSize.width + spacing, 0, -titleSize.width - spacing)];

这里定义了三个参数：spacing 是图标和文字之间的间距。imageSize 会算出图标的尺寸，titleSize 会算出文字的尺寸。

然后文字向左移。移动多少呢，一个图标的宽度。图标再右移。移动多少呢，就是文字的宽度 + 间距。这就实现了文字在左边，图标在右边的效果啦。

完整的代码是这样的：

    UIButton *anotherButton = [[UIButton alloc] initWithFrame:CGRectMake(190, 380, 165, 44)];
    [anotherButton setTitle:@"别点我" forState:UIControlStateNormal];
    [anotherButton setImage:[UIImage imageNamed:@"ic_diamond"] forState:UIControlStateNormal];
    [anotherButton setImage:[UIImage imageNamed:@"ic_diamond"] forState:UIControlStateHighlighted];
    [anotherButton setBackgroundImage:[UIImage imageNamed:@"button_blue"] forState:UIControlStateNormal];
    [anotherButton setBackgroundImage:[UIImage imageNamed:@"button_orange"] forState:UIControlStateHighlighted];
    CGFloat spacing = 5.0;
    CGSize imageSize = anotherButton.imageView.frame.size;
    CGSize titleSize = anotherButton.titleLabel.frame.size;
    [anotherButton setTitleEdgeInsets:UIEdgeInsetsMake(0, -imageSize.width, 0, imageSize.width)];
    [anotherButton setImageEdgeInsets:UIEdgeInsetsMake(0, titleSize.width + spacing, 0, -titleSize.width - spacing)];
    [anotherButton.layer setMasksToBounds:YES];
    [anotherButton.layer setCornerRadius:6];
    [self.view addSubview:anotherButton];

六、后记

UIButton里有几个属性很相似的，setImage、setBackgroundImage与setBackgroundColor，还有setTitleEdgeInsets与setContentEdgeInsets，大家用的时候要注意区分啊。

---

喜欢这篇文章吗？点击这里 查看本系列的更多文章。