DEV Community

Cover image for SplitView in iOS 18 - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi

Posted on

SplitView in iOS 18 - #30DaysOfSwift

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.

Image description


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")
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Happy Coding!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay