@IBDesignable, @IBInspectableなカスタムビューを実装する

はじめに

どの画面に何のパーツがあるのか一目でわかるようにカスタムビューをIB上に表示したい時がありました。
@IBDesignable, @IBInspectableを使った実現方法を紹介します。

環境

Xcode 12.5.1
macOS Big Sur 11.5.2

完成形

完成すると動画のように変更がリアルタイムで確認できます。

大まかな実装手順

1. UIViewを継承したCocoa Touch Class(CustomView.swift)を作成する
2. xibファイル(CustomView.xib)を作成する
3. File's ownerでswiftファイルとxibファイルを紐付ける
4. @IBDesignable, @IBInspectableを使ってCustomView.swiftを実装する

次にCustomView.swiftの実装について詳しく見ていきます。

CustomView.swift

CustomViewでは受け取った文字列をUILabelに反映します。
文字列を画像のようにインスペクタ上で変更できるよう@IBInpspectableを宣言します。

また、カスタムビューの変更をIB上に表示するためにCustomViewに@IBDesignableを設定します。

CustomView.swift

@IBDesignable
class CustomView: UIView {
    @IBOutlet weak var label: UILabel!
    @IBInspectable var labelString: String = ""

    override init(frame: CGRect) {
        super.init(frame: frame)
        loadNib()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        loadNib()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        setupLabel()
    }

    private func loadNib() {
        guard let view = Bundle(for: type(of: self)).loadNibNamed("CustomView", owner: self, options: nil)?.first as? UIView else {
            return
        }
        view.frame = bounds
        addSubview(view)
    }

    private func setupLabel() {
        label.text = labelString
    }
}

最後に

カスタムビューがIB上で見えることで、どこに何があるか一目で分かります。
後からプロジェクトに入った方も実装を進めやすいと思いました。