スタックビューを入れ子にして複雑なレイアウトを構成する
事前準備
サンプルコードをダウンロードして解凍
Single View Applicationでプロジェクトを作成
Project Nameは適当に
必要なファイルのインポート
- プロジェクト名の書かれたフォルダアイコンを右クリックして、『Add Files to "プロジェクト名"』を選択
- ダウンロードして解凍しておいたフォルダから、Auto Layout Cookbook->Assets.xcassets->flowers.imagesetの中にあるflowers.pngとflowers@2x.pngを選択（適当なGroupを作ってまとめておくと良い）
View Controller内のViewにStack Viewを配置
Stack Viewの内側から外側に向かうように構築するといいらしい
- ViewにLabelを配置
- Attributes InspectorからLabel TextをFirst Name Labelに変更
- First Name Labelの右にText Fieldを配置
- 名前をFirst Name Text Fieldに変更（ツリーで選択状態にしてreturnを押す）
- First Name LabelとFirst Name Text Fieldを選択して、Editor->Embed In->Stack Viewを実行してStack Viewの中に配置
- Stack Viewの名前をFirst Name Stack Viewに変更
- ツリーからFirst Name Stack Viewを選択してコピペ
- Stack View・Label・Text FieldをFirst Name->Middle Nameに変更
- 同様にしてLast Nameを作成
- Stack Viewを上から順にFirst Name・Middle Name・Last Nameと並べて、Stack Viewの中に配置
- Stack Viewの名前をName Rows Stack Viewに変更
- Name Rows Stack Viewの左にImage Viewを配置して、Attributes InspectorからImageをflowers.pngに設定
- flowers.pngとName Rows Stack ViewをStack Viewの中に配置
- Stack Viewの名前をUpper Stack Viewに変更
- ViewにText Viewを配置
- ViewにButtonを3つ配置し、Attributes InspectorからDefault TitleをSave・Cancel・Clearに設定
- 3つのボタンを左から順にSave・Cancel・Clearと並べて、Stack Viewの中に配置
- Stack Viewの名前をBottom Stack Viewに変更
- 上から順にUpper Stack View・Text View・Bottom Stack Viewと並べて、Stack Viewの中に配置
- Stack Viewの名前をRoot Stack Viewに変更
制約の設定
Root Stack Viewを選択し、Pinから
- TopをContrain to Marginのチェックを外し、Top Layout Guideから20に設定（Root Stack View.Top = Top Layout Guide.Bottom + 20.0）
- LeadingをContrain to Marginにチェックを入れ、Viewから0に設定（Root Stack View.Leading = Superview.LeadingMargin）
- TrailingをContrain to Marginにチェックを入れ、Viewから0に設定（Root Stack View.Trailing = Superview.TrailingMargin）
- BottomをContrain to Marginのチェックを外し、Bottom Layout Guideから20に設定（Bottom Layout Guide.Top = Root Stack View.Bottom + 20.0）
flowers.pngを選択し、PinからAspect Ratioを設定
Attributes InspectorからModeをAspect Fill、Size InspectorからMultiplierを1:1に設定
First Name Text FieldとMiddle Name Text Fieldを選択し、PinからEqual Widthsを設定
First Name Text FieldとLast Name Text Fieldも同様に
属性の設定
Attributes Inspectorから
-
Root Stack Viewの
-
Axis = Vertical
-
Alignment = Fill
-
Distribution = Fill
-
Spacing = 8
-
Upper Stack Viewの
-
Axis = Horizontal
-
Alignment = Fill
-
Distribution = Fill
-
Spacing = 8
-
Name Rows Stack Viewの
-
Axis = Vertical
-
Alignment = Fill
-
Distribution = Fill Proportionally
-
Spacing = 8
-
First Name Stack View・Middle Name Stack View・Last Name Stack Viewの
-
Axis = Horizontal
-
Alignment = Fist Baseline
-
Distribution = Fill
-
Spacing = 8
-
Bottom Stack Viewの
-
Axis = Horizontal
-
Alignment = Fist Baseline
-
Distribution = Fill Equally
-
Spacing = 8
-
Text Viewの
-
Background = Light Gray Color
Size Inspectorから
-
flowers.pngの
-
Content Hugging Priority
-
Horizontal = 250
-
Vertical = 250
-
Content compression Resistance Priority
-
Horizontal = 48
-
Vertical = 48
-
First・Middle・Last Name Labelの
-
Content Hugging Priority
-
Horizontal = 251
-
Vertical = 251
-
Content compression Resistance Priority
-
Horizontal = 750
-
Vertical = 750
-
First・Middle・Last Name Text Fieldの
-
Content Hugging Priority
-
Horizontal = 48
-
Vertical = 250
-
Content compression Resistance Priority
-
Horizontal = 749
-
Vertical = 750
-
Text Viewの
-
Content Hugging Priority
-
Horizontal = 250
-
Vertical = 249
-
Content compression Resistance Priority
-
Horizontal = 250
-
Vertical = 250
Stack ViewにFlowers Labelを配置
- Stack ViewにLabelを配置
- LabelのAttribute InspectorからLabel Text（初期値はLabel）をFlowersにする
Stack ViewにImage Viewを配置
Flowers Labelの下に来るように
Stack ViewにButtonを配置
Image Viewの下に来るように
Stack Viewに制約（Constraints）を設定
Stack Viewを選択して、Pinから
- Top（上）はTop Layout GuideとUse Standard Valueを選択（Stack View.Top = Top Layout Guide.Bottom + Standard）
- Leading（左）はViewを選択して、Constrain to Marginsにチェックを入れ値を0に（Stack View.Leading = Superview.LeadingMargin）
- Trailing（右）はViewを選択して、Constrain to Marginsにチェックを入れ値を0に（Stack View.Trailing = Superview.TrailingMargin）
- Bottom（下）はBottom Layout GuideとUse Standard Valueを選択（Bottom Layout Guide.Top = Stack View.Bottom + Standard）
Constraintsは4つ同時でも、1つずつでも設定できるが、Add Constraintsを押さないと設定されない
Constraintsが正しく設定されているかどうかは、View Controller Sceneのツリーを展開したり、Stack ViewのSize Inspectorを開いたりして確認できる
Stack Viewの属性を設定
Stack ViewのAttributes Inspectorで
- Axis（軸）をVertical
- Alignment（整列）をFill
- Distribution（配分）をFill
- Spacing（間隔）を8
に設定
Image Viewの属性を設定
Image ViewのAttributes Inspectorで
- Imageをflowers.png
- ModeをAspect Fill
に設定
Image ViewのSize Inspectorで
- Content Hugging Priority（収縮性の優先度）
- Horizontalを250
- Verticalを249
- Content Compression Resistence Priority（膨張性の優先度）
- Horizontalを750
- Verticalを749
に設定（元ネタから少し変えてあります。適当に弄ってみてください。）