UIViewController in XIB + IBDesignable @akifumi 1

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

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

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

UIViewController in Storyboard 5

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

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

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

9

UIViewController in XIB 10

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

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

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

14

+ IBDesignable 15

AccountView 16

AccountDescriptionView 17

Introduce IBDesignable & IBInspectable 18

Introduce IBDesignable & IBInspectable 19

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

21

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

Thank you for your attention. 23