Custom Gesture Recognizer on iOS

Transcript

1. 1.

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

2. 2.

   About Me @TachibanaKaoru Freelance iOS Engineer

3. 3.

   Gesture Recognizer

4. 4.

   Default Gesture Recognizers UITapGestureRecognizer UISwipeGestureRecognizer UIRotationGestureRecognizer ....

5. 5.

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

6. 6.

   ͦ͜Ͱ Custom Gesture Recognizer !

7. 7.

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

   Δɻ
8. 8.

   Tracking of UITouch

9. 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. 10.

    velocity vector with UITouch location previousLocation

11. 11.

    velocity vector with UITouch location previousLocation (x1 , y1 )

12. 12.

    velocity vector with UITouch location previousLocation (x1 , y1 )

    (x2 , y2 )
13. 13.

    velocity vector with UITouch location previousLocation (x1 , y1 )

    (x2 , y2 ) ( x2 − x1 t2 − t1 , y2 − y1 t2 − t1 ) 2఺ؒͷ଎౓ϕΫτϧ
14. 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. 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. 16.

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

    , y2 ) θ
17. 17.

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

    , y2 ) θ vx vy
18. 18.

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

    , y2 ) θ vx vy tan θ = vy vx
19. 19.

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

    , y2 ) θ vx vy tan θ = vy vx θ = tan−1 vy vx
20. 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. 21.

    Radian ހ౓๏ 360° = 2 π radian

22. 22.

    π 2 0 π 3π 2

23. 23.

    π 2 0 π 3π 2 π 4

24. 24.

    π 2 0 π 3π 2 3π 4

25. 25.

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

26. 26.

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

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

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

    state of the gesture recognizer open var state: UIGestureRecognizer.State { get } }
28. 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. 29.

    Handling touch event t

30. 30.

    Handling touch event touchesBegan t touchesMoved touchesEnd

31. 31.

    touchesBegan t touchesMoved touchesEnd

32. 32.

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

33. 33.

    P F P P P P R F F touchesBegan

    touchesMoved touchesEnd
34. 34.

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

35. 35.

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

36. 36.

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

37. 37.

    P F P P P P R F F touchesBegan

    touchesMoved touchesEnd
38. 38.

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

39. 39.

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

40. 40.

    P F P P P F touchesBegan touchesMoved touchesEnd touchesEnd

    touchesMoved touchesMoved touchesBegan R F P P
41. 41.

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