Drag the UIView to pieces, then it moves on its own

Question

I have an application with a draggable UIView located at the bottom. The dragged view is not fully shielded, and it has a pull tab that the user can drag up or down. Moving up and down currently works, but I would like to give it the same behavior as the Apple drawer.

For example, if I dragged the view 50% up and pulled my finger off the screen, I would like the draggable view to continue to move up independently. Similarly, if the user only dragged the view, say, 30% up, then the view should return to its default position.

Ideally, although I can do a drag up / down, the movement is not very "organic" ....

I am currently performing a drag and drop up and down through the UIPanGestureRecognizer, just in case, related to the question.

Perhaps this is something like some kind of clever math with a Y-position of a drag-and-drop view, and then the rest of the move with some CAAnimations?

It can be a little hard to imagine, so I added a few screens below.

Default screen with bottom view

The view is dragged through the tab on the right.

Thanks!

Answer 1

When your UIPanGestureRecognizer state becomes UIGestureRecognizerStateEnded , use the message velocityInView: to find the speed of gestures.

If the speed is close to zero, open or close the view depending on the position of the view and the previous state of the view. For example, if the view was closed and it was taken out more than 10%, open it. If it was opened and pulled out more than 10%, close it. Otherwise, return it to the position of preliminary gestures.

If the speed is not close to zero, use the sign of the Y component to determine the new state of the view. If the sign is positive, close the view. If the sign is negative, open the view.

You will need to experiment to determine exactly which “close to zero” definition is best.

In any case, you need to animate the view to its final position after gestures, using a short duration (probably between 0.1 and 0.25 seconds). You can choose the duration based on the speed and distance you want to view. The system notification panel does this. (Try dragging it partially down slowly and quickly. It revives its final position at different speeds depending on how fast you drag it when you release it.)

You need to experiment to find the best animation curve ( UIViewAnimationOptionCurveEaseOut , etc.), and you can use a different curve depending on whether you open or close the view and gesture speed.