LayoutableButton.swift

import UIKit

@IBDesignable
class LayoutableButton: UIButton {
    enum VerticalAlignment: String {
        case center, top, bottom, unset
    }
    
    enum HorizontalAlignment: String {
        case center, left, right, unset
    }
    
    var imageToTitleSpacing: CGFloat = 8.0 {
        didSet {
            setNeedsLayout()
        }
    }
    
    var imageVerticalAlignment: VerticalAlignment = .unset {
        didSet {
            setNeedsLayout()
        }
    }
    
    var imageHorizontalAlignment: HorizontalAlignment = .unset {
        didSet {
            setNeedsLayout()
        }
    }
    
    @available(*, unavailable, message: "This property is reserved for Interface Builder. Use 'imageVerticalAlignment' instead.")
    @IBInspectable
    var imageVerticalAlignmentName: String {
        get {
            return imageVerticalAlignment.rawValue
        }
        set {
            if let value = VerticalAlignment(rawValue: newValue) {
                imageVerticalAlignment = value
            } else {
                imageVerticalAlignment = .unset
            }
        }
    }
    
    @available(*, unavailable, message: "This property is reserved for Interface Builder. Use 'imageHorizontalAlignment' instead.")
    @IBInspectable
    var imageHorizontalAlignmentName: String {
        get {
            return imageHorizontalAlignment.rawValue
        }
        set {
            if let value = HorizontalAlignment(rawValue: newValue) {
                imageHorizontalAlignment = value
            } else {
                imageHorizontalAlignment = .unset
            }
        }
    }
    
    var extraContentEdgeInsets: UIEdgeInsets = .zero
    
    override var contentEdgeInsets: UIEdgeInsets {
        get {
            return super.contentEdgeInsets
        }
        set {
            super.contentEdgeInsets = newValue
            self.extraContentEdgeInsets = newValue
        }
    }
    
    var extraImageEdgeInsets: UIEdgeInsets = .zero
    
    override var imageEdgeInsets: UIEdgeInsets {
        get {
            return super.imageEdgeInsets
        }
        set {
            super.imageEdgeInsets = newValue
            self.extraImageEdgeInsets = newValue
        }
    }
    
    var extraTitleEdgeInsets: UIEdgeInsets = .zero
    
    override var titleEdgeInsets: UIEdgeInsets {
        get {
            return super.titleEdgeInsets
        }
        set {
            super.titleEdgeInsets = newValue
            self.extraTitleEdgeInsets = newValue
        }
    }
    
