StoryboardでUIButtonの見た目を編集したい(グラデーションとか)

customClassを作る

cocoaTouchから新規のswiftファイルを作成して、下記を全コピペ
(どうせコピペするから、あんま意味ないけど選ぶならクラスのとこはUIButton)

GradientButton.swift

Copied!

@IBDesignable
class GradientButton: UIButton {
    let gradientLayer = CAGradientLayer()
    
    @IBInspectable
//両端の色を定義
    var topGradientColor: UIColor? {
        didSet {
            setGradient(topGradientColor: topGradientColor, bottomGradientColor: bottomGradientColor)
        }
    }
    
    @IBInspectable
//両端の色を定義
    var bottomGradientColor: UIColor? {
        didSet {
            setGradient(topGradientColor: topGradientColor, bottomGradientColor: bottomGradientColor)
        }
    }
    
//storyboardで設定できる項目を定義
    private func setGradient(topGradientColor: UIColor?, bottomGradientColor: UIColor?) {
        if let topGradientColor = topGradientColor, let bottomGradientColor = bottomGradientColor {
            gradientLayer.frame = bounds
            gradientLayer.colors = [topGradientColor.cgColor, bottomGradientColor.cgColor]
            gradientLayer.borderColor = layer.borderColor
            gradientLayer.borderWidth = layer.borderWidth
            gradientLayer.cornerRadius = layer.cornerRadius
            layer.insertSublayer(gradientLayer, at: 0)
        } else {
            gradientLayer.removeFromSuperlayer()
        }
    }
}

配置して設定

storyboardにUIButtonを配置しCustom ClassをGradientButtonに設定して
少し待てば設定が可能に

参考記事

・How to Add a Rounded Gradient Button in Xcode’s Interface Builder