[SwiftUI]Viewの背景にImage(画像)を表示するには？

SwiftUI

2022.03.30

どうも、ちょげ(@chogetarou)です。

Viewの背景に画像であるImageを表示する方法を紹介します。

方法
1. background
2. ZStack
まとめ

方法

Viewの背景に画像を表示する方法は、２つあります。

background

１つは、background修飾子を使う方法です。

まず、Viewにbackground修飾子を付与します。

そして、background修飾子の引数にImageを指定します。

SomeView()
    .background(
        Image("image")
    )

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI")
                .font(.title)
                .background(
                    Image("bgimage")
                        .resizable()
                        .frame(width: 200, height: 50)
                )
        }
    }
}

ZStack

もう１つは、ZStackを使う方法です。

まず、ZStackを用意します。

そして、 ZStackのクロージャーに、ImageとViewを配置します。(ImageをViewよりも前に配置)

ZStack {
    Image("image")
    SomeView()
}

使用例


    var body: some View {
        ZStack {
            Image("bgimage")
                .resizable()
                .frame(width: 200, height: 50)
            
            Text("Hello, SwiftUI")
                .font(.title)
                .foregroundColor(.white)
        }
    }
}