iOS9.2
XCode7.2

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

More than 1 year has passed since last update.

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

元ネタ

事前準備

サンプルコードをダウンロードして解凍

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

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