SwiftUI Navigation のすべて

SwiftUI Navigation ͷ͢΂ͯ
iOSDC Japan 2022
kalupas226

View Slide

ࣗݾ঺հ
• ΞΠΧϫ

• @kalupas226

• Cookpad Inc. iOS Developer
2

View Slide

ΞδΣϯμ
• SwiftUI Navigation ͷ၆ᛌ

• ༷ʑͳछྨ ͷ Navigation

• OS ʹΑΔมԽ͕ܹ͍͠ Navigation

• Fire and forget / State driven Navigation API

• SwiftUI ͷ Navigation API ʹ͓͚Δ՝୊

• Navigation API ͷ՝୊ʹͲ͏ཱͪ޲͔͏͔

• ʮswiftui-navigationʯͷΞϓϩʔν

• ·ͱΊ
3

View Slide

􀁟
ຊτʔΫͰ࿩͞ͳ͍͜ͱ
• ։ൃऀ͕ͦΕͧΕͰఆٛ͢Δಠࣗͷ Custom Navigation

• iOS Ҏ֎ͷϓϥοτϑΥʔϜʹ͓͚Δ Navigation

• ΞϓϦέʔγϣϯʹ͓͚Δ Navigation ͸͜͏͋Δ΂͖ͱ͍͏Α͏ͳ
 
σβΠϯతͳ࿩
4

View Slide

􀁟
ຊτʔΫͰओʹࢀߟʹ͍ͯ͠Δ৘ใ
• Point-Free ੡ͷʮswiftui-navigationʯͱ͍͏ϥΠϒϥϦ

• https://github.com/pointfreeco/swiftui-navigation

• ൃද಺Ͱ͸ҎԼͷΑ͏ʹ۠ผͯ͠આ໌͠·͢

• SwiftUI Navigation API: Apple ७ਖ਼ͷ API ʹ͍ͭͯͷ࿩

• ʮswiftui-navigationʯ: ϥΠϒϥϦʹ͍ͭͯͷ࿩
5

View Slide

SwiftUI Navigation ͷ၆ᛌ

View Slide

༷ʑͳछྨͷ Navigation

View Slide

༷ʑͳछྨͷ Navigation API ͕ଘࡏ͢Δ
• Tab

• Alert

• Sheet

• Full Screen Cover

• Con
fi
rmation Dialog

• Popover

• Navigation Link…
SwiftUI Navigation ͷ၆ᛌ > ༷ʑͳछྨͷ Navigation
8

View Slide

Tab
TabView {
FirstView()
.tabItem {
Image(systemName: "exclamationmark.circle")
Text("Alert")
}
SecondView()
.tabItem {…}
ThirdView()
.tabItem {…}
FourthView()
.tabItem {…}
}

View Slide

Alert
BaseView()
.alert(
“Alert͕දࣔ͞Ε·ͨ͠”,
isPresented: $isPresentedAlert,
actions: {
Button("OK", action: {})
}
)

View Slide

Sheet
BaseView()
.sheet(
content: {
Text("Sheet͕දࣔ͞Ε·ͨ͠")
}
)

View Slide

NavigationViewɾNavigationLink

(Deprecated)
NavigationView {
ForEach(1...10, id: \.self) { id in
NavigationLink(
"Go to \(id) simple destination",
destination: {
Text("This is \(id) destination")
}
)
}
}

View Slide

OS ʹΑΔมԽ͕ܹ͍͠ Navigation

View Slide

OS ͕ਐԽ͢ΔʹͭΕ API ͷܗ΋มΘ͖ͬͯͨ
• ActionSheet API (deprecated) → Con
fi
rmation Dialog API

• Alert API

• deprecated ʹͳͬͨ΋ͷͱɺͦ͏Ͱͳ͍΋ͷ͕͋Δ

• Navigation-base API

• NavigationView → NavigationStack

• NavigationLink
14
SwiftUI Navigation ͷ၆ᛌ > OS ʹΑΔมԽ͕ܹ͍͠ Navigation

View Slide

ActionSheet API (deprecated)
.actionSheet(isPresented: $showActionSheet) {
ActionSheet(
title: Text(...),
message: Text(...),
buttons: [
.cancel(),
.destructive(
Text(...),
action: {}
),
.default(
Text(...),
action: {}
)
]
)
}

View Slide

Con
fi
rmation Dialog API(iOS 15~)
.confirmationDialog(
“Title",
isPresented: $isConfirming
presenting: dialogDetail
) { detail in
Button {
} label: {
Text("Import \(detail.name)")
}
Button("Cancel", role: .cancel) {
dialogDetail = nil
}
} message: { detail in
Text(\(detail.name) \(detail.type))
}

