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

エンジニアの渡邉です。 前回のブログで書いたUIStackViewについて続きを書こうと思います。 Part1…

エンジニアの渡邉です。

前回のブログで書いたUIStackViewについて続きを書こうと思います。
Part1はこちら

□Distribution(並べ方)

サブビューの軸方向の表示方法を決定します。

・垂直方向 – Fill

Intinsc Content Sizeを満たしながらスタックビューの中がいっぱいになるようにサブビューの高さを決めます。
スタックビューのサイズが大きく、サブビューのサイズを広げなければ領域いっぱいにならない場合は、
サブビューの中で最もContent Compression Resistance Priorityの低いものが拡大され、
スタックビューのサイズが小さく、サブビューのサイズを縮めなければいけない場合は、
サブビューの中で最もContent Hugging Priorityの低いものが縮小されます。

優先度は各サブビュー毎に以下で設定できます。
今回は優先度は全て同じにしており、スタックビューの方がサイズが小さいため、「3.jpg」の画像の高さが0になっています。

全部の画像が同じ高さになる制約を追加すると、以下のようになります。

・垂直方向 -Fill Equally

スタックビューの軸方向を満たすように、サブビューを均等な高さで並べます。

・垂直方向 – Fill Proportionally

スタックビューの軸方向を満たすように、サブビューのIntrinsic Content Sizeの比率に合わせた高さで並べます。

・垂直方向 – Equal Spacing

サブビューのサイズをIntrinsic Content Sizeから変更せずに、
スタックビューの軸方向におけるサブビュー間のスペースを均一にして並べます。
SpacingプロパティとDistributionのEqual Spacingによるスペースで大きい方の値がレイアウトに採用されます。

表示がわかりやすいように、全サブビューの高さを100に設定しました。

・垂直方向 – Equal Centering

スタックビュー内にあるIntrinsic Content Sizeの大きさのサブビュー達の中心距離が均一になるように配置します。

表示がわかりやすいように、全サブビューの幅を150に設定しました。

・水平方向 – Fill

Intinsc Content Sizeを満たしながらスタックビューの中がいっぱいになるようにサブビューの幅を決めます。
スタックビューのサイズが大きく、サブビューのサイズを広げなければ領域いっぱいにならない場合は、
サブビューの中で最もContent Compression Resistance Priorityの低いものが拡大され、
スタックビューのサイズが小さく、サブビューのサイズを縮めなければいけない場合は、
サブビューの中で最もContent Hugging Priorityの低いものが縮小されます。

全部の画像が同じ幅になる制約を追加すると、以下のようになります。

・水平方向 -Fill Equally

スタックビューの軸方向を満たすように、サブビューを均等な幅で並べます。

・水平方向 – Fill Proportionally

スタックビューの軸方向を満たすように、サブビューのIntrinsic Content Sizeの比率に合わせた幅で並べます。

・水平方向 – Equal Spacing

サブビューのサイズをIntrinsic Content Sizeから変更せずに、
スタックビューの軸方向におけるサブビュー間のスペースを均一にして並べます。
SpacingプロパティとDistributionのEqual Spacingによるスペースで大きい方の値がレイアウトに採用されます。

表示がわかりやすいように、全サブビューの幅を100に設定しました。

・水平方向 – Equal Centering

スタックビュー内にあるIntrinsic Content Sizeの大きさのサブビュー達の中心距離が均一になるように配置します。

表示がわかりやすいように、全サブビューの高さを100に設定しました。

■今回のまとめ

Distributionでは色々な並べ方を設定一つで変更できます。
特にEqual Spacingなどは今まで透明なViewを間に置いて設定していたので、今後の開発の時間短縮に繋がりそうです。
ただ、制約や優先度などによって自分の思い通りのレイアウトにならないこともあるので、
しっかりと必要な制約と優先度付けを行うことが大切だと感じました。
次回は画面の回転に合わせてUIStackViewの設定を変えてみたいと思います。

■参考サイト・書籍

サイト:遅ればせながら UIStackView 入門
サイト:StackViewを賢く使ってらくちんAutoLayout
サイト:[iOS9]UIStackViewについて
サイト:レイアウトの救世主Stack Viewを使ってみよう
書籍:よくわかるAuto Layout