MENU

【SwiftUI】ZStackでViewを重ねる

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

TextImageなどの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
}   

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

配置位置意味
.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()
    }
}

関連記事

SwiftUIが学べる書籍

Share
  • URLをコピーしました!

Comment

コメントする

目次