レイアウトの救世主Stack Viewを使ってみよう
Auto Layoutには実は重大な欠点がありました。
それは、、
レイアウトの修正が大変
ということです。
レイアウトする要素が増えれば振れるに従って隣のビューとの関係も複雑になってしまいます。
例えば、画面上にボタンを縦に３つ並べるレイアウトを考えてみましょう。
ボタンをそれぞれ同じ大きさに縦に３つ並べるレイアウトを作ってみます。
このとき３つのボタンと親ビューとの関係性はざっと数えた分でも10個できてしまいます。
設定によってはそれ以上になることも考えられるでしょう。
ここで、ボタンを4つに増やしたいと思ったらどうでしょう？
少なくとも垂直方向の関係性は見直す必要があるでしょう。
ボタンが3つから4つになったとこで、親ビューとボタン同士の隙間の幅が変わることになるからです。
これはもう一大事です。
制約を１つずつ見なおしてボタンを増やすか、いっそのこと全ての制約を一度全部解除して、もう一度設定し直すかをしなければいけません。
実際私はこのような場合は制約を全部解除して、全ての制約を設定しなおしていました。
この方が、制約を修正するよりもかえって早いことが多かったからです。
しかし、一度設定したものを毎回全てリセットしていくのもやりきれない思いがします。
しかも、レイアウトの変更などはしょっちゅう行われます。
あとでボタンが必要になったなんてことは日常茶飯事です。
その度に全部やり直し？
辛いですね。
ボタンを縦に並べるという簡単に見えるレイアウト修正でもとても大変な作業となってしまいます。
レイアウトの修正が大変ということが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の使い方
先ほど例にあげたボタンを縦に３つ並べる例をStack Viewを使ってレイアウトしていきたいと思います。
新規にプロジェクトを作成して、Main.storyboardを開きます。
Object Library からStorybordのView Controllerに「Vertical Stack View」を配置します。
Stack Viewの制約を設定していきます。
今回は画面いっぱいにStack Viewを置きたいと思います。
マージンを含めないで上下左右0ポイントの制約を追加します。
そして、高さを親ビューと同じ高さにしたいと思います。
Stack Viewから親Viewに向かってCtrl + ドラッグをします。
出てきたポップから**「Equal Heights」**を選びます。
ボタンをStack Viewに３つ配置します。
Auto Layoutのエラーが出るので、StackViewを選択してAttribute inspectorを表示しましょう。
distributionをFill Equallyに変更します。
するとボタンが等間隔に並びます。
ボタンを４つにしたいときは、Object LibraryからStack Viewへボタンを追加してください。
自動的にボタンが４つ並びます。
これで楽にレイアウトができますね！
Stack Viewのプロパティ
Stack Viewのプロパティは以下の４つがあります。
- axis
- distribution
- alignment
- spacing
各項目それぞれどのような意味なのかを見ていきたいと思います。
axis
axisは水平か、垂直か、並べるビューの軸方向を決めるプロパティです。
水平方向をとなる'UILayoutConstraintAxisHorizontal'か垂直方向のUILayoutConstraintAxisVerticalの二種類があります。
distribution
distributionはレイアウトの配置方法を決定するプロパティです。
UIStackViewDistributionFill
UIStackViewDistributionFillを設定すると配置ビューをStackViewいっぱいに広げます。
配置ビューだけでStackViewを埋めることができない時は優先順位にしたがってビューが伸びます。
UIStackViewDistributionFillEqually
UIStackViewDistributionFillEquallyを設定するとStackViewの軸にそって配置ビューをいっぱいに配置します。
配置ビューの大きさが等しくなります。(水平なら幅、垂直なら高さ）
UIStackViewDistributionFillProportionally
UIStackViewDistributionFillProportionallyを設定すると全ての配置ビューが元の大きさにもとづいて比例的にリサイズされてStackViewをいっぱいに埋めます。
UIStackViewDistributionEqualSpacing
UIStackViewDistributionEqualSpacingを設定すると配置ビューとの余白を等間隔にします。
UIStackViewDistributionEqualCentering
UIStackViewDistributionEqualCenteringを設定すると軸にそって配置ビューが同じ中心線が等間隔になるように並べます。
alignment
alignmentは整列方法を決めるプロパティです。
UIStackViewAlignmentFill
UIStackViewAlignmentFillを設定するとStackViewの軸方向にそって配置Viewがめいっぱい広がるように配置します。
UIStackViewAlignmentLeading
UIStackViewAlignmentLeadingを設定すると垂直方向のStackViewの場合に言語が始まる向き(英語なら左)に整列させます。
UIStackViewAlignmentTop
UIStackViewAlignmentTopは水平方向のStackViewの場合に設定すると配置ビューのトップに整列させることができます。
UIStackViewAlignmentFirstBaseline
UIStackViewAlignmentFirstBaselineは水平方向のStackViewの場合に最初のベースラインにそって整列させることができます。
UIStackViewAlignmentCenter
UIStackViewAlignmentCenterを設定するとStackViewの軸にそって、中心線に配置ビューを整列させることができます。
UIStackViewAlignmentTrailing
UIStackViewAlignmentTrailingは垂直方向のStackViewのときに、文字が終わる方向（英語なら右）に整列させることができます。
UIStackViewAlignmentBottom
UIStackViewAlignmentBottomは水平方向のStackViewのときに、配置ビューの底に整列させることができます。
UIStackViewAlignmentLastBaseline
UIStackViewAlignmentLastBaselineは水平方向のStackViewの場合、最後のベースラインに整列させることができます。
spacing
spacingはサブビューとの余白を設定するプロパティです。
Stack Viewの注意
Stack Viewはインターフェースに関わるメソッドはないので見た目を設定することはできません。
例えば、backgroundColorを設定しても何もおきないです。
また以下のメソッドをオーバーライドすることもできません。
- layerClass
- drawRect:
- drawLayer:inContext:
まとめ
Stack ViewはiOS9からという条件はあるものの、劇的にレイアウトを簡単にしてくれるものです。
ぜひ、みなさんも使ってみてください。