Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20190122_ あるあるLT〜スマホアプリ開発エンジニア〜 Vol.2 _IBDesignableを活用する

149 views

Published on

iOS開発における、「あるある」としてUI要素のネストが深くなりがちであること、IBOutletやその値セットのコードが多量になる傾向があることを述べ、解決策としてIBDesignableの活用および Embedded FrameworkによるUI要素の分離に関して説明しています。

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

20190122_ あるあるLT〜スマホアプリ開発エンジニア〜 Vol.2 _IBDesignableを活用する

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

×