【SwiftUI】 Viewのレイアウト(VStack、HStack、ZStack)

SwiftUIではStackと呼ばれる部品配置用のViewを組み合わせて、レイアウトを作成します。
本記事では3つのStack View(VStack、HStack、ZStack)の使い方を解説します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.2

Stack Viewの基本的な使い方

SwiftUIには次の3種類のStack Viewがあります。

  • 縦に並べるVStack()
  • 水平に並べるHStack()
  • 重ねて配置するZStack()

VStack

内包する子Viewを縦に配置するStack Viewです。

使用例

VStack使用例

HStack

内包する子Viewを水平に配置するStack Viewです。

使用例

HStack使用例

子View間の間隔は標準でシステムデフォルト値が採用されます。
VStackの時と異なり、2つのViewの間に隙間があるのがわかります。
間隔を明示的に指定する場合は、spacing引数で指定します。

ZStack

内包する子Viewを重ねて配置するStack Viewです。
指定した順に後ろから前に描画します。

使用例

Image ViewにText Viewを重ねる例です。

ZStack使用例

組み合わせ

Stackを組合わせて使い、より複雑なレイアウトを組み立てられます。

Stackの組み合わせ

子Viewを11個以上並べる場合

SwiftUIでは、並べるViewの数は10個までの制限がありますので、それ以上の子Viewを並べたい場合は、
こちらの記事で解説している方法を使用して下さい。

【SwiftUI】Viewを11個以上並べる方法
SwiftUIにはVStackやHStackなどのコンテナでViewを10個までしか並べられない制限があります。11個以上のViewを並べる方法を紹介します。

配置方法の指定(alignment)

Stack Viewではalignment引数によって子Viewの配置方法を指定できます。
各々指定できる値が異なります。

VStackでの配置指定

配置方法 意味
.center 中央寄せ(デフォルト値)
.leading 左寄せ
.trailing 右寄せ

使用例

左寄せ

HStackでの配置指定

配置方法 意味
.top 上寄せ
.center 中央寄せ(デフォルト値)
.bottom 下寄せ

使用例

下寄せ

ZStackでの配置指定

配置方法 意味
.center 中央寄せ(デフォルト値)
.bottom 下寄せ
.bottomLeading 左下寄せ
.bottomTrailing 右下寄せ
.leading 左寄せ
.top 上寄せ
.topLeading 左上寄せ
.topTrailing 右上寄せ
.trailing 右寄せ

使用例

右上寄せ

Viewの表示位置をずらす(offset)

配置したViewを指定した距離だけずらして表示します。
あくまで表示をずらすだけで、レイアウトの基準となるフレーム位置はそのままですので、注意してください。

Viewをずらして配置する

Viewの間隔指定(spacing)

VStackとHStackでは子View同士の間隔を引数spacingで調整できます。

マイナス値の設定も可能です。
デフォルト値はnilで、この場合システムデフォルトの間隔が採用されます。

View間隔の指定

空白を入れる(Spacer)

VStackおよびHStackでは、子Viewはデフォルトで使用可能なスペースの中央に配置されます。
これを変更したい場合は、Spacer()を使用して、スタックの内容を片側に寄せられます。Spacer()は残りのすべてのスペースを自動的に占有するため、例えばVStackの最後に追加すると、すべてのViewが画面の上部に寄せられます。
複数のSpacer()を追加すると、Spacer()が使用可能なスペースを分割します。

Spacer()の使用例

最小値の指定

引数(minLength)で確保するスペースの最小値を指定します。
例えば、同じ軸に複数のSpacerがあった場合、通常は均等にスペースが割り振られますが、このイニシャライザで最低限確保したいスペースを指定する事ができます。

仕切り線を入れる(Divider)

VStackおよびHStackでは、Divider()を使って子Viewの間に仕切り線を挿入できます。

Dividerの使用例

仕切り線自体が表示可能な最大長で挿入される為、元のレイアウトが崩れる要因になりかねず、使用にあたっては注意が必要です。

あわせて読みたい記事

【SwiftUI】Viewのフレームサイズ指定
Viewのフレームサイズを指定する方法を解説します。フレームはレイアウトの基準となる枠で、実際のView表示サイズとは異なる事があります。具体的な例を示すと、下の図の青背景の部分が元々のTextView、回りの赤枠がこのViewに設定さ...
【SwiftUI】Viewに余白を付加する(padding)
Viewに余白を付加する.padding()について解説します。