概覽
作為我們禿頭開發(fā)者來說，寫出一款創(chuàng)意炸裂的 App 還不足以吸引用戶眼球，更重要的是如何讓用戶用最短的時間掌握我們 App 的使用技巧。
從 iOS 17 開始，? 推出了全新的 TipKit 框架專注于此事。有了它，我們再也不用自己寫 App 用戶幫助以及使用指南的邏輯和界面了。
使用 TipKit 非常簡單，接下來就讓我們一起走進(jìn) TipKit 的世界吧！
本文代碼全部在 Xcode 15 beta8 上編譯，在 iOS 17 beta8 上運(yùn)行。
什么是 TipKit？
TipKit 是 ? 在 WWDC 23 上推出的一款新框架，用于在界面顯示提示（Tips）來幫助用戶快速發(fā)掘我們 App 的使用特性。
目前該框架仍屬于 beta 階段，意味著它還有很多不確定性。
如果我沒有記錯，? 直到 Xcode beta4 才將 TipKit 提供給開發(fā)者，而且現(xiàn)在? 官網(wǎng) TipKit 的示例代碼在 Xcode beta8 中已提示語法錯誤了（我們后面會說明）：
對于 ? 這種習(xí)慣性“謎之”行為的更多細(xì)節(jié)，感興趣的小伙伴們可以到如下鏈接中觀賞：
- 有用的知識又增加了：為何無法編譯某些 ? WWDC 官方視頻中的代碼？
創(chuàng)建一個 Tip
按照 SwiftUI 的“習(xí)性”，一個 Tip 同時意味著外觀和邏輯雙重含義。
創(chuàng)建一個提示很簡單，只需遵循 Tip 協(xié)議即可：
struct FavoriteTip: Tip {
var title: Text {
Text("收藏最愛的圖片")
.bold()
}
var message: Text? {
Text("將心儀的圖片保存到相冊中")
.font(.headline)
.foregroundStyle(.gray.gradient)
}
}
Tip 協(xié)議還有很多其它可選屬性，比如我們還可以為 Tip 界面進(jìn)一步增加圖片修飾：
struct FavoriteTip: Tip {
var image: Image? {
Image(systemName: "heart")
}
}
TipKit 顯示的兩種方式
在 Tip 創(chuàng)建之后如何顯示它們呢？有兩種方式：嵌入和彈出。
我們可以直接將 Tip 嵌在視圖中：
struct ContentView: View {
let favTip = FavoriteTip()
var body: some View {
NavigationStack {
VStack {
TipView(favTip)
}
.padding()
.navigationTitle("TitKit演示")
}
}
}
顯示效果如下：
或者我們還可以將 Tip 直接依附于某一個視圖，比如圖片或按鈕：
struct ContentView: View {
let favTip = FavoriteTip()
var body: some View {
NavigationStack {
VStack {...}
.padding()
.navigationTitle("TitKit演示")
.toolbar {
ToolbarItem {
Image(systemName: "heart")
.font(.title.weight(.black))
.foregroundStyle(.pink.gradient)
.popoverTip(favTip, arrowEdge: .top)
}
}
}
}
}
我們可以根據(jù)不同需求來組合使用這兩種顯示方式。
TipKit 全局配置
其實(shí)，TipKit 框架會在 App （本地目錄）中存放一些相關(guān)的配置信息。理論上說，它們可能會通過 iCloud 同步到其它設(shè)備上去，這意味著在不同設(shè)備上相同 App 中的 TipKit 共享同一組配置。
我們可以進(jìn)一步定制 TipKit 的配置細(xì)節(jié)，比如 Tip 顯示頻率、配置數(shù)據(jù)庫保存的本地位置等等：
import SwiftUI
import TipKit
@main
struct TipKitTestApp: App {
var body: some Scene {
WindowGroup {
ContentView()
.task {
try? Tips.configure([
.displayFrequency(.immediate),
.datastoreLocation(.applicationDefault)
])
// Xcode 15 beta4 中過時的語法，目前已不能使用：
/*
try? await Tips.configure {
DisplayFrequency(.immediate)
DatastoreLocation(.applicationDefault)
}*/
}
}
}
}
如上代碼所示，我們需要所有 Tip 立即顯示，并且讓系統(tǒng)決定配置數(shù)據(jù)存儲的位置（我們也可以自己設(shè)置存儲路徑）。
在代碼中，我們注釋了之前官方示例中出錯的代碼片段，這些代碼在 Xcode 15 beta8 中已不能使用。
TipKit 顯示規(guī)則
除了全局 Tip 顯示限制以外，我還可以設(shè)置單個 Tip 之間的顯示規(guī)則。
比如，假設(shè)有兩個提示，我們希望 FavoriteTip 在 StartTip 提示關(guān)閉后再顯示，我們可以在 FavoriteTip 中用特定的規(guī)則（Rule）來表示這一約束：
struct FavoriteTip: Tip {
// 其它代碼從略
var rules: [Rule] {
#Rule(Self.$startTipHasDisplayed) { $0 == true}
}
@Parameter
static var startTipHasDisplayed: Bool = false
}
現(xiàn)在，我們需要在 StartTip 提示關(guān)閉時將 FavoriteTip.startTipHasDisplayed 置為 true 才能觸發(fā) FavoriteTip 的顯示：
struct ContentView: View {
let startTip = StartTip()
let favTip = FavoriteTip()
var body: some View {
NavigationStack {
VStack {
Image("1")
.resizable()
.aspectRatio(contentMode: .fill)
.onTapGesture {
// 關(guān)閉 startTip 提示
startTip.invalidate(reason: .actionPerformed)
// 觸發(fā) FavoriteTip 提升的顯示
FavoriteTip.startTipHasDisplayed = true
}
TipView(startTip)
}
.padding()
.navigationTitle("TitKit演示")
.toolbar {
ToolbarItem {
Image(systemName: "heart")
.font(.title.weight(.black))
.foregroundStyle(.pink.gradient)
.popoverTip(favTip, arrowEdge: .top)
}
}
}
}
}
現(xiàn)在，只有等 StartTip 關(guān)閉后，F(xiàn)avoriteTip 提示才能顯示出來：
為 TipKit 增加更多互動性
有時，我們希望提示為用戶提供更豐富的交互功能，比如在 Tip 中提供按鈕跳轉(zhuǎn)到更詳細(xì)的使用教程界面。
TipKit 為此也提供了很好的支持，我們可以為 Tip 添加 Action 來驅(qū)動交互行為：
struct FavoriteTip: Tip {
// 其它代碼從略
var actions: [Action] {
[
Tip.Action(id: "learn-more", title: "了解更多"),
Tip.Action(id: "forget", title: "下次再說")
]
}
}
在 Tip Action 被觸發(fā)時，我們可以執(zhí)行自定義行為：
struct ContentView: View {
let startTip = StartTip()
let favTip = FavoriteTip()
var body: some View {
NavigationStack {
VStack {
Image("1")
.resizable()
.aspectRatio(contentMode: .fill)
.onTapGesture {
startTip.invalidate(reason: .actionPerformed)
FavoriteTip.startTipHasDisplayed = true
}
TipView(startTip)
}
.padding()
.navigationTitle("TitKit演示")
.toolbar {
ToolbarItem {
Image(systemName: "heart")
.font(.title.weight(.black))
.foregroundStyle(.pink.gradient)
.popoverTip(favTip, arrowEdge: .top){ action in
switch action.index {
case 0:
favTip.invalidate(reason: .tipClosed)
// 跳轉(zhuǎn)到詳細(xì)使用教程
case 1:
favTip.invalidate(reason: .tipClosed)
// 直接退出提示
default:
break
}
}
}
}
}
}
}
現(xiàn)在，用戶可以選擇“了解更多”來進(jìn)一步學(xué)習(xí) App 的使用“秘技”了：
如何測試 TipKit？
TipKit 全局配置存儲在本地帶有持久化特性，為了便于開發(fā)者即時測試，? 提供了一些方法來快速顯示或隱藏全部或指定 Tip：
一般的，要想在 Xcode 預(yù)覽中正確測試 TipKit 的行為，我們需要在每次視圖刷新時重置 TipKit 數(shù)據(jù)庫，否則 Tip 不會正常顯示：
#Preview {
ContentView()
.task {
// 在每次視圖刷新時將 TipKit 數(shù)據(jù)庫重置為初始狀態(tài)
try? Tips.resetDatastore()
try? Tips.configure([
.displayFrequency(.immediate),
.datastoreLocation(.applicationDefault)
])
}
}
總結(jié)
在本篇博文中，我們介紹了 SwiftUI 5.0（iOS 17）中新引進(jìn)的開發(fā)框架 TipKit，使用它我們可以非常方便和快速的向用戶介紹我們 App 中的各種特性和使用指南，小伙伴們還不快操練起來！文章來源：http://www.zghlxwxcb.cn/news/detail-706235.html
感謝觀賞，再會！??文章來源地址http://www.zghlxwxcb.cn/news/detail-706235.html
到了這里，關(guān)于SwiftUI 5.0（iOS 17）TipKit 讓用戶更懂你的 App的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
