UIButton上图下文、左文右图实现（附分类方法）

链接：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自适应宽度。

链接：https://github.com/lzy1010/UIButton-Layout