View Slide

Con
fi
rmation Dialog API(iOS 15~)
.confirmationDialog(
“Title",
isPresented: $isConfirming,
presenting: dialogDetail
) { detail in
Button {
} label: {
Text("Import \(detail.name)")
}
Button("Cancel", role: .cancel) {
dialogDetail = nil
}
} message: { detail in
Text(\(detail.name) \(detail.type))
}

View Slide

Alert API (deprecated)
.alert(isPresented: $showAlert) {
Alert(
title: Text("Title"),
message: Text("Message")
)
}

View Slide

Alert API (deprecated)
.alert(item: $alertDetails) { details in
Alert(
title: Text("Title"),
message: Text("""
Imported \(details.name) \n
Filetype: \(details.fileType).
"""),
dismissButton: .default(Text("Dismiss"))
)
}

View Slide

Alert API (iOS 15~)
.alert(
"Alert͕දࣔ͞Ε·ͨ͠",
actions: {
Button("OK", action: {})
}
)

View Slide

NavigationViewɾOld NavigationLink (deprecated)
NavigationView {
List(model.notes) { note in
NavigationLink(
note.title,
destination: NoteEditor(id: note.id)
)
}
}

View Slide

NavigationViewɾOld NavigationLink (deprecated)
NavigationView {
NavigationLink(
note.title, // ભҠݩͷ View ʹදࣔ͞ΕΔ title
destination: NoteEditor(id: note.id) // ભҠޙͷը໘
)
}
}

View Slide

Simple NavigationStackɾNew NavigationLink
NavigationStack {
List(parks) { park in
NavigationLink(
park.name,
value: park
)
}
.navigationDestination(for: Park.self) { park in
ParkDetails(park: park)
}
}

View Slide

NavigationStack {
NavigationLink(
park.name, // ભҠݩͷը໘ʹදࣔ͢Δ title
value: park // ೚ҙͷܕͷ value
)
}
}
}

View Slide

NavigationStack {
NavigationLink(
park.name,
value: park
)
}
// value ͷܕʹԠͯ͡ navigationDestination ͕൓Ԡ͢Δ
}
}

View Slide

Binding NavigationStackɾNew NavigationLink
@State private var presentedParks: [Park] = []
// ...
NavigationStack(path: $presentedParks) {
NavigationLink(park.name, value: park)
}
}
}

View Slide

Binding NavigationStackɾNew NavigationLink
@State private var presentedParks: [Park] = []
// ...
NavigationStack(path: $presentedParks) {
// ...
}
func showParks() {
// RootView -> Park("Yosemite") -> Park("Sequoia")
presentedParks = [Park("Yosemite"), Park("Sequoia")]
}
※ iOS 16 ͷ API ʹ͍ͭͯͷ FB: https://gist.github.com/mbrandonw/f8b94957031160336cac6898a919cbb7

View Slide

Fire and forget / State driven

Navigation API

View Slide

Navigation API ͸େ͖͘ 2 ͭʹ෼ྨͰ͖Δ
• ʮswiftui-navigationʯREADME ͔ΒҾ༻

• Fire and forget Navigation API

• State driven Navigation API
35
SwiftUI Navigation ͷ၆ᛌ > Fire and forget / State driven Navigation API

View Slide


36

View Slide

Fire and forget Navigation API
• Binding Ҿ਺ΛऔΒͳ͍

• SwiftUI ͕ Navigation ͷঢ়ଶΛ׬શʹ಺෦Ͱ؅ཧ͢Δ

• Navigation Λૉૣ࣮͘ݱͰ͖Δ͕ɺNavigation ʹରͯ͠
 
ϓϩάϥϜతͳ੍ޚ͕Ͱ͖ͳ͘ͳΔ
37

View Slide

Fire and forget API - Tab -
TabView {
ReceivedView()
.tabItem {
// ...
}
SentView()
.tabItem {
// ...
}
AccountView()
.tabItem {
// ...
}
}

View Slide

Fire and forget API - Tab -
// Binding Ҿ਺ΛऔΒͳ͍ɻλοϓͰ͔͠ navigation Ͱ͖ͳ͍
TabView {
ReceivedView()
.tabItem {
// ...
}
SentView()
.tabItem {
// ...
}
AccountView()
.tabItem {
// ...
}
}

View Slide

Fire and forget API - NavigationLink -
NavigationView {
NavigationLink(
note.title,
)
}
Text("Select a Note")
}

View Slide

