Format number inside image bubble

October 3, 2022

I’m having some trouble understanding how to properly align items in top of each other:

So I have the following VStack:

VStack(spacing: 0) {
    Text("\(placeC.places.count)")
    Image("map-pin-full-cluster-1")
        .renderingMode(.template)
        .resizable()
        .frame(width: 35, height: 35)
        .foregroundColor(.brown)
} //: END VStack

Which produces the following output:

What is the best way to have the number inside the circle? Is there a recommended SwiftUI builder that you all use that I can explore?

>Solution :

Typically you would use an .overlay:

Image("map-pin-full-cluster-1")
    .renderingMode(.template)
    .resizable()
    .frame(width: 35, height: 35)
    .foregroundColor(.brown)
    .overlay(alignment: .top) {
        Text("\(placeC.places.count)")
    }

or a ZStack:

ZStack(alignment: .top) {  // other alignments: .center, .bottom, .leading, .trailing
    Image("map-pin-full-cluster-1")
        .renderingMode(.template)
        .resizable()
        .frame(width: 35, height: 35)
        .foregroundColor(.brown)
    Text("\(placeC.places.count)")
        .padding(.top, 4)  // adjust this to move the text up/down
}