-
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.”Recursos
Videos relacionados
WWDC23
WWDC22
-
Buscar este video…
-
-
0:01 - Explicit More Menu
PlaceDetailContent(place: $place) .toolbar { ToolbarItem(placement: .primaryAction) { Menu { FavoriteToggle(place: $place) AdjustImageButton(place: $place) AdjustMapButton(place: $place) } label: { Label( "More", systemImage: "ellipsis.circle") } } } -
0:02 - Menu in ToolbarItemGroup
PlaceDetailContent(place: $place) .toolbar { ToolbarItemGroup(placement: .primaryAction) { Menu { FavoriteToggle(place: $place) AdjustImageButton(place: $place) AdjustMapButton(place: $place) } label: { Label("More", systemImage: "ellipsis.circle") } } } -
0:03 - ToolbarItemGroup with Menu Content
PlaceDetailContent(place: $place) .toolbar { ToolbarItemGroup(placement: .primaryAction) { FavoriteToggle(place: $place) AdjustImageButton(place: $place) AdjustMapButton(place: $place) } } -
0:04 - Secondary Action ToolbarItemGroup
PlaceDetailContent(place: $place) .toolbar { ToolbarItemGroup(placement: .secondaryAction) { FavoriteToggle(place: $place) AdjustImageButton(place: $place) AdjustMapButton(place: $place) } } -
0:05 - Toolbar Role
PlaceDetailContent(place: $place) .toolbar { ToolbarItemGroup(placement: .secondaryAction) { FavoriteToggle(place: $place) AdjustImageButton(place: $place) AdjustMapButton(place: $place) } } .toolbarRole(.editor) -
0:06 - Individual ToolbarItems
PlaceDetailContent(place: $place) .toolbar { ToolbarItem(placement: .secondaryAction) { FavoriteToggle(place: $place) } ToolbarItem(placement: .secondaryAction) { AdjustImageButton(place: $place) } ToolbarItem(placement: .secondaryAction) { AdjustMapButton(place: $place) } } .toolbarRole(.editor) -
0:07 - Customizable ToolbarItems
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) -
0:08 - ShareLink ToolbarItem
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) -
0:09 - Non-default ShareLink ToolbarItem
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) -
0:10 - ControlGroup in ToolbarItem
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) -
0:11 - ControlGroup in ToolbarItem with Label
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) -
0:12 - NewButton ToolbarItem
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) -
0:13 - Navigation Title
PlaceDetailContent(place: $place) // toolbar customizations ... .navigationTitle(place.name) -
0:14 - Navigation Title with Menu
PlaceDetailContent(place: $place) // toolbar customizations ... .navigationTitle(place.name) { MyPrintButton() } -
0:15 - Editable Navigation Title with Menu
PlaceDetailContent(place: $place) // toolbar customizations ... .navigationTitle($place.name) { MyPrintButton() } -
0:16 - Editable Navigation Title with RenameButton
PlaceDetailContent(place: $place) // toolbar customizations ... .navigationTitle($place.name) { MyPrintButton() RenameButton() } -
0:17 - Navigation Document
PlaceDetailContent(place: $place) // toolbar customizations ... .navigationTitle($place.name) { MyPrintButton() RenameButton() } .navigationDocument(place.url)
-