Fire and forget API - NavigationLink -
NavigationView {
// Binding Ҿ਺ΛऔΒͳ͍ɻλοϓͰ͔͠ navigation Ͱ͖ͳ͍
NavigationLink(
note.title,
)
}
Text("Select a Note")
}

View Slide


42

View Slide

State driven Navigation API
• Binding Ҿ਺ΛऔΔ

• Navigation Λ༗ޮɾແޮʹ͢Δ࣌ʹυϝΠϯͷঢ়ଶ΋มߋͰ͖Δ

• Fire and forget API ΑΓෳࡶͰ͸͋Δ͕ɺϓϩάϥϜతͳ੍ޚ͕
 
ՄೳͱͳΔͨΊɺ࢖͍ํʹΑͬͯ͸ Deep Link ͳͲ΋࣮ݱͰ͖Δ
43

View Slide

State driven API - Tab -
struct ContentView: View {
@State var selectedTab: Tab = .received
var body: some View {
TabView(selection: $selectedTab) {
ReceivedView().tabItem { ... }
.tag(Tab.received)
SentView().tabItem { ... }
.tag(Tab.sent)
AccountView().tabItem { ... }
.tag(Tab.account)
}
}
}

View Slide

State driven API - Tab -
@State var selectedTab: Tab = .sent
TabView(selection: $selectedTab) {
ReceivedView().tabItem { ... }
.tag(Tab.received)
SentView().tabItem { ... }
.tag(Tab.sent)
AccountView().tabItem { ... }
.tag(Tab.account)
}
}
}

View Slide

ҟͳΔ View ͰแΉͱ Deep Link Ͱ͖ͳ͍
struct ContainerView: View {
ContentView(selectedTab: .received)
}
}

View Slide

ContainerView ʹঢ়ଶΛ࣋ͨͤͯղܾ͢Δʁ
let selectedTab: Tab
ContentView(selectedTab: selectedTab)
}
}

View Slide

ContainerView ʹঢ়ଶΛ࣋ͨͤͯղܾ͢Δʁ
// ContainerView ʹؔ܎ͳ͍ Tab ͷঢ়ଶΛ࣋ͨͤΔͷ͸ඍົ
// ͔͠΋ ContentView ͷ selectedTab ͸ @State ͳͷͰޡΓ
let selectedTab: Tab
ContentView(selectedTab: selectedTab)
}
}

View Slide

ΞϓϦͷঢ়ଶΛ؅ཧ͢Δ ViewModel Λಋೖ͠
 
ղܾ͢Δ
class AppViewModel: ObservableObject {
@Published var selectedTab: Tab
init(selectedTab: Tab = .received) {
self.selectedTab = selectedTab
}
}

View Slide

ΞϓϦͷঢ়ଶΛ؅ཧ͢Δ ViewModel Λಋೖ͠
 
ղܾ͢Δ
@ObservedObject var viewModel: AppViewModel
TabView(selection: $viewModel.selectedTab) {
// ...
}
}
}
// ContentView ͷ initialize ࣌ʹ Tab Λૢ࡞Ͱ͖ΔΑ͏ʹͳͬͨ
ContentView(viewModel: .init(selectedTab: .two))

View Slide

SwiftUI ͷ Navigation API
 
ʹ͓͚Δ՝୊

View Slide

Navigation API ʹ͓͚Δ՝୊
1. ભҠઌͷը໘ʹ Binding value Λ౉͢ػߏΛඋ͍͑ͯͳ͍

2. ঢ়ଶ؅ཧΛෳࡶʹͤ͞Δ API ͕ଘࡏ͍ͯ͠Δ

3. ෳ਺ͷ Navigation Λ؅ཧͩ͢͠ͱແବͳঢ়ଶ͕૿͑Δ
SwiftUI ͷ Navigation API ʹ͓͚Δ՝୊

View Slide



SwiftUI ͷ Navigation API ʹ͓͚Δ՝୊ > ભҠઌͷը໘ʹ Binding value Λ౉͢ػߏΛඋ͍͑ͯͳ͍

View Slide

ભҠઌͷը໘ʹ Binding value Λ౉͢ػߏΛ

උ͍͑ͯͳ͍
@State var draft: Post?
Button("Edit") {
draft = Post()
}
.sheet(item: $draft) { (draft: Post) in
EditPostView(post: draft)
}
}
}
struct EditPostView: View {
let post: Post
var body: some View { ... }
}
SwiftUI ͷ Navigation API ʹ͓͚Δ՝୊ > ભҠઌͷը໘ʹ Binding value Λ౉͢ػߏΛඋ͍͑ͯͳ͍

View Slide


