スタックビューを入れ子にして複雑なレイアウトを構成する（UIKit::UIStackView）

# スタックビューを入れ子にして複雑なレイアウトを構成する
[元ネタ](https://developer.apple.com/jp/documentation/UserExperience/Conceptual/AutoLayoutGuide/LayoutUsingStackViews/LayoutUsingStackViews.html#//apple_ref/doc/uid/TP40010853-CH11-SW1)

## 事前準備
[サンプルコード](https://developer.apple.com/sample-code/xcode/downloads/Auto-Layout-Cookbook.zip)をダウンロードして解凍

## Single View Applicationでプロジェクトを作成
Project Nameは適当に

## 必要なファイルのインポート
1. プロジェクト名の書かれたフォルダアイコンを右クリックして、『Add Files to "プロジェクト名"』を選択
2. ダウンロードして解凍しておいたフォルダから、Auto Layout Cookbook->Assets.xcassets->flowers.imagesetの中にあるflowers.pngとflowers@2x.pngを選択（適当なGroupを作ってまとめておくと良い）

## View Controller内のViewにStack Viewを配置
Stack Viewの内側から外側に向かうように構築するといいらしい

1. ViewにLabelを配置
2. Attributes InspectorからLabel TextをFirst Name Labelに変更
3. First Name Labelの右にText Fieldを配置
4. 名前をFirst Name Text Fieldに変更（ツリーで選択状態にしてreturnを押す）
5. First Name LabelとFirst Name Text Fieldを選択して、Editor->Embed In->Stack Viewを実行してStack Viewの中に配置
6. Stack Viewの名前をFirst Name Stack Viewに変更
7. ツリーからFirst Name Stack Viewを選択してコピペ
8. Stack View・Label・Text FieldをFirst Name->Middle Nameに変更
9. 同様にしてLast Nameを作成
10. Stack Viewを上から順にFirst Name・Middle Name・Last Nameと並べて、Stack Viewの中に配置
11. Stack Viewの名前をName Rows Stack Viewに変更
12. Name Rows Stack Viewの左にImage Viewを配置して、Attributes InspectorからImageをflowers.pngに設定
13. flowers.pngとName Rows Stack ViewをStack Viewの中に配置
14. Stack Viewの名前をUpper Stack Viewに変更
15. ViewにText Viewを配置
16. ViewにButtonを3つ配置し、Attributes InspectorからDefault TitleをSave・Cancel・Clearに設定
17. 3つのボタンを左から順にSave・Cancel・Clearと並べて、Stack Viewの中に配置
18. Stack Viewの名前をBottom Stack Viewに変更
19. 上から順にUpper Stack View・Text View・Bottom Stack Viewと並べて、Stack Viewの中に配置
20. 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を配置
1. Stack ViewにLabelを配置
2. 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

に設定（元ネタから少し変えてあります。適当に弄ってみてください。）