Gestures. Mobile Application Development in ios School of EECS Washington State University Instructor: Larry Holder

Transcription

1 Gestures Mobile Application Development in ios School of EECS Washington State University Instructor: Larry Holder Mobile Application Development in ios 1

2 Outline Gestures Gesture recognizers Gesture states Custom gestures Mobile Application Development in ios 2

3 Add Gesture in Storyboard Step 1: Drag gesture into view Mobile Application Development in ios 3

4 Add Gesture in Storyboard Step 2: for gesture // In ViewController func tapdetected (_ sender: UIGestureRecognizer) { if sender.state ==.ended { let point = sender.location(in: self.view) let x = Int(point.x) let y = Int(point.y) print("tap detected at (\(x),\(y))") Mobile Application Development in ios 4

5 Add Gesture in Storyboard Step 3: Connect gesture to action Mobile Application Development in ios 5

6 Add Gesture Programmatically View controller class conforms to UIGestureRecognizerDelegate Implement method to handle gesture Create gesture recognizer and add to view Mobile Application Development in ios 6

7 Add Gesture Programmatically class ViewController: UIViewController, UIGestureRecognizerDelegate { override func viewdidload() { super.viewdidload() // Do any additional setup after loading the view let twotouchtapgesturerecognizer = UITapGestureRecognizer(target: self, action: #selector(handletwotouchtap)) twotouchtapgesturerecognizer.delegate = self twotouchtapgesturerecognizer.numberoftouchesrequired = 2 func handletwotouchtap (_ sender: UITapGestureRecognizer) { if sender.state ==.ended { let point = sender.location(in: self.view) let x = Int(point.x) let y = Int(point.y) print("two-touch tap detected at (\(x),\(y))") Mobile Application Development in ios 7

8 Other Gestures: Subclasses of UIGestureRecognizer UITapGestureRecognizer (multiple taps/touches) UIPinchGestureRecognizer UIRotationGestureRecognizer UISwipeGestureRecognizer UIPanGestureRecognizer Note: Only one gesture detected per user interaction. UIScreenEdgeGestureRecognizer UILongPressGestureRecognizer class MyGesture: UIGestureRecognizer (custom) Mobile Application Development in ios 8

9 Gesture States UIGestureRecognizerState.possible.began.changed.ended.cancelled.failed.recognized Mobile Application Development in ios 9

10 Gesture States (e.g., Pan) let pangesturerecognizer = UIPanGestureRecognizer(target: self, action: #selector(handlepan)) pangesturerecognizer.delegate = self func handlepan (_ sender: UIPanGestureRecognizer) { let point = sender.location(in: self.view) let x = Int(point.x) let y = Int(point.y) if (sender.state ==.began) { print("pan began at (\(x),\(y))") if (sender.state ==.changed) { print ("pan moved to (\(x),\(y))") if (sender.state ==.ended) { print ("pan ended at (\(x),\(y))") Mobile Application Development in ios 10

11 Custom Gestures Create subclass of UIGestureRecognizer Import UIKit.UIGestureRecognizerSubclass Defines methods and properties to override Override main gesture functions touchesbegan(_ touches: Set<UITouch>, with event: UIEvent) touchesmoved(_ touches: Set<UITouch>, with event: UIEvent) touchesended(_ touches: Set<UITouch>, with event: UIEvent) touchescancelled(_ touches: Set<UITouch>, with event: UIEvent) reset() Mobile Application Development in ios 11

12 Custom Gesture Example: BackSlash Mobile Application Development in ios 12

13 BackSlash Custom Gesture (1) import UIKit import UIKit.UIGestureRecognizerSubclass class BackSlashGesture: UIGestureRecognizer { var initialpoint: CGPoint! var previouspoint: CGPoint! override func touchesbegan(_ touches: Set<UITouch>, with event: UIEvent) { print("backslash: touchesbegan") super.touchesbegan(touches, with: event) let touch = touches.first let point = (touch?.location(in: self.view))! initialpoint = point previouspoint = point Mobile Application Development in ios 13

14 BackSlash Custom Gesture (2) override func touchesmoved(_ touches: Set<UITouch>, with event: UIEvent) { print("backslash: touchesmoved") super.touchesmoved(touches, with: event) let touch = touches.first let point = (touch?.location(in: self.view))! if ((point.x >= previouspoint.x) && (point.y <= previouspoint.y)) { previouspoint = point else { self.state =.failed Mobile Application Development in ios 14

15 BackSlash Custom Gesture (3) override func touchesended(_ touches: Set<UITouch>, with event: UIEvent) { print("backslash: touchesended") super.touchesended(touches, with: event) let touch = touches.first let point = (touch?.location(in: self.view))! if ((self.state ==.possible) && (point!= initialpoint)) { self.state =.recognized else { self.state =.failed Mobile Application Development in ios 15

16 BackSlash Custom Gesture (4) override func touchescancelled(_ touches: Set<UITouch>, with event: UIEvent) { super.touchescancelled(touches, with: event) self.state =.cancelled override func reset() { super.reset() Mobile Application Development in ios 16

17 BackSlash Custom Gesture (5) // In viewdidload... let backslashgesture = BackSlashGesture(target: self, action: #selector(handlebackslash)) backslashgesture.delegate = self self.view.addgesturerecognizer(backslashgesture) // In func handlebackslash(_ sender: BackSlashGesture) { print("backslash detected") // Remember to conform UIGestureRecognizerDelegate Remember to conform ViewController to UIGestureRecognizerDelegate Mobile Application Development in ios 17

18 Resources Human Interface Guidelines: Gestures developer.apple.com/ios/human-interface-guidelines/userinteraction/gestures UIGestureRecognizer API Reference developer.apple.com/documentation/uikit/uigesturerecognizer Implementing a custom gesture recognizer developer.apple.com/documentation/uikit/touches_presses_an d_gestures/implementing_a_custom_gesture_recognizer Mobile Application Development in ios 18