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.

Transcript

1. UIViewController in XIB + IBDesignable
   @akifumi
   1
   

   View Slide

2. 自己紹介
   ● 名前
   ○ 深谷 哲史（ふかや あきふみ）
   ● 会社
   ○ 株式会社メルペイ（2018/06 ~ ）
   ● 職種
   ○ ソフトウェアエンジニア（ iOS）
   ● アカウント
   ○ Twitter: @akifumifukaya
   ○ Facebook: Akifumi Fukaya
   ○ Github: akifumi
   2
   

   View Slide

3. こんな画面を作ってみる
   ● プロフィール画面
   ● User オブジェクトを受け取って表示する
   ● 表示内容
   ○ ユーザー名
   ○ アカウントID
   ○ プロフィール画像
   ○ 説明文
   ● Github
   ○ https://github.com/akifumi/uiviewcontroller-in-xib
   3
   

   View Slide

4. UIViewControllerのインターフェースは何を
   使用して作っていますか？
   4
   

   View Slide

5. UIViewController in Storyboard
   5
   

   View Slide

6. ProfileViewController.swift
   final class ProfileViewController: UIViewController {
   var user: User!
   …
   override func viewDidLoad() {
   super.viewDidLoad()
   …
   }
   }
   イニシャライザを定義できないため、
   　 必須パラメータをIUOにしなければならない。
   6
   

   View Slide

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
   

   View Slide

8. Storyboardの問題点
   ● イニシャライザを定義できない
   ● 必要な値を、定数(let)として定義することができない
   ● そのため、Implicit Unwrap Optionalを使うか、Nullableを使って定義しなければな
   らない
   ○ IUOの場合、実際に値にアクセスする前に、値を代入しておかなければならない
   ○ Nullableの場合、nilのハンドリングを記載しなければならない
   8
   

   View Slide

9. View Slide

10. UIViewController in XIB
    10
    

    View Slide

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
    

    View Slide

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
    

    View Slide

13. XIBの利点
    ● イニシャライザーを作成することができる
    ● 初期化時に必要な値を渡すことができるため、必須な値を定数として定義すること
    ができる
    ● そのため、Implicit Unwrap Optionalを使わないで済む
    13
    

    View Slide

14. View Slide

15. + IBDesignable
    15
    

    View Slide

16. AccountView
    16
    

    View Slide

17. AccountDescriptionView
    17
    

    View Slide

18. Introduce IBDesignable & IBInspectable
    18
    

    View Slide

19. Introduce IBDesignable & IBInspectable
    19
    

    View Slide

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

    View Slide

21. View Slide

22. Conclusion
    ● UIViewControllerの作成にXIBを使うことで、Storyboardを使うよりスッキリした
    コードを書くことができる
    ● XIB & IBDesignable を活用することで、ビューコンポーネントを細かく分割できる
    ● 細かく分割することで、リーダブルなコードになり管理しやすくなる
    ● IBInspectable を活用することで、IB上で動的に値を代入して確認ができる
    ● わからないことや気になる点などありましたら、 akifumi/uiviewcontroller-in-xib を
    見ながら話しましょう！
    22
    

    View Slide

23. Thank you for your attention.
    23
    

    View Slide