iOS开发技巧：布局UIButton的imageView和titleLabel属性

前言

这是iOS开发技巧系列博客的第三篇，本篇我主要想给大家分享一下按钮标题以及图片视图的布局方法。我记得在我初学iOS编程做一个项目的时候，有一个视图上面是图片，下面是标题的需求，类似于美团的分类，不管点击标题还是图片，都会触发事件，看做一个整体。我当时的做法是，封装一个视图，添加一个UIButton和一个UIImageView，然后用一个视图把其覆盖并为该视图添加点击手势，当然，这个视图是透明的，这样功能也就实现了，但效果并不理想。后来，我在朋友提示看UIButton头文件的时候，发现有一个imageView属性，因为当时学习的时候还没有阅读头文件的习惯，仅仅只通过titleLabel属性去设置字体大小而已，并没有想到会有imageView这个属性存在。我尝试着为按钮设置该属性，然后我惊奇的发现了标题和图片都显示出来了，这样，一个UIButton就可以搞定当时项目的需求了。只是，这个位置并非是我想要的，因为这样设置之后图片居左，文字居右，后来上网查了很多资料，了解到通过UIButton的titleEdgeInsets和imageEdgeInsets属性，可以调整标题和图片的偏移，管理其布局。那么接下来呢，我将结合几个场景分享通过这两个属性布局按钮imageView和titleLabel的方法。

场景一：图片居左，文字居右

默认情况下，titleEdgeInsets和imageEdgeInsets的值为：UIEdgeInsetsZero。是图片居左，文字居右，垂直居中显示的，如下图：

button.titleEdgeInsets = UIEdgeInsetsZero

button.imageEdgeInsets = UIEdgeInsetsZero

场景二：图片居中，文字居中

设置方法如下：

button.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: -button.imageView!.frame.width, bottom: 0.0, right: 0.0)

button.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: -button.titleLabel!.intrinsicContentSize().width)

场景三：图片居上，文字居下，水平居中

设置方法如下：

button.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: -button.imageView!.frame.width, bottom: -button.imageView!.frame.height, right: 0.0)

button.imageEdgeInsets = UIEdgeInsets(top: -button.titleLabel!.intrinsicContentSize().height, left: 0.0, bottom: 0.0, right: -button.titleLabel!.intrinsicContentSize().width)

可能你会觉得图片和文字挨的太紧了，不过没有关系，我们可通过以下方法将其稍微分开一点。

let offset = 45

button.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: -button.imageView!.frame.width, bottom: -button.imageView!.frame.height - CGFloat(offset / 2), right: 0.0)

button.imageEdgeInsets = UIEdgeInsets(top: -button.titleLabel!.intrinsicContentSize().height - CGFloat(offset / 2), left: 0.0, bottom: 0.0, right: -button.titleLabel!.intrinsicContentSize().width)

场景四：图片居右，文字居左

设置方法如下：

button.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: -button.imageView!.frame.size.width - button.frame.size.width + button.titleLabel!.intrinsicContentSize().width, bottom: 0.0, right: 0.0)

button.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: -button.titleLabel!.frame.size.width - button.frame.size.width + button.imageView!.frame.size.width)

到这里，本篇的开发技巧分享就结束了，感谢大家的关注与支持，我将继续更新后续的文章，敬请期待。