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

WWDC22 · 13 min · SwiftUI & UI Frameworks

SwiftUI on iPad: Add toolbars, titles, and more

Get ready to tune up your iPad app’s toolbars with SwiftUI. We’ll show you how you can structure toolbars to take advantage of the space available on iPad and help people maximize their productivity. We’ll also take you through customization, explore the latest ways you can represent documents, and more. This is the second session in a two-part series. To get the most out of this video, we recommend starting with “SwiftUI on iPad: Organize your interface.”

Watch at developer.apple.com ↗

Transcript all transcripts

Code shown on screen · 17 snippets

Explicit More Menu swift · at 0:01 ↗ 
PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItem(placement: .primaryAction) {
            Menu {
                FavoriteToggle(place: $place)
                AdjustImageButton(place: $place)
                AdjustMapButton(place: $place)
            } label: {
                Label(
                    "More", 
                    systemImage: "ellipsis.circle")
            }
        }
    }
Menu in ToolbarItemGroup swift · at 0:02 ↗ 
PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItemGroup(placement: .primaryAction) {
            Menu {
                FavoriteToggle(place: $place)
                AdjustImageButton(place: $place)
                AdjustMapButton(place: $place)
            } label: {
                Label("More", systemImage: "ellipsis.circle")
            }
        }
    }
ToolbarItemGroup with Menu Content swift · at 0:03 ↗ 
PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItemGroup(placement: .primaryAction) {
            FavoriteToggle(place: $place)
            AdjustImageButton(place: $place)
            AdjustMapButton(place: $place)
        }
    }
Secondary Action ToolbarItemGroup swift · at 0:04 ↗ 
PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItemGroup(placement: .secondaryAction) {
            FavoriteToggle(place: $place)
            AdjustImageButton(place: $place)
            AdjustMapButton(place: $place)
        }
    }
Toolbar Role swift · at 0:05 ↗ 
PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItemGroup(placement: .secondaryAction) {
            FavoriteToggle(place: $place)
            AdjustImageButton(place: $place)
            AdjustMapButton(place: $place)
        }
    }
    .toolbarRole(.editor)
Individual ToolbarItems swift · at 0:06 ↗ 
PlaceDetailContent(place: $place)
    .toolbar {
        ToolbarItem(placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(placement: .secondaryAction) {
            AdjustImageButton(place: $place)
        }
        ToolbarItem(placement: .secondaryAction) {
            AdjustMapButton(place: $place)
        }
    }
    .toolbarRole(.editor)
Customizable ToolbarItems swift · at 0:07 ↗ 
PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            AdjustImageButton(place: $place)
        }
        ToolbarItem(id: "map", placement: .secondaryAction) {
            AdjustMapButton(place: $place)
        }
    }
    .toolbarRole(.editor)
ShareLink ToolbarItem swift · at 0:08 ↗ 
PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            AdjustImageButton(place: $place)
        }
        ToolbarItem(id: "map", placement: .secondaryAction) {
            AdjustMapButton(place: $place)
        }
        ToolbarItem(id: "share", placement: .secondaryAction) {
            ShareLink(item: place)
        }
    }
    .toolbarRole(.editor)
Non-default ShareLink ToolbarItem swift · at 0:09 ↗ 
PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            AdjustImageButton(place: $place)
        }
        ToolbarItem(id: "map", placement: .secondaryAction) {
            AdjustMapButton(place: $place)
        }
        ToolbarItem(id: "share", placement: .secondaryAction, showsByDefault: false) {
            ShareLink(item: place)
        }
    }
    .toolbarRole(.editor)
ControlGroup in ToolbarItem swift · at 0:10 ↗ 
PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            ControlGroup {
                AdjustImageButton(place: $place)
                AdjustMapButton(place: $place)
            }
        }
        ToolbarItem(id: "share", placement: .secondaryAction, showsByDefault: false) {
            ShareLink(item: place)
        }
    }
    .toolbarRole(.editor)
ControlGroup in ToolbarItem with Label swift · at 0:11 ↗ 
PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            ControlGroup {
                AdjustImageButton(place: $place)
                AdjustMapButton(place: $place)
            } label: {
                Label("Edits", systemImage: "wand.and.stars")
            }
        }
    }
    .toolbarRole(.editor)
NewButton ToolbarItem swift · at 0:12 ↗ 
PlaceDetailContent(place: $place)
    .toolbar(id: "place") {
        ToolbarItem(id: "new", placement: .primaryAction) {
            NewButton()
        }
        ToolbarItem(id: "favorite", placement: .secondaryAction) {
            FavoriteToggle(place: $place)
        }
        ToolbarItem(id: "image", placement: .secondaryAction) {
            ControlGroup {
                AdjustImageButton(place: $place)
                AdjustMapButton(place: $place)
            } label: {
                Label("Edits", systemImage: "wand.and.stars")
            }
        }
        ToolbarItem(id: "share", placement: .secondaryAction, showsByDefault: false) {
            ShareLink(item: place)
        }
    }
    .toolbarRole(.editor)
Navigation Title swift · at 0:13 ↗ 
PlaceDetailContent(place: $place)
    // toolbar customizations ...
    .navigationTitle(place.name)
Navigation Title with Menu swift · at 0:14 ↗ 
PlaceDetailContent(place: $place)
    // toolbar customizations ...
    .navigationTitle(place.name) {
        MyPrintButton()
    }
Editable Navigation Title with Menu swift · at 0:15 ↗ 
PlaceDetailContent(place: $place)
    // toolbar customizations ...
    .navigationTitle($place.name) {
        MyPrintButton()
    }
Editable Navigation Title with RenameButton swift · at 0:16 ↗ 
PlaceDetailContent(place: $place)
    // toolbar customizations ...
    .navigationTitle($place.name) {
        MyPrintButton()
        RenameButton()
    }
Navigation Document swift · at 0:17 ↗ 
PlaceDetailContent(place: $place)
    // toolbar customizations ...
    .navigationTitle($place.name) {
        MyPrintButton()
        RenameButton()
    }
    .navigationDocument(place.url)

Resources