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