[SWIFT] Trackpad-Unterstützung (UIPointerInteraction) für iPad iOS-Anwendungen hinzugefügt

Benutzer können das Trackpad mit dem iPad verbinden und die Maus auf dem iPad verwenden. Darüber hinaus können Sie das Tastatur-Folio von Apple mit dem Trackpad verwenden. Verschiedene Elemente werden hervorgehoben, wenn der Benutzer den Mauszeiger bewegt.

In diesem Artikel wird beschrieben, wie Sie einer SwiftUI-Anwendung oder einer UIKit + UIStoryboard-Anwendung eine Trackpad-Zeiger-Interaktion hinzufügen.

Für SwiftUI

Sie können die Trackpad-Interaktion aktivieren, indem Sie dem Ansichtselement den Modifikator .hoverEffect () hinzufügen. Zum Beispiel

struct ContentView: View {
    var body: some View {
        Button(action: {}, label: {
            Image(systemName: "square.and.arrow.up")
        })
            .font(.system(size: 50))
            .foregroundColor(.blue)
            .hoverEffect(.highlight)
    }
}

.hoverEffect (.highlight) sieht so aus

.hoverEffect (.lift) sieht so aus

Für UIStoryboard-Schaltflächen

Sie können der Schaltfläche "UIButton" im Storyboard schnell Zeigerinteraktionen hinzufügen. Klicken Sie einfach auf das Feld "Interaktion aktiviert" im Abschnitt "Zeiger".

Es sieht aus wie das:

Für andere Ansichten mit UIKit

Wenn Sie "UIStoryboard" verwenden und anderen Ansichtselementen eine Zeigerinteraktion hinzufügen möchten, können Sie "UIPointerInteraction" nutzen.

Fügen Sie zuerst das Ansichtselement als Variable zu Ihrem Code hinzu:

@IBOutlet weak var button: UIView!

Bitte beachten Sie, dass diese Schaltfläche mit dem Ansichtselement Ihres UIStoryboards verknüpft ist.

Fügen Sie der Programmklasse außerdem die Variable "UIPointerInteraction" hinzu, um sie zu initialisieren.

var interaction: UIPointerInteraction!

override func viewDidLoad() {
    super.viewDidLoad()
    interaction = UIPointerInteraction(delegate: self)
}

Es ist jetzt möglich, Zeigerinteraktionen hinzuzufügen, um Elemente (button) durch Aufrufen anzuzeigen.

button.addInteraction(self.interaction)

Sie müssen auch einen Delegaten namens "UIPointerInteractionDelegate" hinzufügen.

extension ViewController: UIPointerInteractionDelegate {
    
    func pointerInteraction(_ interaction: UIPointerInteraction, styleFor region: UIPointerRegion) -> UIPointerStyle? {
        if let view = interaction.view {
            let preview = UITargetedPreview(view: view)
            return UIPointerStyle(effect: UIPointerEffect.lift(preview))
        }
        return nil
    }
    
}

Es sieht aus wie das:

Zeigerstil

func pointerInteraction(_ interaction: UIPointerInteraction, styleFor region: UIPointerRegion) -> UIPointerStyle?

Diese erste Funktion gibt den Stil der Zeigerinteraktion an. Sie können beispielsweise "UIPointerEffect.highlight (Vorschau)", "UIPointerEffect.lift (Vorschau)" oder "UIPointerEffect.hover" (Vorschau, PreferredTintMode: .overlay, PrefersShadow: true, PrefersScaledContent: true) verwenden.

Aktion, die ausgeführt werden soll, wenn der Trackpad-Zeiger den angegebenen Bereich betritt oder verlässt

Sie können Maßnahmen ergreifen, wenn der Zeiger auf dem Trackpad des Benutzers einen bestimmten Bereich betritt oder verlässt.

func pointerInteraction(_ interaction: UIPointerInteraction, willEnter region: UIPointerRegion, animator: UIPointerInteractionAnimating) {
    if let view = interaction.view {
        // TODO
    }
}

func pointerInteraction(_ interaction: UIPointerInteraction, willExit region: UIPointerRegion, animator: UIPointerInteractionAnimating) {
    if let view = interaction.view {
        // TODO
    }
}

Definieren Sie den Bereich der Ansichtselemente manuell

Sie können diese Funktion zu Ihrer Erweiterung hinzufügen, wenn Sie den Bereich der Ansichtselemente manuell definieren möchten.

func pointerInteraction(_ interaction: UIPointerInteraction, regionFor request: UIPointerRegionRequest, defaultRegion: UIPointerRegion) -> UIPointerRegion? {
    if let view = interaction.view {
        // TODO
    }
}

Das Implementieren der Zeigerinteraktion kann Benutzern des iPad mit TrackPad eine bessere Erfahrung bieten. Diese Interaktionen geben dem Benutzer eine bessere Vorstellung davon, wo er in der Anwendung klicken muss.

:relaxed: Twitter @MaShunzhe

: page_facing_up: Sie können meine Liste der veröffentlichten iOS-Artikel nach Kategorie (42) anzeigen

: sparkles: Ich habe einen App-Clip erstellt, mit dem ich alle von mir veröffentlichten Qiita-Programmierartikel lesen kann. Sie können diesen Code von Ihrem iPhone aus scannen und anzeigen.