Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Custom Gesture Recognizer on iOS

Tachibana Kaoru
April 27, 2020
1.1k

Custom Gesture Recognizer on iOS

Tachibana Kaoru

April 27, 2020
Tweet

Transcript

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

    View full-size slide

  2. About Me
    @TachibanaKaoru
    Freelance iOS Engineer

    View full-size slide

  3. Gesture Recognizer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. ͦ͜Ͱ Custom Gesture Recognizer !

    View full-size slide

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

    View full-size slide

  8. Tracking of UITouch

    View full-size 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 full-size slide

  10. velocity vector with UITouch
    location
    previousLocation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  22. π
    2
    0
    π

    2
    π
    4

    View full-size slide

  23. π
    2
    0
    π

    2

    4

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 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 full-size slide

  28. Handling touch event

    t

    View full-size slide

  29. Handling touch event

    touchesBegan
    t
    touchesMoved touchesEnd

    View full-size slide


  30. touchesBegan
    t
    touchesMoved touchesEnd

    View full-size slide

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

    View full-size slide


  32. P
    F
    P P P P R
    F
    F
    touchesBegan touchesMoved touchesEnd

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  36. P
    F
    P P P P R
    F
    F
    touchesBegan touchesMoved touchesEnd

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  39. P
    F
    P P P
    F
    touchesBegan touchesMoved touchesEnd touchesEnd
    touchesMoved
    touchesMoved
    touchesBegan
    R
    F
    P
    P

    View full-size slide

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

    View full-size slide