උ͍͑ͯͳ͍
Button("Edit") {
draft = Post()
}
}
}
}
let post: Post
}
Navigation API ͷ՝୊ʹͲ͏ཱͪ޲͔͏͔ > ભҠઌͷը໘ʹ Binding value Λ౉͢ػߏΛඋ͍͑ͯͳ͍
Binding ValueΛ
EditPostViewʹ 
౉ͤͳ͍
EditPostViewͰͷ
มߋ͕ContentView
ʹ൓ө͞Εͳ͍

View Slide



SwiftUI ͷ Navigation API ʹ͓͚Δ՝୊ > ঢ়ଶ؅ཧΛෳࡶʹͤ͞Δ API ͕ଘࡏ͍ͯ͠Δ

View Slide

Deprecated / New Alert API
// Deprecated API
// Binding Λड͚औΔ
func alert(
isPresented: Binding,
content: () -> Alert
) -> some View
func alert(
item: Binding,
content: (Item) -> Alert
) -> some View where Item : Identifiable
// New API
func alert(
_ title: Text,
actions: () -> A
) -> some View where A : View
// Binding ͱ data Λड͚औΔ
func alert(
_ title: Text,
presenting data: T?,
actions: (T) -> A

View Slide

Deprecated boolean binding API
struct ExampleView: View {
@State private var showAlert = false
BaseView(...)
.alert(isPresented: $showAlert) {
Alert(...)
}
}
}

View Slide

// Deprecated API
func alert(
) -> some View
func alert(
item: Binding,
// New API
func alert(
_ title: Text,
actions: () -> A
func alert(
_ title: Text,
actions: (T) -> A

View Slide

Deprecated optional item binding API
@State private var item: Item?
BaseView(...)
.alert(item: $item) { item in
Alert(...) // item Λར༻ͯ͠ alert ΛΧελϚΠζͰ͖Δ
}
}
}

View Slide

// Deprecated API
func alert(
) -> some View
func alert(
item: Binding,
// New API
func alert(
_ title: Text,
actions: () -> A
func alert(
_ title: Text,
actions: (T) -> A

View Slide

New boolean binding API
BaseView(...)
.alert(
"Alert title",
isPresented: $showAlert,
action: { ... }
)
}
}

View Slide

// Deprecated API
func alert(
) -> some View
func alert(
item: Binding,
// New API
func alert(
_ title: Text,
actions: () -> A
func alert(
_ title: Text,
actions: (T) -> A

View Slide

New boolean binding and optional item API
BaseView(...)
.alert(
"Alert title",
presenting: item
action: { item in ... },
message: { item in ... }
)
}
}

View Slide

BaseView(...)
.alert(
"Alert title",
presenting: item
)
}
}
􀁣

showAlert: true
item: non null

View Slide

BaseView(...)
.alert(
"Alert title",
presenting: item
)
}
}
􀁡

showAlert: true
item: null

View Slide

New boolean binding and optional item API ͸
 
ঢ়ଶ؅ཧΛෳࡶʹͤͯ͞͠·͏
• ։ൃऀ͕ҎԼͷঢ়ଶͷ੔߹ੑΛؾʹ͠ͳ͚Ε͹͍͚ͳ͍ͷ͕ਏ͍

• Alert Λදࣔ͢ΔͨΊͷ boolean binding

• Alert ͷ಺༰Λ࡞ΔͨΊͷ optional item

• Navigation ͕γϯϓϧͳ͏ͪ͸ͦ͜·ͰࠔΒͳ͍͔΋͠Εͳ͍͕ɺ
 
Navigation ͕૿͑Ε͹༰қʹঢ়ଶ؅ཧ΋ෳࡶʹͳͬͯ͠·͏

View Slide



SwiftUI ͷ Navigation API ʹ͓͚Δ՝୊ > ෳ਺ͷ Navigation Λ؅ཧͩ͢͠ͱແବͳঢ়ଶ͕૿͑Δ

View Slide

ෳ਺ͷ Navigation Λ؅ཧͩ͢͠ͱ
 
ແବͳঢ়ଶ͕૿͑Δ
@State var settings: Settings?
@State var userProfile: Profile?
BaseView(...)
.sheet(item: self.$draft) { (draft: Post) in
}
.sheet(item: self.$settings) { (settings: Settings) in
SettingsView(settings: settings)
}
.sheet(item: self.$userProfile) { (userProfile: Profile) in
UserProfile(profile: userProfile)
}
}
}

View Slide

 
@State var draft: Post? // null + non null = 2
@State var settings: Settings? // null + non null = 2
@State var userProfile: Profile? // null + non null = 2
BaseView(...)
}
}
}
}
}

