{"id":2406,"date":"2020-03-31T17:34:34","date_gmt":"2020-03-31T17:34:34","guid":{"rendered":"https:\/\/owncloud.com\/?p=2406"},"modified":"2020-07-07T12:46:40","modified_gmt":"2020-07-07T12:46:40","slug":"of-mice-and-mobile-devices-implementing-mouse-interaction-in-ipados-13-4","status":"publish","type":"post","link":"https:\/\/owncloud.com\/de\/blogs\/of-mice-and-mobile-devices-implementing-mouse-interaction-in-ipados-13-4\/","title":{"rendered":"Of Mice and Mobile devices: Implementing Mouse Interaction in iPadOS 13.4"},"content":{"rendered":"

Mouse Interaction with UIPointerInteraction<\/h2>\n
\n

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.<\/p>\n

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\u00a0UIBarButtons<\/code>,UISegementedControl<\/code>\u00a0or\u00a0UITabBarItem<\/code>, 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.<\/p>\n

UIButton<\/h2>\n

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.<\/p>\n

aButton.isPointerInteractionEnabled = true<\/pre>\n
\"\"<\/figure>\n
UIView and Custom Implementation<\/h2>\n
It is also possible to add an effect to a\u00a0UIView<\/code>\u00a0or a custom pointer style for an\u00a0UIButton<\/code>. The implementation requires only need a few lines of code:<\/p>\n
Add the Delegate protocol to your class<\/p>\n
class MyViewController, UIPointerInteractionDelegate<\/pre>\n
Attach the\u00a0UIPointerInteraction<\/code>\u00a0to the view, which should get you a mouseover effect. This should be done in\u00a0viewDidLoad<\/code>\u00a0of your view controller or in the\u00a0init<\/code>\u00a0method of the view.<\/p>\n
if #available(iOS 13.4, *) {\r\n\u00a0\u00a0customPointerInteraction(on: myButton, pointerInteractionDelegate: self)\r\n}<\/pre>\n
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\u00a0UIPointerInteraction<\/code>\u00a0which sets the preferred pointer style. There are different pointer effects available,\u00a0highlight<\/code>,\u00a0hover<\/code>,\u00a0lift<\/code>\u00a0and\u00a0automatic<\/code>.<\/p>\n
\/\/ MARK: - UIPointerInteractionDelegate \r\n@available(iOS 13.4, *)\r\nfunc customPointerInteraction(on view: UIView, pointerInteractionDelegate:  \r\nUIPointerInteractionDelegate){ \r\n\u00a0\u00a0let pointerInteraction = UIPointerInteraction(delegate:  \r\npointerInteractionDelegate) \r\n\u00a0\u00a0view.addInteraction(pointerInteraction) \r\n} \r\n \r\n@available(iOS 13.4, *) \r\nfunc pointerInteraction(_ interaction: UIPointerInteraction, styleFor region: \r\nUIPointerRegion) -> UIPointerStyle {\r\n\u00a0\u00a0var pointerStyle: UIPointerStyle? \r\n \r\n\u00a0\u00a0if let interactionView = interaction.view {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let targetedPreview = UITargetedPreview(view: interactionView)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0pointerStyle = UIPointerStyle(effect:\r\nUIPointerEffect.highlight(targetedPreview))\r\n\u00a0\u00a0}\r\n\u00a0\u00a0return pointerStyle\r\n}<\/pre>\n
That\u2019s all!<\/p>\n
Hover Effect<\/h2>\n
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\u00a0UITableViewCell<\/code>\u00a0or\u00a0UICollectionViewCell<\/code>\u00a0and use\u00a0UIPointerStyle<\/code>\u00a0with hover effect.<\/p>\n
UIPointerStyle(effect: UIPointerEffect.hover(targetedPreview,\r\npreferredTintMode: .overlay, prefersShadow: true, prefersScaledContent: true))<\/pre>\n
The pointer style will be set as mentioned above in the delegate method\u00a0func pointerInteraction(_ interaction: UIPointerInteraction, styleFor region: UIPointerRegion) -> UIPointerStyle?<\/code>\u00a0.<\/p>\n
\"\"<\/p>\n
Custom Pointer Shape<\/h2>\n
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:<\/p>\n
@available(iOS 13.4, *)\r\nfunc pointerInteraction(_ interaction: UIPointerInteraction, styleFor region:\r\nUIPointerRegion) -> UIPointerStyle? { \r\nlet shape = UIBezierPath() \r\nshape.move(to: CGPoint(x: 10, y: 6)) \r\nshape.addLine(to: CGPoint(x: 10, y: 0)) \r\nshape.addLine(to: CGPoint(x: 6, y: 0)) \r\nshape.addLine(to: CGPoint(x: 6, y: 6)) \r\nshape.addLine(to: CGPoint(x: 0, y: 6)) \r\nshape.addLine(to: CGPoint(x: 0, y: 10)) \r\nshape.addLine(to: CGPoint(x: 6, y: 10)) \r\nshape.addLine(to: CGPoint(x: 6, y: 16)) \r\nshape.addLine(to: CGPoint(x: 10, y: 16)) \r\nshape.addLine(to: CGPoint(x: 10, y: 10)) \r\nshape.addLine(to: CGPoint(x: 16, y: 10)) \r\nshape.addLine(to: CGPoint(x: 16, y: 6)) \r\nshape.addLine(to: CGPoint(x: 10, y: 6)) \r\nshape.close() \r\n  let pointerShape = UIPointerShape.path(shape) \r\n  return UIPointerStyle(shape: pointerShape) \r\n}<\/pre>\n
This code sample gives you a crosshair pointer shape:<\/p>\n
\"\"<\/p>\n
Conclusion<\/h2>\n
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.<\/p>\n
We at ownCloud already implemented\u00a0UIPointerInteraction<\/code>\u00a0in 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!<\/a><\/p>\n
The ownCloud iOS app is open source and the code for\u00a0UIPointerInteraction<\/code>\u00a0implementation can be found in this branch of our repository on GitHub:\u00a0feature\/ipad-pointerinteraction<\/a><\/p>\n
The complete documentation by Apple is available here:\u00a0Apple Developer Documentation > UIKit > Pointer Interactions<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Recently, Apple thoroughly improved mouse and trackpad support for the iPad. ownCloud for iOS is one of the first major Apps to support this feature, and we proudly publish the implementation for others to get up to speed quickly.<\/p>\n","protected":false},"author":7,"featured_media":78665,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"categories":[43],"tags":[],"class_list":["post-2406","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"_links":{"self":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts\/2406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/comments?post=2406"}],"version-history":[{"count":0,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts\/2406\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/media\/78665"}],"wp:attachment":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/media?parent=2406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/categories?post=2406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/tags?post=2406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}