【SwiftUI】Viewの配置指定(Alignment)

Viewの配置や整列の指定に使うプロパティについて解説します。

スポンサーリンク

環境

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

【Xcode】13.3
【Swift】5.6
【iOS】15.4
【macOS】Monterey バージョン 12.3

スポンサーリンク

Alignment(全方向の配置指定)

オブジェクト(要素)の配置方法指定する構造体で、.frameモディファイアやZStackコンテナ等で使用します。
下に示す9種類のプロパティがあります。
Image

スポンサーリンク

HorizontalAlignment(水平方向の整列指定)

オブジェクト(要素)の整列方法を水平方向に指定する構造体で、VStackコンテナ等で使用します。
下に示す3種類のプロパティがあります。

.leading .center .trailing
左寄せ 中央寄せ 右寄せ

使用例

Image

スポンサーリンク

VertialAlignment(垂直方向の配置指定)

オブジェクト(要素)の整列方法を垂直方向に指定する構造体で、HStackコンテナ等で使用します。
下に示す5種類のプロパティがあります。

.top 上寄せ
.center 中央寄せ
.bottom 下寄せ
.firstTextBaseline 最上段テキストにベースラインを合わせる
.lastTextBaseline 最下段テキストにベースラインを合わせる

使用例

Image

スポンサーリンク

なぜ、Left、Rightではないのか?

左寄せ、右寄せが、left/rightではなくleading/trailingなのは、アラビア語など文章を右から左に書く言語に対応する為です。
OSの言語設定がアラビア語などの場合、leading/trailingは日本語とは逆で右寄せ/左寄せに変わります。
同様にHStackの並び順も、左から(→)ではなく右から(←)順に並べるようになります。

スポンサーリンク

あわせて読みたい記事

【SwiftUI】 Viewのレイアウト(VStack、HStack、ZStack)
SwiftUIではStackと呼ばれる部品配置用のViewを組み合わせて、レイアウトを作成します。 本記事では3つのStack View(VStack、HStack、ZStack)を中心にレイアウト方法を解説します。
【SwiftUI】Viewのフレームサイズ指定(frame)
(2022/03/26 更新) Viewのフレームサイズを指定する方法を解説します。