SwiftUI Split View: A Practical Guide For Developers

SwiftUI continues to redefine app development with its declarative syntax and ease of use. One of its standout features is the Split View, a tool that allows developers to create sophisticated, responsive interfaces for both larger devices like iPads and smaller ones like iPhones.

This article provides an in-depth understanding of the SwiftUI Split View and its components, offering examples, tips, and best practices to help you build dynamic apps.

What is a Split View in SwiftUI?

A Split View in SwiftUI refers to a multi-column layout where content is divided into leading columns and a detail column. This layout is ideal for applications requiring hierarchical navigation or complex column layouts.

For example, apps like Mail or Notes use Split Views to organize sidebar detail navigation, ensuring a seamless navigation experience.

The Basics of Navigation Split View in SwiftUI

SwiftUI offers NavigationSplitView, which allows developers to create layouts with two or three columns. This setup adapts to different screen sizes, providing a consistent experience on both larger devices and smaller screens.

Here’s a basic usage example:

1import SwiftUI
2
3struct ContentView: View {
4    @State private var selectedItem: String? = nil
5
6    var body: some View {
7        NavigationSplitView {
8            List {
9                NavigationLink("Item 1", destination: Text("Detail for Item 1"))
10                NavigationLink("Item 2", destination: Text("Detail for Item 2"))
11            }
12        } detail: {
13            if let selectedItem = selectedItem {
14                Text("Detail View for \\(selectedItem)")
15            } else {
16                Text("Select an item")
17            }
18        }
19    }
20}

​

This example demonstrates the use of var body some View, a required component for defining your UI structure.

Exploring the Column Layout Options

The NavigationSplitView can handle two-column layouts or three-column split views depending on the layout you need. Each column can serve a different purpose:

• Primary View: Typically the sidebar, containing the list of items.

• Content Column: Sometimes used in three-column layouts to show an intermediate view.

• Detail Column: Displays the detail view based on the user’s selection.

For instance, here’s a three-column layout example:

1struct ThreeColumnView: View {
2    var body: some View {
3        NavigationSplitView {
4            Text("Sidebar")
5        } content: {
6            Text("Content Column")
7        } detail: {
8            Text("Detail Column")
9        }
10    }
11}

​

The three-column split view is best suited for larger screens like iPads or iPhone Pro Max, ensuring optimal column visibility.

Customizing Column Visibility and Style

The column visibility in a split view can be controlled using the NavigationSplitViewColumnVisibility modifier. This allows you to dynamically show or hide specific columns, adapting to portrait mode, landscape mode, or user preferences.

1@State private var columnVisibility: NavigationSplitViewVisibility = .all
2
3NavigationSplitView(columnVisibility: $columnVisibility) {
4    Text("Sidebar")
5} content: {
6    Text("Content")
7} detail: {
8    Text("Detail")
9}

​

This state private var lets you programmatically toggle columns based on the app’s context.

Handling User Interaction with Navigation Links

To navigate between views, navigation links can be used within the sidebar or first column. This improves the app’s navigation experience.

Here’s an example:

1struct SidebarWithLinks: View {
2    var body: some View {
3        NavigationSplitView {
4            List {
5                NavigationLink("Profile", destination: ProfileView())
6                NavigationLink("Settings", destination: SettingsView())
7            }
8        } detail: {
9            Text("Select an option")
10        }
11    }
12}

​

The sidebar detail combination ensures smooth navigation across the app.

Responsive Design for Larger Devices and Smaller Screens

SwiftUI’s Split View automatically adapts to larger screens like iPads and smaller ones like iPhones. For instance, in portrait mode, the app might show a single column, while in landscape mode, it could display two or more columns.

Developers can also use the fixed modifier to set specific widths for columns:

1NavigationSplitView {
2    Text("Sidebar").frame(minWidth: 200, idealWidth: 250, maxWidth: 300)
3} detail: {
4    Text("Detail").frame(maxWidth: .infinity)
5}

​

This ensures that your split view looks great on all screen sizes.

Managing Data in a Split View

To create dynamic detail views, pass data between columns using @State or @Binding. For example:

1struct DataDrivenView: View {
2    @State private var selectedItem: String?
3
4    var body: some View {
5        NavigationSplitView {
6            List(["Item A", "Item B", "Item C"], id: \\.self) { item in
7                Button(action: {
8                    selectedItem = item
9                }) {
10                    Text(item)
11                }
12            }
13        } detail: {
14            if let selectedItem = selectedItem {
15                Text("Detail for \\(selectedItem)")
16            } else {
17                Text("Select an item")
18            }
19        }
20    }
21}

​

This setup ensures the detail column dynamically updates based on the user selection.

Advanced Techniques: Programmatically Controlling the Split View

Sometimes, you may need to programmatically control the split view. SwiftUI allows you to dynamically adjust column visibility or pass parameters to customize your layouts.

1@State private var isSidebarVisible = true
2
3NavigationSplitView {
4    if isSidebarVisible {
5        Text("Sidebar")
6    }
7} detail: {
8    Text("Detail")
9}

​

This level of control allows you to create tailored split views for specific use cases.

Final Thoughts!

The SwiftUI Split View is a powerful feature for building responsive and intuitive apps. With its ability to adapt to different layouts, support for three-column split views, and options for controlling column visibility, it’s an essential tool for modern app development. By leveraging components like navigation split view, sidebar detail, and detail columns, developers can create seamless user experiences across larger screens and compact devices.

Experiment with these examples and make the most of SwiftUI's robust features in your next project!

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.