View Slide

༷ʑͳύλʔϯͷঢ়ଶ͕ൃੜͯ͠͠·͏
%SBGU 4FUUJOHT 1SP
fi
MF
ύλʔϯ /VMM /VMM /VMM
ύλʔϯ /POOVMM /VMM /VMM
ύλʔϯ /VMM /POOVMM /VMM
ύλʔϯ /VMM /VMM /POOVMM
ύλʔϯ /POOVMM /POOVMM /VMM
ύλʔϯ /POOVMM /VMM /POOVMM
ύλʔϯ /VMM /POOVMM /POOVMM
ύλʔϯ /POOVMM /POOVMM /POOVMM

View Slide

%SBGU 4FUUJOHT 1SP
fi
MF
༗ޮͳঢ়ଶ͸͜ΕΒͷΈ

View Slide

Navigation API ͷ՝୊ʹ
 
Ͳ͏ཱͪ޲͔͏͔

View Slide



Navigation API ͷ՝୊ʹͲ͏ཱͪ޲͔͏͔

View Slide

ʮswiftui-navigation ʯͷΞϓϩʔν

• Binding value Λ౉͢͜ͱ͕Ͱ͖Δ API overloads


• ࠷௿ݶͷঢ়ଶͷΈΛཁٻ͢Δ API overloads


• Navigation Λ enum Ͱ؅ཧͰ͖ΔΑ͏ʹ͢Δ API overloads

View Slide

swiftui-navigation ͱ͸ʁ
• SwiftUI ͷ Navigation ʹ focus ͨ͠ Point-Free ੡ͷϥΠϒϥϦ

• SwiftUI ͷ Navigation Λར༻͢Δࡍͷ༷ʑͳ՝୊Λղܾ͢ΔͨΊʹҎԼͷ 3 ͭͷπʔϧΛఏڙ͍ͯ͠Δ

• Navigation API overloads

• ͜ͷޙ࿩͠·͢

• Navigation views ( `IfLet`, `IfCaseLet`, `Switch`/`CaseLet` )

• ໊લͷ௨Γͷ View ܈ɻBinding value Λѻ͑ΔΑ͏ʹઃܭ͞Ε͍ͯΔ

• Binding transformations

• ಠࣗͷ Navigation Λ࡞Δࡍʹ༗༻ͳπʔϧ

View Slide







View Slide






Navigation API ͷ՝୊ʹͲ͏ཱͪ޲͔͏͔ > ભҠઌͷը໘ʹ Binding value Λ౉͢ػߏΛඋ͍͑ͯͳ͍ > Binding value Λ౉͢͜ͱ͕Ͱ͖Δ API overloads

View Slide


උ͍͑ͯͳ͍
Button("Edit") {
draft = Post()
}
}
}
}
let post: Post
}

View Slide


උ͍͑ͯͳ͍
Button("Edit") {
draft = Post()
}
}
}
}
let post: Post
}
Binding ValueΛ
EditPostViewʹ 
౉ͤͳ͍
EditPostViewͰͷ
มߋ͕ContentView
ʹ൓ө͞Εͳ͍

View Slide

Binding Value Λ౉ͤΔ sheet API Λߟ͑Δ
Button("Edit") {
draft = Post()
}
}
}
}
let post: Post
}

View Slide

Button("Edit") {
draft = Post()
}
.sheet(item: $draft) { ($draft: Post) in // closure ʹ Binding value Λ౉ͤΔΑ͏ʹͳͬͨΒྑͦ͞͏
EditPostView(post: $draft)
}
}
}
@Binding var post: Post
}

View Slide

extension View {
func sheet(
unwrapping optionalValue: Binding,
@ViewBuilder content: @escaping (Binding) -> Content
) -> some View where Value: Identifiable, Content: View {
self.sheet(item: optionalValue) { _ in
// Binding Λ Binding ʹม׵͢Δ
value = ???
content(value)
}
}
}

View Slide

Binding Λ Binding ʹม׵͢Δ
extension Binding {
init?(unwrapping binding: Binding) {
guard let wrappedValue = binding.wrappedValue
else { return nil }
self.init(
get: { wrappedValue },
set: { binding.wrappedValue = $0 }
)
}
}
※ Binding failable initializer ͸ඪ४Ͱଘࡏ͢Δ͕ɺόά͕͋Δ: https://gist.github.com/stephencelis/3a232a1b718bab0ae1127ebd5fcf6f97

View Slide

extension Binding {
init?(unwrapping binding: Binding) {
guard let wrappedValue = binding.wrappedValue
else { return nil }
self.init(
get: { wrappedValue },
set: { binding.wrappedValue = $0 }
)
}
}

