【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の間隔指定(spacing)

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

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

View間隔の指定

空白を入れる(Spacer)

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

Spacer()の使用例

仕切り線を入れる(Divider)

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

Dividerの使用例

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

SwiftUI
スポンサーリンク
スポンサーリンク
カピ通信

コメント