Xcode
iOS
Swift
IBInspectable
IBDesignable

今更ながらIBDesignableとIBInspectableについて

More than 1 year has passed since last update.

そもそもIBDesignableとIBInspectableって何もの?

Xcode 6から新たにできるようになった機能です。
遡ること3年前のWWDC 2014に発表された機能です。(ずいぶん前ですが。。。。)
使ってみようと思ってずいぶん期間が経過してしまいました。。。

IBDesignableとIBInspectableでできること。

IBDesignableとIBInspectable修飾子をつけることによってStoryboard上で見た目、カスタムの属性を変更できます。

  • IBDesignable
    • Storyboard上にリアルタイムで反映。シミュレータや実機でのデバックをしなくても見栄えを確認できちゃう優れもの。
  • IBInspectable
    • Storyboard上で属性変更できる。優れもの。

とりあえずやってみよー

今回作ったものはGithubに上がってます。
※ 範囲選択可能なカレンダーを作ってみました。(おまけ情報)

IBDesignable

とりあえず使い方。

@IBDesignable
class SampleView: UIView {

    override func draw(_ rect: CGRect) {
        // Drawing code
    }

}

はい。これでIBDesignableが使えるようになりました。

えっ?何こいつ。フザケンナヨって?

はい。そう思います。
IBDesignableというのはカスタマイズした見た目をStoryboard上で変更箇所がリアルタイムで閲覧できる機能になります。(Xibで作ったものやロジックで書いたコードも)

@IBDesignable
public class CalendarView: UIView{
      ~ カレンダー表示機能 ~
}

そうすることでカスタムで定義したViewをStoryboardに載せると以下のように表示することができるようになります。

スクリーンショット 2017-12-12 11.47.11.png

Sample_2.gif

これがIBDesignableの特徴です。

IBInspectable

では次にIBInspectableについてですが
簡潔にいうと「Storyboardから値をいじれる」ということです。
全てを変更できるわけではなく設定できる値(クラス)に決まりがあります。

クラス名
Bool
Int
CGFloat
Double
String
CGPoint
CGSize
CGRect
UIColor
UIImage

では、実際のコードを見ていきましょう。

@IBInspectable var circleColor: UIColor = UIColor.white {
        didSet {
             // ほにゃらら
        }
    }

こうすることによってStoryboard上で値が変更できるようになります。

スクリーンショット 2017-12-12 11.47.11.png

Sample3.gif

circleColorがStoryboard上にあることがわかります。
ここの値を変更することでViewに対しても値が変わります。
実際にGifでは色を変更しているのが確認できると思います。
これがIBInspectableの特性です。

まとめ

楽しかったです。w