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

UIViewController in XIB + IBDesignable

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.

Akifumi Fukaya

November 13, 2018
Tweet

More Decks by Akifumi Fukaya

Other Decks in Technology

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