レイアウトとアニメーション

SwiftのSwiftUIにおける「レイアウトとアニメーション」について、以下に詳しく説明します。

---

1. SwiftUIにおけるレイアウト

SwiftUIでは、ビューの配置やサイズを決めるレイアウトシステムが宣言的に記述できるようになっています。以下のようなレイアウトコンテナを利用して、ビューを構造的に配置します。

① 基本的なレイアウトコンテナ

例

swift
VStack {
    Text("上のテキスト")
    Text("下のテキスト")
}

② Spacerとpadding

• Spacer() は空白を挿入して、ビューを端に寄せたり、均等に配置したりするために使います。

• .padding() はビューの周囲に余白を設けます。

例

swift
HStack {
    Text("左")
    Spacer()
    Text("右")
}
.padding()

③ GeometryReader

GeometryReaderを使うと、親ビューのサイズや位置に応じてレイアウトを動的に調整できます。

---

2. SwiftUIにおけるアニメーション

SwiftUIのアニメーションは非常にシンプルに実装できます。状態の変化に応じて、スムーズなアニメーションを自動的に適用できます。

① .animation()モディファイア

ビューにアニメーションを適用する基本的な方法です。

例

swift
@State private var isExpanded = false

var body: some View {
    VStack {
        Rectangle()
            .frame(width: isExpanded ? 300 : 100, height: 100)
            .animation(.easeInOut, value: isExpanded)

        Button("トグル") {
            isExpanded.toggle()
        }
    }
}

② withAnimation関数

状態変更にアニメーションを適用したい場合、withAnimationブロック内で状態を変更します。

swift
withAnimation(.spring()) {
    isExpanded.toggle()
}

③ 遷移アニメーション (.transition())

ビューの表示／非表示にアニメーションを適用するには、transitionモディファイアを利用します。opacity や move, scale などの組み込みトランジションがあります。

例

swift
if showBox {
    Rectangle()
        .frame(width: 100, height: 100)
        .transition(.slide)
        .animation(.default, value: showBox)
}

④ アニメーションの種類

---

3. アニメーションと状態管理の組み合わせ

SwiftUIでは、@State や @Binding などの状態変数の変化に応じて、アニメーションが自然にトリガーされます。この宣言的アプローチにより、コードが非常に簡潔かつ読みやすくなります。

---

まとめ