Save 37% off PRO during our Black Friday Sale! »

UIViewController in XIB + IBDesignable

Ee4f2266abb0268305431dbbcade59d2?s=47 Akifumi Fukaya
November 13, 2018

UIViewController in XIB + IBDesignable

I'm recommending to create UIViewController using XIB.
IBDesignable & IBInspectable are very powerful tools to develop UI components in interface builder.

Ee4f2266abb0268305431dbbcade59d2?s=128

Akifumi Fukaya

November 13, 2018
Tweet

Transcript

  1. UIViewController in XIB + IBDesignable @akifumi 1

  2. 自己紹介 • 名前 ◦ 深谷 哲史(ふかや あきふみ) • 会社 ◦

    株式会社メルペイ(2018/06 ~ ) • 職種 ◦ ソフトウェアエンジニア( iOS) • アカウント ◦ Twitter: @akifumifukaya ◦ Facebook: Akifumi Fukaya ◦ Github: akifumi 2
  3. こんな画面を作ってみる • プロフィール画面 • User オブジェクトを受け取って表示する • 表示内容 ◦ ユーザー名

    ◦ アカウントID ◦ プロフィール画像 ◦ 説明文 • Github ◦ https://github.com/akifumi/uiviewcontroller-in-xib 3
  4. UIViewControllerのインターフェースは何を 使用して作っていますか? 4

  5. UIViewController in Storyboard 5

  6. ProfileViewController.swift final class ProfileViewController: UIViewController { var user: User! …

    override func viewDidLoad() { super.viewDidLoad() … } } イニシャライザを定義できないため、   必須パラメータをIUOにしなければならない。 6
  7. How to use ProfileViewController let user = User( id: "@akifumifukaya",

    name: "akifumi", profileImageUrl: "https://xxx.jpg", description: "xxx" ) let bundle = Bundle(for: ProfileViewController.self) let storyboard = UIStoryboard(name: "Profile", bundle: bundle) guard let profileViewController = storyboard.instantiateInitialViewController() as? ProfileViewController else { return } vc.user = user let navigationController = UINavigationController(rootViewController: profileViewController) UIApplication.shared.open(navigationController) 外部から値を代入 7
  8. Storyboardの問題点 • イニシャライザを定義できない • 必要な値を、定数(let)として定義することができない • そのため、Implicit Unwrap Optionalを使うか、Nullableを使って定義しなければな らない

    ◦ IUOの場合、実際に値にアクセスする前に、値を代入しておかなければならない ◦ Nullableの場合、nilのハンドリングを記載しなければならない 8
  9. 9

  10. UIViewController in XIB 10

  11. ProfileViewController.swift final class ProfileViewController: UIViewController { private let user: User

    … init(user: User) { self.user = user super.init(nibName: nil, bundle: Bundle(for: type(of: self))) } @available(*, unavailable) required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } … } 定数(let)として定義することができる イニシャライザを定義することができる 11
  12. How to call ProfileViewController let user = User( id: "@akifumifukaya",

    name: "akifumi", profileImageUrl: "https://xxx.jpg", description: "xxx" ) let profileViewController = ProfileViewController(user: user) let navigationController = UINavigationController(rootViewController: profileViewController) UIApplication.shared.open(navigationController) インスタンス生成時に必須パラメーターを指定 12
  13. XIBの利点 • イニシャライザーを作成することができる • 初期化時に必要な値を渡すことができるため、必須な値を定数として定義すること ができる • そのため、Implicit Unwrap Optionalを使わないで済む

    13
  14. 14

  15. + IBDesignable 15

  16. AccountView 16

  17. AccountDescriptionView 17

  18. Introduce IBDesignable & IBInspectable 18

  19. Introduce IBDesignable & IBInspectable 19

  20. Introduce IBDesignable & IBInspectable • IBDesignable ◦ InterfaceBuilder上で、カスタムビューを表示できる ◦ Viewのコンポーネントを細かい単位で分離することができる

    ◦ 細かく分割することで再利用が可能 ◦ クラスごとのコード量を減らすことができ、コードがスッキリする ◦ ビュー階層を減らせることができるので、 xibの管理が容易になる • IBInspectable ◦ InterfaceBuilder上で、カスタムビューの変数に値を代入できる ◦ UI要素に動的に値を入れることができ、 UIの状態を見ることができる ◦ Viewコンポーネントを使用する側で、値を変更できる 20
  21. 21

  22. Conclusion • UIViewControllerの作成にXIBを使うことで、Storyboardを使うよりスッキリした コードを書くことができる • XIB & IBDesignable を活用することで、ビューコンポーネントを細かく分割できる •

    細かく分割することで、リーダブルなコードになり管理しやすくなる • IBInspectable を活用することで、IB上で動的に値を代入して確認ができる • わからないことや気になる点などありましたら、 akifumi/uiviewcontroller-in-xib を 見ながら話しましょう! 22
  23. Thank you for your attention. 23