[SWIFT] Ajout de la prise en charge du trackpad (UIPointerInteraction) pour les applications iPad iOS

Les utilisateurs peuvent connecter le trackpad à l'iPad et utiliser la souris sur l'iPad. De plus, vous pouvez utiliser l'étui clavier d'Apple avec le trackpad. Différents éléments sont mis en surbrillance lorsque l'utilisateur déplace le curseur de la souris.

Cet article décrit comment ajouter une interaction de pointeur de trackpadà une applicationSwiftUI ou à une application UIKit + UIStoryboard`.

Pour SwiftUI

Vous pouvez activer l'interaction du trackpad en ajoutant le modificateur .hoverEffect () à l'élément de vue. Par exemple

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) ressemble à ceci

.hoverEffect (.lift) ressemble à ceci

Pour les boutons UIStoryboard

Vous pouvez rapidement ajouter des interactions de pointeur au bouton UIButton sur le storyboard. Cliquez simplement sur la case intitulée «Interaction activée» dans la section «Pointeur».

Cela ressemble à ceci:

Pour d'autres vues utilisant UIKit

Si vous utilisez UIStoryboard et que vous souhaitez ajouter une interaction de pointeur à d'autres éléments de vue, vous pouvez profiter de UIPointerInteraction.

Ajoutez d'abord l'élément view en tant que variable à votre code:

@IBOutlet weak var button: UIView!

Veuillez noter que ce bouton renvoie à l'élément de vue de votre UIStoryboard.

Ajoutez également la variable UIPointerInteraction à la classe de programme pour l'initialiser.

var interaction: UIPointerInteraction!

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

Il est maintenant possible d'ajouter des interactions de pointeur pour afficher des éléments (bouton) en appelant.

button.addInteraction(self.interaction)

Vous devez également ajouter un délégué appelé UIPointerInteractionDelegate.

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
    }
    
}

Cela ressemble à ceci:

Style de pointeur

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

Cette première fonction spécifie le style d'interaction du pointeur. Par exemple, vous pouvez utiliser UIPointerEffect.highlight (aperçu), UIPointerEffect.lift (aperçu) ou UIPointerEffect.hover (aperçu, preferTintMode: .overlay, prefersShadow: true, prefersScaledContent: true).

Actions à entreprendre lorsque le pointeur du trackpad entre ou sort de la plage spécifiée

Vous pouvez agir lorsque le pointeur du trackpad de l'utilisateur entre ou sort d'une plage spécifique.

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
    }
}

Définir manuellement la plage des éléments de vue

Vous pouvez ajouter cette fonction à votre extension si vous souhaitez définir manuellement la plage des éléments de vue.

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

La mise en œuvre de l'interaction avec le pointeur peut offrir une meilleure expérience aux utilisateurs d'iPad avec TrackPad. Ces interactions donnent à l'utilisateur une meilleure idée de l'endroit où cliquer dans l'application.

:relaxed: Twitter @MaShunzhe

: page_facing_up: Vous pouvez voir ma liste d'articles iOS publiés par catégorie (42)

: sparkles: J'ai créé un clip d'application que je peux utiliser pour lire tous les articles de programmation Qiita que j'ai publiés. Vous pouvez scanner et afficher ce code depuis votre iPhone.