1

I want to build a menu like the image bellow where I can scroll between menus. I did try multiple combinations with HStack/VStack in ScrollView and rotation modifier on Text and/or stacks. However, none of my attempts really works as intended.

enter image description here

Attempt 1

Code

struct ContentView: View {

    let sections = ["Exclusives", "Apple", "Android", "Videos", "Got a leak ?"].reversed()

    var body: some View {
        VStack(spacing: 0) {
        
            // Header
            Rectangle()
                .fill(Color(UIColor.quaternaryLabel))
                .frame(height: UIScreen.main.bounds.width * 0.2)
        
            // Vertical Menu + Content
            HStack(spacing: 0) {
            
                // Menu using VStack and rotation on Text
                ScrollView(.vertical) {
                    VStack(spacing: 32) {
                        ForEach(sections, id: \.self) { section in
                            Text(section)
                                // padding added on workingdog suggestion.
                                // But steal not producing exactly what I'm looking for. 
                                .padding()
                                .rotationEffect(.degrees(-90), anchor: .center)
                        }
                    }
                }
            
                // Content Placeholder
                Rectangle()
                    .fill(Color(UIColor.tertiarySystemFill))
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            .ignoresSafeArea(.all, edges: .bottom)
        }
    }
}

Result

enter image description here

Attempt 2

Code

struct ContentView: View {

    let sections = ["Exclusives", "Apple", "Android", "Videos", "Got a leak ?"].reversed()

    var body: some View {
        VStack(spacing: 0) {
        
            // Header
            Rectangle()
                .fill(Color(UIColor.quaternaryLabel))
                .frame(height: UIScreen.main.bounds.width * 0.2)
        
            // Vertical Menu + Content
            HStack(spacing: 0) {
            
                // Menu using rotation on HStack
                ScrollView(.vertical) {
                    HStack(spacing: 32) {
                        ForEach(sections, id: \.self) { section in
                            Text(section)
                        }
                    }
                    .rotationEffect(.degrees(-90), anchor: .center)
                }
            
                // Content Placeholder
                Rectangle()
                    .fill(Color(UIColor.tertiarySystemFill))
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            .ignoresSafeArea(.all, edges: .bottom)
        }
    }
}

Result

enter image description here

Issue

I did try other methods with minor changes derived from these two 2 concepts. But as I understand it, the problem comes from using the rotation modifier, which rotate the content, not the view itself (causing unwanted behaviour).

Thank you for your help !

Hans Rietmann
  • 396
  • 5
  • 13
  • Just to clarify, are you just looking for a scrollable set of rotated text views like this picture? – George Jun 13 '21 at 21:32
  • Yep exactly ! But it has to not cut any word even if some are long (more than the width of the menu). – Hans Rietmann Jun 13 '21 at 22:29
  • 1
    I have tried to get this working, but can only get it working when the content is always _longer_ than the height of the screen :/ – George Jun 14 '21 at 00:14
  • I change to "Text(section).padding()" in attempt1 and all seems to work for me. Maybe I do not understand well enough what the problem is. – workingdog support Ukraine Jun 14 '21 at 08:24
  • I did try you suggestion of adding a padding to Text and it did make it better but some long content does in fact get outside the boundaries of the Text view. – Hans Rietmann Jun 14 '21 at 08:59

2 Answers2

0

maybe this is closer to the picture:

struct ContentView: View {
                                                                      // added this space
    let sections = ["Exclusives", "Apple", "Android", "Videos", "Got a leak ?", ""].reversed()
    
    var body: some View {
        HStack { 
            // Menu using HStack 
        ScrollView(.horizontal) {
            HStack(spacing: 32) {
                ForEach(sections, id: \.self) { section in
                    Text(section)
                        .padding().border(.red)
                }
            }
        }.rotationEffect(.degrees(-90), anchor: .center)
            VStack(spacing: 0) {
                // Header
                Rectangle()
                    .fill(Color(UIColor.quaternaryLabel))
                    .frame(height: UIScreen.main.bounds.width * 0.2)
                // Vertical Content
                HStack(spacing: 0) {
                    // Content Placeholder
                    Rectangle()
                        .fill(Color(UIColor.tertiarySystemFill))
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                }
            }
        }.ignoresSafeArea(.all, edges: .bottom)
    }
}
workingdog support Ukraine
  • 26,280
  • 4
  • 27
  • 37
0

I did found a good solution using Attempt 2 and rotating the entire Text view using @robniper detailed answer here : https://stackoverflow.com/a/59802487/5541378

Hans Rietmann
  • 396
  • 5
  • 13