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:
- A sidebar (or master view) that displays a list of items.
- 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!
Top comments (0)