Custom Gesture Recognizer on iOS

Transcript

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

   View Slide

2. About Me
   @TachibanaKaoru
   Freelance iOS Engineer
   

   View Slide

3. Gesture Recognizer
   

   View Slide

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

   View Slide

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

   View Slide

6. ͦ͜Ͱ Custom Gesture Recognizer !
   

   View Slide

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

   View Slide

8. Tracking of UITouch
   

   View Slide

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
   }
   

   View Slide

10. velocity vector with UITouch
    location
    previousLocation
    

    View Slide

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

    View Slide

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

    View Slide

13. velocity vector with UITouch
    location
    previousLocation
    (x1
    , y1
    )
    (x2
    , y2
    )
    (
    x2
    − x1
    t2
    − t1
    ,
    y2
    − y1
    t2
    − t1
    )
    2఺ؒͷ଎౓ϕΫτϧ
    

    View Slide

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఺ؒͷ୯Ґ࣌ؒ͋ͨΓͷ଎౓ϕΫτϧ
    

    View Slide

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
    }
    

    View Slide

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

    View Slide

17. gradient of UITouch
    location
    previousLocation
    (x1
    , y1
    )
    (x2
    , y2
    )
    θ
    vx
    vy
    

    View Slide

18. gradient of UITouch
    location
    previousLocation
    (x1
    , y1
    )
    (x2
    , y2
    )
    θ
    vx
    vy
    tan θ =
    vy
    vx
    

    View Slide

19. gradient of UITouch
    location
    previousLocation
    (x1
    , y1
    )
    (x2
    , y2
    )
    θ
    vx
    vy
    tan θ =
    vy
    vx
    θ = tan−1
    vy
    vx
    

    View Slide

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
    }
    

    View Slide

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

    View Slide

22. π
    2
    0
    π
    3π
    2
    

    View Slide

23. π
    2
    0
    π
    3π
    2
    π
    4
    

    View Slide

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

    View Slide

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

    View Slide

26. How to handle gesture state
    Custom Gesture RecognizerͰ͸ɺԼهͷ2छྨͷঢ়ଶΛ؅ཧ͠·͢ɻ
    δΣενϟʔͷશମঢ়ଶ (UIGestureRecognizer.State)
    ܧଓ or ࣦഊ or ੒ޭ
    ετϩʔΫͷ൑அ
    શମͷͲͷ෦෼Λೝࣝதͳͷ͔
    

    View Slide

27. UIGestureRecognizer.State
    open class UIGestureRecognizer : NSObject {
    // the current state of the gesture recognizer
    open var state: UIGestureRecognizer.State { get }
    }
    

    View Slide

28. class MyGestureRecognizer: UIGestureRecognizer{
    override func touchesBegan(_ touches: Set, with event: UIEvent) {
    }
    override func touchesMoved(_ touches: Set, with event: UIEvent) {
    }
    override func touchesEnded(_ touches: Set, with event: UIEvent) {
    }
    override func touchesCancelled(_ touches: Set, with event: UIEvent) {
    }
    override func reset() {
    }
    }
    

    View Slide

29. Handling touch event
    
    t
    

    View Slide

30. Handling touch event
    
    touchesBegan
    t
    touchesMoved touchesEnd
    

    View Slide

31. 
    touchesBegan
    t
    touchesMoved touchesEnd
    

    View Slide

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

    View Slide

33. 
    P
    F
    P P P P R
    F
    F
    touchesBegan touchesMoved touchesEnd
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. 
    P
    F
    P P P P R
    F
    F
    touchesBegan touchesMoved touchesEnd
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide