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!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay