iOS UIButton 图片文字上下垂直布局 解决方案

1、实现效果：

这是一个UIButton，需要改变image和title相对位置。

2、实现原理：

利用UIEdgeInsetsMake：里面的四个参数表示距离上边界、左边界、下边界、右边界的距离，默认都为零

 

此时，4个边距都有一个初始值，我们设置UIEdgeInsetsMake(0,0,0,0)，位置是不动的

当我们给top一个正1的位移：UIEdgeInsetsMake(1,0,0,0)，此时btn内的image是向下移动了0.5。

注意：为什么是0.5，这是因为我们没有设置button的内部控件对齐方式，位移距离此时变成了一半。

比如：btn.contentHorizontalAlignment和contentVerticalAlignment

只有当我们设置了这两个属性，位移才会和设置位移值相等。

我们记住一个原则，当设置正值，就表示内边距变大，负值则表示减少内边距。

3、实现如下：

定义按钮

        btnFlash = UIButton(frame: frame)
        btnFlash.setImage(UIImage(named: "flash_off"), for: .normal)
        btnFlash.setTitle("手电筒", for: .normal)
        self.view.addSubview(btnFlash)
        setButtonMiddle(btn: btnFlash)

方法调用

    /// 设置按钮图片文字上下垂直居中
    /// 前提：1、必须设置好按钮的图片和文字
    ///      2、按钮frame能让图片和文字正常显示出来（别btn宽度太小，文字都省略号了）
    ///
    /// - Parameter btn: <#btn description#>
    func setButtonMiddle(btn:UIButton) {
        if btn.imageView == nil || btn.titleLabel == nil{
            return
        }
        
        let imgW:CGFloat = btn.imageView!.frame.size.width
        let imgH:CGFloat = btn.imageView!.frame.size.height
        let lblW:CGFloat = btn.titleLabel!.frame.size.width
        let lblH:CGFloat = btn.titleLabel!.frame.size.height
        //设置图片和文字的间距，这里可自行调整
        let margin:CGFloat = 5

        btn.imageEdgeInsets = UIEdgeInsetsMake(-lblH-margin/2, 0, 0, -lblW)
        btn.titleEdgeInsets = UIEdgeInsetsMake(imgH+margin/2, -imgW, 0, 0)        
        
    }

总结来说，就是：

图片 向  右上角   移动

文字 向  左下角   移动

PS：如果图片文字左右平移，参考这个

iOS UIButton 图片文字左右互移 位置对调 解决方案