Créez une app SwiftUI avec le nouveau design

1:11 - Segmented Picker

Picker("View", selection: $selection) {
    Text("Map").tag(ViewMode.map)
    Text("List").tag(ViewMode.list)
}
.pickerStyle(.segmented)

3:59 - Extend background images

// Extend background images

struct LandmarkDetailView: View {
    let landmark: Landmark

    var body: some View {
        ScrollView {
            VStack {
                Image(landmark.backgroundImageName)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .backgroundExtensionEffect()
            }
        }
    }
}

4:23 - Adding an inspector

// Adding an inspector

NavigationSplitView {
    // sidebar
} detail: {
    // detail
}
.inspector(isPresented: $presentInspector) {
    LandmarkDetailInspectorView(landmark: landmark)
}

5:07 - Minimize tab bar on scroll

// Minimize tab bar on scroll

TabView {
    // tabs
}
.tabBarMinimizeBehavior(.onScrollDown)

5:39 - Tab bar accessory

// Tab bar accessory

TabView {
    // tabs
}
.tabBarMinimizeBehavior(.onScrollDown)
.tabViewBottomAccessory {
    MusicPlaybackView()
}

struct MusicPlaybackView: View {
    @Environment(\.tabViewBottomAccessoryPlacement)
    var placement

    var body: some View {
        if placement == .inline {
            // compact layout
        } else {
            // full layout
        }
    }
}

6:20 - Sheets with presentation detents

// Sheets

CollectionDetailView()
    .sheet(isPresented: $isShowingLandmarksSelection) {
        LandmarksSelectionList()
            .presentationDetents([.height(180), .medium, .large])
    }

6:53 - Presentation background

// Presentation background

CollectionDetailView()
    .sheet(isPresented: $isShowingLandmarksSelection) {
        LandmarksSelectionList()
            .presentationDetents([.height(180), .medium, .large])
            .presentationBackground(.thickMaterial)
    }

7:10 - Zoom transition

// Zoom transition

@Namespace private var namespace

ContentView()
    .toolbar {
        ToolbarItem(placement: .bottomBar) {
            Button {
                isPresented = true
            } label: {
                Image(systemName: "map")
            }
            .matchedTransitionSource(
                id: "transition-id", in: namespace)
        }
    }
    .sheet(isPresented: $isPresented) {
        SheetContent()
            .navigationTransition(
                .zoom(
                    sourceID: "transition-id", in: namespace))
    }

7:27 - Toolbar menus

// Toolbar menus

LandmarkDetailView()
    .toolbar {
        ToolbarItemGroup {
            Button { } label: {
                Image(systemName: "square.and.arrow.up")
            }

            Menu(
                "Collections",
                systemImage: "book.closed"
            ) {
                // menu items
            }
        }
    }

7:41 - Confirmation dialog

// Confirmation dialog

CollectionDetailView()
    .toolbar {
        Button("Delete", systemImage: "trash") {
            presentDialog = true
        }
        .confirmationDialog(
            "Delete?",
            isPresented: $presentDialog
        ) {
            Button("Delete", role: .destructive) { }
        }
    }

8:26 - Visually separate toolbar items

// Visually separate toolbar items

struct LandmarkDetailView: View {
    var body: some View {
        ScrollView {
            ScrollContent()
        }
        .toolbar {
            ToolbarItem { ShareLink() }
            ToolbarSpacer(.fixed)
            ToolbarItem { FavoriteButton() }
            ToolbarItem { CollectionsButton() }
            ToolbarSpacer(.fixed)
            ToolbarItem { InspectorToggle() }
        }
    }
}

8:47 - Toolbar items with flexible spacing

// Toolbar items with flexible spacing

struct InboxView: View {
    var body: some View {
        ScrollView {
            ScrollContent()
        }
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                FilterPicker()
            }
            ToolbarSpacer(.flexible, placement: .bottomBar)
            DefaultToolbarItem(
                kind: .search, placement: .bottomBar)
            ToolbarSpacer(.fixed, placement: .bottomBar)
            ToolbarItem(placement: .bottomBar) {
                NewMessageButton()
            }
        }
    }
}

