[SwiftUI] あまり知られていない Spacer の使い方

SwiftUI

     

TAGS:

⌛️ 2 min.
あまり知られていない Spacer の使い方を説明します。

Spacer

ビューの1つであり、レイアウト調整に使われます。

HStack の中に配置されると 横方向に広がり、VStack の中では縦方向に広がります。

以下では、VStack の中に配置してみていきます。

準備:Spacer なしの配置

Text を VStack の中に配置してみました。

VStack は、指定なしでは、alignment: .center ですので、中央に配置されています。

Spacer なし


struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
                .padding()
                .background(Color.orange)
        }
    }
}

Spacer なしの配置

「Spacer なしの配置」

MEMO

わかりやすくするために、Text ビューの背景にはオレンジ色を、Spacer の背景には、青色を設定し、VStack には、spacing:10 を設定しています。

ビューと画面端の間に Spacer を配置

Text は、できる限り小さな領域を使って表示しようとしますが、Spacer は、可能な限り広がろうとします。

ですので、一方にのみ Spacer を配置すると、以下のような表示になります。

一方にのみ Spacer を配置

「一方にのみ Spacer を配置」
Spacer を一方にのみ配置


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 を配置

「両側に Spacer を配置」

両側に Spacer を配置


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 を1つ、下に Spacer を2つ配置すれば良いことになります。

複数 Spacer を配置しての調整

「複数 Spacer を配置してのレイアウト調整」

複数 Spacer を配置したレイアウト調整


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 の配置ができる

説明は以上です。
不明な点やおかしな点ありましたら、ご連絡いただけるとありがたいです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です