Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

iOS 9 Bootcamp #6 UIKit

1,787 views

Published on

iOS 9 で強化されたレイアウト周りの新機能について解説しました。

Published in: Software
  • Be the first to comment

iOS 9 Bootcamp #6 UIKit

  1. 1. iOS 9 UIKit iOS 9 週連続 Bootcamp 6週目 Hiraya Shingo @ classmethod, Inc
  2. 2. 自己紹介 • 平屋 真吾 • クラスメソッド株式会社 • モバイルアプリサービス部 • iOS アプリ開発 4年
  3. 3. What's New in iOS • UIKit は10項目 • UIStackView • NSLayoutAnchor • UILayoutGuide • UIApplicationDelegate の新メソッド • …
  4. 4. アジェンダ 1. UIStackView 2. NSLayoutAnchor 3. UILayoutGuide
  5. 5. UIStackView
  6. 6. UIStackView の概要
  7. 7. UIStackViewとは • view を縦横にレイアウトするためのクラス
  8. 8. UIStackViewとは • 新しい「何か」ができるようになる というよりは • これまで面倒だった実装作業を簡単にできる
  9. 9. UIStackView の利点 • AutoLayout の制約を設定する作業が減る • レビュー、メンテナンスしやすくなる
  10. 10. UIStackView の利点 • (例) ボタンを等間隔で配置する
  11. 11. UIStackView の利点 • Auto Layout の制約を直接設定した場合
  12. 12. UIStackView の利点 • UIStackView を使用した場合 (見やすい!)
  13. 13. UIStackView の注意点 • iOS 9 以降で使用可能 • Auto Layout を使い慣れていたほうが良い • UIStackView の仕組み自体を知ることが必要 • 後述します
  14. 14. UIStackView の仕組み(内部)
  15. 15. UIStackView の主要プロパティ 1. arrangedSubviews 2. axis 3. distribution 4. alignment 5. spacing
  16. 16. • UIStackView が管理する view の配列 arrangedSubviews
  17. 17. axis • 整列する方向 • Horizontal (水平) • Vertical (垂直)
  18. 18. distribution • 軸方向に view をどう並べるか • (例) FillEqually: 軸方向のサイズが等しくなる • axis が Horizontal の場合、幅が同じになる 軸
  19. 19. alignment • 軸に対する垂直方向に view をどう並べるか • (例) Fill: 軸に対する垂直のサイズが等しくなる • axis が Horizontal の場合、高さが同じになる 軸
  20. 20. spacing • view 間の間隔 軸
  21. 21. UIStackView の仕組み(外部)
  22. 22. UIStackView 自体のレイアウト • 最低限必要なこと • UIStackView の位置を指定する • 例えば、UIStackView の中心座標だけ指定
  23. 23. UIStackView 自体のレイアウト • 幅と高さは適切なサイズになる • UIStackView が管理する view の数やサイズ • UIStackView のプロパティに設定した値
  24. 24. UIStackView の使用例
  25. 25. • UITableView + UIStackView タイムライン画面 を 作成
  26. 26. • UITableView + UIStackView • UITableViewCell の中に UIStackView を配置する タイムライン画面 を 作成
  27. 27. • UITableView + UIStackView • UITableViewCell の中に UIStackView を配置する • さらに、UIStackView の中に UIStackView を配置する タイムライン画面 を 作成
  28. 28. タイムライン画面 を作成 • UITableViewController を用意
  29. 29. タイムライン画面 を作成 • UITableViewCell に Horizontal Stack View を 配置
  30. 30. タイムライン画面 を作成 • UIStackView と superView 間の制約を設定
  31. 31. タイムライン画面 を作成 • UIStackView のプロパティを設定 • Alignment: Top • Distribution: Fill • Spacing: 10
  32. 32. タイムライン画面 を作成 • プロフィール画像表示用の UIImageView を UIStackView の中に追加
  33. 33. タイムライン画面 を作成 • 続けて UIImageView のサイズの制約を設定 • width = 49 • height = 49
  34. 34. タイムライン画面 を作成 • Vertical Stack View を Horizontal Stack View の中に配置
  35. 35. タイムライン画面 を作成 • Vertical Stack View のプロパティを設定 • Alignment: Fill • Distribution: Fill • Spacing: 5
  36. 36. タイムライン画面 を作成 • メイン写真用の UIImageView を Vertical Stack View の中に追加
  37. 37. タイムライン画面 を作成 • 続けて UIImageView の • 高さの制約: 200 • Mode: Aspect Fill • Clip Subviews: YES
  38. 38. タイムライン画面 を作成 • メイン写真用の UIImageView の上に UILabel を2つ追加
  39. 39. タイムライン画面 を作成 • 上から2つめの UILabel の設定だけ変更 • Lines (行数): 0
  40. 40. タイムライン画面 を作成 • 画像や文字列を設定する
  41. 41. タイムライン画面 を作成 • UITableViewController 側の実装 • セルにデータを渡す処理 • 画像 • テキスト
  42. 42. タイムライン画面 を作成 • セルの高さを指定する • Self-Sizing Table View Cells (iOS 8 ∼) • self.tableView.rowHeight = UITableViewAutomaticDimension; • self.tableView.estimatedRowHeight = 44.0f;
  43. 43. タイムライン画面 を作成
  44. 44. UIStackView まとめ • view を縦横にレイアウトするためのクラス • iOS 9 以降で使用可能 • レイアウト実装のコストが下がる • メンテナンスしやすくなる
  45. 45. NSLayoutAnchor
  46. 46. NSLayoutAnchor の概要
  47. 47. NSLayoutAnchor とは • iOS 9 以降で使用可能 • NSLayoutConstraint を生成するためのクラス • 生成用のメソッド 6 個 • プロパティは無し
  48. 48. NSLayoutAnchor とは • iOS 9 で UIView に追加されたプロパティ (の一部) • NSLayoutXAxisAnchor *leadingAnchor • NSLayoutXAxisAnchor *trailingAnchor • NSLayoutYAxisAnchor *topAnchor • NSLayoutYAxisAnchor *bottomAnchor
  49. 49. NSLayoutAnchor とは • NSLayoutAnchor のメソッド (の一部) • constraintEqualToAnchor: • constraintGreaterThanOrEqualToAnchor: • constraintLessThanOrEqualToAnchor: • 他の view の Anchor と共に使用する
  50. 50. NSLayoutAnchor とは • (例) 2つの view の leading を合わせる制約の生成 • constraintEqualToAnchor メソッドを使って constraint を生成 • NSLayoutConstraint *constraint = [view.leadingAnchor constraintEqualToAnchor:otherView.leadingAnchor]
  51. 51. NSLayoutAnchor の使用例
  52. 52. WebViewController を作成 • WKWebView を全面に表示する ViewController を作る • WKWebView は IB 上にない • コードで制約を設定してみる
  53. 53. WebViewController を作成 • まずは leading の制約を設定 • webView.leadingAnchor = self.View.leadingAnchor webView.leadingAnchor
  54. 54. leading の制約を生成して active にする NSLayoutConstraint *leadingConstraint = [webView.leadingAnchor constraintEqualToAnchor:self.View.leadingAnchor]; leadingConstraint.active = YES;
  55. 55. WebViewController を作成 • 残りも同様に… • webView.topAnchor = self.View.topAnchor • webView.trailingAnchor = self.View.trailingAnchor • webView.bottomAnchor = self.View.bottomAnchor
  56. 56. trailing, top, bottom も同様に [webView.topAnchor constraintEqualToAnchor:self.View.topAnchor] .active = YES; [webView.trailingAnchor constraintEqualToAnchor:self.View.trailingAnchor] .active = YES; [webView.bottomAnchor constraintEqualToAnchor:self.View.bottomAnchor] .active = YES;
  57. 57. NSLayoutAnchor の利点 • コードが短くなり、読みやすくなる
  58. 58. iOS 8 以前だとこんな感じだった コードが [NSLayoutConstraint constraintWithItem:self.webView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0.0].active = YES; [NSLayoutConstraint constraintWithItem:self.webView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0.0].active = YES; [NSLayoutConstraint constraintWithItem:self.webView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0].active = YES; [NSLayoutConstraint constraintWithItem:self.webView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0].active = YES;
  59. 59. NSLayoutAnchor を使えば こうなります [webView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor] .active = YES; [webView.topAnchor constraintEqualToAnchor:self.View.topAnchor] .active = YES; [webView.trailingAnchor constraintEqualToAnchor:self.View.trailingAnchor] .active = YES; [webView.bottomAnchor constraintEqualToAnchor:self.View.bottomAnchor] .active = YES;
  60. 60. NSLayoutAnchor まとめ • iOS 9 以降で使用可能 • NSLayoutConstraint を生成するためのクラス • 制約を設定するコードが読みやすくなる
  61. 61. UILayoutGuide
  62. 62. UILayoutGuide の概要
  63. 63. UILayoutGuide とは • ホワイトスペースを定義するためのクラス • ホワイトスペース = コンテンツが無い領域
  64. 64. UILayoutGuide とは • (例) ボタンの間に空白部分をつくる
  65. 65. UILayoutGuide とは • (例) ボタンの間に空白部分をつくる UILayoutGuide
  66. 66. UILayoutGuide とは • UIView と同様に Anchor をプロパティにもつ • NSLayoutXAxisAnchor *leadingAnchor • NSLayoutXAxisAnchor *trailingAnchor • NSLayoutAnchor のメソッドを使用してレイ アウトを実装できる
  67. 67. UILayoutGuide とは • NSObject のサブクラス (view ではない) • ゆえに、UIView より軽量 • ダミーのビューを使う必要が無くなる
  68. 68. UILayoutGuide の注意点 • iOS 9 以降で使用可能 • コードでレイアウトを組む場合に使用可能 • Storyboard 上では使えない
  69. 69. UILayoutGuide の使用例
  70. 70. ボタンを等間隔に配置する
  71. 71. ボタンを等間隔に配置する fooButton barButton
  72. 72. ボタンを等間隔に配置する spacer1 spacer2 spacer3 fooButton barButton
  73. 73. ボタンを等間隔に配置する • まずは ボタンと UILayoutGuide を配置
  74. 74. ボタンを2つ作成して addSubview 呼ぶ UIButton *fooButton = ... [self.view addSubview:fooButton]; UIButton *barButton = ... [self.view addSubview:barButton];
  75. 75. UILayoutGuide を3つ作成して addLayoutGuide 呼ぶ UILayoutGuide *spacer1 = [UILayoutGuide new]; [self.view addLayoutGuide:spacer1]; UILayoutGuide *spacer2 = [UILayoutGuide new]; [self.view addLayoutGuide:spacer2]; UILayoutGuide *spacer3 = [UILayoutGuide new]; [self.view addLayoutGuide:spacer3];
  76. 76. ボタンを等間隔に配置する • 次に fooButton の Anchor を設定
  77. 77. ボタンを等間隔に配置する • fooButton.leadingAnchor = spacer1.trailingAnchor trailingAnchor leadingAnchor
  78. 78. foo ボタンの leadingAnchor [fooButton.leadingAnchor constraintEqualToAnchor:spacer1.trailingAnchor] .active = YES;
  79. 79. ボタンを等間隔に配置する • 残りも同様に… • fooButton.trailingAnchor = spacer2.leadingAnchor • fooButton.heightAnchor = 44.0 • fooButton.widthAnchor = barButton.widthAnchor • fooButton.centerYAnchor = self.view.centerYAnchor
  80. 80. UILayoutGuide まとめ • iOS 9 以降で使用可能 • ホワイトスペースを定義するためのクラス
  81. 81. まとめ
  82. 82. まとめ • UIStackView • NSLayoutAnchor • UILayoutGuide
  83. 83. まとめ • UIStackView • view を縦横にレイアウトするためのクラス • iOS 9 以降で使用可能 • レイアウト実装のコストが下がる
  84. 84. まとめ • NSLayoutAnchor • iOS 9 以降で使用可能 • NSLayoutConstraint を生成用のクラス • 制約を設定するコードが読みやすくなる
  85. 85. まとめ • UILayoutGuide • iOS 9 以降で使用可能 • ホワイトスペースを定義するためのクラス
  86. 86. 参考資料 • WWDC 2015 スライド • Mysteries of Auto Layout, Part 1 • Class Reference • UIStackView Class Reference • NSLayoutAnchor Class Reference • UILayoutGuide Class Reference
  87. 87. サンプルコード • Github • https://github.com/hirayaCM/iOS9UIKitDemos
  88. 88. Thank you!

×