SwiftUI aligning text with different length in multiple HStacks

Question

I'm trying to align text in two different HStacks but having difficulties getting the second (shorter length) one to align with the first HStack. I've tried using .frame(minWidth:0, maxWidth: .infinity) and Spacer()'s but can't find a solution. Is this possible at all?

struct ContentView: View {
var body: some View {
    VStack(alignment: .leading) {
        HStack {
            Spacer()
            Text("Lorem ipsum dolor")
                .font(.system(size: 22, weight: .ultraLight, design: .rounded))
            Spacer()
        }.padding()
        .overlay(
            Rectangle()
                .stroke(Color(#colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)), style: StrokeStyle(lineWidth: 0.5, dash: [5.0])))
       
        
        HStack {
            Spacer()
            Text("Lorem ipsum")
                .font(.system(size: 22, weight: .ultraLight, design: .rounded))
            Spacer()
        }.padding()
        .overlay(
            Rectangle()
                .stroke(Color(#colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)), style: StrokeStyle(lineWidth: 0.5, dash: [5.0])))
    }
  }
}

I attempted to use a HorizontalAlignment guide, but they became off-centred:

struct ContentView: View {
var body: some View {
    VStack(alignment: .controlLeadingEdge) {
        HStack {
            Text("Lorem ipsum dolor")
                .font(.system(size: 22, weight: .ultraLight, design: .rounded))
                .alignmentGuide(.controlLeadingEdge, computeValue: { d in d[HorizontalAlignment.leading] })
        }.padding()
        .frame(minWidth: 0, maxWidth: 300)
        .overlay(
            Rectangle()
                .stroke(Color(#colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)), style: StrokeStyle(lineWidth: 0.5, dash: [5.0])))
        
        HStack {
            Text("Lorem ipsum")
                .font(.system(size: 22, weight: .ultraLight, design: .rounded))
                .alignmentGuide(.controlLeadingEdge, computeValue: { d in d[HorizontalAlignment.leading] })
        }.padding()
        .frame(minWidth: 0, maxWidth: 300)
        .overlay(
            Rectangle()
                .stroke(Color(#colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)), style: StrokeStyle(lineWidth: 0.5, dash: [5.0])))
        
    }
 }
}

extension HorizontalAlignment {
private enum ControlAlignment: AlignmentID {
    static func defaultValue(in context: ViewDimensions) -> CGFloat {
        return context[HorizontalAlignment.controlLeadingEdge]
    }
}
static let controlLeadingEdge = HorizontalAlignment(ControlAlignment.self)
}

How do you want it aligned? Do you want the longest one centered and the other aligned to the leading edge of the longest? Is the second one always shorter? — vacawama
– vacawama, Commented Nov 22, 2020 at 0:24
@vacawama I wanted to have the shortest one aligned to the leading edge of the longest. Yes that's correct, the second one will also be shorter. Thanks — user2047296
– user2047296, Commented Nov 22, 2020 at 0:35

vacawama · Accepted Answer · 2020-11-22 01:04:17Z

2

Here is one way to do it:

Repeat the first text, give it .opacity(0) and put it in a ZStack with .leading alignment

struct ContentView: View {
    var body: some View {
        let firstText = Text("Loren ipsum dolor")
        let secondText = Text("Loren ipsum")
        
        VStack(alignment: .leading) {
            HStack {
                Spacer()
                firstText
                    .font(.system(size: 22, weight: .ultraLight, design: .rounded))
                Spacer()
            }.padding()
            .overlay(
                Rectangle()
                    .stroke(Color(#colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)), style: StrokeStyle(lineWidth: 0.5, dash: [5.0])))
            
            HStack {
                Spacer()
                ZStack(alignment: .leading) {
                    firstText.opacity(0)
                    secondText
                }
                .font(.system(size: 22, weight: .ultraLight, design: .rounded))
                Spacer()
            }.padding()
            .overlay(
                Rectangle()
                    .stroke(Color(#colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)), style: StrokeStyle(lineWidth: 0.5, dash: [5.0])))
        }
    }
}

answered Nov 22, 2020 at 1:04

vacawama

155k32 gold badges283 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2047296 Over a year ago

Thank you very much! I have a follow up question, if you wouldn't mind answering? When looking at ways to fix it, I looked at using Alignment guides but the HStacks became off-centred. Is this down to SwiftUI or would I have to play around with them a bit more?

user2047296 Over a year ago

I've updated my answer to show the HorizontalAlignment example if you wouldn't mind having a look?

vacawama Over a year ago

The alignment guides do move the views around, which is why the outlines no longer align. I don't see an obvious way to get the aligned text without moving the outlines.

user2047296 Over a year ago

Oh ok, thank you for the explanation and original answer.

Collectives™ on Stack Overflow

SwiftUI aligning text with different length in multiple HStacks

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related