How to show text inside a circle with SwiftUI

This time, we will look at a couple of ways to show a text label inside a circle using SwiftUI. We will dig deeper into three different ways using the ZStack view, .background and .overlay modifiers. In the end, as a small bonus, we will check out how to present a text label over a circle using the .clipShape modifier.

Photo by Octavio Fossatti on Unsplash.

Our end goal is something like this:

Layout out with ZStack

ZStack in SwiftUI is a unique view that shows all its children on top of each other. It works similarly to z-index in CSS. So let's try to show a Circle view and then the Text view on top. To not allow the Circle to fill the whole screen, we need to set a constant view width and height.

ZStack {
  Circle()
    .stroke(circleColor, lineWidth: 4)
  
  Text("13")
}
.frame(width: 40, height: 40)

Practicing the .background modifier

Now let’s see how to use the .background modifier. Sadly Apple has not provided us with any documentation on how to use it, so we need to understand it ourselves the hard way. We can check out the source code and try to understand what is this view modifier doing.

func background<Background>(_ background: Background, alignment: Alignment = .center) -> some View where Background : View

By applying this modifier, we need to pass in a View and optionally specify the alignment in both axes. Let's set how can we use it for our Text field. This time we are not going to check out the alignment parameter. We want to show a circle as a background for the Text field.

Text("13")
  .background(
    Circle()
      .stroke(circleColor, lineWidth: 4)
      .padding(6)
  )

The outcome is not exactly what we wanted. To improve it, we need some space between the text and the circle to look a bit better.

To have a nice gap between the number and the circle, we could use the .padding() modifier. Now the text and the circle have some room to breathe between them.

Text("13")
  .padding()
  .background(
    Circle()
      .stroke(circleColor, lineWidth: 4)
      .padding(6)
  )

Untangling the overlay modifier