UIButton的titleEdgeInsets和imageEdgeInsets使用技巧

最近的项目需求比较多，一些button的样式也多，大体上分几种：纯文字、图片、文字带图片。我要说的是文字带图片。

我们的需求里经常出现，文字＋图片的button。文字＋图片又分好几种：左文字＋右图片、左图片＋右文字、上文字＋下图片、上图片＋下文字（左右图片中间文字暂时不包含）。

总的来说，实现左图片右文字是最容易的，其它一般都是组合形式，在一个view上贴上相应位置的对象，就OK了。组合形式直观，也容易理解，但实现相对麻烦和耗时，需要在view对象上放置不同位置大小的对象，最后生成你想要的效果，最后还要给对象view加事件。总体下来耗费的时间和资源都不少，结果只是一个简单的button样式和事件。

我来说说直接用button的方式实现左文字＋右图片、左图片＋右文字的简单思路和方法。

其实button本身就是一个容器，里边存放着label、imageview对象。并且提供了titleEdgeInsets和imageEdgeInsets的属性。我们就利用这两个属性实现我们的效果。

注意：这里的label并不是UILabel,通过打印信息发现是UIButtonLabel。

我们先看一张效果图

• 第一种：图片＋文字（系统默认）

这其实最常用，我门通常是设置button的image和title就OK。只是这里会有个小问题，图片和文字默认是左图片＋右文字且图片和文字中间无间隔，聪明的你一定想到图片加边透明处理就OK。这确实是一种方法，另外你也会想到，文字左边＋空格，这也是可以解决。但问题来了，如果设计的需要老变，可能间距不等，那你修改就麻烦了。

• 第二种：图片＋文字（中间5间距）

其实这种方式也是解决第一种方式的方法，我们只要利用titleEdgeInsets和imageEdgeInsets的属性就可以解决。

分析如下：

图片和文字中间间隔5，默认是没有间距。那么图片相对文字而言，图片离右边是5，相反文字离左边是5，如下代码。

self.btn2.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 0, 0);
self.btn2.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 5);

• 第三种：文字＋图片（中间5间距）

利用第二种原理，我们可以这样考虑，其实是把它们的位置都调换。虽然是调换，但是我们要知道怎么调。

先看button的默认打印titleLabel和imageView

2015-07-25 10:52:17.184 ButtonDemo[1126:259103] titleLabel=<UIButtonLabel: 0x7fe63944a5c0; frame = (40.5 8.5; 45 18); text = '在右边'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x7fe639445320>>,imageView=<UIImageView: 0x7fe6395b2650; frame = (26 13.5; 14 8); clipsToBounds = YES; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x7fe63952cc30>>

从信息中，我们知道它们titleLabel和imageView的frame、内容。那我们就利用frame的信息，做调换。

这里有一个注意点：我们不能直接通过self.btn3.titleLabel.frame的方式，拿到文本大小，这个没仔细研究，但不要紧，我们可以通过计算文本得到文本内容的大小。

NSString *text3 =  self.btn3.titleLabel.text;
CGSize text3Size = [text3 sizeWithFont:self.btn3.titleLabel.font width:100000];

思路有了，需要的条件也准备好了，我们开始简单说一下。

文本的位置等于图片的位置对换＋5间距(内容大小：文本原来偏移是0，0，0，0，变换位置应该是：左边＝－图片icon宽－5，右边＝图片icon宽＋5，上下不变)

图片icon的位置等于文本的位置对换＋5间距（内容大小：图片原来偏移是0，0，0，0，变换位置应该是：左边＝文本宽＋5，右边＝－文本宽－5，上下不变）

self.btn3.titleEdgeInsets = UIEdgeInsetsMake(0, -image3Size.width-5, 0, image3Size.width+5);
self.btn3.imageEdgeInsets = UIEdgeInsetsMake(0, text3Size.width+5, 0, -text3Size.width-5);

最后我们想要的效果出来了，这里是demo。