iOS | 理解UIEdgeInsets并创建上下布局的UIBu

友情提示：最终效果可跳至文章末尾Step 4处

先在View中初始化一个最基本的带有图片和文字的UIButton

let button = UIButton(type: .custom)
button.setImage(UIImage(named: "tab_bar_list_off"), for: .normal)
button.setImage(UIImage(named: "tab_bar_list_on"), for: .highlighted)
button.setTitle("列表", for: .normal)
button.sizeToFit()
button.backgroundColor = .red
button.center = view.center
view.addSubview(button)

此时页面中的按钮状态为

初始化UIButton

UIEdgeInsets的初始化方法为

UIEdgeInsets(top: CGFloat, left: CGFloat, bottom: CGFloat, right: CGFloat)

其中包含的四个参数意义为：元素的某个边界基于原位置将要移动的距离，正值为靠近控件矩形区域的中心，负值为远离控件矩形区域的中心。
例如：

button.titleEdgeInsets = UIEdgeInsets(top: 10, left: 0, bottom: 0, right: -10)

意味着将按钮的文字分别向下、向右移动了10像素，效果如下

UIEdgeInsets(top: 10, left: 0, bottom: 0, right: -10)

又例如：

button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 10)

效果显示为

UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 10)

是因为只将文字的右侧向左移动，而没有将文字左侧也做相应移动，因此空间显示不开，所以正确的方法应该是

button.titleEdgeInsets = UIEdgeInsets(top: 0, left: -10, bottom: 0, right: 10)

效果如下

UIEdgeInsets(top: 0, left: -10, bottom: 0, right: 10)

由此可以清楚，若要构建垂直布局的UIButton，应该分一下几步

1. 分别获取图标的尺寸和文字的尺寸
2. 将图标和文字移动到Button的中心
3. 将图标向上移动某个高度，将文字向下移动某个高度，视需求而定
4. 有必要的话，将UIButton的Frame进行重新调整

例如：
Step 1:

if let titleSize = button.titleLabel?.intrinsicContentSize, let iconSize = button.currentImage?.size {
            
}

Step 2: 这里对于居中的处理，我个人喜欢将图标和文字都拉伸成按钮的宽度，这样从视觉上就是居中的状态

if let titleSize = button.titleLabel?.intrinsicContentSize, let iconSize = button.currentImage?.size {
    button.titleEdgeInsets = UIEdgeInsets(top: 0, left: -iconSize.width, bottom: 0, right: 0)
    button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -titleSize.width)
}

居中后的效果：

图标和文字居中

Step 3:

if let titleSize = button.titleLabel?.intrinsicContentSize, let iconSize = button.currentImage?.size {
    let titleVerOffset = titleSize.height / 2
    button.titleEdgeInsets = UIEdgeInsets(top: titleVerOffset,
                                          left: -iconSize.width,
                                          bottom: -titleVerOffset,
                                          right: 0)
    let iconVerOffset = iconSize.height / 2
    button.imageEdgeInsets = UIEdgeInsets(top: -iconVerOffset,
                                          left: 0,
                                          bottom: iconVerOffset,
                                          right: -titleSize.width)
}

效果如下，可以看到图标和文字都已经超过了按钮的边界了

上图下字

Step 4:

if let titleSize = button.titleLabel?.intrinsicContentSize, let iconSize = button.currentImage?.size {
    let titleVerOffset = titleSize.height / 2
    button.titleEdgeInsets = UIEdgeInsets(top: titleVerOffset,
                                          left: -iconSize.width,
                                          bottom: -titleVerOffset,
                                          right: 0)
    let iconVerOffset = iconSize.height / 2
    button.imageEdgeInsets = UIEdgeInsets(top: -iconVerOffset,
                                          left: 0,
                                          bottom: iconVerOffset,
                                          right: -titleSize.width)
    button.frame = CGRect(origin: button.frame.origin,
                          size: CGSize(width: button.bounds.size.width,
                                       height: iconSize.height + titleSize.height))
}

最终效果：

上图下字UIButton

后续可以根据不同的需求对按钮进行进一步的调整，例如在图标和文字中间加入一定的间距等，原理也都跳不出以上的步骤。再进一步，可以将此段代码抽离成独立方法，方便将来频繁调用，在此就不多做赘述，希望对有此需求的朋友有所帮助。