iOS6 Auto Layout   2012/12/10クラスメソッド かけがわ
自己紹介
アジェンダ• Auto Layout  •   Auto Layoutの基礎知識  •   Interface BuilderでAuto Layoutを設定  •   ソースコードでAuto Layoutを設定  •   Auto Layout...
Auto Layoutの基礎知識
Auto Layout• 「制約」ベースのレイアウトシステム• Autosizingを置き換えるもの• Macアプリケーションでは、OS X Lionで既  に導入されている
Constraint• レイアウトを決定するための「制約」• 他のUIコンポーネントとの相対的な位置・  サイズを定義• 制約はNSLayoutConstraintクラスのインス  タンスによって表現される
Auto LayoutとAutosizingの違い           Autosizing• サブビューの親ビューに対する相対関係  を指定する • 親ビューとの間のマージン • 親ビューに追従してリサイズするか
Auto LayoutとAutosizingの違い          Auto Layout• レイアウト上のルールを制約として定義 • サブビューの親ビューに対する相対位置 • 兄弟ビューとの相対位置やサイズ • 自身のサイズ• ルールは必ず...
Leading & Trailing• アラビア語など、右側が文頭になる環境に対する、レイアウ  ト上のローカライズを容易にするための機能• Leadingは文字列の先頭側、Trailingは文字列の末尾側を指す• 日本語や英語の環境では、Le...
Leading & Trailing親ビュー内でのボタンの水平方向のアライメントに関して、Leading側に寄せて20pxのスペースを置くという制約を追加した場合                     OSの言語設定がアラビア  OSの言語設...
Auto Layoutの使い方
使い方使い方は2通り• Interface Builder上で制約を設定する• ソースコードでNSLayoutConstraintクラス  を使って設定する
Interface Builderで制約を設定す                る
Auto Layoutの切り替え• ファイルインスペクタのUse  Autolayoutを有効にする• Use Autolayoutを無効にすれば従  来通り• iOS5.x以前でUse Autolayoutを有効  にするとクラッシュするので注意
Interface Builder上のメニュー
Interface Builder上のメニュー
Interface Builder上のメニュー             コンポーネントのアライ             メントに関する制約を追             加する操作
Interface Builder上のメニュー             コンポーネントの相対的             な位置やサイズを固定す             る制約を追加する操作
Interface Builder上のメニューInterface Builder上でコンポーネントをリサイズした場合に、周辺コンポーネントに既存の制約を適用して移動やリサイズなどを行うかを設定する• Siblings and Ancestors...
Align – 端揃え• Left Edges   •   複数のコンポーネントの左端の水平位置を揃える制約を追加する   •   追加される制約はDirectionの設定による• Right Edges   •   複数のコンポーネントの右端...
Align – 基準位置揃え• Horizontal Centers   •   複数のコンポーネントの水平方向の中心位置を揃える制約を追       加する   •   追加される制約はCenter X Alignment• Vertical...
Align – 親ビュー内でセンタリン           グ• Horizontal Center in Container   • コンポーネントとその親コンテナの水平方向の中心位置       を揃える制約を追加する   • 追加される制...
Pin – サイズ• Width   •   コンポーネントの幅に関する制約を追加する   •   追加される制約はWidth   •   制約は対象コンポーネントに追加• Height   •   コンポーネントの高さに関する制約を追加する ...
Pin – コンポーネント間の間隔• Horizontal Spacing   •   2つのコンポーネントの間の水平方向の距離に関す       る制約を追加する   •   追加される制約はHorizontal Space• Vertica...
Pin – 親ビューの端との間隔•   Leading Space to SuperView     •    コンポーネントの左端とその親ビューの左端の距離に関する制約を追加する     •    追加される制約はHorizontal Spa...
Pin – サイズの連動• Widths Equally  • 複数のコンポーネントの幅を等しくする制約を追加する  • 追加される制約はEqual Widths• Heights Equally   •   複数のコンポーネントの高さを等しく...
Demo
制約の種類• アライメントに関する制約(7種類) Leading(Left or Right) Alignment, Trailing(Right or Left) Alignment, Center X Alignment Top Align...
制約の種類• アライメントに関する制約(7種類) Leading(Left or Right) Alignment, Trailing(Right or Left) Alignment, Center X Alignment Top Align...
制約の種類• アライメントに関する制約(7種類) Leading(Left or Right) Alignment, Trailing(Right or Left) Alignment, Center X Alignment Top Align...
制約の種類• Interface Builder上から実行できる制約追加のコマ  ンドは19種類• でも実際には、制約の種類と制約の適用対象のバ  リエーションの組み合わせでInterface Builderのコ  マンドの種類が多くなっている...
User Constraint• Interface Builder上で設定される制約  には2種類あり、アイコンの色が異  なっている• 青いアイコンはユーザー編集可能な  制約を表す(User Constraint)  キャンバス上の制約イ...
User Constraint• User Constraintはシーンやキャンバス、サ  イズインスペクタから削除することがで  きる• Interface Builderが追加した制約は、サイズ  インスペクタのConstraintsで対象...
IBでAuto Layoutを利用すると  よくわからない動きをする・・・• Auto Layoutは実行時にレイアウトを決定す  るのに十分な制約を設定する必要がある• 必要となる制約が不足している場合、  Interface Builder...
IBでAuto Layoutを利用する際のポイン               ト• 自動設定された制約(紫アイコン)と  ユーザー設定の制約(青アイコン)を意  識すると思い通りに設定できる• 実体であるNSLayoutConstraintを意...
NSLayoutConstraintで制約を設定す               る
NSLayoutConstraint• レイアウトの制約を表すクラス• 基本的にイミュータブルなので、制約を  変更する際は新しいインスタンスを作成  して差し替える
NSLayoutConstraintの計算式属性値1 == 属性値2 * 乗数 + 定数
NSLayoutConstraint• id firstItem    •   属性値の計算結果を反映するオブジェクト• NSLayoutAttribute firstAttribute    •   計算結果を反映する属性    •   fi...
NSLayoutConstraint• id firstItem    •   属性値の計算結果を反映するオブジェクト• NSLayoutAttribute firstAttribute    •   計算結果を反映する属性    •   fi...
NSLayoutConstraint• CGFloat constant    •   計算式の中で属性値の算出に利用する定数値    •   この値だけは、例外的にNSLayoutConstraintのインスタンス化後に変更        で...
NSLayoutAttribute• 制約の対象となる属性を表す列挙型• ボタン1の「下端」から10px下側に、ボ  タン2の「上端」がくるよう配置する制  約の場合 • ボタン1の属性はNSLayoutAttributeBottom • ボタ...
NSLayoutAttributetypedef NS_ENUM(NSInteger, NSLayoutAttribute) {   NSLayoutAttributeLeft = 1,   NSLayoutAttributeRight,   ...
NSLayoutRelation• 計算式とその計算結果の関係性を表す列  挙型• 「等しい」「以上」「以下」の3つtypedef NS_ENUM(NSInteger, NSLayoutRelation) {   NSLayoutRelatio...
NSLayoutPriority• 競合する制約間の優先順位を表す値• この値が高い制約から優先的に制約で定義された条件が満たされて  いく• 1から1000までのCGFloat値• いくつかの定数値がUILayoutPriority列挙型とし...
NSLayoutConstraintの計算式属性値1 == 属性値2 * 乗数 + 定数
NSLayoutConstraintの計算式属性値1 == 属性値2 * 乗数 + 定数                                constant                          multiplier  ...
NSLayoutConstraintの計算式• ボタン1の右端から右に10pxの位置にボタン2の左端  が位置する場合 button2.left == button1.right * 1 + 10• ビュー2の幅がビュー1の幅の3倍の場合   ...
NSLayoutConstraintの計算式• ボタン1の右端から右に10pxの位置にボタン2の左端  が位置する場合 button2.left == button1.right * 1 + 10• ビュー2の幅がビュー1の幅の3倍の場合   ...
NSLayoutConstraintの作成 • Visual Format Languageを利用する方法[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[view1]-|"     ...
Visual Format Language• 制約をNSStringで表現するDSLのような  もの      @"V:|-[view1]-20-[view2]-|”
Visual Format Language• 制約をNSStringで表現するDSLのような  もの           @"V:|-[view1]-20-[view2]-|”  "V:"                           ...
Visual Format Language• 制約をNSStringで表現するDSLのような  もの         @"V:|-[view1]-20-[view2]-|”       以下の3つの制約を表現している・垂直方向において、vie...
Visual Format Language• 文字列なのでコンパイラによるチェックは  ない• 実行時にパースできないとエラーが発生す  る• 詳細はAppleの公式ドキュメントを参照                           Vi...
Demo
コードNSDictionary *views = NSDictionaryOfVariableBindings(view1, view2);[self.view addConstraints:[NSLayoutConstraint constr...
Auto Layout 補足
Intrinsic Content Size• 一部のUIコンポーネントは自身の推奨サイズを、UIViewで定  義されたintrinsicConstentSizeメソッドから取得できる• UIButton, UILabelなどが推奨サイズを持...
推奨サイズを持たない場合Vertical Space (148)Center X AlignmentHorizontal Space (36)Vertical Space (149)
推奨サイズを持つ場合Vertical Space (148)Center X Alignment
推奨サイズを持つ場合Vertical Space (148)Center X Alignmentボタンの幅と高さは推奨サイズが採用されるので、制約を追加する必要なし
推奨サイズの優先順位• まわりのコンポーネントの制約によって  は、推奨サイズを実現できないときがあ  る• 制約同士が競合した場合と同じように、  推奨サイズも優先順位がつけられて実際  のレイアウトに適用される • Content Hugg...
Content Hugging Priority• UIコンポーネントのサイズが制約によって推奨サ  イズより大きくなる場合の「大きくなりにくさ」  を決定する• 実際にはNSLayoutPriorityの値で制約間での優先順  位を設定してい...
Content Compression Resistance Priority• UIコンポーネントのサイズが制約によって推奨サ  イズより小さくなる場合の「小さくなりにくさ」  を決定する• Content Hugging Priority同...
動的なレイアウトへの対応• ビューのプロパティが変更された場合な  どに、動的にレイアウトを変更したい• 今まではlayoutSubviewsをオーバーライド  してレイアウト処理を書いていた• 制約を利用する場合も、同じようにUIView  ...
動的なレイアウトへの対応- updateConstraints   •   オーバーライドして制約の更新処理を記述する   •   layoutSubviewsと同じく、システムによって呼ばれるので       自分で呼び出さない   •   ...
Auto LayoutのデバッグUIViewのUIConstraintBasedLayoutDebuggingカテゴリに定義されているデバッグ用のメソッドを利用する•   - (NSArray *)constraintsAffectingLay...
Demo
Auto Layoutのメリット• より柔軟なレイアウトをframeを操作せず  に実現できる• 込み入ったレイアウトを宣言的にプログ  ラミングすることができる• Visual Format Languageによる定義が手軽
Auto Layoutのデメリット• 学習コストが低いとは言えない• シンプルなレイアウトを組むの場合は  AutoResizingMaskを使う方が手軽• iOS5では使えない
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

iOS6 Auto Layout

19,528 views

Published on

0 Comments
78 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
19,528
On SlideShare
0
From Embeds
0
Number of Embeds
762
Actions
Shares
0
Downloads
111
Comments
0
Likes
78
Embeds 0
No embeds

No notes for slide

iOS6 Auto Layout

  1. 1. iOS6 Auto Layout 2012/12/10クラスメソッド かけがわ
  2. 2. 自己紹介
  3. 3. アジェンダ• Auto Layout • Auto Layoutの基礎知識 • Interface BuilderでAuto Layoutを設定 • ソースコードでAuto Layoutを設定 • Auto Layout 補足
  4. 4. Auto Layoutの基礎知識
  5. 5. Auto Layout• 「制約」ベースのレイアウトシステム• Autosizingを置き換えるもの• Macアプリケーションでは、OS X Lionで既 に導入されている
  6. 6. Constraint• レイアウトを決定するための「制約」• 他のUIコンポーネントとの相対的な位置・ サイズを定義• 制約はNSLayoutConstraintクラスのインス タンスによって表現される
  7. 7. Auto LayoutとAutosizingの違い Autosizing• サブビューの親ビューに対する相対関係 を指定する • 親ビューとの間のマージン • 親ビューに追従してリサイズするか
  8. 8. Auto LayoutとAutosizingの違い Auto Layout• レイアウト上のルールを制約として定義 • サブビューの親ビューに対する相対位置 • 兄弟ビューとの相対位置やサイズ • 自身のサイズ• ルールは必ずしも厳密に満たされない • サイズや位置に関して、「20px以上」や 「10px以下」といった表現が可能 • 優先順位
  9. 9. Leading & Trailing• アラビア語など、右側が文頭になる環境に対する、レイアウ ト上のローカライズを容易にするための機能• Leadingは文字列の先頭側、Trailingは文字列の末尾側を指す• 日本語や英語の環境では、LeadingはLeft、TrailingはRightに対 応する• アラビア語など、右側が文頭になる環境では、LeadingがRight、 TrailingがLeftに対応する• LeftやRightの代わりにLeadingやTrailingを利用しておくと、OS の言語がアラビア語に設定されている環境ではレイアウトの 位置が左右反転する
  10. 10. Leading & Trailing親ビュー内でのボタンの水平方向のアライメントに関して、Leading側に寄せて20pxのスペースを置くという制約を追加した場合 OSの言語設定がアラビア OSの言語設定が英語 語
  11. 11. Auto Layoutの使い方
  12. 12. 使い方使い方は2通り• Interface Builder上で制約を設定する• ソースコードでNSLayoutConstraintクラス を使って設定する
  13. 13. Interface Builderで制約を設定す る
  14. 14. Auto Layoutの切り替え• ファイルインスペクタのUse Autolayoutを有効にする• Use Autolayoutを無効にすれば従 来通り• iOS5.x以前でUse Autolayoutを有効 にするとクラッシュするので注意
  15. 15. Interface Builder上のメニュー
  16. 16. Interface Builder上のメニュー
  17. 17. Interface Builder上のメニュー コンポーネントのアライ メントに関する制約を追 加する操作
  18. 18. Interface Builder上のメニュー コンポーネントの相対的 な位置やサイズを固定す る制約を追加する操作
  19. 19. Interface Builder上のメニューInterface Builder上でコンポーネントをリサイズした場合に、周辺コンポーネントに既存の制約を適用して移動やリサイズなどを行うかを設定する• Siblings and Ancestors 親と兄弟に制約を適用する• Descendants 子に制約を適用する
  20. 20. Align – 端揃え• Left Edges • 複数のコンポーネントの左端の水平位置を揃える制約を追加する • 追加される制約はDirectionの設定による• Right Edges • 複数のコンポーネントの右端の水平位置を揃える制約を追加する • 追加される制約はDirectionの設定による• Top Edges • 複数のコンポーネントの上端の垂直位置を揃える制約を追加する • 追加される制約はTop Alignment• Bottom Edges • 複数のコンポーネントの下端の垂直位置を揃える制約を追加する • 追加される制約はBottom Alignment
  21. 21. Align – 基準位置揃え• Horizontal Centers • 複数のコンポーネントの水平方向の中心位置を揃える制約を追 加する • 追加される制約はCenter X Alignment• Vertical Centers • 複数のコンポーネントの垂直方向の中心位置を揃える制約を追 加する • 追加される制約はCenter Y Alignment• Baselines • 複数のコンポーネントのベースライン位置関係を固定する制約 を追加する • 追加される制約はBaseline Alignment
  22. 22. Align – 親ビュー内でセンタリン グ• Horizontal Center in Container • コンポーネントとその親コンテナの水平方向の中心位置 を揃える制約を追加する • 追加される制約はCenter X Alignment• Vertical Center in Container • コンポーネントとその親コンテナの垂直方向の中心位置 を揃える制約を追加する • 追加される制約はCenter Y Alignment
  23. 23. Pin – サイズ• Width • コンポーネントの幅に関する制約を追加する • 追加される制約はWidth • 制約は対象コンポーネントに追加• Height • コンポーネントの高さに関する制約を追加する • 追加される制約はHeight • 制約は対象コンポーネントに追加
  24. 24. Pin – コンポーネント間の間隔• Horizontal Spacing • 2つのコンポーネントの間の水平方向の距離に関す る制約を追加する • 追加される制約はHorizontal Space• Vertical Spacing • 2つのコンポーネントの間の垂直方向の距離に関す る制約を追加する • 追加される制約はVertical Space
  25. 25. Pin – 親ビューの端との間隔• Leading Space to SuperView • コンポーネントの左端とその親ビューの左端の距離に関する制約を追加する • 追加される制約はHorizontal Space• Trailing Space to SuperView • コンポーネントの右端とその親ビューの右端の距離に関する制約を追加する • 追加される制約はHorizontal Space• Top Space to SuperView • コンポーネントの上端とその親ビューの上端の距離に関する制約を追加する • 追加される制約はVertical Space• Bottom Space to SuperView • コンポーネントの下端とその親ビューの下端の距離に関する制約を追加する • 追加される制約はVertical Space
  26. 26. Pin – サイズの連動• Widths Equally • 複数のコンポーネントの幅を等しくする制約を追加する • 追加される制約はEqual Widths• Heights Equally • 複数のコンポーネントの高さを等しくする制約を追加す る • 追加される制約はEqual Heights
  27. 27. Demo
  28. 28. 制約の種類• アライメントに関する制約(7種類) Leading(Left or Right) Alignment, Trailing(Right or Left) Alignment, Center X Alignment Top Alignment, Bottom Alignment, Center Y Alignment, Baseline Alignment• 相対位置に関する制約(2種類) Horizontal Space Vertical Space• サイズに関する制約(2種類) Width, Height• サイズの連動に関する制約(2種類) Equal Widths, Equal Heights
  29. 29. 制約の種類• アライメントに関する制約(7種類) Leading(Left or Right) Alignment, Trailing(Right or Left) Alignment, Center X Alignment Top Alignment, Bottom Alignment, Center Y Alignment, Baseline Alignment• 相対位置に関する制約(2種類) Horizontal Space Vertical Space• サイズに関する制約(2種類) Width, Height• サイズの連動に関する制約(2種類)実際に追加される制約は Equal Widths, Equal Heights 13種類
  30. 30. 制約の種類• アライメントに関する制約(7種類) Leading(Left or Right) Alignment, Trailing(Right or Left) Alignment, Center X Alignment Top Alignment, Bottom Alignment, Center Y Alignment, Baseline Alignment• 相対位置に関する制約(2種類) Horizontal Space Vertical Space• サイズに関する制約(2種類) Width, Height• サイズの連動に関する制約(2種類)実際に追加される制約は Equal Widths, Equal Heights 大きく分類すると4種類 13種類
  31. 31. 制約の種類• Interface Builder上から実行できる制約追加のコマ ンドは19種類• でも実際には、制約の種類と制約の適用対象のバ リエーションの組み合わせでInterface Builderのコ マンドの種類が多くなっているだけ• 制約の適用対象のバリエーション • 親ビューとその子コンポーネント • 兄弟コンポーネント同士 • 対象コンポーネントのみ
  32. 32. User Constraint• Interface Builder上で設定される制約 には2種類あり、アイコンの色が異 なっている• 青いアイコンはユーザー編集可能な 制約を表す(User Constraint) キャンバス上の制約インジケーターが太 い• 紫のアイコンはInterface Builderが自 動的に挿入した制約 キャンバス上の制約インジケーターが細 い
  33. 33. User Constraint• User Constraintはシーンやキャンバス、サ イズインスペクタから削除することがで きる• Interface Builderが追加した制約は、サイズ インスペクタのConstraintsで対象の制約を 選び、Promote to User Constraintを選択す るとUser Constraintにすることができる
  34. 34. IBでAuto Layoutを利用すると よくわからない動きをする・・・• Auto Layoutは実行時にレイアウトを決定す るのに十分な制約を設定する必要がある• 必要となる制約が不足している場合、 Interface Builderが制約を自動で設定する • このため、制約を編集すると既存の制約が壊 されるように感じる
  35. 35. IBでAuto Layoutを利用する際のポイン ト• 自動設定された制約(紫アイコン)と ユーザー設定の制約(青アイコン)を意 識すると思い通りに設定できる• 実体であるNSLayoutConstraintを意識する
  36. 36. NSLayoutConstraintで制約を設定す る
  37. 37. NSLayoutConstraint• レイアウトの制約を表すクラス• 基本的にイミュータブルなので、制約を 変更する際は新しいインスタンスを作成 して差し替える
  38. 38. NSLayoutConstraintの計算式属性値1 == 属性値2 * 乗数 + 定数
  39. 39. NSLayoutConstraint• id firstItem • 属性値の計算結果を反映するオブジェクト• NSLayoutAttribute firstAttribute • 計算結果を反映する属性 • firstItemで指定されたオブジェクトに対して、この属性に対応する値 を属性値として反映する• id secondItem • 計算式に利用する属性値を取得するオブジェクト• NSLayoutAttribute secondAttribute • 計算式に利用する属性 • 属性値の取得元はsecondItemで指定されたオブジェクト
  40. 40. NSLayoutConstraint• id firstItem • 属性値の計算結果を反映するオブジェクト• NSLayoutAttribute firstAttribute • 計算結果を反映する属性 • firstItemで指定されたオブジェクトに対して、この属性に対応する値 を属性値として反映する• id secondItem • 計算式に利用する属性値を取得するオブジェクト• NSLayoutAttribute secondAttribute • 計算式に利用する属性 • 属性値の取得元はsecondItemで指定されたオブジェクト firstItemは計算結果を反映する側 secondItemは計算式に値を利用する側
  41. 41. NSLayoutConstraint• CGFloat constant • 計算式の中で属性値の算出に利用する定数値 • この値だけは、例外的にNSLayoutConstraintのインスタンス化後に変更 できる• CGFloat multiplier • 計算式の中で属性値の算出に利用する乗算値 • 属性値同士の比率を定義するのに使用する • 今のところ乗算値を利用した制約の定義はInterface Builderでサポート されていない• NSLayoutPriority priority • 制約の優先順位• NSLayoutRelation relation • 計算式とその計算結果の関係性を指定する
  42. 42. NSLayoutAttribute• 制約の対象となる属性を表す列挙型• ボタン1の「下端」から10px下側に、ボ タン2の「上端」がくるよう配置する制 約の場合 • ボタン1の属性はNSLayoutAttributeBottom • ボタン2の属性はNSLayoutAttributeTop
  43. 43. NSLayoutAttributetypedef NS_ENUM(NSInteger, NSLayoutAttribute) { NSLayoutAttributeLeft = 1, NSLayoutAttributeRight, NSLayoutAttributeTop, NSLayoutAttributeBottom, NSLayoutAttributeLeading, NSLayoutAttributeTrailing, NSLayoutAttributeWidth, NSLayoutAttributeHeight, NSLayoutAttributeCenterX, NSLayoutAttributeCenterY, NSLayoutAttributeBaseline, NSLayoutAttributeNotAnAttribute = 0};
  44. 44. NSLayoutRelation• 計算式とその計算結果の関係性を表す列 挙型• 「等しい」「以上」「以下」の3つtypedef NS_ENUM(NSInteger, NSLayoutRelation) { NSLayoutRelationLessThanOrEqual = -1, NSLayoutRelationEqual = 0, NSLayoutRelationGreaterThanOrEqual = 1,};
  45. 45. NSLayoutPriority• 競合する制約間の優先順位を表す値• この値が高い制約から優先的に制約で定義された条件が満たされて いく• 1から1000までのCGFloat値• いくつかの定数値がUILayoutPriority列挙型として用意されているの で、基本的にこの値を利用するのがよさそうenum { UILayoutPriorityRequired = 1000, UILayoutPriorityDefaultHigh = 750, UILayoutPriorityDefaultLow = 250, UILayoutPriorityFittingSizeLevel = 50};typedef float UILayoutPriority;
  46. 46. NSLayoutConstraintの計算式属性値1 == 属性値2 * 乗数 + 定数
  47. 47. NSLayoutConstraintの計算式属性値1 == 属性値2 * 乗数 + 定数 constant multiplier relation firstItem secondItem firstAttribute secondAttribute
  48. 48. NSLayoutConstraintの計算式• ボタン1の右端から右に10pxの位置にボタン2の左端 が位置する場合 button2.left == button1.right * 1 + 10• ビュー2の幅がビュー1の幅の3倍の場合 view2.width == view1.width * 3 + 0
  49. 49. NSLayoutConstraintの計算式• ボタン1の右端から右に10pxの位置にボタン2の左端 が位置する場合 button2.left == button1.right * 1 + 10• ビュー2の幅がビュー1の幅の3倍の場合 view2.width == view1.width * 3 + 0 すべての制約は計算式で表現される
  50. 50. NSLayoutConstraintの作成 • Visual Format Languageを利用する方法[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[view1]-|" options:0 metrics:nil views:views]; • Visual Format Languageを利用しない方法[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeHeight multiplier:2.0f constant:0.0f];
  51. 51. Visual Format Language• 制約をNSStringで表現するDSLのような もの @"V:|-[view1]-20-[view2]-|”
  52. 52. Visual Format Language• 制約をNSStringで表現するDSLのような もの @"V:|-[view1]-20-[view2]-|” "V:" “[view2]"垂直方向の コンポーネントレイアウト のインスタンス "-20-" "|" 20pxのスペース 親ビューの "-" エッジ スペース (デフォルト 値)
  53. 53. Visual Format Language• 制約をNSStringで表現するDSLのような もの @"V:|-[view1]-20-[view2]-|” 以下の3つの制約を表現している・垂直方向において、view1の上端は親ビューの上端からデフォルト値(20px)下にある・垂直方向において、view1の下端とview2の上端は20px離れている・垂直方向において、view2の下端は親ビューの下端からデフォルト値(20px)上にある
  54. 54. Visual Format Language• 文字列なのでコンパイラによるチェックは ない• 実行時にパースできないとエラーが発生す る• 詳細はAppleの公式ドキュメントを参照 Visual Format Languagehttps://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/Autolayou tPG/Articles/formatLanguage.html
  55. 55. Demo
  56. 56. コードNSDictionary *views = NSDictionaryOfVariableBindings(view1, view2);[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[view1]-|" options:0 metrics:nil views:views]];[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[view1]-20-[view2]-|" options:NSLayoutFormatAlignAllCenterX metrics:nil views:views]];[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view1(==view2)]" options:0 metrics:nil views:views]];[self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeHeight multiplier:2.0f constant:0.0f]];
  57. 57. Auto Layout 補足
  58. 58. Intrinsic Content Size• 一部のUIコンポーネントは自身の推奨サイズを、UIViewで定 義されたintrinsicConstentSizeメソッドから取得できる• UIButton, UILabelなどが推奨サイズを持っている• ラベルのみのUIButtonであれば、内部のテキストの幅・高さ にパディングを加えたものが推奨サイズとなる• 内部のコンテンツの大きさが変化すると、推奨サイズも変化 する• Auto Layoutにおいては、幅や高さを決定する制約が不足して いる場合に推奨サイズが使用される
  59. 59. 推奨サイズを持たない場合Vertical Space (148)Center X AlignmentHorizontal Space (36)Vertical Space (149)
  60. 60. 推奨サイズを持つ場合Vertical Space (148)Center X Alignment
  61. 61. 推奨サイズを持つ場合Vertical Space (148)Center X Alignmentボタンの幅と高さは推奨サイズが採用されるので、制約を追加する必要なし
  62. 62. 推奨サイズの優先順位• まわりのコンポーネントの制約によって は、推奨サイズを実現できないときがあ る• 制約同士が競合した場合と同じように、 推奨サイズも優先順位がつけられて実際 のレイアウトに適用される • Content Hugging Priority • Content Compression Resistance Priority
  63. 63. Content Hugging Priority• UIコンポーネントのサイズが制約によって推奨サ イズより大きくなる場合の「大きくなりにくさ」 を決定する• 実際にはNSLayoutPriorityの値で制約間での優先順 位を設定している• デフォルト値はUILayoutPriorityDefaultLow• UIViewにメソッドが用意されている – contentHuggingPriorityForAxis: – setContentHuggingPriority:forAxis:
  64. 64. Content Compression Resistance Priority• UIコンポーネントのサイズが制約によって推奨サ イズより小さくなる場合の「小さくなりにくさ」 を決定する• Content Hugging Priority同様、実際には優先順位の 値が設定される• デフォルト値はUILayoutPriorityDefaultHigh• UIViewにメソッドが用意されている – contentCompressionResistancePriorityForAxis: – setContentCompressionResistancePriority:forAxis:
  65. 65. 動的なレイアウトへの対応• ビューのプロパティが変更された場合な どに、動的にレイアウトを変更したい• 今まではlayoutSubviewsをオーバーライド してレイアウト処理を書いていた• 制約を利用する場合も、同じようにUIView に制約変更用のライフサイクルメソッド が用意されている
  66. 66. 動的なレイアウトへの対応- updateConstraints • オーバーライドして制約の更新処理を記述する • layoutSubviewsと同じく、システムによって呼ばれるので 自分で呼び出さない • このメソッドをオーバーライドする場合は、 layoutSubviewsによるレイアウト処理はオーバーライドし ないこと • 逆にlayoutSubviewsをオーバーライドする場合は、 updateConstraintはオーバーライドしない- setNeedsUpdateConstraints • updateConstraintsの実行をトリガする • layoutSubviewsに対するsetNeedsLayoutと同じ
  67. 67. Auto LayoutのデバッグUIViewのUIConstraintBasedLayoutDebuggingカテゴリに定義されているデバッグ用のメソッドを利用する• - (NSArray *)constraintsAffectingLayoutForAxis:(UILayoutConstraintAxis)axis 縦軸・横軸のそれぞれについて、現在適用されている制約を返す UILayoutConstraintAxisで制約を取得したい軸を指定する• - (BOOL)hasAmbiguousLayout 制約が不足してレイアウトが決定できない箇所がある場合YESを返す• - (void)exerciseAmbiguityInLayout hasAmbiguousLayoutがYESの場合、可能性のあるレイアウトをランダムで画面に適用するリリースビルド作成の際は必ずこれらのメソッドは外すこ と!
  68. 68. Demo
  69. 69. Auto Layoutのメリット• より柔軟なレイアウトをframeを操作せず に実現できる• 込み入ったレイアウトを宣言的にプログ ラミングすることができる• Visual Format Languageによる定義が手軽
  70. 70. Auto Layoutのデメリット• 学習コストが低いとは言えない• シンプルなレイアウトを組むの場合は AutoResizingMaskを使う方が手軽• iOS5では使えない
  71. 71. ご清聴ありがとうございました

×