🦅

[SwiftUI]Viewを重ねる方法と使い分け

リョウ

2024/08/16に公開

Swift

SwiftUI

tech

SwiftUIでViewを重ねる方法はいくつかあります。
今回はその使い方と、使い分けをまとめます。

Speaker Deck版はこちら

ZStack

Viewを重ねる基本的な方法の1つです。

ZStack {
    Color.orange
    Text("Hello, world!")
}

zIndex

Viewの重なる順番を細かく調整できます。
重なる順番を、動的に変更することも可能です。

VStack(spacing: -50) {
    Rectangle()
        .fill(Color.orange)
        .frame(width: 100, height: 100)
        .zIndex(1)

    Rectangle()
        .fill(Color.red)
        .frame(width: 100, height: 100)
}

background

Viewの背後に別のViewを配置できます。
確保される領域は、backgroundに配置したViewの影響を受けません。

Text("Hello, world!")
    .padding()
    .background(Color.orange, in: RoundedRectangle(cornerRadius: 16))

overlay

Viewの前面に別のViewを配置できます。
確保される領域は、overlayに配置したViewの影響を受けません。

Text("Hello, world!")
    .padding()
    .overlay(alignment: .topTrailing) {
        Text("New")
            .font(.footnote)
            .foregroundColor(Color.white)
            .padding(4)
            .background(Color.red, in: Capsule())
    }

safeAreaInset

SafeAreaの外側にViewを追加できます。
カスタムヘッダーやフローティングボタンなどで使用すると効果的です。

List(0 ..< 20) { index in
    Text("Hello, World! \(index)")
}
.listStyle(PlainListStyle())
.safeAreaInset(edge: .bottom) {
    HStack {
        Spacer()
        Text("カスタムフッター")
            .padding()
        Spacer()
    }
    .background(.bar)
}

宣伝

株式会社アルクでは、ディズニーファンタスピークの開発をしています。
ディズニーファンタスピークはディズニーの作品や音楽を楽しみながら、英語学習ができるアプリです。
英語を勉強したいけど、教科書みたいなのはちょっと…という方におすすめです。

気になった方は下記からインストールお願いします。

株式会社アルクPublication