Recommandé
Contenu connexe
Similaire à DevIO Auto Layout 道場スライド
Similaire à DevIO Auto Layout 道場スライド (20)
DevIO Auto Layout 道場スライド
- 1. Developer Day Auto Layout 道場 1 A-1 掛川 敦史, iPhone アプリケーションサービス事業部 クラスメソッド株式会社 Ⓒ Classmethod, Inc. 2015年03月29日
- 2. Agenda • Auto Layout 概要 • Lesson 1 • 基本的な制約の使い方 • 高さが可変のセル • Lesson 2 • 制約を工夫して使う • パララックス効果 • Lesson 3 • 制約をコードから操作する • アニメーション 2Ⓒ Classmethod, Inc.
- 4. Auto Layout • 制約ベースのレイアウトシステム • iOS SDK 6.0 (Xcode 4.0) より導入された • Deployment Target 6.0 以上で利用可能 • Auto Layout が登場する前は、Autosizing を利用するか Frame をコードで計算して設定してレイアウトを組んでいた 4Ⓒ Classmethod, Inc.
- 5. Auto Layout Auto Layoutはアプリケーションのユーザインターフェ イス（特に画面レイアウト）を作成するシステムで、要素 間の関係を数学的に記述することによりこれを行います。 この関係を、個々の要素に対する制約、あるいは要素間の 制約として定義します。 Auto Layoutを導入すれば、画面の大きさや向き、地域 設定（言語など）の違いに応じて動的に変化する、汎用的 な画面レイアウトを作り出すことができます。 5Ⓒ Classmethod, Inc. Auto Layout ガイドより引用
- 6. 制約 6
- 7. Auto Layout Auto Layoutはアプリケーションのユーザインターフェ イス（特に画面レイアウト）を作成するシステムで、要素 間の関係を数学的に記述することによりこれを行います。 この関係を、個々の要素に対する制約、あるいは要素間の 制約として定義します。 Auto Layoutを導入すれば、画面の大きさや向き、地域 設定（言語など）の違いに応じて動的に変化する、汎用的 な画面レイアウトを作り出すことができます。 7Ⓒ Classmethod, Inc. Auto Layout ガイドより引用
- 8. 制約 (Constraint) • レイアウトを決定するためのルール • 実行時には NSLayoutConstraint というクラスのインスタ ンスでルールが表現されている • 主に他の UI コンポーネントとの相対的な位置・サイ ズを定義 • 親ビューもしくは兄弟ビューとの間のルールを定義 • 他の UI コンポーネントからの相対位置 • 他の UI コンポーネントを基準とした自身のサイズ • 自身のサイズ 8Ⓒ Classmethod, Inc.
- 9. 制約 (Constraint) • 制約を定義する方法は２通り • Storyboard や Xib などの Interface Builder 上 • コード • 制約は必ずしも厳密である必要はない • 「幅が 20 pt 以上」といった制約を定義することも可能 • 複数の制約が競合する場合には、優先順位が高い方が適用さ れる 9Ⓒ Classmethod, Inc.
- 10. Auto Layout Auto Layoutはアプリケーションのユーザインターフェ イス（特に画面レイアウト）を作成するシステムで、要素 間の関係を数学的に記述することによりこれを行います。 この関係を、個々の要素に対する制約、あるいは要素間の 制約として定義します。 Auto Layoutを導入すれば、画面の大きさや向き、地域 設定（言語など）の違いに応じて動的に変化する、汎用的 な画面レイアウトを作り出すことができます。 10Ⓒ Classmethod, Inc. Auto Layout ガイドより引用
- 11. 要素間の関係を数学的に記述 11Ⓒ Classmethod, Inc. attribute1 == multiplier attribute2 + constant NSLayoutConstraint Class Reference では、Auto Layout における UI コンポーネント間の関係は下記の 式で表されると記述されている
- 12. 例: ボタンを基準にラベルの位置を決める 12Ⓒ Classmethod, Inc. ラベルはボタンの 20pt 右に配置
- 13. 例: ボタンを基準にラベルの位置を決める 13Ⓒ Classmethod, Inc. ラベルの左端のX座標 = 1.0 ボタンの右端のX座標 + 20 ラベルはボタンの 20pt 右に配置
- 14. 例: ボタンを基準にラベルの位置を決める 14Ⓒ Classmethod, Inc. ラベルの左端のX座標 = 1.0 ボタンの右端のX座標 + 20 これが制約
- 15. 動的に変化するレイアウト 15
- 16. Auto Layout Auto Layoutはアプリケーションのユーザインターフェ イス（特に画面レイアウト）を作成するシステムで、要素 間の関係を数学的に記述することによりこれを行います。 この関係を、個々の要素に対する制約、あるいは要素間の 制約として定義します。 Auto Layoutを導入すれば、画面の大きさや向き、地域 設定（言語など）の違いに応じて動的に変化する、汎用的 な画面レイアウトを作り出すことができます。 16Ⓒ Classmethod, Inc. Auto Layout ガイドより引用
- 17. iPhone 5 発表以前のレイアウト • 端末の画面サイズは 3.5 inch のみだった • タブレットを除く • レイアウトのバリエーション • せいぜい Portrait と Landscape の違い程度 • Autosizing + Frame 計算で、絶対座標でレイアウトしても 特に問題なし 17Ⓒ Classmethod, Inc. 3.5 inch 320 x 480 単位: pt
- 18. 現在のレイアウト • 端末の画面サイズは 3.5, 4, 4.7, 5.5 inch の４種類 • タブレットを除く • レイアウトのバリエーション • 端末によって画面の幅も高さも異なる • Autosizing + Frame 計算でも対応できるけど、きちんと画 面サイズを計算に組み込む必要あり • レイアウト処理の記述が煩雑になってきた 18Ⓒ Classmethod, Inc. 3.5 inch 320 x 480 4 inch 320 x 568 4.7 inch 375 x 667 5.5 inch 414 x 736 単位: pt
- 19. Auto Layout を利用した場合 • 様々な画面サイズに対応して変化するレイアウトを宣 言的に定義することができる • 例：画面いっぱいに表示される親ビューに対して、上下左右 16pt のマージンを取ってビューを配置 • ビューの幅・高さは画面サイズに応じて自動的に計算される • iOS 8 から追加された Size Class にも対応 • Size Class 毎に制約を設定することも可能 • 今回は Size Class についての説明は割愛します 19Ⓒ Classmethod, Inc.
- 21. Leading & Trailing • 文字を記述する方向がことなる言語圏向けにレイアウ トをローカライズするために必要となる概念 • 文頭が右側である言語圏向けに、レイアウトが左右反転した UI を提供することが可能 21Ⓒ Classmethod, Inc.
- 22. Leading & Trailing • Leading • 文字列の先頭側 • 日本語や英語など、多くの言語圏では左側 • Trailing • 文字列の末尾側 • 多くの言語圏では右側 22Ⓒ Classmethod, Inc.
- 23. Leading & Trailing 23Ⓒ Classmethod, Inc. 英語 アラビア語
- 24. 制約の種類 24
- 25. 制約の種類 • 制約は３種類に分類できる • アライメントに関する制約 • 相対位置に関する制約 • サイズに関する制約 25Ⓒ Classmethod, Inc.
- 26. アライメントに関する制約 • Leading (Left or Right) Alignment • Trailing (Right or Left) Alignment • Top Alignment • Bottom Alignment • Center X Alignment • Center Y Alignment • Baseline Alignment 26Ⓒ Classmethod, Inc.
- 27. アライメントに関する制約 27Ⓒ Classmethod, Inc. Leading Alignment Center X Alignment 左 え 中央 え
- 28. 相対位置に関する制約 • Horizontal Space • Vertical Space 28Ⓒ Classmethod, Inc.
- 29. 相対位置に関する制約 29Ⓒ Classmethod, Inc. Horizontal Space コンポーネント間のスペース
- 30. サイズに関する制約 • Width • Height • Equal Widths • Equal Heights 30Ⓒ Classmethod, Inc.
- 31. サイズに関する制約 31Ⓒ Classmethod, Inc. Equal Width 幅が等しい
- 32. Lesson 1 32
- 34. デモ 34
- 35. 作ってみよう 35
- 36. 実装すること 1. 適切に制約を配置する 2. セルの高さを指定する 36Ⓒ Classmethod, Inc.
- 37. 1. 適切に制約を配置する 37Ⓒ Classmethod, Inc. • ContentView - Label 間 の制約 • Label - Label 間 の制約
- 38. 2. セルの高さを指定する (iOS 8) • セルの高さとして UITableViewAutomaticDimension を指定する 38Ⓒ Classmethod, Inc. - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return UITableViewAutomaticDimension; }
- 39. 2. セルの高さを指定する (iOS 7) • UITableViewAutomaticDimension は使用不可 • サイズ計測用のセルを使用して高さを計算する 39Ⓒ Classmethod, Inc.
- 40. Lesson 2 40
- 42. デモ 42
- 44. 作ってみよう 44
- 45. スクロール時の動きの実現方法 • イメージビューの高さがスクロールに合わせて変化す る • contentMode • Aspect Fill (UIViewContentModeScaleAspectFill) 45Ⓒ Classmethod, Inc. これらの組み合わせで、あたかもイメージビューが ビューの下にもぐっていくように見せている
- 46. イメージビューのサイズ 46Ⓒ Classmethod, Inc. contentOffset.y == 0 contentOffset.y >= 0 UIImageView の Frame UIImageView の Frame
- 47. イメージビューのサイズ 47Ⓒ Classmethod, Inc. contentOffset.y == 0 contentOffset.y >= 0 UIImageView の Frame UIImageView の Frameナビゲーションバーの下端にぴったり くっついた状態で、イメージビューの 高さが小さくなっていく
- 48. イメージビューのサイズ 48Ⓒ Classmethod, Inc. contentOffset.y == 0 contentOffset.y <= 0 UIImageView の Frame UIImageView の Frame
- 49. イメージビューのサイズ 49Ⓒ Classmethod, Inc. contentOffset.y == 0 contentOffset.y <= 0 UIImageView の Frame UIImageView の Frame ナビゲーションバーの下端にぴったり くっついた状態で、イメージビューの 高さが大きくなっていく
- 50. Aspect Fill 50Ⓒ Classmethod, Inc. contentOffset.y == 0 contentOffset.y >= 0 実画像サイズ 実画像サイズ
- 51. Aspect Fill 51Ⓒ Classmethod, Inc. contentOffset.y == 0 contentOffset.y >= 0 実画像サイズ 実画像サイズ イメージビューの高さが小さくなると、 画像のスケールはそのままに画像の中 央部分が表示され続ける
- 52. Aspect Fill 52Ⓒ Classmethod, Inc. contentOffset.y == 0 contentOffset.y <= 0 実画像サイズ 実画像サイズ
- 53. Aspect Fill 53Ⓒ Classmethod, Inc. contentOffset.y == 0 contentOffset.y <= 0 実画像サイズ 実画像サイズ イメージビューの高さが大きくなると、 画像のスケールも大きくなって画像が 伸びたように見える
- 54. ポイント • イメージビューと Top Layout Guide の間 を 0pt にする 制約は Priority を 999 以下に設定する • スクロール時に灰色のビューがナビゲーションバーの下にもぐりこむ とイメージビューが押し上げられて、上記の制約を満たさない状態に なってしまう • Priority が 1000 だと実行時コンソールにエラーが出力さ れてしまうが、999 にすればエラーが出力されない • Priority が 1000 の場合、その制約は必ず守られなければならない (Required) という意味になる • Priority が 999 であれば必須ではなくなるので、制約は出来る限り 守られることになる 54Ⓒ Classmethod, Inc.
- 55. ポイント • 画像サイズはイメージビューの初期サイズとアスペク ト比を合わせるといい感じになる • 画面サイズによって初期サイズのアスペクト比が異なる場合、 十分な大きさを持った正方形にしておくといい 55Ⓒ Classmethod, Inc.
- 56. Lesson 3 56
- 57. デモ 57
- 58. 作ってみよう 58
- 60. 初期状態 60Ⓒ Classmethod, Inc. メニューの幅の分だけTrailing Space をマイナスする。 Viewを画面の外に配置することで非表 示にしている。
- 62. メニュー展開状態 62Ⓒ Classmethod, Inc. Trailing Space = 0 にすることでメ ニューの右端と画面の右端が う。
- 63. メニュー展開状態 63Ⓒ Classmethod, Inc. Trailing Space = 0 にすることでメ ニューの右端と画面の右端が う。 この過程をアニメーションしたい！
- 64. 制約はOutletで接続できる 64Ⓒ Classmethod, Inc. Type: NSLayoutConstraint
- 65. 制約の変更をアニメーションする • 制約の値を変更する • NSLayoutConstraint のプロパティ constant に値を代入する • Outlet で接続した制約の値をコード上で変更することで画面の 表示を動的に変化させることが可能 • アニメーションさせるには • 制約の値を変更したあとに明示的に layoutIfNeeded を呼ぶ 必要がある • アニメーションの Blocks 内で layoutIfNeeded を呼ぶこと でアニメーションを実現する 65Ⓒ Classmethod, Inc.
- 66. ポイント • 制約のOutlet接続 • 制約を Outlet で接続することで、動的に制約の値を変更す ることが可能になる • layoutIfNeeded • 通常のアニメーションのように記述してしまうと制約の更新 はアニメーションしない • NSLayoutConstraint の constant に値を代入した場合、即 座に layoutSubViews が呼ばれるわけではない • View の更新をアニメーションするという意味でアニメー ションのBlocks 内に layoutIfNeeded を記述する 66Ⓒ Classmethod, Inc.
- 67. まとめ • Auto Layout はとっつきづらいけど、慣れるとそん なに難しくない • 複雑・動的なレイアウトにも対応できる • 制約を工夫して付ける • 制約をコードから操作する • とはいえ限界もあるので、Frame とうまく使い分けることも 必要 67Ⓒ Classmethod, Inc.
- 68. Developer Day ご静聴ありがとうございました。 スライドは後日ブログで公開します。 68 A-1 Ⓒ Classmethod, Inc. #cmdevio2015