9.
The Mouse
Written by Andy Pereira
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Just like a keyboard, the mouse is a toolset you may not have encountered if you’ve focused solely on iOS development so far. Catalyst makes working with the mouse easy, since it provides a familiar pattern, and it gives you a great amount of control in the process.
In this chapter, you’ll learn how to implement UIHoverGestureRecognizer and you’ll take a look at the differences between iOS/iPadOS and touch targets in macOS.
Getting started
Open the starter project for this chapter. Build and run for macOS and you’ll see that you’re starting off with a complete UI. Add a few entries and then move your mouse around the app. Not much actually happens, aside from seeing the curor change from an arrow to an iBeam if you hover over the top of the text view.
On macOS, you can give your users more feedback when the cursor moves over items. You’re going to add two gestures to make the app feel more responsive.
The hover gesture recognizer
New to iOS 13 is UIHoverGestureRecognizer, a gesture recognizer that responds to mouse movements within your view. As with other gesture recognizers, it requires a target and action.
addHoverGesture()
private func addHoverGesture() {
let hoverGesture
= UIHoverGestureRecognizer(target: self,
action: #selector(hovering(_:)))
contentView.addGestureRecognizer(hoverGesture)
}
@objc private func hovering(_ recognizer: UIHoverGestureRecognizer) {
// 1
guard !isSelected else { return }
// 2
switch recognizer.state {
// 3
case .began, .changed:
backgroundColor = .systemGray
// 4
case .ended:
backgroundColor = nil
default:
break
}
}
let hoverGesture
= UIHoverGestureRecognizer(target: self,
action: #selector(self.hovering(_:)))
reusableView.addGestureRecognizer(hoverGesture)
@objc private func hovering(_ recognizer: UIHoverGestureRecognizer) {
guard let view = recognizer.view else { return }
switch recognizer.state {
case .began, .changed:
view.backgroundColor = UIColor(named: "PrimaryTint")
view.tintColor = .white
case .ended:
view.backgroundColor = nil
view.tintColor = UIColor(named: "PrimaryTint")
default:
break
}
}
A few notes
Keep in mind that the interface guidelines for iOS state that you should keep touch targets for interactive elements to a minimum of 44pt × 44pt. The cursor gives you a lot more flexibility when your app is running on macOS. If you’re creating macOS-specific UI elements, you can use smaller elements if it makes sense for your app.
Bridging the gap
At the time of this writing, some frameworks or tools that are available in macOS are not available in Mac Catalyst, like NSCursor. If you find yourself needing to utilize some of these components, you can create an AppKit bundle. Creating a bundle and accessing its contents is out of the scope of this book, but here are some pointers:
Key points
- Add hovering to views by adding a hover gesture recognizer to give your user more visual feedback.
- Hover gesture recognizers work similarly to other gesture recognizers.
- You are still somewhat limited on working with the mouse when building an iPad app on the Mac.
- Bundles may provide a solution to missing functionality
Where to go from here?
In this chapter, you learned how easy it is to get started responding to mouse hover events and the differences between iOS touch targets vs. macOS.