スペーシングとアライメント

SwiftUIが提供する豊富なレイアウト機能の中でも、スペーシングとアライメントはUIデザインの基礎を形成します。これらのツールを適切に活用することで、アプリのインターフェースはより直感的で美しく、使いやすくなります。このブログでは、SwiftUIでのスペーシングとアライメントの基本的な使用法を紹介します。

スペーシング（Spacing）
1. スタック内のスペーシング
2. Spacerを使用したスペーシング
アライメント（Alignment）
1. まとめ

スペーシング（Spacing）

スペーシングは、ビュー間の空間、すなわち「余白」を指します。
SwiftUIでは、スタック（HStack, VStack, ZStack）を使ってビューを配置する際に、スペーシングを指定できます。
これにより、ビュー間の距離を簡単に調整することが出来ます。

スタック内のスペーシング

スタック（HStackやVStack）を使用する際、spacingパラメータを指定することで、ビュー間の距離をコントロールできます。
これにより、ビューの見た目を改善し、ユーザーにとって読みやすく、理解しやすいレイアウトを作成できます。

スタック内スペーシング: HStackやVStackのspacingパラメータを使用して、子ビュー間の水平または垂直方向のスペーシングを指定します。

import SwiftUI

struct SpaceSmpView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("First Item")
            Text("Second Item")
        }
    }
}

この例では、2つのテキストビュー間の垂直スペーシングを20ポイントに設定しています。

Spacerを使用したスペーシング

Spacerビューを使用して、ビュー間に柔軟な空間を追加し、ビューを押し分けることができます。

import SwiftUI

struct SpaceSmpView: View {
    var body: some View {
        HStack {
            Text("Left")
            Spacer() // 中央の空間を作る
            Text("Right")
        }
    }
}

この例では、Spacerが左右のテキストビューを押し分けて、両端に配置します。

アライメント（Alignment）

アライメントは、ビューが親ビューまたは他のビューに対してどのように位置づけられるかを制御します。
SwiftUIでは、スタックやグリッド、ZStackなどでアライメントを指定することができ、ビューの整列を細かく調整できます。

VStackのアライメント

alignmentパラメータで、子ビューの垂直方向のアライメントを指定します。

import SwiftUI

struct AlignmentSmp: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Line 1")
            Text("Long Line 2")
        }
        .border(.blue)
    }
}

画像では、VStack内のテキストビューを左揃え（leading）、中央揃え（center）、右揃え（trailing）にしています。

HStackのアライメント

以下の記事においてHStackのアライメントについて解説しています。

HStackとVStackの特徴や基本的な使い方

HStackとVStackはSwiftUIでUIをレイアウトするための重要なコンポーネントです。この記事では、HStackとVStackの使い方や役割について詳しく解説します。HStackとVStackの基本HStackとVStackの基本...

`ZStack`のアライメント

ZStackでは、重ね合わせるビューの配置をalignmentパラメータで制御します。

alingmentで設定できる値はleading（左揃え）やtrailing（右揃え）、top（上揃え）、bottom（下揃え）だけではなく、bottomTrailing（右下揃え）など上下左右の混在の揃え方も可能です。

import SwiftUI

struct AlignmentSmp2: View {
    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            Image("background1")
            Text("Overlay")
                .font(.title)
                .foregroundColor(.white)
        }
    }
}