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

Posted 2023-03-29

参考技术A 我们使用的UIButton默认样式是左图右文的，但是在实际的需求中经常会有左文右图、上图下文的需求，比如下图的支付宝和美团，所用的按钮就是这种样式。

下面我们看一下如何实现这种样式。答案就是修改uibutton的titleEdgeInsets和imageEdgeInsets属性。

UIEdgeInsets

UIButton的属性titleEdgeInsets和imageEdgeInsets是结构体，它的四个参数：top, left, bottom, right, 分别表示距离上边界，左边界，下边界，右边界的位移，默认值均为0。

titleEdgeInsets和imageEdgeInsets都是相对于UIButton的，所以大胆设置，不要考虑他们会互相影响之类的。

图层是这样子的：

如果想要图文间距为10的话，需要设置文字向右移动5,图片向左移5,即：

下面这种模式，两种写法效果有时是一样的，但是不建议这么写：

上图下文呢：

文字向左移动图片宽度一般的距离，向下移动图片高度一半的距离

图片向右移动文字宽度一般的距离，向上移动文字高度一半的距离

怎么样，看到这里，是不是觉得巨简单，但是又巨麻烦，不想写。

所以这里我写了一个分类，可以设置图片、文字位置，并且设置图文间距。

调用方法：

这样还会有一个问题，左图右文时文字显示距离不够，即使换成上图下文也是会显示...，所以加了一个属性isSizeToFit，使titleLabel自适应宽度。

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