So verwenden Sie die neue Xcode 15-Komponente TipKit

Einführung in TipKit

Auf der diesjährigen WWDC wurde eine neue UI-Komponentenbibliothek veröffentlicht TipKit, die zum einfachen Anzeigen einer Eingabeaufforderungsbox in Apps auf Plattformen wie TipKitverwendet werden kann . Sie verfügt über ein integriertes UI-Layout und unterstützt die Konfiguration von Anzeigehäufigkeit, Regeln und anderen Funktionen.iOS/macOS/watchOS

Xcode 15 Beta 5 wurde heute veröffentlicht und TipKit wurde endlich eingeführt. Ich habe diesen API-Satz wahrscheinlich ausprobiert und er unterscheidet sich ein wenig vom Video-Tutorial auf der WWDC vor einem Monat. Heute werde ich darüber sprechen, wie man es verwendet.

Der heutige Code verwendet SwiftUI zur Demonstration.

Startkonfiguration

Um die Tip-Komponente normal anzuzeigen, müssen Sie den einheitlichen Status aller Tips in der Anwendung im App-Starteintrag laden und konfigurieren:

import SwiftUI
import TipKit

@main
struct TipKitDemoApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .task {
                    try? await Tips.configure()
                }
        }
    }
}

Die Funktion hier Tips.configure()unterstützt das Festlegen einer Reihe von Optionen zum Anpassen des Tippes. Ich übergebe hier keine Parameter und die Standardwerte werden automatisch für mich konfiguriert.

Individueller Tipp

Importieren Sie zunächst das TipKit-Framework:

Dann erklären Sie eine structErbschaft Tip:

struct MyTip: Tip {
    var title: Text {
        Text("Tip Title")
    }
}

TipEs handelt sich um ein Protokoll, der Titel muss implementiert werden und andere Werte sind optional.

Tipps anzeigen

Es gibt zwei Anzeigemethoden für den Tipp. popoverDas InlinePopover muss diese Methode verwenden, um den Tipp auf dem angegebenen Element zu montieren popoverTip. Nachdem der Tipp angezeigt wurde, wird ein Pfeil angezeigt, der auf dieses Element zeigt. Ich zeige diesen Tipp beispielsweise unter dem an Favoriten-Button:

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "star")
                .imageScale(.large)
                .foregroundStyle(.tint)
                .popoverTip(MyTip(), arrowEdge: Edge.top) { action in
                    print(action)
                }
        }
        .padding()
    }
}

Schauen Sie sich den Effekt an:

Die Inline-Methode wird in der Ansicht als unabhängige Ansicht angezeigt, was die Verwendung der TipView-Komponente erfordert:

UI-Konfiguration von Tip

Ich habe gerade erwähnt, dass Tip ein Protokoll ist. Sie können eine andere Benutzeroberfläche konfigurieren und beispielsweise eine Beschreibungszeile unter dem Titel hinzufügen (die folgenden Effekt-Screenshots werden alle im Popover angezeigt):

struct MyTip: Tip {
    var title: Text {
        Text("Save as a Favorite")
    }
    
    var message: Text? {
        Text("Your favorite backyards always appear at the top of the list.")
    }
}

Symbol hinzufügen:

struct MyTip: Tip {
    // 其他代码...
    var asset: Image? {
        Image(systemName: "star")
    }
}

Schaltfläche „Hinzufügen“.

struct MyTip: Tip {
    // 其他代码...
    var actions: [Action] {
        [
            Action(id: "1", title: "Learn More", perform: {
                print("点击了第一个按钮")
            }),
            Action(id: "2", title: "OK", perform: {
                print("点击了第二个按钮")
            })
        ]
    }
}

Konfigurationsregeln

Darüber hinaus können Sie auch eine Reihe von Anzeigeregeln konfigurieren. Ich definiere beispielsweise einen Bool, um die Anzeige und das Ausblenden dieses Tippes zu steuern:

struct MyTip: Tip {
    @Parameter
    static var isShowing: Bool = false
    
    // ...其他代码...
    
    var rules: [Rule] {
        [
            #Rule(MyTip.$isShowing) { $0 == true }
        ]
    }
}

然后我们再稍微改一下 ContentView 的代码，每次点击按钮的时候反转 isShowing 这个参数，来控制 Tip 的出现和消失：

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {
                 // 控制隐藏和出现
                MyTip.isShowing.toggle()
            }, label: {
                Image(systemName: "star.fill")
            })
            .popoverTip(MyTip(), arrowEdge: Edge.top) { action in
                print(action)
            }
        }
        .padding()
    }
}

这样我们就可以通过点击按钮来展示和隐藏这个提示框了：

动图封面

这里需要注意，目前 Xcode Beta 5 有个已知的问题是不能正常访问 @Parameter 这个宏，解决办法是在项目的 Build Settings 的 Other Swift Flags 中手动添加 -external-plugin-path $(SYSTEM\_DEVELOPER\_DIR)/Platforms/iPhoneOS.platform/Developer/usr/lib/swift/host/plugins#$ (SYSTEM_DEVELOPER_DIR)/Platforms/iPhoneOS.platform/Developer/usr/bin/swift-plugin-server，否则无法编译通过

配置显示选项

通过 TipOption 可以配置一些额外的展示选项，比如我这里配置这个 Tip 最大显示 5 次：

struct MyTip: Tip {
    
    // ...其他代码...
    
    var options: [TipOption] {
        [            Tips.MaxDisplayCount(5)        ]
    }
}

更多的配置大家可以自行探索。

参考资料

[1]

Xcode 15 Beta 5 Release Notes: developer.apple.com/documentati…

点击下方公众号卡片，关注我，每天分享一个关于 iOS 的新知识

本文同步自微信公众号 “iOS新知”，每天准时分享一个新知识，这里只是同步，想要及时学到就来关注我吧！