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

前言

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

titleEdgeInsets

和

imageEdgeInsets

属性，可以调整标题和图片的偏移，管理其布局。那么接下来呢，我将结合几个场景分享通过这两个属性布局按钮imageView和titleLabel的方法。

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

默认情况下，

titleEdgeInsets

和

imageEdgeInsets

的值为：UIEdgeInsetsZero。是图片居左，文字居右，垂直居中显示的，如下图：

(这是默认值，不进行设置即可，但要注意，button的宽度和高度要符合上面说的情况，二者才能都显示出来)

button.titleEdgeInsets = UIEdgeInsetsZero;

button.imageEdgeInsets = UIEdgeInsetsZero;

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

设置方法如下：

top:

left: bottom: right:[/code]

button.titleEdgeInsets = UIEdgeInsets( 0.0,  -button.imageView.frame.width,  0.0,  0.0)

button.imageEdgeInsets = UIEdgeInsets( 0.0, 0.0,  0.0, -button.titleLabel.intrinsicContentSize.width)

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

设置方法如下：

button.titleEdgeInsets = UIEdgeInsets( 0.0, -button.imageView.frame.width,  -button.imageView.frame.height,  0.0)

button.imageEdgeInsets = UIEdgeInsets( -button.titleLabel.intrinsicContentSize.height,  0.0,  0.0,  -button.titleLabel.intrinsicContentSize.width)

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

CGFloat offset = 45

button.titleEdgeInsets = UIEdgeInsets( 0.0,  -button.imageView.frame.width,  -button.imageView.frame.height - CGFloat(offset / 2),  0.0)

button.imageEdgeInsets = UIEdgeInsets( -button.titleLabel.intrinsicContentSize.height - CGFloat(offset / 2),  0.0,  0.0,  -button.titleLabel.intrinsicContentSize.width)

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

设置方法如下：

button.titleEdgeInsets = UIEdgeInsets( 0.0,  -button.imageView.frame.size.width - button.frame.size.width + button.titleLabel.intrinsicContentSize.width,  0.0,  0.0)

button.imageEdgeInsets = UIEdgeInsets( 0.0,  0.0,  0.0,  -button.titleLabel.frame.size.width - button.frame.size.width + button.imageView.frame.size.width)

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