そもそも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に載せると以下のように表示することができるようになります。
これがIBDesignableの特徴です。
IBInspectable
では次にIBInspectableについてですが
簡潔にいうと「Storyboardから値をいじれる」ということです。
全てを変更できるわけではなく設定できる値(クラス)に決まりがあります。
| クラス名 |
|---|
| Bool |
| Int |
| CGFloat |
| Double |
| String |
| CGPoint |
| CGSize |
| CGRect |
| UIColor |
| UIImage |
では、実際のコードを見ていきましょう。
@IBInspectable var circleColor: UIColor = UIColor.white {
didSet {
// ほにゃらら
}
}
こうすることによってStoryboard上で値が変更できるようになります。
circleColorがStoryboard上にあることがわかります。
ここの値を変更することでViewに対しても値が変わります。
実際にGifでは色を変更しているのが確認できると思います。
これがIBInspectableの特性です。
まとめ
楽しかったです。w