Skip to content

Instantly share code, notes, and snippets.

@SoundBlaster
Last active June 18, 2022 18:27
Show Gist options
  • Save SoundBlaster/a8190c0a86533da9d8f9d1b08a9df3e2 to your computer and use it in GitHub Desktop.
Save SoundBlaster/a8190c0a86533da9d8f9d1b08a9df3e2 to your computer and use it in GitHub Desktop.
WWDC 2022 Split View for three column proper usage
//
// ContentView.swift
// NewNav
//
// Created by Egor Merkushev on 15.06.2022.
//
import SwiftUI
struct CustomColorCategory: Identifiable, Hashable, Equatable {
var id = UUID()
let colors: [CustomColor]
let name: String
}
struct CustomColor: Identifiable, Hashable {
var id = UUID()
let color: Color
let name: String
}
struct ContentView: View {
@Environment(\.horizontalSizeClass) var horizontalSizeClass
var colorsCategories: [CustomColorCategory] = [
CustomColorCategory(colors: [
CustomColor(color: .red, name: "red"),
CustomColor(color: .blue, name: "blue"),
CustomColor(color: .yellow, name: "yellow")
], name: "common"),
CustomColorCategory(colors: [
CustomColor(color: .cyan, name: "cyan"),
CustomColor(color: .mint, name: "mint"),
CustomColor(color: .accentColor, name: "accent")
], name: "specific"),
]
@State var selectedCategory: CustomColorCategory?
@State var selectedColor: CustomColor?
@State var pathCategory: NavigationPath = NavigationPath()
@State var pathColor: NavigationPath = NavigationPath()
var body: some View {
Group {
if horizontalSizeClass == .regular {
NavigationSplitView {
List(colorsCategories,
selection: $selectedCategory) { category in
NavigationLink(value: category) { // does not work with List selection option, presents just for visual style of selection provided by Split View sidebar
Text(category.name)
}
}
.navigationTitle("Categories")
} content: {
CategoryView(category: selectedCategory,
colorSelection: $selectedColor)
} detail: {
DetailView(color: selectedColor)
}
} else {
NavigationSplitView {
List(colorsCategories,
selection: $selectedCategory) { category in
NavigationLink(value: category) { // does not work with List selection option, presents just for visual style of selection provided by Split View sidebar
Text(category.name)
}
}
.navigationTitle("Categories")
} detail: {
NavigationStack {
CategoryView(category: selectedCategory,
colorSelection: $selectedColor)
}
}
}
}
.onChange(of: selectedCategory) { newValue in
selectedColor = nil
}
}
}
struct CategoryView: View {
var category: CustomColorCategory?
@Binding var colorSelection: CustomColor?
@Environment(\.horizontalSizeClass) var horizontalSizeClass
var body: some View {
Group {
if horizontalSizeClass == .regular {
List(category?.colors ?? [], selection: $colorSelection) { color in
row(color: color)
}
} else {
List(category?.colors ?? []) { color in
row(color: color)
}
}
}
.navigationDestination(for: CustomColor.self) { color in
DetailView(color: color)
}
.navigationTitle(category?.name ?? "")
}
@ViewBuilder
func row(color: CustomColor) -> some View {
NavigationLink(value: color) {
HStack {
Rectangle()
.fill(color.color)
.frame(width: 20, height: 20)
Text(color.name)
}
}
}
}
struct DetailView: View {
let color: CustomColor?
var body: some View {
VStack {
if let color {
Rectangle()
.fill(color.color)
.frame(width: 200, height: 200)
Text(color.name)
} else {
EmptyView()
}
}
.navigationTitle(color?.name ?? "")
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
@SoundBlaster
Copy link
Author

SoundBlaster commented Jun 16, 2022

NavigationSplitView in iOS 16 beta 1 has several visual and logic bugs inside. Apple's example is not usable on the .compact horizontal size classes. This example shows how to avoid most of caveats.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment