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

UIViewController in XIB + IBDesignable

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. 自己紹介 • 名前 ◦ 深谷 哲史(ふかや あきふみ) • 会社 ◦

    株式会社メルペイ(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