[SwiftUI]Image(画像)にText(テキスト)を重ねる(overlay)には？

[SwiftUI]Image(画像)にText(テキスト)を重ねるには？

SwiftUI

2022.05.27

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

Image(画像)にText(テキスト)を重ねる方法を紹介します。

方法
1. overlay修飾子
2. ZStack
まとめ

方法

Image(画像)にText(テキスト)を重ねる方法は、２つあります。

overlay修飾子

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

まず、Imageにoverlay修飾子を付与します。

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

Image("アセット名")
    .overlay(
        Text("テキスト")
    )

引数にTextを指定したoverlay修飾子を、Imageに付与することで、ImageにTextを重ねることができます。

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Image("coffee")
                .overlay(
                    Text("Good, Morning")
                        .foregroundColor(.white)
                        .font(.system(size: 24))
                        .frame(width: 300, height: 200)
                        .background(Color.blue)
                )
        }
    }
}

ZStack

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

まず、ZStackを配置します。

そして、ZStackのクロージャーにImageを指定します。

Imageの後にTextを指定します。

ZStack {
    Image("アセット名")
    Text("テキスト")
}

使用例

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("cream")
                .resizable()
                .aspectRatio(contentMode: .fit)
            Text("Cupcake")
                .foregroundColor(.white)
                .font(.system(size: 50))
                .padding()
                .background(Color.green)
        }
    }
}