View Slide

࡞੒ͨ͠ init?(unwrapping:) Λద༻͢Δ
extension View {
func sheet(
unwrapping optionalValue: Binding,
) -> some View where Value: Identifiable, Content: View {
self.sheet(item: optionalValue) { _ in
if let value = Binding(unwrapping: optionalValue) {
content(value)
}
}
}
}

View Slide

Before / After
Button("Edit") {
draft = Post()
}
.sheet(unwrapping: $draft) { $draft in
}
}
}
Button("Edit") {
draft = Post()
}
.sheet(item: $draft) { draft in
}
}
}
#FGPSF "GUFS

View Slide






Navigation API ͷ՝୊ʹͲ͏ཱͪ޲͔͏͔ > ঢ়ଶ؅ཧΛෳࡶʹͤ͞Δ API ͕ଘࡏ͍ͯ͠Δ > ࠷௿ݶͷঢ়ଶͷΈΛཁٻ͢Δ API overloads

View Slide

ঢ়ଶ؅ཧΛෳࡶʹͤ͞Δ API ͕ଘࡏ͍ͯ͠Δ
BaseView(...)
.alert(
"Alert title",
presenting: item
)
}
}

View Slide

BaseView(...)
.alert(
"Alert title",
presenting: item
)
}
}
􀁣

showAlert: true
item: non null

View Slide

BaseView(...)
.alert(
"Alert title",
presenting: item
)
}
}
􀁡

showAlert: true
item: null

View Slide

ͳͥঢ়ଶ؅ཧΛෳࡶʹ͢Δ API ʹͳ͍ͬͯΔͷ͔
BaseView(...)
.alert(
"Alert title",
isPresented: $showAlert, // Alert Λදࣔ͢ΔͨΊͷ Boolean
presenting: item // Alert ͷ಺༰ΛΧελϚΠζ͢ΔͨΊͷ optional item
)
}
}
Navigation API ͷ՝୊ʹͲ͏ཱͪ޲͔͏͔ > ঢ়ଶ؅ཧΛෳࡶʹͤ͞Δ API ͕ଘࡏ͍ͯ͠Δ > ঢ়ଶ؅ཧΛෳࡶʹͤ͞ͳ͍ API overloads

View Slide

ঢ়ଶ؅ཧΛෳࡶʹͤ͞ͳ͍ API ͸ͲΜͳܗ͔
BaseView(...)
.alert(
title: { item in ... },
presenting: item // optional item ͷΈͰʮalert ͷදࣔ৚݅ʯʮalertͷ಺༰ʯΛܾΊΒΕΔ
)
}
}

View Slide

Optional item ͷΈΛཁٻ͢Δ API Λߟ͑Δ
extension View {
func alert(
title: (T) -> Text,
presenting data: Binding,
@ViewBuilder actions: @escaping (T) -> A,
@ViewBuilder message: @escaping (T) -> M
) -> some View {
self.alert(
???, // alert title
isPresented: ???,
presenting: data.wrappedValue,
actions: actions,
message: message
)
}
}

View Slide

extension View {
func alert(
title: (T) -> Text,
) -> some View {
self.alert(
data.wrappedValue.map(title) ?? Text(""),
isPresented: ???,
actions: actions,
message: message
)
}
}

View Slide

extension View {
func alert(
title: (T) -> Text,
) -> some View {
self.alert(
isPresented: ???, // Binding Λ Binding ʹม׵Ͱ͖Δͱྑͦ͞͏
actions: actions,
message: message
)
}
}

View Slide

extension Binding {
func isPresented() -> Binding
where Value == Wrapped? {
.init(
get: { self.wrappedValue != nil },
set: { isPresented in
if !isPresented {
self.wrappedValue = nil
}
}
)
}
}

View Slide

extension Binding {
where Value == Wrapped? { // Binding Λม׵͢ΔͨΊͷ΋ͷͳͷͰɺoptional ʹݶఆ
.init(
if !isPresented {
}
}
)
}
}

View Slide

extension Binding {
where Value == Wrapped? {
.init(
// isPresent ͕ false = alert ͕ด͡ΒΕΔλΠϛϯά
// ͦͷࡍ͸ Binding ࣗ਎Λ nil ʹ͢Δ͜ͱͰແޮͳঢ়ଶͷൃੜΛ๷͛Δ
if !isPresented {
}
}
)
}
}

View Slide

࡞੒ͨ͠ isPresented Λద༻͢Δ
extension View {
func alert(
title: (T) -> Text,
) -> some View {
self.alert(
isPresented: data.isPresented(),
actions: actions,
message: message
)
}
}

