链接：https://github.com/lzy1010/UIButton-Layout
上面的是分类链接，图省心直接拿走用，后面的不用看了。
我们使用的UIButton默认样式是左图右文的，但是在实际的需求中经常会有左文右图、上图下文的需求，比如下图的支付宝和美团，所用的按钮就是这种样式。
美团
支付宝
下面我们看一下如何实现这种样式。答案就是修改uibutton的titleEdgeInsets和imageEdgeInsets属性。
UIEdgeInsets
UIButton的属性titleEdgeInsets和imageEdgeInsets是结构体，它的四个参数：top, left, bottom, right, 分别表示距离上边界，左边界，下边界，右边界的位移，默认值均为0。
titleEdgeInsets和imageEdgeInsets都是相对于UIButton的，所以大胆设置，不要考虑他们会互相影响之类的。
图层是这样子的：
UIButton默认左图右文，且间隔为0
如果想要图文间距为10的话，需要设置文字向右移动5,图片向左移5,即：
_btn.titleEdgeInsets =UIEdgeInsetsMake(0, 5,0, -5);
_btn.imageEdgeInsets = UIEdgeInsetsMake(0, -5, 0, 5);
下面这种模式，两种写法效果有时是一样的，但是不建议这么写：
_btn.titleEdgeInsets =UIEdgeInsetsMake(0, 10,0, 0);
_btn.imageEdgeInsets = UIEdgeInsetsMake(0, -10, 0, 0);
图文间隔为10上图下文呢：
文字向左移动图片宽度一般的距离，向下移动图片高度一半的距离
图片向右移动文字宽度一般的距离，向上移动文字高度一半的距离
CGSize titleSize = self.btn.titleLabel.bounds.size;
CGSize imageSize = self.btn.imageView.bounds.size;
self.btn.titleEdgeInsets = UIEdgeInsetsMake(imageSize.height / 2.0, -imageSize.width / 2.0, -imageSize.height / 2.0, imageSize.width / 2.0);
self.btn.imageEdgeInsets = UIEdgeInsetsMake(-titleSize.height / 2.0, titleSize.width / 2.0, titleSize.height / 2.0, -titleSize.width / 2.0);
上图下文
怎么样，看到这里，是不是觉得巨简单，但是又巨麻烦，不想写。
所以这里我写了一个分类，可以设置图片、文字位置，并且设置图文间距。
调用方法：
- (void)setImageLayout:(UIButtonLayoutType)type space:(CGFloat)space;
这样还会有一个问题，左图右文时文字显示距离不够，即使换成上图下文也是会显示...，所以加了一个属性isSizeToFit，使titleLabel自适应宽度。
网友评论