Mouse Interaction with UIPointerInteraction
Apple released iPadOS 13.4 on March 24th which introduced mouse and trackpad support for the iPad. This means if you connect a bluetooth or USB pointer device to your iPad you have a completly new way to interact with it.
Apple decided not to show a classic cursor. Instead, they reinvented the cursor for the iPad. Instead you will see a circle that, if it gets near a
UIBarButtons
,
UISegementedControl
or
UITabBarItem
, snaps automatically to this element and focuses it. In addition to this, you will get a nice highlight effect. This means a lot of elements of app are working out of the box without an app update.
UIButton
Apple added new APIs to add this effect to more UI elements than are supported out of the box. For an UIButton you only have to set a property and you will get the same effect.
aButton.isPointerInteractionEnabled = true
UIView and Custom Implementation
It is also possible to add an effect to a
UIView
or a custom pointer style for an
UIButton
. The implementation requires only need a few lines of code:
Add the Delegate protocol to your class
class MyViewController, UIPointerInteractionDelegate
Attach the
UIPointerInteraction
to the view, which should get you a mouseover effect. This should be done in
viewDidLoad
of your view controller or in the
init
method of the view.
if #available(iOS 13.4, *) { customPointerInteraction(on: myButton, pointerInteractionDelegate: self) }
Last but not least add this block to your class. It includes the function for adding the pointer interaction to the view and the delegate method for the
UIPointerInteraction
which sets the preferred pointer style. There are different pointer effects available,
highlight
,
hover
,
lift
and
automatic
.
// MARK: - UIPointerInteractionDelegate @available(iOS 13.4, *) func customPointerInteraction(on view: UIView, pointerInteractionDelegate: UIPointerInteractionDelegate){ let pointerInteraction = UIPointerInteraction(delegate: pointerInteractionDelegate) view.addInteraction(pointerInteraction) } @available(iOS 13.4, *) func pointerInteraction(_ interaction: UIPointerInteraction, styleFor region: UIPointerRegion) -> UIPointerStyle { var pointerStyle: UIPointerStyle? if let interactionView = interaction.view { let targetedPreview = UITargetedPreview(view: interactionView) pointerStyle = UIPointerStyle(effect: UIPointerEffect.highlight(targetedPreview)) } return pointerStyle }
That’s all!
Hover Effect
If you want to give your table views, rows and collection view cells a hover effect, you can use the same implementation as above, but set the interaction to your
UITableViewCell
or
UICollectionViewCell
and use
UIPointerStyle
with hover effect.
UIPointerStyle(effect: UIPointerEffect.hover(targetedPreview, preferredTintMode: .overlay, prefersShadow: true, prefersScaledContent: true))
The pointer style will be set as mentioned above in the delegate method
func pointerInteraction(_ interaction: UIPointerInteraction, styleFor region: UIPointerRegion) -> UIPointerStyle?
.
Custom Pointer Shape
You can also change the shape of the pointer and implement a custom pointer style for when hovering on a UI element by setting an bezier path:
@available(iOS 13.4, *) func pointerInteraction(_ interaction: UIPointerInteraction, styleFor region: UIPointerRegion) -> UIPointerStyle? { let shape = UIBezierPath() shape.move(to: CGPoint(x: 10, y: 6)) shape.addLine(to: CGPoint(x: 10, y: 0)) shape.addLine(to: CGPoint(x: 6, y: 0)) shape.addLine(to: CGPoint(x: 6, y: 6)) shape.addLine(to: CGPoint(x: 0, y: 6)) shape.addLine(to: CGPoint(x: 0, y: 10)) shape.addLine(to: CGPoint(x: 6, y: 10)) shape.addLine(to: CGPoint(x: 6, y: 16)) shape.addLine(to: CGPoint(x: 10, y: 16)) shape.addLine(to: CGPoint(x: 10, y: 10)) shape.addLine(to: CGPoint(x: 16, y: 10)) shape.addLine(to: CGPoint(x: 16, y: 6)) shape.addLine(to: CGPoint(x: 10, y: 6)) shape.close() let pointerShape = UIPointerShape.path(shape) return UIPointerStyle(shape: pointerShape) }
This code sample gives you a crosshair pointer shape:
Conclusion
As of iPadOS 13.4, developers can upgrade their apps to support pointing devices on the iPad and create a user experience that rivals that of desktop apps.
We at 玩嘉电竞下载注册 already implemented
UIPointerInteraction
in our iOS app. The new version will be availabe soon on the AppStore. Do you want to test it right now?
Join our TestFlight beta!
The 玩嘉电竞下载注册 iOS app is open source and the code for
UIPointerInteraction
implementation can be found in this branch of our repository on GitHub:
feature/ipad-pointerinteraction
The complete documentation by Apple is available here: Apple Developer Documentation > UIKit > Pointer Interactions
