Custom Gesture Recognizer on iOS

61a68b2172503ecdf7a7f7757df56071?s=47 Tachibana Kaoru
April 27, 2020
500

Custom Gesture Recognizer on iOS

61a68b2172503ecdf7a7f7757df56071?s=128

Tachibana Kaoru

April 27, 2020
Tweet

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