Navigationsplitview In Swiftui

My notes on multi column apps in swiftui

From iOS 16 onwards, use NavigationSplitView to make layouts with two or three columns on iPad and Mac. You can adjust how the columns look, how wide they are, and when they are visible.

Two-column

A two-column split view has a sidebar and detail columns:

NavigationSplitView {
  Sidebar() // Menu bar
} detail: {
  Detail() // Detail view for each of the menu item
}

Three-column

NavigationSplitView {
  Sidebar() // Menu bar
} content: {
  Content() // Sub menu
} detail: {
  Detail() // Detail view for each of the sub-menu item
}

Basic 2 column setup for iPad and 1 column for iOS

Drawback is that it uses navigationbar on iphone. And buttons are provided for you without much customization options.
Benefit is that it works out of the box, and takes care of many things like resizing etc

import SwiftUI

fileprivate struct MasterViewer: View {
   var body: some View {
      NavigationView {
         List {
            ForEach(1..<10) { index in
               NavigationLink(destination: DetailViewer(item: index)) {
                  Text("Item \(index)")
               }
            }
         }
         .navigationBarTitle("Master")
         
         Text("Select an item")
            .font(.largeTitle)
            .foregroundColor(.gray)
      }
   }
}

fileprivate struct DetailViewer: View {
   let item: Int
   
   var body: some View {
      Text("Detail for Item \(item)")
         .font(.largeTitle)
         .navigationBarTitle("Detail")
   }
}
#Preview {
   MasterViewer()
}

2 column example using navigationsplitview:

has sidebar display mode button in the toolbar which toggles the sidebar visibility
In portrait, the split view defaults to hiding the sidebar and slides it over the detail view when toggled by the button. The split view collapses into a stack navigation for compact screens such as the iPhone and the iPad in slide over. ```swift struct WorldView: View { @EnvironmentObject var store: WorldStore @State private var selection: Country?

var body: some View { NavigationSplitView { List(store.countries, selection: $selection) { country in NavigationLink(value: country) { CountryCell(country: country) } } .navigationTitle(“World”) } detail: { if let country = selection { CountryView(country: country) } else { Text(“Select a country”) } } } }

## Split View Visibility
You can programmatically control the sidebar display mode by passing a binding to a NavigationSplitViewVisibility state property to the split view:

```swift
@State private var columnVisibility =
  NavigationSplitViewVisibility.doubleColumn

var body: some View {
  NavigationSplitView(columnVisibility: $columnVisibility) { ... }

There are four possible values:

automatic: This is the default and provides a platform suitable display mode. all: Shows all columns. Use the default leading column visibility for the current device. This is the default setting. doubleColumn: Shows the content and detail columns of a three-column split view or the sidebar and detail columns of a two-column split view. Show the content column and detail area of a three-column navigation split view. detailOnly: Collapses the split view to shows only the detail column. Hide the leading two columns of a three-column split view. In other words, only the detail area shows.

Note that for a two-column split-view the all and doubleColumn modes are the same.
You cannot remove the display mode button. 😅

Split View Style

The split view style modifier controls whether the split view overlays the sidebar/content on the detail view or presents them side-by-side. There are three built-in styles:

automatic: This is the default and provides a context specific style. balanced: This style reduces the size of the detail view to make room to show the leading column(s) side-by-side. prominentDetail: This style tries to maintain the size of the detail view by showing the leading columns overlayed over the detail view. Note: On an iPad, the automatic style gives you a balanced (side-by-side) style in landscape and prominent detail (sidebar overlay) in portrait.

For example, if I always want to show the sidebar side-by-side in both portrait and landscape I can apply the balanced style to our split view:

NavigationSplitView(columnVisibility: $columnVisibility) {
  // sidebar
} detail: {
  // detail view
}
.navigationSplitViewStyle(.balanced)

The sidebar is now always shown side-by-side with a reduced width detail view. Compare this with the earlier screenshot of the portrait orientation which has the sidebar in an overlay

Note that the user can still toggle the visibility of the sidebar. This is similar to the .allVisible preferred display mode of UISplitViewController.

Split View Width Finally you can configure the preferred column widths. There are two versions of the modifier depending on whether you want a fixed or flexible width. The flexible width modifier accepts an ideal width and optional min and max values:

// Fixed column width .navigationSplitViewColumnWidth(200)

// Flexible column width .navigationSplitViewColumnWidth(min: 300, ideal: 400, max: 500) I’ve been unable to get this to work with the sidebar column (FB10749141). I’m able to reduce the sidebar width, but not increase it. I’m not sure if that’s intended, the widths are preferred and the split view can ignore them if the presentation environment doesn’t allow resizing columns.

Here’s an example with a three-column split view where I’ve set a fixed width for the first two columns:

struct ContentView: View {
  @State private var columnVisibility = 
    NavigationSplitViewVisibility.all

  var body: some View {
    NavigationSplitView(columnVisibility: $columnVisibility) {
      Sidebar()
        .navigationSplitViewColumnWidth(200)
    } content: {
      Content()
        .navigationSplitViewColumnWidth(200)
    } detail: {
        Detail()
    }
    .navigationSplitViewStyle(.balanced)
  }
}