View Slide

Before / After
BaseView(...)
.alert(
Text($0.xxx),
presenting: item
)
}
}
BaseView(...)
.alert(
"Alert title",
presenting: item
)
}
}
#FGPSF "GUFS

View Slide






Navigation API ͷ՝୊ʹͲ͏ཱͪ޲͔͏͔ > ෳ਺ͷ Navigation Λ؅ཧͩ͢͠ͱແବͳঢ়ଶ͕૿͑Δ > Navigation Λ enum Ͱ؅ཧͰ͖ΔΑ͏ʹ͢Δ API overloads

View Slide

 
@State var draft: Post? // null + non null = 2
@State var settings: Settings? // null + non null = 2
@State var userProfile: Profile? // null + non null = 2
BaseView(...)
}
}
}
}
}

View Slide

%SBGU 4FUUJOHT 1SP
fi
MF

View Slide

%SBGU 4FUUJOHT 1SP
fi
MF
༗ޮͳঢ়ଶ͸͜ΕΒͷΈ

View Slide

ෳ਺ͷ Navigation ͷ࠷దͳϞσϦϯάΛߟ͑Δ
// Navigation ͸ಉ࣌ʹෳ਺ൃੜ͢Δ͜ͱ͕ͳ͍ͨΊɺ΋ͬͱྑ͍ϞσϦϯά͕Ͱ͖ͦ͏

View Slide

ෳ਺ͷ Navigation ͷ࠷దͳϞσϦϯάΛߟ͑Δ
// ಉ࣌ʹෳ਺ൃੜ͠ͳ͍ = enum Λ࢖͑Δ
"
enum Route {
case draft(Post)
case settings(Settings)
case userProfile(Profile)
}

View Slide

enum Ͱ sheet ͳͲΛදࣔ͠Α͏ͱ͢Δͱʁ
@State private var route: Route?
// ...
.sheet(
item: Binding(
get: {
if case let .draft(post) = route
return post
} else { return nil }
},
set: { post
if let post = post {
route = .draft(post)
}
}
)
) { post in /* ... */ }
}

View Slide

enum Ͱ΋ѻ͍΍͍͢ sheet API Λߟ͑Δ
// ...
.sheet(
unwrapping: $route,
case: ???Route.draft???
) { $post in
// ...
}
}

View Slide

// ...
.sheet(
unwrapping: $route, // enum ࣗମΛ౉͢ (Binding value)
) { $post in
// ...
}
}

View Slide

// ...
.sheet(
unwrapping: $route,
case: ???Route.draft??? // ԿΒ͔ͷܗͰ enum ͷಛఆͷ case Λࢦఆ͢Δ
) { $post in
// ...
}
}

View Slide

// ...
.sheet(
unwrapping: $route,
) { $post in // Associated value Λ binding value Ͱ౉ͤΔͱͳ͓ྑ͍
// ...
}
}

View Slide

extension View {
func sheet(
unwrapping: ???, // enum ͷ binding
case: ???, // enum ͷಛఆͷ case
@ViewBuilder content: @escaping (Binding??>) -> Content
) -> some View where Content: View {
// ...
}
}

View Slide

extension View {
func sheet(
unwrapping: Binding, // enum ͷ binding
case: ???, // enum ͷಛఆͷ case
// ...
}
}

View Slide

extension View {
func sheet(
case: CasePath, // enum ͷಛఆͷ case
// ...
}
}

View Slide

extension View {
func sheet(
// ...
}
}
[CasePaths]
• https://github.com/pointfreeco/swift-case-paths
• struct ʹ͓͚Δ Key Paths ͷ enum ൛ͷΑ͏ͳ΋ͷ
• Key Paths ͸ `\User.id` ͱ͢Δ͕ɺCase Paths ͸ `/Kind.animal`
• Enum ͔Βʮಛఆͷ Case ͷநग़ʯɾʮಛఆͷ Case ΁ͷ Associated value ͷ 
ຒΊࠐΈʯΛ͍ͨ͠༻్Ͱར༻͍ͯ͠Δ

View Slide

extension View {
func sheet(
// ...
}
}

View Slide

extension View {
func sheet(
// AssociatedValue ͕͋Ε͹ͦΕΛར༻Ͱ͖Δ (ͳ͚Ε͹ Void) Binding
// ...
}
}

View Slide

extension View {
func sheet(
unwrapping enum: Binding,
case casePath: CasePath,
self.sheet(
isPresented: ???
) {
???
}
}
}

View Slide

