UIStackViewを使ったレイアウト作成 Part 1

エンジニアの渡邉です。 先日、開発していたアプリがリリースされました。 リリース前はドタバタでしたが、審査に通…

エンジニアの渡邉です。
先日、開発していたアプリがリリースされました。
リリース前はドタバタでしたが、審査に通った瞬間は本当に嬉しいですね。

開発もひと段落して、現在、次の開発に向けて、
Auto Layoutについて知見を広めようと、技術書を買って読んでいます。
その中でUIStackViewについて書かれていて面白かったので、
今回はUIStackViewについて書こうと思います。

■UIStackViewとは

StoryBoardで見かける、このパーツです。

今まで何のパーツだろうと気になりつつも、使用していなかったのですが、
・iOS9以上で利用可能
・UIStackViewにViewを並べると自動的に制約を設定するため、変更に対して強いレイアウトの作成が可能
・デバイスの回転・スクリーンサイズなどに動的に対応
と中々便利そうなパーツなので、今回はこれを使ってレイアウトを作成してみます。

まずは通常通り、StoryBoardにUIImageViewを置いて制約を貼って画面を作成しました。

かなり制約を貼っているため、ごちゃごちゃしています。

同じレイアウトをUIStackViewを使用して作成してみます。

UIStackViewの設定を使用しているので、制約が少なくなりすっきりしました。

■UIStackViewの設定値

□Axis(軸)

UIStackView内のサブビューを並べる方向です。

・Horizonal(水平方向)

 

・Vertical(垂直方向)

 

□Alignment(揃え方)

軸が垂直方向の場合はサブビューの位置決定、水平方向の場合は縦方向の基準を選択します。

・垂直方向 – Fill

 幅が一番広いオブジェクトに他のオブジェクトの幅を揃えます。

画像の比率の制約を貼っていたので、制約エラーがでています。
比率の制約を全部削除して、UIImageViewのContent ModeをAspect Fitにすることで同じ表示にすることができました。

・垂直方向 – Leading

オブジェクトを左に揃えます。

・垂直方向 – Center

オブジェクトを中央に揃えます。

・垂直方向 – Trailing

オブジェクトを末尾に揃えます。

・水平方向 – Fill

高さが一番高いオブジェクトに他のオブジェクトの高さを揃えます。

垂直方向の場合と同様のエラーが出ているので、比率の制約を全部削除して、
UIImageViewのContent ModeをAspect Fitに設定します。

・水平方向 – Top

オブジェクトを上に揃えます。

・水平方向 – Center

オブジェクトを中央に揃えます。

・水平方向 – Bottom

オブジェクトを下に揃えます。

・水平方向 – First Baseline

オブジェクトのベースラインの上に揃えます。

・水平方向 – Last Baseline

オブジェクトのベースラインの下に揃えます。

■今回のまとめ

設定値を変えるだけでレイアウトを柔軟に変更できるので、UIStackViewを使いこなせると開発の幅も広がるし
スピードもアップすると思いました。
残りのDistributionについては、まだまだ奥が深そうなので、
次回に記載したいと思います。

■参考サイト・書籍

サイト:遅ればせながら UIStackView 入門
サイト:StackViewを賢く使ってらくちんAutoLayout
書籍:よくわかるAuto Layout