SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI

4XJGU6*Ͱ ࢖͍΍͍͢5PBTUͷ࡞Γํ f o r Ϟ ό ν Ω

} var employedBy = "YUMEMI Inc." var job = "iOS
Developer" var favoriteLanguage = "Swift" var twitter = "@lovee" var qiita = "lovee" var github = "el-hoshino" var additionalInfo = """ ૴ૹͷϑϦʔϨϯͷαϯτϥຊ೔ൃചͰ͢ʂ """ final class Me: Developable, Talkable {

5PBTUͱ͸ w ؆୯ͳϫʔχϯάใࠂʹ࢖͍͍ͨ௨஌ w Ϣʔβͷૢ࡞ΛϒϩοΫ͠ͳ͍ w ϢʔβʹΞΫγϣϯΛٻΊͳ͍ w "OESPJEͰ͸Α͘ݟ͔͚Δ͕J04ʹ͸७ਖ਼෦඼͕ͳ͍ w
"MFSU͸Ϣʔβͷૢ࡞ΛϒϩοΫͯ͠͠·͏ w 6//PUJpDBUJPO͸େ܌࠰Ͱ༨ܭͳݖݶ΋ඞཁ

࢖͍΍͍͢ 5PBTUͷཁ݅ w ͍ΖΜͳϏϡʔ͔Β؆୯ʹग़ͤΔ w -PHͱಉ͡Α͏ͳײ֮ͳͷͰɺͲ͜ͰԿΛग़͍͔ͨ͠͸ॊ ೈʹରԠ͍ͨ͠ w ΞϓϦҰׅͰදࣔΛ؅ཧ w
ෳ਺ͷϏϡʔ͔Β5PBTUग़͍ͨ͜͠ͱ΋͋ΔͷͰɺҰ੪ ʹग़͞ΕͨΒࠔΔ͔ΒͪΌΜͱҰݩ؅ཧ͍ͨ͠ ͋͘·Ͱݸਓͷײ૝Ͱ͢

Alertͱಉ͡ײ֮Ͱ࡞Ε͹ ͍͍ͷͰ͸ʁ

7FS struct Content: View { @State private var warning: String?
var body: some View { MyContentView() .refreshable { do { try await doSomething() } catch { warning = "\(error)" } } .alert(item: $warning) { warning in Alert(title: Text("\(warning)")) } } } warningΛ@Stateͱͯ࣋ͭ͠ Ϧϩʔυ࣌ʹԿ͔͠Βॲཧ Τϥʔىͨ͜͠Β warningʹॻ͖ࠐΈ warning͕͋ͬͨΒ ΞϥʔτΛग़͢

var body: some View { MyContentView() .refreshable { do { try await doSomething() } catch { warning = "\(error)" } } .toast(item: $warning) } } warningΛ@Stateͱͯ࣋ͭ͠ Ϧϩʔυ࣌ʹԿ͔͠Βॲཧ Τϥʔىͨ͜͠Β warningʹॻ͖ࠐΈ warning͕͋ͬͨΒ 5PBTUΛग़͢

ͱ͍͏Θ͚Ͱ.toastͷ࡞ΓํΛ ڭ͑·͢

ͱͰ΋ݴ͏ͱࢥͬͨʁ

࢖ͬͯΈͯΘ͔ͬͨ.toastͷσϝϦοτ w ʢ΄΅΄΅શͯͷϏϡʔʹʣ!4UBUFQSJWBUFWBSXBSOJOH 4USJOH ࡞ͬͯߋʹ.PEJpFS͔͚Δͷ७ਮʹ໘౗ͯ͘͘͞ ਏ͔ͬͨ w ҰͭͷϏϡʔ͔ΒҰ౓ʹෳ਺ͷϫʔχϯάΛग़͢ͷ͕೉͍͠ w ෳ਺ͷϏϡʔͷϫʔχϯάͷҰݩ؅ཧͷ͜ͱߟ͑ͨΒɺ͜Ε
࣮࣭4JOHMF4PVSDFPG5SVUIݪଇ͕कΓʹ͍͘

࢖ͬͯΈͯΘ͔ͬͨ.toastͷσϝϦοτ w ʢ΄΅΄΅શͯͷϏϡʔʹʣ!4UBUFQSJWBUFWBSXBSOJOH 4USJOH ࡞ͬͯߋʹ.PEJpFS͔͚Δͷ७ਮʹ໘౗ͯ͘͘͞ ਏ͔ͬͨ w ҰͭͷϏϡʔ͔ΒҰ౓ʹෳ਺ͷϫʔχϯάΛग़͢ͷ͕೉͍͠ w ෳ਺ͷϏϡʔͷϫʔχϯάͷҰݩ؅ཧͷ͜ͱߟ͑ͨΒɺ͜Ε
࣮࣭4JOHMF4PVSDFPG5SVUIݪଇ͕कΓʹ͍͘ Α͘Α͘ߟ͑ͯΈͨΒ 4UBUF%SJWFOͰ͋Δඞཁ ͳ͘ͳ͍ʁʁʁ

ͳͥ4UBUF%SJWFOͰ࡞͔ͬͨ w 4XJGU6*͸4UBUF%SJWFOͳϑϨʔϜϫʔΫ w ը໘ͷঢ়گ͸શͯ4UBUFͰ؅ཧ͞ΕΔ w &WFOU͸શͯԿ͔͠Βͷ4UBUFʹམͱ͠ࠐΉඞཁ͕͋Δ w Ͱ΋5PBTUΛग़͢ଆ͸ผʹ4UBUFͰ؅ཧ͢Δඞཁͳ͍ΑͶ w
ͦ΋ͦ΋ϫʔχϯάΛใࠂ͍ͨ͠&WFOUʹରͯ͠5PBTU ग़͢ॲཧॻ͘ͷͰ&WFOU%SJWFOͰΑ͘ͳ͍ʁ

var body: some View { MyContentView() .refreshable { do { try await doSomething() } catch { warning = "\(error)" } } .toast(item: $warning) } } warningΛ@Stateͱͯ࣋ͭ͠ Ϧϩʔυ࣌ʹԿ͔͠Βॲཧ Τϥʔىͨ͜͠Β warningʹॻ͖ࠐΈ warning͕͋ͬͨΒ 5PBTUΛग़͢

7FS struct Content: View { @Environment(\.displayToast) var displayToast var body:
some View { MyContentView() .refreshable { do { try await doSomething() } catch { displayToast?("\(error)") } } } } 5PBTUΛදࣔ͢ΔͨΊͷ࣮૷Λ @Environmentͱͯ͠ड͚औΔ Ϧϩʔυ࣌ʹԿ͔͠Βॲཧ Τϥʔىͨ͜͠Β ௚઀5PBTUΛग़͢

ͦ͏ɺΉ͠Ζ.alertΑΓ @Environment(\.dismiss)دΓ

ͱݴ͏Θ͚Ͱ @Environment(\.displayToast)ͷ ࡞ΓํΛڭ͑·͢

·ͣ͸&OWJSPONFOUΛ࡞Δ import SwiftUI typealias DisplayToastAction = @MainActor (String) -> Void
struct DisplayToastKey: EnvironmentKey { static var defaultValue: DisplayToastAction? = nil } extension EnvironmentValues { var displayToast: DisplayToastAction? { get { self[DisplayToastKey.self] } set { self[DisplayToastKey.self] = newValue } } }

import Observation @Observable final class ToastHandler { @MainActor private (set)
var currentToastMessage: String? @ObservationIgnored private var toastQueue: [String] = [] @ObservationIgnored private var currentToastShowingTask: Task<Void, Never>? private var toastShowingDuration: Duration { .seconds(3) } private var defaultToastHidingDuration: Duration { .milliseconds(450) } @MainActor func queueMessage(_ message: String) { ࣍͸5PBTU)BOEMFSΛ࡞Δ දࣔ͢Δ5PBTUΛ؅ཧ͢ΔͨΊͷ ϓϩύςΟʔΛ࡞Δ

private var toastShowingDuration: Duration { .seconds(3) } private var defaultToastHidingDuration:
Duration { .milliseconds(450) } @MainActor func queueMessage(_ message: String) { toastQueue.append(message) displayNextToastIfAvailable() } @MainActor func skipCurrent(in duration: Duration) { removeCurrentToast() Task { try? await Task.sleep(for: duration) displayNextToastIfAvailable() } } @MainActor private func displayNextToastIfAvailable() { guard currentToastMessage == nil, let message = toastQueue.first else { return } ࣍͸5PBTU)BOEMFSΛ࡞Δ 5PBTUͷ௥Ճ΍εΩοϓͳͲͷ ॲཧΛ࣮૷ ϝοηʔδ͕௥Ճ͞ΕͨΒ ඞཁʹԠͯ͡5PBTUΛදࣔͤ͞Δ TLJQ$VSSFOUݺ͹ΕͨΒ ·ͣݱࡏදࣔதͷ΋ͷΛফ͢ ͦͯ͠ಉ͘͡ඞཁʹԠͯ͡ ࣍ͷ5PBTUΛදࣔͤ͞Δ

try? await Task.sleep(for: duration) displayNextToastIfAvailable() } } @MainActor private func
displayNextToastIfAvailable() { guard currentToastMessage == nil, let message = toastQueue.first else { return } toastQueue.removeFirst() currentToastMessage = message currentToastShowingTask?.cancel() currentToastShowingTask = Task { do { try await Task.sleep(for: toastShowingDuration) if Task.isCancelled { return } skipCurrent(in: defaultToastHidingDuration) } catch { print("Task.sleep failed. Try Again") } } } @MainActor private func removeCurrentToast() { ࣍͸5PBTU)BOEMFSΛ࡞Δ ࣮ࡍͷ5PBTUͷදࣔΛ ੍ޚ͢Δ࣮૷ લఏͱͯ͠ࠓଞͷ5PBTUද͍ࣔͯ͠ͳ͍ͷͱ දࣔՄೳͳ5PBTUࣗମ͸ଘࡏ͢Δ͜ͱ Ұఆͷ͕࣌ؒܦͭͱࠓͷ5PBTUΛεΩοϓ͢Δ

guard currentToastMessage == nil, let message = toastQueue.first else {
return } toastQueue.removeFirst() currentToastMessage = message currentToastShowingTask?.cancel() currentToastShowingTask = Task { do { try await Task.sleep(for: toastShowingDuration) if Task.isCancelled { return } skipCurrent(in: defaultToastHidingDuration) } catch { print("Task.sleep failed. Try Again") } } } @MainActor private func removeCurrentToast() { if currentToastMessage == nil { return } currentToastShowingTask?.cancel() currentToastMessage = nil } } ࣍͸5PBTU)BOEMFSΛ࡞Δ ࠓදࣔதͷ5PBTUΛ࡟আ͢Δ࣮૷

import SwiftUI struct ToastDisplayModifier<Toast: View>: ViewModifier { var alignment: Alignment
var toastHandler: ToastHandler var toastMaker: (ToastHandler) -> Toast func body(content: Content) -> some View { content .overlay(alignment: alignment) { toastMaker(toastHandler) } .environment(\.displayToast, toastHandler.queueMessage(_:)) } } extension View { func displayToast<Toast: View>( on alignment: Alignment, handledBy toastHandler: ToastHandler, ͦͯ͠7JFX.PEJpFSΛ࡞Δ 5PBTUͷදࣔͷ࢓ํ΍ ڞ௨Ͱ࢖͏5PBTU௥Ճ༻ͷॲཧΛ࣮૷ 5PBTUͷදࣔΛ PWFSMBZʹ͢Δ ͍ΖΜͳը໘Ͱ5PBTU௥ՃͰ͖ΔΑ͏ FOWJSPONFOUΛઃఆ

func body(content: Content) -> some View { content .overlay(alignment: alignment)
{ toastMaker(toastHandler) } .environment(\.displayToast, toastHandler.queueMessage(_:)) } } extension View { func displayToast<Toast: View>( on alignment: Alignment, handledBy toastHandler: ToastHandler, toastMaker: @escaping (ToastHandler) -> Toast ) -> some View { self.modifier( ToastDisplayModifier( alignment: alignment, toastHandler: toastHandler, toastMaker: toastMaker ) ) } } ͦͯ͠7JFX.PEJpFSΛ࡞Δ .PEJpFSΛద༻͢ΔͨΊͷ ֦ுΛ࣮૷

import SwiftUI struct ToastView: View { var toastHandler: ToastHandler private
var toastHidingDuration: Duration { .milliseconds(10) } var body: some View { Group { if let toastMessage = toastHandler.currentToastMessage { Text(toastMessage) // ελΠϧͷઃఆ .transition(MoveTransition.move(edge: .top). combined(with: .opacity)) } } .animation(.easeInOut, value: toastHandler.currentToastMessage) ࠷ޙʹ5PBTU7JFXΛ࡞Δ UPBTU)BOEMFSΛอ࣋͢Δ

private var toastHidingDuration: Duration { .milliseconds(10) } var body: some
View { Group { if let toastMessage = toastHandler.currentToastMessage { Text(toastMessage) // ελΠϧͷઃఆ .transition(MoveTransition.move(edge: .top). combined(with: .opacity)) } } .animation(.easeInOut, value: toastHandler.currentToastMessage) .onTapGesture { toastHandler.skipCurrent(in: toastHidingDuration) } } } extension View { func displayToast(handledBy toastHandler: ToastHandler) -> some View { self.displayToast( ࠷ޙʹ5PBTU7JFXΛ࡞Δ ޷͖ͳΑ͏ʹ 5PBTU7JFXΛ࡞Δ .transitionઃఆ͢Δ͜ͱͰ ৽͍͠5PBTUͷදࣔΛεϥΠυͰ͖Δ (SPVQͰ.animationઃఆ͢Δ͜ͱͰ 5PBTUͷද͕ࣔࣗಈతʹΞχϝʔγϣϯద༻͞ΕΔ .onTapGestureͰTLJQݺͿ͜ͱͰ Ϣʔβ͕खಈͰࠓͷϝοηʔδΛফͤΔ

// ελΠϧͷઃఆ .transition(MoveTransition.move(edge: .top). combined(with: .opacity)) } } .animation(.easeInOut, value:
toastHandler.currentToastMessage) .onTapGesture { toastHandler.skipCurrent(in: toastHidingDuration) } } } extension View { func displayToast(handledBy toastHandler: ToastHandler) -> some View { self.displayToast( on: .top, handledBy: toastHandler, toastMaker: { ToastView(toastHandler: $0) } ) } } ࠷ޙʹ5PBTU7JFXΛ࡞Δ 5PBTU7JFXΛָʹ࢖͏ͨΊͷ ֦ு΋࡞͓ͬͯ͘

࢖͏࣌

Ұ൪େݩͷ7JFXͰToastHandlerอ࣋ͯ͠ .displayToast.PEJpFSΛೖΕΔ import SwiftUI @main struct MyApp: App { @State
private var toastHandler: ToastHandler = .init() var body: some Scene { WindowGroup { ContentView() .displayToast(handledBy: toastHandler) } } }

5PBTUΛද͍ࣔͨ͠7JFXͰ displayToastϓϩύςΟʔΛݺͼग़͢ import SwiftUI struct Content: View { @Environment(\.displayToast) var
displayToast var body: some View { MyContentView() .refreshable { do { try await doSomething() } catch { displayToast?("\(error)") } } } }

ʲએ఻ʳϥΠϒϥϦʔ࡞Γ·ͨ͠!

IUUQTHJUIVCDPNFMIPTIJOP5BSEJOFTT

SwiftUIで使いやすいToastの作り方 / How to build a Toast s...

SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI

Elvis Shi

More Decks by Elvis Shi

Other Decks in Programming

Featured

Transcript

4XJGU6*Ͱ ࢖͍΍͍͢5PBTUͷ࡞Γํ f o r Ϟ ό ν Ω

} var employedBy = "YUMEMI Inc." var job = "iOS

5PBTUͱ͸ w ؆୯ͳϫʔχϯάใࠂʹ࢖͍͍ͨ௨஌ w Ϣʔβͷૢ࡞ΛϒϩοΫ͠ͳ͍ w ϢʔβʹΞΫγϣϯΛٻΊͳ͍ w "OESPJEͰ͸Α͘ݟ͔͚Δ͕J04ʹ͸७ਖ਼෦඼͕ͳ͍ w

࢖͍΍͍͢ 5PBTUͷཁ݅ w ͍ΖΜͳϏϡʔ͔Β؆୯ʹग़ͤΔ w -PHͱಉ͡Α͏ͳײ֮ͳͷͰɺͲ͜ͰԿΛग़͍͔ͨ͠͸ॊ ೈʹରԠ͍ͨ͠ w ΞϓϦҰׅͰදࣔΛ؅ཧ w

Alertͱಉ͡ײ֮Ͱ࡞Ε͹ ͍͍ͷͰ͸ʁ

7FS struct Content: View { @State private var warning: String?

7FS struct Content: View { @State private var warning: String?

ͱ͍͏Θ͚Ͱ.toastͷ࡞ΓํΛ ڭ͑·͢

ͱͰ΋ݴ͏ͱࢥͬͨʁ

࢖ͬͯΈͯΘ͔ͬͨ.toastͷσϝϦοτ w ʢ΄΅΄΅શͯͷϏϡʔʹʣ!4UBUFQSJWBUFWBSXBSOJOH 4USJOH ࡞ͬͯߋʹ.PEJpFS͔͚Δͷ७ਮʹ໘౗ͯ͘͘͞ ਏ͔ͬͨ w ҰͭͷϏϡʔ͔ΒҰ౓ʹෳ਺ͷϫʔχϯάΛग़͢ͷ͕೉͍͠ w ෳ਺ͷϏϡʔͷϫʔχϯάͷҰݩ؅ཧͷ͜ͱߟ͑ͨΒɺ͜Ε

࢖ͬͯΈͯΘ͔ͬͨ.toastͷσϝϦοτ w ʢ΄΅΄΅શͯͷϏϡʔʹʣ!4UBUFQSJWBUFWBSXBSOJOH 4USJOH ࡞ͬͯߋʹ.PEJpFS͔͚Δͷ७ਮʹ໘౗ͯ͘͘͞ ਏ͔ͬͨ w ҰͭͷϏϡʔ͔ΒҰ౓ʹෳ਺ͷϫʔχϯάΛग़͢ͷ͕೉͍͠ w ෳ਺ͷϏϡʔͷϫʔχϯάͷҰݩ؅ཧͷ͜ͱߟ͑ͨΒɺ͜Ε

ͳͥ4UBUF%SJWFOͰ࡞͔ͬͨ w 4XJGU6*͸4UBUF%SJWFOͳϑϨʔϜϫʔΫ w ը໘ͷঢ়گ͸શͯ4UBUFͰ؅ཧ͞ΕΔ w &WFOU͸શͯԿ͔͠Βͷ4UBUFʹམͱ͠ࠐΉඞཁ͕͋Δ w Ͱ΋5PBTUΛग़͢ଆ͸ผʹ4UBUFͰ؅ཧ͢Δඞཁͳ͍ΑͶ w

7FS struct Content: View { @State private var warning: String?

7FS struct Content: View { @Environment(\.displayToast) var displayToast var body:

ͦ͏ɺΉ͠Ζ.alertΑΓ @Environment(\.dismiss)دΓ

ͱݴ͏Θ͚Ͱ @Environment(\.displayToast)ͷ ࡞ΓํΛڭ͑·͢

·ͣ͸&OWJSPONFOUΛ࡞Δ import SwiftUI typealias DisplayToastAction = @MainActor (String) -> Void

import Observation @Observable final class ToastHandler { @MainActor private (set)

private var toastShowingDuration: Duration { .seconds(3) } private var defaultToastHidingDuration:

try? await Task.sleep(for: duration) displayNextToastIfAvailable() } } @MainActor private func

guard currentToastMessage == nil, let message = toastQueue.first else {

import SwiftUI struct ToastDisplayModifier<Toast: View>: ViewModifier { var alignment: Alignment

func body(content: Content) -> some View { content .overlay(alignment: alignment)

import SwiftUI struct ToastView: View { var toastHandler: ToastHandler private

private var toastHidingDuration: Duration { .milliseconds(10) } var body: some

// ελΠϧͷઃఆ .transition(MoveTransition.move(edge: .top). combined(with: .opacity)) } } .animation(.easeInOut, value:

࢖͏࣌

Ұ൪େݩͷ7JFXͰToastHandlerอ࣋ͯ͠ .displayToast.PEJpFSΛೖΕΔ import SwiftUI @main struct MyApp: App { @State

5PBTUΛද͍ࣔͨ͠7JFXͰ displayToastϓϩύςΟʔΛݺͼग़͢ import SwiftUI struct Content: View { @Environment(\.displayToast) var

ʲએ఻ʳϥΠϒϥϦʔ࡞Γ·ͨ͠!

IUUQTHJUIVCDPNFMIPTIJOP5BSEJOFTT