Dynamic gestures with UIKit Dynamics

Learn how to make a UIView movable using UIPanGestureRecognizer and how to add an effect that continues the velocity of the gesture using UIKit dynamics:

Dynamic gestures with UIKit Dynamics

Code examples

To move around a view with a UIPanGestureRecognizer:

class ViewController : UIViewController {

    @IBOutlet weak var tileView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let recognizer = UIPanGestureRecognizer(target: self, action: #selector(pan))
tileView.addGestureRecognizer(recognizer)

    }

    @objc func pan(_ recognizer : UIPanGestureRecognizer) {
    let translation = recognizer.translation(in: tileView)
    tileView.center.x += translation.x
    tileView.center.y += translation.y
    recognizer.setTranslation(.zero, in: tileView)
}

}

Implementing the move behaviour in a separate, dedicated class:

class MoveSupport {

    init(moveableView : UIView) {
        let recognizer = UIPanGestureRecognizer(target: self, action: #selector(pan))
        moveableView.addGestureRecognizer(recognizer)
    }

    @objc func pan(_ recognizer : UIPanGestureRecognizer) {
        let view = recognizer.view!
        let translation = recognizer.translation(in: view)
        view.center.x += translation.x
        view.center.y += translation.y
        recognizer.setTranslation(.zero, in: view)
    }

    }

class ViewController : UIViewController {

    @IBOutlet weak var tileView: UIView!
    var moveSupport: MoveSupport!

    override func viewDidLoad() {
        super.viewDidLoad()

        self.moveSupport = MoveSupport(moveableView: tileView)
    }

}

Adding an effect that continues the velocity of the gesture using UIKit dynamics:

class MoveSupport {

    var animator : UIDynamicAnimator

    init(moveableView : UIView) {
        self.animator = UIDynamicAnimator(referenceView: moveableView.superview!)

        let recognizer = UIPanGestureRecognizer(target: self, action: #selector(pan))
        moveableView.addGestureRecognizer(recognizer)

    }

    @objc func pan(_ recognizer : UIPanGestureRecognizer) {
        let view = recognizer.view!

        switch(recognizer.state) {

        case .began:
            animator.removeAllBehaviors()

        case .changed:
            let translation = recognizer.translation(in: view)
            view.center.x += translation.x
            view.center.y += translation.y
            recognizer.setTranslation(.zero, in: view)

        case .ended:
            let velocity = recognizer.velocity(in: view)

let behavior = UIDynamicItemBehavior(items: [view])
behavior.addLinearVelocity(velocity, for: view)
behavior.resistance = 3.0
animator.addBehavior(behavior)

        default:
            break
        }
    }

}

More information

Btn training bbbdf557d2 Next iOS training: 10. - 14. September 2018, München
Btn download 3c20f11b8e Download the finished example project
Btn read 3c0e607615 Read on: iOS developer blog
Btn subscribe 930758687e Subscribe: Email · Twitter
Btn share 3139847d21 Share: Email · Twitter
Btn support 789320554c Support the iOS developer blog - Become a patron
Btn about 5378472193 About me
Btn email 4d2439fc5b Email to Ralf Ebert «info@ralfebert.de»