CODEWITHSUNDEEP
swiftswiftuitvos
Rajmund Zawiślak
Rajmund Zawiślak

Reputation: 942

tvOS Settings UI & Transition

I want to make a similar view to that of tvOS settings. I would like the view on the left to be static and the view on the right to be navigable.

I tried using NavigationSplitView, because it looked like that at beginning, but behaviour is very different from it and I began to wonder if this view was made from the behavior of system controls or if it was custom made after all.

Can this behavior be achieved with system controls? Or do I have to write something like this myself ?

This is how it looks

enter image description here

Upvotes: 0

Views: 258

Answers (1)

SomeUser
SomeUser

Reputation: 56

As far as I know there is no fixed option, I have reprogrammed it.

First I created a horizontal view HStack with an spacing of 0.

In this HStack I have created two vertical views VStack, the left one I have given a fixed size of 50% of the main screen, the right one no fixed size, because otherwise it makes problems with the list (in my case at least)

In the right VStack I have stored the NavigationStack, so you can navigate in it.

Here's how I did it :

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0){ //<- avoid space between both vstack
            VStack{
                Group{
                    RoundedRectangle(cornerRadius: 90, style: .circular)
                        .fill(.gray.opacity(0.3))
                        .frame(width: UIScreen.main.bounds.width * 0.3, height: UIScreen.main.bounds.width * 0.3)
                        .shadow(radius: 12)
                }
            }.frame(width: UIScreen.main.bounds.width * 0.5) //<- 50% of Screen for left part
            
            
            VStack{
                NavigationStack{
                    List{
                        ForEach(1..<5){setting in
                            NavigationLink {
                                Text("Your Setting!")
                            } label: {
                                Text("\(setting). Setting")
                            }
                        }
                    }
                    .listStyle(.grouped) //<- make list like your example gif
                }
            }
        }.background(.gray.opacity(0.2))
    }
}

#Preview {
    ContentView()
}

Upvotes: 2

Related Questions