前幾天看見一片文章關(guān)于使用自定義控件實現(xiàn)按鈕文字圖片排版的,個人感覺用起來還是不怎么方便,

先看下面常用的按鈕布局

示例圖片.png

下面使用兩個分類方法快速解決按鈕排版問題,一個String分類用于計算按鈕文本的寬高,一個按鈕的分類用來布局,不廢話上代碼

import UIKit
extension String {
    
    /// 根據(jù)文本計算其尺寸
    ///
    /// - Parameter font: 文本使用的字體
    /// - Returns: 文本尺寸
    func cf_size(font: UIFont) -> CGSize {
        var size = CGSize.zero
        let attributes = [NSFontAttributeName: font]
        size = (self as NSString).size(attributes: attributes)
        size.width = CGFloat(ceilf(Float(size.width)))
        size.height = CGFloat(ceilf(Float(size.height)))
        return size
    }
}

extension UIButton {
    /// 快速排版并重新計算尺寸
    ///
    /// - Parameters:
    ///   - isHorizontal: 是否是水平排版,默認為水平即文字在左邊,圖片在右邊
    ///   - margin: 圖片與文字之間的間距
    func adjustContent(isHorizontal: Bool = true, margin: CGFloat) {
        guard let imageSize = self.image(for: .normal)?.size,
        let title = self.currentTitle
            else {
                return
        }
        // 計算文字尺寸
        let titleSize = title.cf_size(font: self.titleLabel!.font)
        var tmpRect = self.frame
        if isHorizontal {
            // 文字左邊,圖片右邊
            self.imageEdgeInsets = UIEdgeInsets(top: 0,
                                                left: titleSize.width + margin,
                                                bottom: 0,
                                                right: -titleSize.width)
            self.titleEdgeInsets = UIEdgeInsets(top: 0,
                                                left: -imageSize.width,
                                                bottom: -0,
                                                right: imageSize.width + margin)
            tmpRect.size.width += margin;
        } else {
            // 圖片上面啊,文字下面
            self.imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + margin),
                                                left: 0,
                                                bottom: 0,
                                                right: -titleSize.width)
            self.titleEdgeInsets = UIEdgeInsets(top: 0,
                                                left: -imageSize.width,
                                                bottom:  -(imageSize.height + margin),
                                                right: 0)
            tmpRect.size.width = max(imageSize.width, titleSize.width);
        }
        self.frame = tmpRect
    }
}

• 上面方法主要用了imageEdgeInsets和titleEdgeInsets來快速調(diào)整按鈕內(nèi)部控件的位置,并重新計算按鈕的frame,該方法接收兩個參數(shù),一個參數(shù)是用來區(qū)分按鈕是上下排布還是水平排布,默認為水平(即文字在左邊,圖片在右邊)
• 至于文字在右邊,圖片在左邊,這個系統(tǒng)默認的就是這樣,這里就不寫了
• 同理文字在圖片上面即上面圖片那種也是使用系統(tǒng)的,只是需要將圖片設(shè)置為backgroundImage即可

上面圖片中的4個按鈕的代碼如下

        // 系統(tǒng)默認
        let btn1 = UIButton()
        btn1.setTitle("文字在右邊", for: .normal)
        btn1.setTitleColor(UIColor.red, for: .normal)
        btn1.setImage(UIImage(named: "navigationbar_arrow_down"), for: .normal)
        btn1.sizeToFit()
        btn1.center = CGPoint(x: view.center.x, y: view.center.y - 150)
        view.addSubview(btn1)
        // 系統(tǒng)默認
        let btn2 = UIButton()
        btn2.setTitle("文字中間圖片在底部", for: .normal)
        btn2.setTitleColor(UIColor.red, for: .normal)
        btn2.setBackgroundImage(UIImage(named: "img_shade"), for: .normal)
        btn2.sizeToFit()
        btn2.center = CGPoint(x: view.center.x, y: view.center.y - 100)
        view.addSubview(btn2)
        
        
        let btn3 = UIButton()
        btn3.setTitle("文字在左邊", for: .normal)
        btn3.setTitleColor(UIColor.red, for: .normal)
        btn3.setImage(UIImage(named: "navigationbar_arrow_down"), for: .normal)
        btn3.sizeToFit()
        // 關(guān)鍵方法
        btn3.adjustContent(margin: 10)
        btn3.center = CGPoint(x: view.center.x, y: view.center.y - 50)
        view.addSubview(btn3)
        
        let btn4 = UIButton()
        btn4.setTitle("文字在下面", for: .normal)
        btn4.setTitleColor(UIColor.red, for: .normal)
        btn4.setImage(UIImage(named: "tabbar_home_selected"), for: .normal)
        btn4.sizeToFit()
        // 關(guān)鍵方法
        btn4.adjustContent(isHorizontal: false, margin: 10)
        btn4.center = CGPoint(x: view.center.x, y: view.center.y + 50)
        view.addSubview(btn4)

有興趣的朋友可以自己試試,如有問題,可以在下方給我留言~
原文鏈接