Swift UIGestureRecogniser follow finger

Question

I'm making an iOS8 app using Swift. I'd like the user to be able to use gestures to reveal certain parts of the interface. So for example, the user slides their finger up and the view they slid their finger up moves out of the way, following their finger to reveal another view underneath.

What I'd like is a gesture to give a result similar to the notification box that you can pull down from the top of the screen. I've been looking at the documentation and I can't seem to find a suitable gesture.

I saw one called UISwipeGestureRecogniser, but the only problem is, it doesn't follow your finger, it simply runs a function when I slide my finger up / down.

Here's the documentation page: https://developer.apple.com/documentation/uikit/uigesturerecognizer

Solution

You're looking for the UIPanGestureRecognizer. You'll find the Apple Documentation here.

Here's a sample handler that will move a view with your finger. In Interface Builder, add a UIPanGestureRecognizer to a view that you want to be able to drag. Set the delegate to your ViewController. Set the action to this action:

Swift 2.X:

@IBAction func handlePan(gestureRecognizer: UIPanGestureRecognizer) {
    if gestureRecognizer.state == .Began || gestureRecognizer.state == .Changed {

        let translation = gestureRecognizer.translationInView(self.view)  
        // note: 'view' is optional and need to be unwrapped
        gestureRecognizer.view!.center = CGPointMake(gestureRecognizer.view!.center.x + translation.x, gestureRecognizer.view!.center.y + translation.y)  
        gestureRecognizer.setTranslation(CGPointMake(0,0), inView: self.view)  
    }  
}  

Swift 3:

@IBAction func handlePan(_ gestureRecognizer: UIPanGestureRecognizer) {
    if gestureRecognizer.state == .began || gestureRecognizer.state == .changed {

        let translation = gestureRecognizer.translation(in: self.view)
        // note: 'view' is optional and need to be unwrapped
        gestureRecognizer.view!.center = CGPoint(x: gestureRecognizer.view!.center.x + translation.x, y: gestureRecognizer.view!.center.y + translation.y)
        gestureRecognizer.setTranslation(CGPoint.zero, in: self.view)
    }
}

Of course, you can add the UIPanGestureRecognizer programmatically:

In viewDidLoad for your ViewController, create the recognizer and add it to the view you want to be able to drag:

    let gestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(handlePan))
    self.someDraggableView.addGestureRecognizer(gestureRecognizer)

Comments

[Happiehappie]

Can you explain gestureRecognizer.setTranslation(CGPointMake(0,0), inView: self.view) ? I understand the line above it but I can't get around with why do we need a CGPointZero for our recognizer's translation

[vacawama]

@Happiehappie, the handlePan handler gets called repeatedly as the user moves their finger. By default the translation tells you how far you have moved since the touch started. Since we are using the gestureRecognizer to drag the view and we have already accounted for the translation, we set it back to zero so that the next time handlePan gets called it will report how far the touch has moved from the previous call to handlePan.

[Fattie]

these days, you would very likely / almost have to use an NSLayoutConstraint and just easily change the value of it to slide the item.

[J. Doe]

@Fattie how? Any example?

[Fattie]

hi @J.Doe - "animating a constraint" is one of the most basic things in iOS programming - you do it all the time. For example, here's my famous! answer explaining how to do that, in relation to the problem of "moving the screen when a keyboard appears": stackoverflow.com/a/41808338/294884

[Fattie]

I urge you to google "animate a constraint Swift" and you will get many many examples ...

[J. Doe]

@Fattie I know how to animate constraints, I am just wondering how you can state that 'these days' we are likely to use NSLayoutConstraint for this particular situation (changing the center based on a UIGesture). I think this answer is much more easier than changing 4 NSLayoutConstraints and I do not think you can just state that these days we are likely/almost have to use NSLayoutConstraints for this particular question without an answer involving doing the same thing by using NSLayoutConstraints.

[Fattie]

In iOS, you just don't get "views sitting around" any more. The view in question, V, which the user wants to move. V itself would be positioned by ........ the autolayout system! So how else could you possibly move it? Further, looking at the question the specific example given: "pull down a notification box". I mean, Apple actually do this in the OS (!!) and they, of course, use the autolayout system, hence animating the constraints. (How else could you do it ?! Write "static" sizes for every single device - or ??)

[Fattie]

Indeed, in iOS it's a fascinating point that the underlying, old-days "position of a UIView" is indeed ...... all-but deprecated. Fascinatingly, Apple could utterly change the way that works ... ie, they could eliminate all of the .center, etc calls, and implement autolayout in some totally different manner, with a whole new set of (hidden) calls ... and everything would still work! The "abstraction" autolayout layer is now just the layer, there's nothing else really.

[vacawama]

As @matt has pointed out, you can have a mix of views on screen with some controller by Auto Layout and others not. You can always programmatically create your movable views the old fashioned way (with a frame) and never give it any constraints. Then, you're free to move it around by its center.