IBDesignable を活用する

2019/01/22 あるあるLT 登壇資料

Transcript

1. IBDesignable を活用する 2019/01/22 - あるあるLT
2. Self Introduction 伊賀裕展（いが　ひろのぶ） iOS Engineer ( + Android, Serverside Kotlin, Flutterを少し) Twitter: @iganin_dev GitHub: https://github.com/HironobuIga Qiita: https://qiita.com/iganin
3. 話の流れ 1. 最近開発していて個人的に起こっていること 2. アンチパターンと思われる解消方法 3. IBDesignable, IBInspectableを使う 4. IBDesignable, IBInspectable使用時の問題点 5. 問題点の解消 6. まとめ
4. 最近開発していて 左の画面UI • 有限要素 ◦ そのほかの動植物 -> 上限要素数5とします • 全体をスクロールさせたい このような場合に従来TableViewで作成していた画面を ScrollView + StackView で作成することが増えてきました
5. 問題点 • Storyboardに直接UIコンポーネントを置くと Interface Builder上のViewのネストが深くなる • 増殖するIBOutlet…. • 増えていくIBOutletへの値をセットするコード ... • 低下するViewの再利用性... • Storyboard上で確認できない layerプロパティ
6. たまにやるパターン 先ほどのCardViewが対象 1. ViewをXibベースで作成 2. StoryboardにベースのViewだけ置く 3. コードで1を2のベースに貼り付ける IBでのUI生成の利点がなくなってしまう • コンパイルせずにUIを見れる • 様々なパターンをUI上で試せる
7. IBDesignableを使用する IBDesignable • Interface Builder上でIBDesignableで定義したViewを表示できる • 上記対象のViewのクラス定義に @IBDesignableを付与する IBInspectable • Interface Builder上でIBInspectableとしたプロパティを変更できる ◦ UIViewのBackgroundColorなどのイメージ • 対象のプロパティの @IBInspectableを付与する
8. 具体的な実装 1. 分離したクラス定義に @IBDesignableを付与 （※minimum実装ならここまで） 2. Storyboard上から修正を加えたいプロパティを IBInspectableを使用して定義 a. set, get 経由でborderColorや cornerRadiusも設定可能 b. didSet内でViewの更新処理を入れたり
9. 具体的な実装 1. 分離したクラス定義に @IBDesignableを付与 （※minimum実装ならここまで） 2. Storyboard上から修正を加えたいプロパティを IBInspectableを使用して定義 a. set, get 経由でborderColorや cornerRadiusも設定可能 b. didSet内でViewの更新処理を入れたり 3. 初期化のタイミングで実行している処理を prepareForInterfaceBuilderに記述 a. viewの角丸、 borderなど b. awakeFromNib等はIB上では実行されな いため
10. 改修結果 • ネストが減った
11. 改修結果 • ネストが減った • IBOutletが減った • 値セットのコード量が減った ◦ 各Viewコンポーネントへ細分化された • Viewの再利用性が高まった
12. いい感じに見えます ….が
13. IBDesignableの問題点 Interface Builderの挙動が遅くなる、不安定になる • IBDesignableを使用しているとコードの修正を行った後に、 Interface Builder上でビルドが走るようにな り、挙動が遅く、不安定になります Interface Builder上で確認できないことが多い • 使っているとわかりますが、 Interface Builder上で表示されないことが結構な割合であります
14. なぜ起きるか ビルドターゲットがアプリモジュールと同じ場合、 Storyboardのプレビュー作成時にアプリ全体のビルドが走るため ※Storyboardのプレビュー作成時のタイミングでStoryboard内に含まれる IBDesignableクラスを集めて、それらが含まれるモジュールを全てビルドします
15. 解決する 方針 1. IBDesignableのView要素をEmbededFrameworkに切り出す 2. 別ビルドターゲットとなることで、Storyboard表示時のIBDesignableのビルドは IBDesignableが含まれるモジュール内のみになる 3. アプリと同一のモジュールに含まれていた時に比べ、Storyboard表示時の速度が 改善する
16. Embedded Framework化 インターネット上にいくつかの記事がありますが、概要は以下です。 1. File > New > Target > Cocoa Touch Frameworkを追加 2. 使用元のEmbedded Framework, Linked Frameworks and Librariesに追加 ◦ おそらくですが、1の段階で自動的になっています 3. 分離したいクラスファイルを該当のフォルダへ移動 4. 分離したクラスのターゲットを変更 5. 該当クラスのファイル内のアクセス修飾子を変更 ◦ internal -> public or openに。 ◦ internal=同一モジュール内のみで参照可能 ◦ public=モジュール外からも参照可能。継承は不可。 ◦ open=モジュール外から参照可能。継承も可能。
17. まとめ • IBDesignable, IBInspectableを使用してViewの再利用性を高める • Embeded FrameworkにIBDesignable要素を分離することでInterface Builder をより効率的に使用できるようにする
18. 参考リポジトリ 参考用にサンプルのプロジェクトを作成しています。 https://github.com/HironobuIga/IBDesignable_Sample