SplitView in iOS 18

Day 25: Manifesting a Split View Layout

Welcome to Day 25 of the #30DaysOfSwift series!

Split views allow you to create master-detail interfaces that are perfect for iPad, offering a way to present multiple panes of information side by side.

---

Step 1: Understanding the Split View Layout

In a split view, you typically have:

1. A sidebar (or master view) that displays a list of items.

2. A detail view that shows content based on the selection from the sidebar.

SwiftUI makes it easy to create this kind of layout using NavigationSplitView.

Step 2: Building the Split View

import SwiftUI

struct SplitViewExample: View {
    @State private var selectedItem: String? = "Item 1"
    let items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        NavigationSplitView {
            // Sidebar View
            List(items, id: \.self, selection: $selectedItem) { item in
                Text(item)
                    .padding()
                    .frame(maxWidth: .infinity, alignment: .leading)
            }
            .navigationTitle("Sidebar")
        } detail: {
            // Detail View
            if let selectedItem = selectedItem {
                DetailView(selectedItem: selectedItem)
            } else {
                Text("Select an item")
                    .font(.largeTitle)
                    .foregroundColor(.gray)
            }
        }
    }
}

struct DetailView: View {
    let selectedItem: String

    var body: some View {
        VStack {
            Text("Details for \(selectedItem)")
                .font(.largeTitle)
                .padding()

            Spacer()
        }
        .navigationTitle("Detail")
    }
}

How does it works out for you? Share your thoughts below.

Happy Coding!