swift4 UIButton扩展，文字与图片位置上下左右排列

有时候我们需要实现左文右图的按钮，当然了，可是使用几个基本控件组合，但是显得繁琐。我们可以写一个UIButton的子类，扩展出左文右图、左图右文(默认), 上图下文， 上文下图这四种位置。

下面我们来看代码：

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)
            }
        }
    }
}

使用的时候：

 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())
    }

实现效果：

image.png

在此记录，方便查阅。希望对各位伙伴提供一点帮助。