SmallDeskSoftware 
あまり知られていない Spacer の使い方を説明します。
Sponsor Link
目次
Spacer
ビューの１つであり、レイアウト調整に使われます。
HStack の中に配置されると 横方向に広がり、VStack の中では縦方向に広がります。
以下では、VStack の中に配置してみていきます。
準備：Spacer なしの配置
Text を VStack の中に配置してみました。
VStack は、指定なしでは、alignment: .center ですので、中央に配置されています。
Spacer なし
|
1 2 3 4 5 6 7 8 9 10 11 |
struct ContentView: View { var body: some View { VStack { Text("Hello, world!") .padding() .background(Color.orange) } } } |
MEMO
わかりやすくするために、Text ビューの背景にはオレンジ色を、Spacer の背景には、青色を設定し、VStack には、spacing:10 を設定しています。ビューと画面端の間に Spacer を配置
Text は、できる限り小さな領域を使って表示しようとしますが、Spacer は、可能な限り広がろうとします。
ですので、一方にのみ Spacer を配置すると、以下のような表示になります。
Spacer を一方にのみ配置
|
1 2 3 4 5 6 7 8 9 10 11 12 |
struct ContentView: View { var body: some View { VStack(spacing: 10) { Spacer().frame(width:5).background(Color.blue) Text("Hello, world!") .padding() .background(Color.orange) } } } |
Spacer をビューの両側に配置
Spacer が 複数配置されると、同じように広がるため、結果として、Text ビューが中央に配置されることになります。
両側に Spacer を配置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
struct ContentView: View { var body: some View { VStack(spacing: 10) { Spacer().frame(width:5).background(Color.blue) Text("Hello, world!") .padding() .background(Color.orange) Spacer().frame(width:5).background(Color.blue) } } } |
ここまでは、Apple のドキュメントからも読み取れるかと思いますが、次の使い方には気づきませんでした。
Spacer を複数配置
Spacer を複数配置すると、同じように広がります。その時に、Spacer の間に別のビューが存在する必要はありません。
ですので、配置するSpacer の数を調整することで、スペースの長さの比を調整できます。
例えば、Text を 全体の上から 1/3 に配置したい時には、上に Spacer を１つ、下に Spacer を２つ配置すれば良いことになります。
複数 Spacer を配置したレイアウト調整
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
struct ContentView: View { var body: some View { VStack(spacing: 10) { Spacer().frame(width:5).background(Color.blue) Text("Hello, world!") .padding() .background(Color.orange) Spacer().frame(width:5).background(Color.blue) Spacer().frame(width:5).background(Color.blue) } } } |
まとめ：SwiftUI の Spacer を使った配置のコツ
タイトル
- Spacer は、できるだけ広がろうとする
- 複数 Spacer があるときは、同じだけ広がる
- 隣り合った Spacer でもそれぞれに広がる。
- m 個の Spacer と n 個の Spacer を組み合わせると、m:n の配置ができる
説明は以上です。
不明な点やおかしな点ありましたら、ご連絡いただけるとありがたいです。
Sponsor Link