CODEWITHSUNDEEP
iosswiftswiftui
metaflor22
metaflor22

Reputation: 165

text alignment / swiftUi

swiftui i am learning new. I couldn't align my brain stopped. In the picture I said how I wanted to do this. Can you help?

enter image description here

  HStack{
                Text("Picture")
                    .font(.custom("Pacifico-Regular",size: 50))
                    .padding()
                    .foregroundColor(Color.white)
                        .shadow(color: .white, radius: 10, x: 0, y: 0)
                    
                    Image("1coin").resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width:30, height: 30)
                    Text("123")
                        .font(.custom("Pacifico-Regular",size: 20))
                        .foregroundColor(Color.white)
                    
                }

Upvotes: 1

Views: 195

Answers (2)

Asperi
Asperi

Reputation: 258541

Here is possible layout (with some replicated components instead of your custom). Prepared with Xcode 12.1 / iOS 14.1

demo

    HStack{
        Spacer()
        Text("Picture")
            .font(.custom("Pacifico-Regular",size: 50))
            .padding()
            .foregroundColor(Color.white)
            .shadow(color: .white, radius: 10, x: 0, y: 0)
        Spacer().overlay(
            HStack {
                Image(systemName: "1.circle").resizable()
                    .foregroundColor(Color.white)
                    .aspectRatio(contentMode: .fit)
                    .frame(width:30, height: 30)
                Text("123")
                    .font(.custom("Pacifico-Regular",size: 20))
                    .foregroundColor(Color.white)
            }
        , alignment: .trailing)
    }

Upvotes: 1

Grzegorz Krukowski
Grzegorz Krukowski

Reputation: 19872

You can use ZStack to embed two HStacks and align them separately. They will be displayed on top of each other.

You align "Picture" text to the middle - it happens by default. And then align second HStack with Spacer()

ZStack {
    HStack{
        Text("Picture")
        .font(.custom("Pacifico-Regular",size: 50))
        .background(Color.red)
        .padding()
        .shadow(color: .black, radius: 10, x: 0, y: 0)
    }
    HStack {
         Spacer()
         Image("1coin").resizable()
         .aspectRatio(contentMode: .fit)
         .frame(width:30, height: 30)
         .background(Color.red)
         Text("123")
         .font(.custom("Pacifico-Regular",size: 20))
         .background(Color.red)
    }
}

If you want to keep all elements at the top, you will need another VStack + Spacer on top of ZStack:

VStack {
    ZStack {
        HStack{
        Text("Picture")
            .font(.custom("Pacifico-Regular",size: 50))
            .background(Color.red)
            .padding()
                .shadow(color: .black, radius: 10, x: 0, y: 0)
        }
        
        HStack {
            Spacer()
            Image("1coin").resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width:30, height: 30)
                .background(Color.red)
            Text("123")
                .font(.custom("Pacifico-Regular",size: 20))
                .background(Color.red)
        }
    }
    Spacer()
}

Upvotes: 1

Related Questions