extension View {
func sheet(
self.sheet(
isPresented: `enum`.case(casePath).isPresented()
) {
???
}
}
}

View Slide

extension View {
func sheet(
self.sheet(
) {
???
}
}
}
case(casePath) ͸ Case Paths Λར༻ͨ͠ function
Binding ͔Β Binding Λநग़͢Δ

View Slide

extension View {
func sheet(
self.sheet(
) {
???
}
}
}
`enum`.case(casePath)
"
Binding

View Slide

extension View {
func sheet(
self.sheet(
) {
???
}
}
}
"
Binding
.isPresented()
"
Binding

View Slide

extension View {
func sheet(
self.sheet(
) {
???
}
}
}

View Slide

extension View {
func sheet(
self.sheet(
) {
Binding(
unwrapping: `enum`.case(casePath)
).map(content)
}
}
}

View Slide

extension View {
func sheet(
self.sheet(
) {
Binding(
).map(content)
}
}
}
"
Binding

View Slide

extension View {
func sheet(
self.sheet(
) {
Binding(
).map(content)
}
}
}
"
Binding
Binding(unwrapping:)
"
Binding
"
map

View Slide

Before / After
enum Route {
// ...
}
@State var route: Route?
BaseView(...)
.sheet(
unwrapping: $route,
case: /Route.draft
) { $draft in
}
// ...
}
}
BaseView(...)
.sheet(item: self.$draft) { draft in
}
.sheet(item: self.$settings) { settings in
}
.sheet(item: self.$userProfile) { userProfile in
}
}
}
#FGPSF "GUFS

View Slide

Navigation API ͷվળʹΑΔޮՌ
• SwiftUI ͷ Navigation API ʹ͓͚Δ ՝୊Λ API overloads ͱ͍͏
 
γϯϓϧͳํ๏ͰղܾͰ͖ͨ (ϥΠϒϥϦͷ࣮૷͸΋ͬͱચ࿅͞Ε͍ͯ·͢)




• Navigation API ͕ΑΓ҆શͰѻ͍΍͘͢ͳΓɺNavigation ʹؔΘΔঢ়ଶͷ؅ཧ΋
༰қʹͳΔ

View Slide

·ͱΊ

View Slide

·ͱΊ
• SwiftUI ʹ͸༷ʑͳ Navigation API ͕͋ΓɺOS ͱڞʹܹ͍͠มԽ͕
͋ͬͨ

• େ͖͘ Navigation API ͸ҎԼͷ 2 छྨʹ۠ผͰ͖Δ

• Fire and forget API

• State driven API

View Slide

·ͱΊ
• SwiftUI ͷ Navigation API ʹ͸ҎԼͷΑ͏ͳ՝୊͕͋ΓɺAPI Λద੾ʹ overload ͯ͠ղܾ͢Δ
 
ʮswiftui-navigationʯͷΑ͏ͳΞϓϩʔν΋ଘࡏ͍ͯ͠Δ

• ભҠઌͷը໘ʹ Binding value Λ౉͢ػߏΛඋ͍͑ͯͳ͍

• ঢ়ଶ؅ཧΛෳࡶʹͤ͞Δ API ͕ଘࡏ͍ͯ͠Δ

• ෳ਺ͷ Navigation Λ؅ཧͩ͢͠ͱແବͳঢ়ଶ͕૿͑Δ

• SwiftUI ͷ Navigation Λਖ਼͘͠ཧղͯ͠؅ཧ͢Ε͹৭ʑͳԸܙ͕͋Δ

• Navigation ʹؔΘΔঢ়ଶ؅ཧʹ೰·͞Εͳ͍

• Deep Link ͕༰қʹͳΔɾXcode Previews ΋׆༻͠΍͘͢ͳΔ

View Slide

ࢀߟ
• https://www.pointfree.co/collections/swiftui/navigation

• https://gist.github.com/mbrandonw/f8b94957031160336cac6898a919cbb7

• https://github.com/pointfreeco/swift-composable-architecture/discussions/1140

• https://developer.apple.com/documentation/swiftui

• https://github.com/pointfreeco/swiftui-navigation

• https://swiftwithmajid.com/2022/06/15/mastering-navigationstack-in-swiftui-navigator-
pattern/

• https://swiftwithmajid.com/2022/06/21/mastering-navigationstack-in-swiftui-deep-
linking/

View Slide

After Party iOSDC ͥͻ͝ࢀՃ͍ͩ͘͞ʂ

View Slide

SwiftUI Navigation のすべて

SwiftUI Navigation のすべて

Aikawa

More Decks by Aikawa

Other Decks in Programming

Featured

Transcript