How to implement navigation split view in SwiftUI

Posted on 30 Nov 2023 . 1 min read

In SwiftUI, the NavigationView and SplitView allow you to create split-screen layouts, especially useful for iPad applications. The NavigationView helps manage navigation within a view hierarchy, while SplitView divides the screen into two or more panes, often used with a master-detail interface.

Here's a basic example demonstrating the use of NavigationView with SplitView:

import SwiftUI

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

struct DetailView: View {
    let item: Int
    
    var body: some View {
        Text("Detail for Item \(item)")
            .font(.largeTitle)
            .navigationBarTitle("Detail")
    }
}

@main
struct SplitApp: App {
    var body: some Scene {
        WindowGroup {
            #if os(iOS)
            MasterView()
            #else
            SplitView()
                .frame(minWidth: 800, minHeight: 600) // Set minimum size for iPad/macOS
            #endif
        }
    }
}

In the above code:

MasterView presents a list of items using NavigationView and List. Tapping an item navigates to its detail view.

DetailView displays details of a selected item.

SplitApp is the entry point. For iPad or macOS, it shows a SplitView, otherwise, it displays only the MasterView.

The bottom line

Remember to adapt the layout and functionality to fit your specific app requirements. Additionally, handling navigation, adapting to different device sizes, and providing appropriate UI for both master and detail views might need further customization based on your application's needs.

Don’t hesitate to contact me if you have any questions or queries. Follow me on twitter @gurjitpt for any updates.

Thanks!

Share this article

Written By

Generic placeholder image

Gurjit Singh

I’m Computer Science graduate and CompTIA Security+ certified SOC Analyst and Mobile Application Security Engineer with 10+ years of cross-platform development experience across iOS, Android, and web.

Discover articles by topics

SwiftUI Class Struct Networking XCode NSCache Enum Optionals Property Observers Closures Guard Reviews StoreKit App Store Algorithms Testing Operators Protocol Extensions Weak Unowned SwiftData WWDC23 GCD API Admob SwiftLint Lottie Foreach Objective-C UIKit NavigationSplitView