レイアウトの救世主Stack Viewを使ってみよう

Auto Layoutには実は重大な欠点がありました。
それは、、

レイアウトの修正が大変

ということです。

レイアウトする要素が増えれば振れるに従って隣のビューとの関係も複雑になってしまいます。

例えば、画面上にボタンを縦に3つ並べるレイアウトを考えてみましょう。
ボタンをそれぞれ同じ大きさに縦に3つ並べるレイアウトを作ってみます。

three_button

このとき3つのボタンと親ビューとの関係性はざっと数えた分でも10個できてしまいます。
設定によってはそれ以上になることも考えられるでしょう。

ここで、ボタンを4つに増やしたいと思ったらどうでしょう?

少なくとも垂直方向の関係性は見直す必要があるでしょう。
ボタンが3つから4つになったとこで、親ビューとボタン同士の隙間の幅が変わることになるからです。

これはもう一大事です。
制約を1つずつ見なおしてボタンを増やすか、いっそのこと全ての制約を一度全部解除して、もう一度設定し直すかをしなければいけません。

実際私はこのような場合は制約を全部解除して、全ての制約を設定しなおしていました。
この方が、制約を修正するよりもかえって早いことが多かったからです。

しかし、一度設定したものを毎回全てリセットしていくのもやりきれない思いがします。

しかも、レイアウトの変更などはしょっちゅう行われます。
あとでボタンが必要になったなんてことは日常茶飯事です。

その度に全部やり直し?
辛いですね。

ボタンを縦に並べるという簡単に見えるレイアウト修正でもとても大変な作業となってしまいます。

レイアウトの修正が大変ということがAuto Layoutの弱点でありました。

そんな問題を解決すべく、iOS9から新しいAuto Layoutの機能が提供されました。

Stack Viewです。

これを使えば、それぞれの要素にAuto Layoutを設定しなくてもStack Viewがいい感じに調整してくれる優れものです。

Stack Viewの機能は縦方向、横方向にビューを並べてくれます。
Stack Viewのサブビューとして並べたいビューを挿入すれば、自動的にレイアウトをしてくれて、個別にビューごとにAuto Layoutをする必要がなくなります。

iOS9のシェア率も2015年 11月時点で66%になっています。
これからiOSアプリを開発する人にとっては、使ってみる価値がある機能です。

http://iphone-mania.jp/news-91653/

それではそのStack Viewの使い方を見ていきましょう。


Stack Viewの使い方

先ほど例にあげたボタンを縦に3つ並べる例をStack Viewを使ってレイアウトしていきたいと思います。

新規にプロジェクトを作成して、Main.storyboardを開きます。

Object Library からStorybordのView Controllerに「Vertical Stack View」を配置します。

Vertical Stack View

Stack Viewの制約を設定していきます。
今回は画面いっぱいにStack Viewを置きたいと思います。
マージンを含めないで上下左右0ポイントの制約を追加します。

Stack View Constraints

そして、高さを親ビューと同じ高さにしたいと思います。

Stack Viewから親Viewに向かってCtrl + ドラッグをします。

stackView_constraints2

出てきたポップから**「Equal Heights」**を選びます。

stackView_constraints3

ボタンをStack Viewに3つ配置します。

stackView_constraints4

Auto Layoutのエラーが出るので、StackViewを選択してAttribute inspectorを表示しましょう。
distributionをFill Equallyに変更します。

Fill Equally

するとボタンが等間隔に並びます。

three_button

ボタンを4つにしたいときは、Object LibraryからStack Viewへボタンを追加してください。
自動的にボタンが4つ並びます。

add_button

これで楽にレイアウトができますね!


Stack Viewのプロパティ

Stack Viewのプロパティは以下の4つがあります。

  • axis
  • distribution
  • alignment
  • spacing

各項目それぞれどのような意味なのかを見ていきたいと思います。


axis

axisは水平か、垂直か、並べるビューの軸方向を決めるプロパティです。

水平方向をとなる'UILayoutConstraintAxisHorizontal'か垂直方向のUILayoutConstraintAxisVerticalの二種類があります。


distribution

distributionはレイアウトの配置方法を決定するプロパティです。

UIStackViewDistributionFill

UIStackViewDistributionFillを設定すると配置ビューをStackViewいっぱいに広げます。
配置ビューだけでStackViewを埋めることができない時は優先順位にしたがってビューが伸びます。

distribute_fill_2x

UIStackViewDistributionFillEqually

UIStackViewDistributionFillEquallyを設定するとStackViewの軸にそって配置ビューをいっぱいに配置します。
配置ビューの大きさが等しくなります。(水平なら幅、垂直なら高さ)

distribute_fillequally_2x

UIStackViewDistributionFillProportionally

UIStackViewDistributionFillProportionallyを設定すると全ての配置ビューが元の大きさにもとづいて比例的にリサイズされてStackViewをいっぱいに埋めます。

distribute_fillroportionally_2x

UIStackViewDistributionEqualSpacing

UIStackViewDistributionEqualSpacingを設定すると配置ビューとの余白を等間隔にします。

distribute_equalspacing_2x

UIStackViewDistributionEqualCentering

UIStackViewDistributionEqualCenteringを設定すると軸にそって配置ビューが同じ中心線が等間隔になるように並べます。

distribute_equalcentering_2x


alignment

alignmentは整列方法を決めるプロパティです。

UIStackViewAlignmentFill

UIStackViewAlignmentFillを設定するとStackViewの軸方向にそって配置Viewがめいっぱい広がるように配置します。

align_fill_2x

UIStackViewAlignmentLeading

UIStackViewAlignmentLeadingを設定すると垂直方向のStackViewの場合に言語が始まる向き(英語なら左)に整列させます。

align_leading_2x

UIStackViewAlignmentTop

UIStackViewAlignmentTopは水平方向のStackViewの場合に設定すると配置ビューのトップに整列させることができます。

align_top_2x

UIStackViewAlignmentFirstBaseline

UIStackViewAlignmentFirstBaselineは水平方向のStackViewの場合に最初のベースラインにそって整列させることができます。

align_firstbaseline_2x

UIStackViewAlignmentCenter

UIStackViewAlignmentCenterを設定するとStackViewの軸にそって、中心線に配置ビューを整列させることができます。

align_center_2x

UIStackViewAlignmentTrailing

UIStackViewAlignmentTrailingは垂直方向のStackViewのときに、文字が終わる方向(英語なら右)に整列させることができます。

align_leading

UIStackViewAlignmentBottom

UIStackViewAlignmentBottomは水平方向のStackViewのときに、配置ビューの底に整列させることができます。

align_bottom_2x

UIStackViewAlignmentLastBaseline

UIStackViewAlignmentLastBaselineは水平方向のStackViewの場合、最後のベースラインに整列させることができます。

align_lastbaseline_2x


spacing

spacingはサブビューとの余白を設定するプロパティです。


Stack Viewの注意

Stack Viewはインターフェースに関わるメソッドはないので見た目を設定することはできません。
例えば、backgroundColorを設定しても何もおきないです。

また以下のメソッドをオーバーライドすることもできません。

  • layerClass
  • drawRect:
  • drawLayer:inContext:

まとめ

Stack ViewはiOS9からという条件はあるものの、劇的にレイアウトを簡単にしてくれるものです。
ぜひ、みなさんも使ってみてください。


参考

UIStackView Class Reference

An Introduction to Stack Views in iOS 9 and Xcode 7