Customize Split View Appearance in SwiftUI

Written by Team Kodeco

In SwiftUI, the customization of a NavigationSplitView can be done smoothly using various modifiers for managing the width of columns, their visibility and the overall style of the split view.

Let’s consider an engaging application where users can explore a list of favorite movies and read more about each one. You will use NavigationSplitView for the app’s main structure and showcase how to customize its appearance.

struct Movie: Identifiable, Hashable {
  let id: Int
  let title: String
  let description: String
}

struct ContentView: View {
  let movies = [
    Movie(id: 1, title: "The Matrix", description: "A computer hacker learns from mysterious rebels about the true nature of his reality and his role in the war against its controllers."),
    Movie(id: 2, title: "Inception", description: "A thief who steals corporate secrets through the use of dream-sharing technology is given the inverse task of planting an idea into the mind of a C.E.O."),
    Movie(id: 3, title: "Interstellar", description: "A group of explorers make use of a newly discovered wormhole to surpass the limitations on human space travel and conquer the vast distances involved in an interstellar voyage.")
  ]
  @State private var selectedMovie: Movie? = nil
  @State private var columnVisibility: NavigationSplitViewVisibility = .doubleColumn

  var body: some View {
    NavigationSplitView(columnVisibility: $columnVisibility) {
      List(movies, selection: $selectedMovie) { movie in
        NavigationLink(movie.title, value: movie)
      }
      .navigationTitle("Favorite Movies")
    } detail: {
      if let selectedMovie = selectedMovie {
        DetailView(movie: selectedMovie)
      } else {
        Text("Select a movie from the list to see its details.")
      }
    }
    .navigationSplitViewColumnWidth(400)
    .navigationSplitViewStyle(.balanced)
  }
}

struct DetailView: View {
  let movie: Movie

  var body: some View {
    Text(movie.description)
      .padding()
      .navigationTitle(movie.title)
  }
}

Ensure your simulator is an iPad and your preview should look like this:

In this example, the List has been modified to utilize the selection argument. This argument binds the selectedMovie state variable to the selection in the list. The NavigationLink uses only value argument to assign each Movie instance to the link.

The columnVisibility state variable is set to .doubleColumn to ensure both the sidebar and the detail view are visible when the app runs. The column visibility automatically adjusts when the device is in portrait orientation.

To further customize the split view’s appearance, the navigationSplitViewColumnWidth modifier sets the preferred width for the column containing the movie list to 400 points.

Finally, the NavigationSplitView uses the navigationSplitViewStyle modifier to adopt the .balanced style. This style gives equal prominence to both the sidebar and the detail column, maintaining a balanced appearance regardless of orientation.

Through these modifiers, SwiftUI provides an elegant way to customize NavigationSplitView and create dynamic and adaptable layouts.