UIコンポーネントを拡張してStoryBoardで出来るようにする

ユースケース

たとえばUIButtonを使って枠線を表示したいとき、ストーリーボード上の既存の設定値だけでは枠線を表示することができません。このような場合、ソースコードからプロパティをいじって枠線を追加するのが一般的なやり方です。しかし、UIに関してはストーリーボードで一括管理していたほうがあとからデザインを変更するのも簡単です。本来、ストーリーボードの設定項目にないものをストーリーボード上で編集できるようにするのがIBInspectable属性です。

IBInspectable属性

IBInspectable属性はストーリーボード上にカスタム項目を追加するための属性です。クラスのプロパティに対してIBInspectable属性を指定することでストーリーボード上に新たな属性を追加することができます。
たとえば枠線の設定ができるUIボタンをストーリーボード上で表示で使いたいとします。その場合、まずはUIButtonクラスを継承したクラスに対して枠線に関するプロパティをIBInspectable属性で指定します。

class BorderCustomButton: UIButton {
     @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    
    @IBInspectable var borderColor: UIColor = UIColor.clear {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }
    
}

次にストーリーボード上の枠線をつけたいUIボタンのクラスをBorderCustomButtonに変更します。

アトリビュートインスペクタを確認するとカスタマイズできる項目が増えていることが確認できます。あとは値を設定してUIの設定を行いましょう。