概览
要想创作出一款精彩绝伦的 App,绚丽的界面和灵动的动画并不是唯一吸引用户的要素。有时我们还希望让用户真切的感受到操作引发的触觉反馈,直击使用者的灵魂。
所幸的是新版 SwiftUI 原生提供了实现触觉震动反馈的机制。在介绍它之后我们还将进一步展开讨论该机制基于的触发器模式,并"青出于蓝而胜于绿"的设计我们自己的触发器实现。
在本篇博文中,您将学到如下内容:
- 概览
- [1. "震荡波"来袭](#1. “震荡波”来袭)
- [2. 触发器模式](#2. 触发器模式)
- [3. SwiftUI 触发器模式的其它应用](#3. SwiftUI 触发器模式的其它应用)
- [4. 自定义触发器模式](#4. 自定义触发器模式)
- 总结
相信学完本课后,小伙伴们对于 SwiftUI 中触觉反馈与触发器开发模式会有更深刻的领悟,从而能够更加游刃有余的使用它们。
那还等什么呢?We will rock you!!!😉
1. "震荡波"来袭
除了从视觉上强势吸引用户眼球之外,我们的 App 还可以用"更立体"的方式让用户爱不释手。是滴,我们就是要用触觉反馈震动他们"久逢甘露"的双手,用"震荡波"激荡他们的心灵。
震动反馈(Haptic )是 Apple 对于移动设备提供的一种加强用户体验的机制,它最早诞生于 UIKit。它的体验有点类似于之前 iPhone 中 3D Touch 的功能。
Haptic 被广泛应用在 iOS/iPadOS 中,Apple 系统在用户交互中大量使用了震动反馈,比如在锁屏状态下点击 iPhone 屏幕左下角的手电筒按钮:
或者 iPhone 隔空投送完成时给于用户的提示反馈,以及 AppleWatch 上的通知提醒等等。
更多 Haptic 撸码的相关介绍,请小伙伴们移步 Apple 官方开发网站观赏进一步内容:
前面说过 Haptic 最先是在 UIKit 中得到很好支持的,从 SwiftUI 5.0(iOS 17.0)开始苹果终于推出了 SwiftUI 里 Haptic 的原生实现 SensoryFeedback:
如上所示,SensoryFeedback 结构的"借花献佛"是通过视图扩展方法 sensoryFeedback 来完成的:
swift
@available(iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0, *)
@available(visionOS, unavailable)
extension View {
/// - Parameters:
/// - feedback: Which type of feedback to play.
/// - trigger: A value to monitor for changes to determine when to play.
public func sensoryFeedback<T>(_ feedback: SensoryFeedback, trigger: T) -> some View where T : Equatable
/// - Parameters:
/// - feedback: Which type of feedback to play.
/// - trigger: A value to monitor for changes to determine when to play.
/// - condition: A closure to determine whether to play the feedback when
/// `trigger` changes.
public func sensoryFeedback<T>(_ feedback: SensoryFeedback, trigger: T, condition: @escaping (_ oldValue: T, _ newValue: T) -> Bool) -> some View where T : Equatable
/// - Parameters:
/// - trigger: A value to monitor for changes to determine when to play.
/// - feedback: A closure to determine whether to play the feedback and
/// what type of feedback to play when `trigger` changes.
public func sensoryFeedback<T>(trigger: T, _ feedback: @escaping (_ oldValue: T, _ newValue: T) -> SensoryFeedback?) -> some View where T : Equatable
}
可以看到 sensoryFeedback 方法拥有多个重写形式,但它们都毫无例外的使用了触发器模式(Trigger Mode)。
2. 触发器模式
什么是触发器模式呢?在 Apple 的开发中大家可能对观察者模式早就有所耳闻,触发器模式与此类似也属于苹果开发中的一种设计模式。触发器模式就是让状态的改变触发代码的执行。
在以状态驱动的 SwiftUI 王国中,触发器模式的使用更显得"如鱼得水",仿佛天造地设一般。
swift
struct ContentView: View {
@State private var store = Store()
var body: some View {
NavigationStack {
List(store.results, id: \.self) { result in
Text(result.title)
}
.searchable(text: $store.query)
.sensoryFeedback(.success, trigger: store.results)
}
}
}
在上面的示例代码中,我们使用 sensoryFeedback 修改器方法为视图添加了震动反馈。其中可以看到:Haptic 产生的触发器是 store.results 状态,即当用户引起 Store 搜索结果发生改变时,我们纤细指尖才会喜提激荡震动着的触觉洗礼。
除了感受系统内置震动效果对"心灵的冲击"以外,我们还可以让震动更加"变幻莫测":
swift
VStack {}
.sensoryFeedback(
.impact(weight: .heavy, intensity: 0.9),
trigger: trigger
)
类似的,大家还可以根据状态实际的值来决定到底使用何种 Haptic 效果,比如在下面的代码中我们就根据搜索是否成功来决定采用 .error 还是 .success 震动反馈类型:
swift
List(store.results, id: \.self) { result in
Text(result)
}
.searchable(text: $store.query)
.sensoryFeedback(trigger: store.results) { oldValue, newValue in
return newValue.isEmpty ? .error : .success
}
注意,上面所有 Haptic 效果只有在触发器对应状态发生改变时才会产生,所以我们不用担心视图创建时触发器导致不希望的"副作用"。
3. SwiftUI 触发器模式的其它应用
除了 Haptic 对应的实现以外,在 SwiftUI 中还有很多其它功能也大量适配触发器模式。比如 scrollIndicatorsFlash 修改器方法:
scrollIndicatorsFlash 方法用来在指定状态发生改变时来"闪烁"可滚动视图中的滚动条:
swift
struct TriggerValueExample: View {
let messages: [String]
var body: some View {
List(messages, id: \.self) { message in
Text(verbatim: message)
}
.scrollIndicatorsFlash(trigger: messages)
}
}
在上面的代码中,当有新消息到来时我们会"闪烁"列表的滚动条以提示用户。
4. 自定义触发器模式
通过上面的介绍,想必大家对于何为触发器模式以及它的工作原理已经了然于心了。触发器模式在 SwiftUI 中被广泛地使用着,那我们能不能"百尺竿头更进一步"打造自己的触发器呢?
答案是肯定的!
正如观察者模式那样,设计模式意味着提供充分可定制的灵活性,除了使用系统框架提供的触发器以外,我们当然可以随心所欲地创建自己的触发器。
假如我们希望在 SwiftUI 中当某一状态发生改变时播放指定的声音,这可以恰如其分的用触发器模式来实现:
swift
struct PlaySoundViewModifier<Trigger: Equatable>: ViewModifier {
let sound: URL
let trigger: Trigger
func body(content: Content) -> some View {
content
.onChange(of: trigger) {
if let player = try? AVAudioPlayer(contentsOf: sound) {
player.play()
}
}
}
}
extension View {
func playSound(_ sound: URL, trigger: some Equatable) -> some View {
self.modifier(PlaySoundViewModifier(sound: sound, trigger: trigger))
}
}
在上面的示例代码中,我们创建了 PlaySoundViewModifier 修改器方法,并绑定了一个遵守 Equatable 协议,类型为 Trigger 的属性,当 trigger 发生变化时,我们就利用 AVAudioPlayer 对象从容地播放想要的声音文件。
小伙伴们可以这样使用上面创建的 PlaySoundViewModifier 修改器方法:
swift
struct SoundFeedbackExample: View {
let messages: [String]
var body: some View {
List(messages, id: \.self) { message in
Text(verbatim: message)
}
.playSound(
Bundle.main.url(forResource: "sound", withExtension: "wav")!,
trigger: messages
)
}
}
看到了吗?触发器模式就是这么单刀直入,让代码实现变得如此直接了当。从此小伙伴们开发兵器库中又多了一件神兵利器,棒棒哒!💯
想要系统学习 Swift 语言的小伙伴们,千万不要错过我的《Swift 语言开发精讲》专栏哦:
总结
在本篇博文中,我们介绍了 SwiftUI 5.0(iOS 17.0)中触觉反馈(Haptic)机制的实现,并由此抛砖引玉讨论了开发模式中的触发器模式,最后我们看到了实现自己心仪的触发器是多么的简单。
感谢观赏,再会!😎