Custom Gesture Recognizer on iOS

Transcript

1. Custom Gesture Recognizer @TachibanaKaoru 2020/4/27 potatotips #69

2. About Me @TachibanaKaoru Freelance iOS Engineer

3. Gesture Recognizer

4. Default Gesture Recognizers UITapGestureRecognizer UISwipeGestureRecognizer UIRotationGestureRecognizer ....

5. Limitation of Default Gesture δΣενϟʔ͕ೝࣝ͞Ε͍ͯΔ్தͰͳʹ͔ॲཧΛ͍ͨ͠ɻ ಠࣗͷετϩʔΫͰೖྗ͍ͨ͠ɻ

6. ͦ͜Ͱ Custom Gesture Recognizer !

7. GestureRecognizerͷ͘͠Έ શମͷྲྀΕ view ͷλονΠϕϯτͷ଎౓΍ํ޲Λղੳ͢Δɻ ҙਤͨ͠଎౓ɾํ޲ͳΒδΣενϟʔೝࣝΛଓ͚ɺͦ͏Ͱͳ͚Ε͹ऴ ྃ͢Δɻ δΣενϟʔ͕ೝࣝͰ͖ͨΒ delegate ʹ recognizedΠϕϯτΛૹ৴͢

   Δɻ

8. Tracking of UITouch

9. UITouch open class UITouch : NSObject { open var timestamp:

   TimeInterval { get } open var tapCount: Int { get } open var type: UITouch.TouchType { get } open func location(in view: UIView?) -> CGPoint open func previousLocation(in view: UIView?) -> CGPoint }

10. velocity vector with UITouch location previousLocation

11. velocity vector with UITouch location previousLocation (x1 , y1 )

12. velocity vector with UITouch location previousLocation (x1 , y1 )

    (x2 , y2 )

13. velocity vector with UITouch location previousLocation (x1 , y1 )

    (x2 , y2 ) ( x2 − x1 t2 − t1 , y2 − y1 t2 − t1 ) 2఺ؒͷ଎౓ϕΫτϧ

14. velocity vector with UITouch location previousLocation (x1 , y1 )

    (x2 , y2 ) ( x2 − x1 t2 − t1 , y2 − y1 t2 − t1 ) 2఺ؒͷ଎౓ϕΫτϧ (x2 − x1 , y2 − y1 ) 2఺ؒͷ୯Ґ࣌ؒ͋ͨΓͷ଎౓ϕΫτϧ

15. struct Velocity { var vx: CGFloat var vy: CGFloat }

    extension UITouch{ func velocity(in view: UIView?) -> Velocity{ let location = location(in: view) let previousLocation = previousLocation(in: view) let distanceX = location.x - previousLocation.x let distanceY = location.y - previousLocation.y let velocity = Velocity(vx: distanceX, vy: distanceY) return velocity }

16. gradient of UITouch location previousLocation (x1 , y1 ) (x2

    , y2 ) θ

17. gradient of UITouch location previousLocation (x1 , y1 ) (x2

    , y2 ) θ vx vy

18. gradient of UITouch location previousLocation (x1 , y1 ) (x2

    , y2 ) θ vx vy tan θ = vy vx

19. gradient of UITouch location previousLocation (x1 , y1 ) (x2

    , y2 ) θ vx vy tan θ = vy vx θ = tan−1 vy vx

20. struct Velocity { var vx: CGFloat var vy: CGFloat var

    gradient: CGFloat{ // ࣮ࡍʹ͸ɺvyɺvx͕0ͷ࣌ͷॲཧ͓Αͼɺgradient஋͕ 0-2πʹͳΔΑ͏ͳ // ਖ਼نԽΛߦ͍·͢ var calcGradient = atan(vy / vx) return calcGradient }

21. Radian ހ౓๏ 360° = 2 π radian

22. π 2 0 π 3π 2

23. π 2 0 π 3π 2 π 4

24. π 2 0 π 3π 2 3π 4

25. Tracking of UITouch ͜ΕͰɺUITouch͔Βɺ଎౓ϕΫτϧͱ܏͖ (gradient) ͕Θ͔ΔΑ͏ʹͳ Γ·ͨ͠ɻ

26. How to handle gesture state Custom Gesture RecognizerͰ͸ɺԼهͷ2छྨͷঢ়ଶΛ؅ཧ͠·͢ɻ δΣενϟʔͷશମঢ়ଶ (UIGestureRecognizer.State)

    ܧଓ or ࣦഊ or ੒ޭ ετϩʔΫͷ൑அ શମͷͲͷ෦෼Λೝࣝதͳͷ͔

27. UIGestureRecognizer.State open class UIGestureRecognizer : NSObject { // the current

    state of the gesture recognizer open var state: UIGestureRecognizer.State { get } }

28. class MyGestureRecognizer: UIGestureRecognizer{ override func touchesBegan(_ touches: Set<UITouch>, with event:

    UIEvent) { } override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent) { } override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent) { } override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent) { } override func reset() { } }

29. Handling touch event t

30. Handling touch event touchesBegan t touchesMoved touchesEnd

31. touchesBegan t touchesMoved touchesEnd

32. Possible Recognized Failed Possible gestureॲཧܧଓ gestureॲཧऴྃ gestureॲཧऴྃ

33. P F P P P P R F F touchesBegan

    touchesMoved touchesEnd

34. ετϩʔΫͷ൑அ ετϩʔΫͷ܏͖͔Βɺೝ͍ࣝͨ͠δΣενϟʔͲͷετϩʔΫʹͳͷ ͔Λ൑அ͢Δɻ ෳ਺ͷετϩʔΫ͔Βߏ੒͞ΕΔδΣενϟʔ΋͋Δ

35. ೋͭͷ࿈ଓͨ͠ετϩʔΫ͔Βߏ੒͞ΕΔ৔߹

36. δΣενϟʔ։࢝ ӈԼ΁ͷετϩʔΫ ӈ্΁ͷετϩʔΫ δΣενϟʔ׬ྃ

37. P F P P P P R F F touchesBegan

    touchesMoved touchesEnd

38. ೋͭͷ࿈ଓ͠ͳ͍ετϩʔΫ͔Β ߏ੒͞ΕΔ৔߹

39. ӈԼ΁ͷετϩʔΫ͔Β࢝·Δύλʔϯ ࠨԼ΁ͷετϩʔΫ͔Β࢝·Δύλʔϯ

40. P F P P P F touchesBegan touchesMoved touchesEnd touchesEnd

    touchesMoved touchesMoved touchesBegan R F P P

41. ·ͱΊ Custom Gesture Recognizerͷ࣮૷͸ҙ֎ͱ؆୯Ͱ͢ɻ ͨͩ͠ɺετϩʔΫʹΑͬͯ͸ɺϢʔβʔͷೖྗΛҙਤ௨Γʹ൑அ͢Δ ͷ͕೉͍͠৔߹΋͋ΔͨΊɺঢ়گʹԠͨ͡࠷దԽ͕ඞཁɻ αϯϓϧ͕ͪ͜Βʹ͋ΔͷͰɺΑ͔ͬͨΒݟͯΈ͍ͯͩ͘͞ɻ https://github.com/TachibanaKaoru/CustomGestureRecognizer