【SwiftUI】ZStackでViewを重ねる

2023年12月1日2023年12月30日

記事内に商品プロモーションが含まれる場合があります

TextやImageなどのViewを重ねて表示するにはZStackを使います。

Zは特に何かの単語の略ではなく、Z軸が奥行きを表すので、そのZが使われていると思われます。

ZStackの基本的な使い方

ZStack {
   子View1
   子View2
   子View3
}

ZStack内に最初に配置したビューが奥になり、後に配置したビューが手前に表示されます。

上記の例の場合、子View1が一番下に配置され、順に子View2、子View3という順に表示されます。

サンプルコード

struct ContentView: View {
    var body: some View {
        ZStack {
            // 奥に配置されるビュー
            Image("SampleImage")
                .resizable()
                        
            // 手前に配置されるビュー
            Text("Hello, SwiftUI!")
                .foregroundColor(.black)
                .font(.largeTitle)
                .padding(.horizontal)
                .padding(.vertical, 6)
                .background(.yellow)
                .cornerRadius(8)
        }
        .ignoresSafeArea()
    }
}

ZStackでの配置指定を変更するには？

ZStack内での配置位置を変更するには、alignmentプロパティを使用します。

ZStack(alignment: 配置位置) {
   子View1
   子View2
   子View3
}

配置位置は次の９種類あります。

配置位置	意味
.bottom	下寄せ
.bottomLeading	左下寄せ
.bottomTrailing	右下寄せ
.top	上寄せ
.topLeading	左上寄せ
.topTrailing	右上寄せ
.leading	左寄せ
.trailing	右寄せ
.center	中央寄せ

サンプルコード

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottom)  {
            // 奥に配置されるビュー
            Image("SampleImage")
                .resizable()
                        
            // 手前に配置されるビュー
            Text("Hello, SwiftUI!")
                .foregroundColor(.black)
                .font(.largeTitle)
                .padding(.horizontal)
                .padding(.vertical, 6)
                .background(.yellow)
                .cornerRadius(8)
        }
        .ignoresSafeArea()
    }
}