01 Jul 2022

There are many times when one needs to show text on an image, for example display credits of the photographer on an image. SwiftUI makes this incredibly easy to do so with the overlay modifier.

For this example, we will display an image we got from unsplash.com and then display the name of the photographer who took this image.

VStack(alignment: .leading) {
  Image("backgroundImage")
      .resizable()
      .aspectRatio(contentMode: .fit)
}

We will create a separate view that will display the overlay so we can reuse this if neccessary. We will set the opacity of the view to 60% in our example.

struct OverlayTextView: View {
    let creditName: String
    var body: some View {
        ZStack {
            Text("Credit: \(creditName)")
                .font(.callout)
                .padding(8)
                .foregroundColor(.white)
                .font(.footnote)
        }.background(Color.black)
        .opacity(0.6)
        .cornerRadius(10.0)
        .padding(8)
    }
}

Here is how OverlayTextView looks with the above setup. Image Overlay Text

Now we can display this view on top of our backgroundImage by calling the overlay modifier as mentioned earlier. The photographer who took the image is Grace Gallingam so we will display her name as a credit on our image.

VStack(alignment: .leading) {
  Image("backgroundImage")
      .resizable()
      .aspectRatio(contentMode: .fit)
      .overlay(OverlayTextView(creditName: "Grace Galligan"), alignment: .bottomTrailing)
}

Image Overlay Text

If you want to display the image on the top left we will pass .topLeading attribute to the alignment parameter of the overlay modifier.