    //Needed to avoid IB crash during autolayout
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        
        self.imageEdgeInsets = super.imageEdgeInsets
        self.titleEdgeInsets = super.titleEdgeInsets
        self.contentEdgeInsets = super.contentEdgeInsets
    }
    
    override func layoutSubviews() {
        if let imageSize = self.imageView?.image?.size,
            let font = self.titleLabel?.font,
            let textSize = self.titleLabel?.attributedText?.size() ?? self.titleLabel?.text?.size(withAttributes: [NSAttributedString.Key.font: font]) {
            var tImageEdgeInsets = UIEdgeInsets.zero
            var tTitleEdgeInsets = UIEdgeInsets.zero
            var tContentEdgeInsets = UIEdgeInsets.zero
            
            let halfImageToTitleSpacing = imageToTitleSpacing / 2.0
            
            switch imageVerticalAlignment {
            case .bottom:
                tImageEdgeInsets.top = (textSize.height + imageToTitleSpacing) / 2.0
                tImageEdgeInsets.bottom = (-textSize.height - imageToTitleSpacing) / 2.0
                tTitleEdgeInsets.top = (-imageSize.height - imageToTitleSpacing) / 2.0
                tTitleEdgeInsets.bottom = (imageSize.height + imageToTitleSpacing) / 2.0
                tContentEdgeInsets.top = (min(imageSize.height, textSize.height) + imageToTitleSpacing) / 2.0
                tContentEdgeInsets.bottom = (min(imageSize.height, textSize.height) + imageToTitleSpacing) / 2.0
                contentVerticalAlignment = .center
            case .top:
                tImageEdgeInsets.top = (-textSize.height - imageToTitleSpacing) / 2.0
                tImageEdgeInsets.bottom = (textSize.height + imageToTitleSpacing) / 2.0
                tTitleEdgeInsets.top = (imageSize.height + imageToTitleSpacing) / 2.0
                tTitleEdgeInsets.bottom = (-imageSize.height - imageToTitleSpacing) / 2.0
                tContentEdgeInsets.top = (min(imageSize.height, textSize.height) + imageToTitleSpacing) / 2.0
                tContentEdgeInsets.bottom = (min(imageSize.height, textSize.height) + imageToTitleSpacing) / 2.0
                contentVerticalAlignment = .center
            case .center:
                contentVerticalAlignment = .center
            case .unset:
                break
            }
            
            switch imageHorizontalAlignment {
            case .left:
                tImageEdgeInsets.left = -halfImageToTitleSpacing
                tImageEdgeInsets.right = halfImageToTitleSpacing
                tTitleEdgeInsets.left = halfImageToTitleSpacing
                tTitleEdgeInsets.right = -halfImageToTitleSpacing
                tContentEdgeInsets.left = halfImageToTitleSpacing
                tContentEdgeInsets.right = halfImageToTitleSpacing
            case .right:
                tImageEdgeInsets.left = textSize.width + halfImageToTitleSpacing
                tImageEdgeInsets.right = -textSize.width - halfImageToTitleSpacing
                tTitleEdgeInsets.left = -imageSize.width - halfImageToTitleSpacing
                tTitleEdgeInsets.right = imageSize.width + halfImageToTitleSpacing
                tContentEdgeInsets.left = halfImageToTitleSpacing
                tContentEdgeInsets.right = halfImageToTitleSpacing
            case .center:
                tImageEdgeInsets.left = textSize.width / 2.0
                tImageEdgeInsets.right = -textSize.width / 2.0
                tTitleEdgeInsets.left = -imageSize.width / 2.0
                tTitleEdgeInsets.right = imageSize.width / 2.0
                tContentEdgeInsets.left = -((imageSize.width + textSize.width) - max(imageSize.width, textSize.width)) / 2.0
                tContentEdgeInsets.right = -((imageSize.width + textSize.width) - max(imageSize.width, textSize.width)) / 2.0
            case .unset:
                break
            }
            
            tContentEdgeInsets.top += extraContentEdgeInsets.top
            tContentEdgeInsets.bottom += extraContentEdgeInsets.bottom
            tContentEdgeInsets.left += extraContentEdgeInsets.left
            tContentEdgeInsets.right += extraContentEdgeInsets.right
            
            tImageEdgeInsets.top += extraImageEdgeInsets.top
            tImageEdgeInsets.bottom += extraImageEdgeInsets.bottom
            tImageEdgeInsets.left += extraImageEdgeInsets.left
            tImageEdgeInsets.right += extraImageEdgeInsets.right
            
            tTitleEdgeInsets.top += extraTitleEdgeInsets.top
            tTitleEdgeInsets.bottom += extraTitleEdgeInsets.bottom
            tTitleEdgeInsets.left += extraTitleEdgeInsets.left
            tTitleEdgeInsets.right += extraTitleEdgeInsets.right
            
            super.imageEdgeInsets = tImageEdgeInsets
            super.titleEdgeInsets = tTitleEdgeInsets
            super.contentEdgeInsets = tContentEdgeInsets
        } else {
            super.imageEdgeInsets = extraImageEdgeInsets
            super.titleEdgeInsets = extraTitleEdgeInsets
            super.contentEdgeInsets = extraContentEdgeInsets
        }
        
        super.layoutSubviews()
    }
}

extension LayoutableButton {
    static func makeVerticalCenteredButton(title: NSAttributedString?, image: UIImage?) -> LayoutableButton {
        let button = LayoutableButton()
        button.imageVerticalAlignment = .top
        button.imageHorizontalAlignment = .center
        button.setAttributedTitle(title, for: .normal)
        button.setImage(image, for: .normal)
        return button
    }
}

func makeButton(imageVerticalAlignment: LayoutableButton.VerticalAlignment, imageHorizontalAlignment: LayoutableButton.HorizontalAlignment, title: String) -> LayoutableButton {
    let button = LayoutableButton ()

    button.imageVerticalAlignment = imageVerticalAlignment
    button.imageHorizontalAlignment = imageHorizontalAlignment

    button.setTitle(title, for: .normal)

    // add image, border, ...

    return button
}

let button1 = makeButton(imageVerticalAlignment: .center, imageHorizontalAlignment: .left, title: "button1")
let button2 = makeButton(imageVerticalAlignment: .center, imageHorizontalAlignment: .right, title: "button2")
let button3 = makeButton(imageVerticalAlignment: .top, imageHorizontalAlignment: .center, title: "button3")
let button4 = makeButton(imageVerticalAlignment: .bottom, imageHorizontalAlignment: .center, title: "button4")
let button5 = makeButton(imageVerticalAlignment: .bottom, imageHorizontalAlignment: .center, title: "button5")
button5.contentEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)