customClassを作る
cocoaTouch
から新規のswift
ファイルを作成して、下記を全コピペ
(どうせコピペするから、あんま意味ないけど選ぶならクラスのとこはUIButton
)
GradientButton.swift
@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