9:07 - Hide shared glass background

// Hide shared glass background

struct HomeView: View {
    var body: some View {
        ContentView()
            .toolbar {
                ToolbarItem {
                    ProfileButton()
                }
                .sharedBackgroundVisibility(.hidden)
            }
    }
}

9:40 - Toolbar item with a badge

// Toolbar item with a badge

@Environment(ModelData.self) var modelData

CollectionsView()
    .toolbar {
        ToolbarItemGroup {
            Button("Notifications", systemImage: "bell") { }
                .badge(modelData.notifications.count)
            Button("Add", systemImage: "plus") { }
        }
    }

10:57 - Hard scroll edge effect

// Hard scroll edge effect

ScrollView {
    // content
}
.scrollEdgeEffectStyle(.hard, for: .top)

11:44 - Search in top-trailing position

// Search in the top-trailing position

struct TopTrailingSearch: View {
    @State private var searchText = ""

    var body: some View {
        NavigationSplitView {
            SidebarContent()
        } detail: {
            DetailContent()
        }
        .searchable(text: $searchText)
    }
}

12:51 - Minimized search in toolbar

// Minimized search in the toolbar

struct MinimizedSearch: View {
    @State private var searchText = ""

    var body: some View {
        NavigationStack {
            DetailContent()
        }
        .searchable(text: $searchText)
        .searchToolbarBehavior(.minimize)
    }
}

13:17 - TabView with a search tab

// TabView with a search tab

struct ContentView: View {
    @State private var searchText = ""

    var body: some View {
        TabView {
            // other tabs

            Tab(role: .search) {
                NavigationStack {
                    SearchTabContent()
                }
            }
        }
        .searchable(text: $searchText)
    }
}

14:25 - Capsule buttons

Button(…)
    .buttonBorderShape(.capsule)

15:09 - Button sizes: high density layouts

// Button sizes: high density layouts

VStack {
    Picker("Inspector View Mode", selection: $mode) {
        // options
    }
    .controlSize(.large)

    InspectorStackView()
        .controlSize(.small)
}

15:33 - Glass button styles

// Prominent glass button
Button("Get Started") { }
    .buttonStyle(.glassProminent)

// Standard glass button
Button("Learn More") { }
    .buttonStyle(.glass)

16:32 - macOS menu icons

// Menus

Menu("Edit") {
    Section {
        Button("Undo",
               systemImage: "arrow.uturn.backward") { }
        Button("Redo",
               systemImage: "arrow.uturn.forward") { }
    }

    Section {
        Button("Copy",
               systemImage: "document.on.document") { }
        Button("Duplicate",
               systemImage: "plus.square.on.square") { }
    }
}

17:27 - Concentric rectangle shape

// Concentric rectangle shape

CustomControl()
    .background(.tint, in: .rect(corner: .containerConcentric))

18:30 - Glass effect

// Glass effect

Label("Desert", systemImage: "sun.max.fill")
    .padding()
    .glassEffect()

18:52 - Glass effect: custom shape

// Customize shape

Label("Desert", systemImage: "sun.max.fill")
    .padding()
    .glassEffect(in: .rect(cornerRadius: 16))

18:59 - Glass effect: tinted

// Tinted glass

Label("Desert", systemImage: "sun.max.fill")
    .padding()
    .glassEffect(.regular.tint(.green))

19:21 - Glass effect: interactive

// Interactive glass

Label("Desert", systemImage: "sun.max.fill")
    .padding()
    .glassEffect(.regular.interactive())

19:51 - Glass morphing with GlassEffectContainer

// GlassEffectContainer

@Namespace var namespace

GlassEffectContainer {
    VStack {
        if isExpanded {
            VStack(spacing: 16) {
                ForEach(badges) { badge in
                    BadgeLabel(badge: badge)
                        .glassEffect()
                        .glassEffectID(badge.id, in: namespace)
                }
            }
        }

        BadgeToggle()
            .buttonStyle(.glass)
            .glassEffectID("badgeToggle", in: namespace)
    }
}