Added trackpad support (UIPointerInteraction) for iPad iOS applications

Users can connect the trackpad to the iPad and use the mouse on the iPad. In addition, you can use Apple's keyboard folio with the trackpad. Various elements are highlighted as the user moves the mouse cursor.

This article describes how to add a trackpad pointer interactionto aSwiftUI or UIKit + UIStoryboard` application.

For SwiftUI

You can enable trackpad interaction by adding the .hoverEffect () modifier to the view element. For example

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) looks like this

.hoverEffect (.lift) looks like this

For UIStoryboard buttons

You can quickly add pointer interactions to the UIButton button on the storyboard. Simply click on the checkbox labeled Interaction enabled in the Pointer section.

It looks like this:

For other views using UIKit

If you are using UIStoryboard and want to add pointer interactions to other view elements, you can take advantage of UIPointerInteraction.

First add the view element as variable to your code:

@IBOutlet weak var button: UIView!

Please note that this button links to the view element of your UIStoryboard.

Also, add the UIPointerInteraction variable to your program class to initialize it.

var interaction: UIPointerInteraction!

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

You can now call to add pointer interactions to view elements (button).

button.addInteraction(self.interaction)

You also need to add a delegate called 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
    }
    
}

It looks like this:

Pointer style

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

This first function specifies the style of pointer interaction. For example, you can use UIPointerEffect.highlight (preview), UIPointerEffect.lift (preview), or UIPointerEffect.hover (preview, preferredTintMode: .overlay, prefersShadow: true, prefersScaledContent: true).

Actions to take when the trackpad pointer enters or leaves the specified range

You can take action when the pointer on the user's trackpad enters or exits a specific range.

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

Manually define the range of view elements

You can add this function to your extension if you want to manually define the range of view elements.

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

Implementing pointer interaction can provide a better experience for iPad users on the trackpad. These interactions give users a better idea of where to click in their application.

:relaxed: Twitter @MaShunzhe

: page_facing_up: You can see my list of published iOS articles by category (42)

: sparkles: I have created an App Clip that I can use to read all the Qiita programming articles I have published. You can scan and view this code from your iPhone.