Align rotated Texts in SwiftUI HStack

Question

I am trying to trailing align rotated texts (top aligned after rotation?). I have tried different combinations of the HStack alignment parameter, each Text's alignmentGuide() ViewModifier and a custom VerticalAlignmentGuide but was not able to achieve the desired result. I did refrain from using the .frame() ViewModifier since the text's scale factor might change depending on the amount of Text Views.

Needed alignment shown with red line:

Base code:

HStack {
    VStack {
        Spacer()
        Rectangle()
            .fill(Color.green)
            .frame(height: 80)
        Text("Text 1")
            .rotationEffect(.degrees(-90))
            .padding(.top, 30)
    }
    VStack {
        Spacer()
        Rectangle()
            .fill(Color.green)
            .frame(height: 80)
        Text("Text 2")
            .rotationEffect(.degrees(-90))
            .padding(.top, 30)
    }
    VStack {
        Spacer()
        Rectangle()
            .fill(Color.green)
            .frame(height: 80)
        Text("Text 34")
            .rotationEffect(.degrees(-90))
            .padding(.top, 30)
    }
}

score 3 · Answer 1 · answered Feb 27 '20 at 14:00

3

try this:

VStack(alignment: .trailing) {
            Text("Text 1")

            Text("Text 2")

            Text("Text 34")

        }.rotationEffect(.degrees(-90))

answered Feb 27 '20 at 14:00

Chris

7,579
3
18
38

1

Apologies mate, I just realized I oversimplified my example. I am going to update my question. Gave you an upvote. My bad... – Christopher Graf Feb 27 '20 at 14:36

score 2 · Answer 2 · answered Feb 27 '20 at 16:24

ok, my last one now, hope you are satisfied ;)

struct ContentView: View {
    var body: some View {
        HStack {
            VStack(alignment: .center) {
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 80)
                Text("Text 1")
                    .frame(width:100, height:100, alignment: .trailing)
                    .rotationEffect(.degrees(-90))
            }
            VStack(alignment: .center) {
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 80)
                Text("Text 2")
                    .frame(width:100, height:100, alignment: .trailing)
                    .rotationEffect(.degrees(-90))
            }
            VStack(alignment: .center) {
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 80)
                Text("Text 345")
                    .frame(width:100, height:100, alignment: .trailing)
                    .rotationEffect(.degrees(-90))
            }
        }
    }
}

score 1 · Answer 3 · answered Feb 27 '20 at 15:13

new answer for your comment update:

HStack {
            VStack {
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 80)
                Text("Text 1")
                    .rotationEffect(.degrees(-90), anchor: .bottomTrailing)
                    .padding(.top, 30)
            }
            VStack {
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 80)
                Text("Text 2")
                    .rotationEffect(.degrees(-90), anchor: .bottomTrailing)
                    .padding(.top, 30)
            }
            VStack {
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 80)
                Text("Text 34")
                    .rotationEffect(.degrees(-90), anchor: .bottomTrailing)
                    .padding(.top, 30)
            }
        }
    }

It must be center aligned with the Rectangles (see updated picture above). The goal is to create a X-Axis description for several Bar Charts. There will be a dynamic number of bar charts so the width of the bar chart rectangles might change to fit more bars. — Christopher Graf, Feb 27 '20 at 15:59

Align rotated Texts in SwiftUI HStack

3 Answers3