有時(shí)候我們需要實(shí)現(xiàn)左文右圖的按鈕，當(dāng)然了黍氮，可是使用幾個(gè)基本控件組合唐含，但是顯得繁瑣。我們可以寫一個(gè)UIButton的子類沫浆，擴(kuò)展出左文右圖捷枯、左圖右文(默認(rèn)), 上圖下文， 上文下圖這四種位置专执。

下面我們來看代碼：

import UIKit

class LayoutButton: UIButton {

    enum Position {
        case top
        case bottom
        case left
        case right
    }
    
    private var position: Position?
    private var space: CGFloat = 0
    
    convenience init(_ position: Position, at space: CGFloat = 0) {
        self.init(type: .custom)
        self.position = position
        self.space = space
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        if let position = position {
            switch position {
            case .top:
                let titleHeight = titleLabel?.bounds.height ?? 0
                let imageHeight = imageView?.bounds.height ?? 0
                let imageWidth = imageView?.bounds.width ?? 0
                let titleWidth = titleLabel?.bounds.width ?? 0
                titleEdgeInsets = UIEdgeInsets((titleHeight + space) * 0.5,
                                               -imageWidth * 0.5,
                                               -space,
                                               imageWidth * 0.5)
                imageEdgeInsets = UIEdgeInsets(0,
                                               titleWidth * 0.5,
                                               (imageHeight + space),
                                               -titleWidth * 0.5)
            case .bottom:
                let titleHeight = titleLabel?.bounds.height ?? 0
                let imageHeight = imageView?.bounds.height ?? 0
                let imageWidth = imageView?.bounds.width ?? 0
                let titleWidth = titleLabel?.bounds.width ?? 0
                titleEdgeInsets = UIEdgeInsets(-(titleHeight + space) * 0.5,
                                               -imageWidth * 0.5,
                                               space,
                                               imageWidth * 0.5)
                imageEdgeInsets = UIEdgeInsets((imageHeight + space),
                                               titleWidth * 0.5,
                                               0,
                                               -titleWidth * 0.5)

            case .left:
                titleEdgeInsets = UIEdgeInsets(0, space, 0, 0)
                imageEdgeInsets = UIEdgeInsets(0, 0, 0, space)
            case .right:
                let imageWidth = (imageView?.bounds.width ?? 0) + space
                let titleWidth = (titleLabel?.bounds.width ?? 0) + space
                titleEdgeInsets = UIEdgeInsets(0, -imageWidth, 0, imageWidth)
                imageEdgeInsets = UIEdgeInsets(0, titleWidth, 0, -titleWidth)
            }
        }
    }
}

使用的時(shí)候：

 private var rightTitleButton = LayoutButton(.right, at: 3.auto()).then {
        $0.setTitle("查看全部", for: .normal)
        $0.setTitleColor(#colorLiteral(red: 0.5333333333, green: 0.5333333333, blue: 0.5333333333, alpha: 1), for: .normal)
        $0.titleLabel?.font = UIFont.systemFont(ofSize: 15.auto(), weight: .regular)
        let image = #imageLiteral(resourceName: "home_arrows_lucky").scaled(toWidth: 6.auto())
        $0.setImage(image?.withRenderingMode(.alwaysTemplate), for: .normal)
        $0.tintColor = #colorLiteral(red: 0.5333333333, green: 0.5333333333, blue: 0.5333333333, alpha: 1)
        $0.contentEdgeInsets = UIEdgeInsets(0, 10.auto(), 0, 10.auto())
    }

實(shí)現(xiàn)效果：

image.png

在此記錄淮捆，方便查閱。希望對各位伙伴提供一點(diǎn)幫助本股。