CODEWITHSUNDEEP
swiftuitvos
bcardarella
bcardarella

Reputation: 4745

How to design this sidebar in tvOS?

enter image description here

I presume this is a NavigationSplitView and the menu on the left is the sidebar closure. But I'm not quite sure how to reproduce this menu style in SwiftUI. There are very little docs or guides on how to develop and style tvOS apps.

Upvotes: 1

Views: 285

Answers (1)

Petr Flaks
Petr Flaks

Reputation: 583

In tvOS 18 they added TabView. By default it looks like a row with tabs on top, and if you add .tabViewStyle(.sidebarAdaptable) it will start look like TV app sidebar.

tvOS 18 sidebar

Code sample:

enum Tabs: String {
  case home
  case currentlyWatching
  case search
}

struct ContentViewWithSideBar: View {
  @AppStorage("ContentViewWithTabView.selectedTab") private var selectedTab: Tabs = .home

  var body: some View {
    TabView(selection: $selectedTab) {
      Tab("Home", systemImage: "play.house", value: .home) {
        NavigationStack {
          HomeView()
        }
      }

      Tab("Currently Watching", systemImage: "play.square.stack", value: .currentlyWatching) {
        NavigationStack {
          CurrentlyWatchingView()
        }
      }

      Tab(value: .search, role: .search) {
        NavigationStack {
          SearchShowsView()
        }
      }
    }
    .tabViewStyle(.sidebarAdaptable)
  }
}

See "Enhancing your app’s content with tab navigation" on Apple Developer webside with code samples and demo app.

Important to note that this new left menu on tvOS has lots of bugs (as I tested on tvOS 18.2), and these bugs are reproducible even in Apple's official sample app from the link I provided above.

Upvotes: 1

Related Questions