• 2023/7/4
• 4分

【Swift/UIKit】@IBDesignableと@IBInspectableの使い方！Interface BuilderからのUI編集

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

参考文献：公式リファレンス：What are @IBDesignable and @IBInspectable in Swift?

SwiftのStoryboard使用時に役にたつ@IBInspectableとはどのようなものなのかについてまとめていきます。

@IBInspectableとは？

Swiftの@IBInspectableとはインターフェースをInterface Builder(Storyboardファイル形式)で構築する際に使用できるアノテーションです。このアノテーションをプロパティの前にマークすることでInterface Builder(IB)上から直接プロパティの値を変更できるようにすることができます。

実際のビルドにもIBから設定した値が反映されるので、簡単に見た目を変更することができるようになります。

使い方

では実際の使用方法を見てみます。まずはCustomViewクラスというUIViewクラスを継承したビューを定義します。そのプロパティとしてcornerRadiusを定義し、プロパティ更新時に自身の見た目に反映されるようにdidSetでlayer.cornerRadiusプロパティに格納されるようにしておきます。

おすすめ記事：【Swift】プロパティオブザーバとは？willSetとdidSetの使い方

class CustomView: UIView {
    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }
}

クラスが定義できたらStoryboardファイルから適当なViewControllerにUIViewを追加し、インスペクションからCustomViewを選択します。わかりやすく背景はグレーにしておきました。

すると右から3個目の場所から@IBInspectableをセットしたパラメータがいじれるようになります。もしうまく反映されない場合は一度Xcodeを閉じて再度立ち上げてみてください。

ですがこの値を変更してもビルドすれば変化が確認できますが、IBに表示されているUIからでは確認できません。それを可能にするのが@IBDesignableです。

@IBDesignableとは？

@IBDesignableも@IBInspectable同様にインターフェースをInterface Builder(Storyboardファイル形式)で構築する際に使用できるアノテーションの1つです。このアノテーションをクラスにマークすることでそのクラスのUIの変化をIBのUIにも反映させることができます。

使い方

では先ほどのCustomViewクラスを少し拡張してborderColorとborderWidthを追加しておきます。またクラス定義の上に@IBDesignableをマークしておきます。

@IBDesignable
class CustomView: UIView {
    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }
    
    @IBInspectable var borderColor: UIColor = UIColor.clear {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }
    
    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
}

これで再度IBを見てみると設定できるパラメータにborderColorとborderWidthが追加され、変化させると表示されているUIもリアルタイムに変化していくことがわかります。

failed to render and update auto layout status for viewcontroller (byz-38-t0r): failed to launch designables agent because tool was shutting down. check the console for a more detailed description and please file a bug report at feedbackassistant.apple.com.

もし以下のようなエラーが出てうまく反映されない場合は、Xcodeを一度閉じてXcodeアプリ自体を一度終了させてから再度立ち上げるとうまくいきました。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。