SwiftUIでのZStackの活用方法まとめ

SwiftUIのZStackは、ビューを重ねて配置することで、奥行きや視覚的な重なりを持たせることができるレイアウトコンポーネントです。この記事では、ZStackの基本的な使い方から実践的な応用例までを詳しく解説します。

1. 基本的な使い方
2. レイヤーの表示順序の調整
3. 複数の要素の重ね合わせ
4. 背景画像とテキストを組み合わせる
5. レイアウトの位置調整
まとめ

1. 基本的な使い方

ZStackはSwiftUIでビューを重ねて配置するためのコンテナビューです。ZStack内に配置されたビューは、前面にあるものから背面にあるものへと重なります。つまり、一番上に配置されたビューが一番前面に表示されるという仕組みです。

import SwiftUI

struct ZStackSmpView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.blue)
                .frame(width: 200, height: 200)
            Circle()
                .fill(Color.red)
                .frame(width: 100, height: 100)
        }
    }
}

この例では、RectangleとCircleの2つのビューがZStack内に重ねられています。Rectangleは青色の長方形であり、Circleは赤色の円形です。RectangleがCircleを覆い隠しており、そのため青色の長方形が背面に、赤色の円形がその上に重なって表示されます。

2. レイヤーの表示順序の調整

ZStackは任意に表示順序を変更することも可能です。

ZStack内でのビューの表示順序を調整するためには、.zIndex()を使用します。このzIndexは、ビューの表示順序を調整する際に役立ちます。

import SwiftUI

struct ZStackSmpView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.blue)
                .frame(width: 200, height: 200)
                .zIndex(1) // 表示順序を1番目に設定
            Circle()
                .fill(Color.red)
                .frame(width: 220, height: 220)
                .zIndex(2) // 表示順序を2番目に設定
        }
    }
}

左の画像がRectangleのzIndexが1、CircleのzIndexが2と設定
右の画像はRectangleのzIndexが2、CircleのzIndexが1と設定

3. 複数の要素の重ね合わせ

複数のZStackやVStackなどとも組み合わせて使用することも出来ます。
次のコードは、SwiftUIのZStackを使用して複数のビューを重ねて配置し、さらにVStackを使用して縦方向に配置しています。

import SwiftUI

struct ZStackSmpView: View {
    var body: some View {
        ZStack {
            Color.gray.edgesIgnoringSafeArea(.all) // グレーの背景ビュー

            VStack {
                ZStack {
                    Circle()
                        .fill(Color.white) // 白い円形ビュー
                        .frame(width: 150, height: 150) // サイズを指定

                    Rectangle()
                        .fill(Color.blue) // 青い長方形ビュー
                        .frame(width: 100, height: 100) // サイズを指定
                }
                Text("Nested ZStack")
                    .foregroundColor(.white) // 白色のテキスト
            }
        }
    }
}

このコードでは、ZStack内にColor.grayを使って灰色の背景を設定し、その上にVStackが配置されています。VStack内には、さらにZStackが組み込まれています。この中のZStackには、Circle()とRectangle()が重ねられています。

4. 背景画像とテキストを組み合わせる

基本的な使い方とほぼ同じではありますが、画像と重ね合わせるコード例です。

import SwiftUI

struct ZStackSmpView: View {
    var body: some View {
        ZStack {
            Image("28262271_s")
                .resizable()
                .edgesIgnoringSafeArea(.all)
            VStack {
                Text("Welcome!")
                    .font(.largeTitle)
                    .foregroundColor(.white)
            }
        }
    }
}

5. レイアウトの位置調整

.offsetを使用してレイアウトの位置を調整することも可能です。

import SwiftUI

struct ZStackSmpView: View {
    var body: some View {
        ZStack {
            VStack {
                Text("Header")
                Spacer()
                Text("Center Content")
                Spacer()
                Text("Footer")
            }
            Image(systemName: "circle")
                .resizable()
                .frame(width: 100, height: 100)
                .foregroundColor(.blue)
                .offset(x: 50, y: -50)
        }
    }
}

左の画像が.offsetを使用して位置を調整した画像です