Dunfey · Hotel WWDC as data, est. 1983
Front desk everything
Years
Topics

WWDC23 · 14 min · SwiftUI & UI Frameworks

Update your app for watchOS 10

Join us as we update an Apple Watch app to take advantage of the latest features in watchOS 10. In this code-along, we’ll show you how to use the latest SwiftUI APIs to maximize glanceability and reorient app navigation around the Digital Crown.

Watch at developer.apple.com ↗

Transcript all transcripts

Chapters

  • 1:33 — Build against the watchOS 10 SDK
  • 2:33 — NavigationSplitView
  • 5:21 — TabView and vertical pagination
  • 8:11 — Toolbar with new placement options
  • 9:07 — Background color
  • 11:10 — Materials

Code shown on screen · 8 snippets

NavigationSplitView swift · at 4:02 ↗ 
NavigationSplitView {
    List(backyardsData.backyards, selection: $selectedBackyard) { backyard in
        BackyardCell(backyard: backyard)
    }
    .listStyle(.carousel)
} detail: {
    if let selectedBackyard {
        BackyardView(backyard: selectedBackyard)
    } else {
        BackyardUnavailableView()
    }
}
Vertical TabView swift · at 6:18 ↗ 
TabView {
    TodayView()
        .navigationTitle("Today")
    HabitatGaugeView(level: $waterLevel, habitatType: .water, tintColor: .blue)
        .navigationTitle("Water")
    HabitatGaugeView(level: $foodLevel, habitatType: .food, tintColor: .green)
        .navigationTitle("Food")
    List {
        VisitorView()
            .navigationTitle("Visitors")
    }
}
.tabViewStyle(.verticalPage)
Add refill button to Toolbar swift · at 8:37 ↗ 
.toolbar {
    ToolbarItemGroup(placement: .bottomBar) {
        Spacer()
        Button {
            level = Int(min(100, Double(level) + 5))
        } label: {
            Label("Add", systemImage: "plus")
        }
    }
}
HabitatGaugeView background color function and variables swift · at 9:48 ↗ 
func backgroundColor(_ level: Int, for type: HabitatType) -> Color {
    let color: Color = type == .food ? .green : .blue
    return level < 40 ? .red : color
}

var waterColor: Color {
    backgroundColor(waterLevel, for: .water)
}

var foodColor: Color {
    backgroundColor(foodLevel, for: .food)
}
.containerBackground within TabView swift · at 10:10 ↗ 
TabView {
    TodayView()
        .navigationTitle("Today")
        .containerBackground(Color.accentColor.gradient, for: .tabView)
    HabitatGaugeView(level: $waterLevel, habitatType: .water, tintColor: waterColor)
        .navigationTitle("Water")
        .containerBackground(waterColor.gradient, for: .tabView)
    HabitatGaugeView(level: $foodLevel, habitatType: .food, tintColor: foodColor)
        .navigationTitle("Food")
        .containerBackground(foodColor.gradient, for: .tabView)
    List {
        VisitorView()
            .navigationTitle("Visitors")
            .containerBackground(Color.accentColor.gradient, for: .tabView)
    }
}
.tabViewStyle(.verticalPage)
.environmentObject(backyard)
.navigationTitle(backyard.displayName)
Add material to the backyard name swift · at 11:38 ↗ 
.foregroundStyle(.secondary)
.background(Material.ultraThin, in: RoundedRectangle(cornerRadius: 7))
Visitor score overlay with materials swift · at 12:15 ↗ 
.overlay(alignment: .topTrailing) {
    Text("\(backyard.visitorScore)")
        .frame(width: 25, height: 25)
        .foregroundStyle(.secondary)
        .background(.ultraThinMaterial, in: .circle)
        .padding(.top, 5)
}
Light materials swift · at 12:20 ↗ 
.environment(\.colorScheme, .light)

Resources