Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UIViewController in XIB + IBDesignable

Avatar for Akifumi Fukaya 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.

Avatar for Akifumi Fukaya

Akifumi Fukaya

November 13, 2018
Tweet

More Decks by Akifumi Fukaya

Other Decks in Technology

Transcript

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

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

    ◦ アカウントID ◦ プロフィール画像 ◦ 説明文 • Github ◦ https://github.com/akifumi/uiviewcontroller-in-xib 3
  3. ProfileViewController.swift final class ProfileViewController: UIViewController { var user: User! …

    override func viewDidLoad() { super.viewDidLoad() … } } イニシャライザを定義できないため、   必須パラメータをIUOにしなければならない。 6
  4. 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
  5. Storyboardの問題点 • イニシャライザを定義できない • 必要な値を、定数(let)として定義することができない • そのため、Implicit Unwrap Optionalを使うか、Nullableを使って定義しなければな らない

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

  7. 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
  8. 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
  9. 14

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

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

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

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