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 圖片文字左右互移 位置對調 解決方案