How to properly implement a draggable "drawer" custom UIView - ios

Question

I have a custom UIView at the bottom on my view-controller that acts as a "drawer" control. About 90 pixels of the view is visible. When a user taps the view, it animates upward revealing other options, controls, etc. After another tap, the view animates back down to its original position. Effectively "closing the drawer".
I've also implemented code so that the view tracks with a dragging gesture:
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
if(self.frame.origin.y >= 80) {
UITouch *theTouch = [touches anyObject];
CGPoint location = [theTouch locationInView:self];
CGPoint previousLocation = [theTouch previousLocationInView:self];
CGFloat target = location.y - previousLocation.y;
self.frame = CGRectOffset(self.frame, 0, target);
}
}
All of this is working as expected. However, the view is not responding correctly to a quick "flick" gesture. In the touchesEnded:withEvent: method I'm animating the view from where the user lifted his/her finger to its destination. This works well if the user drags slowly then releases. But if they flick quickly, the view still has to process a 0.5 second duration which isn't smooth to the eye. Here's all of the custom view's code:
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
if(self.frame.origin.y >= 80) {
UITouch *theTouch = [touches anyObject];
CGPoint location = [theTouch locationInView:self];
CGPoint previousLocation = [theTouch previousLocationInView:self];
CGFloat target = location.y - previousLocation.y;
self.frame = CGRectOffset(self.frame, 0, target);
}
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
if(self.frame.origin.y == kDefaultUpY) {
_comingFromUp = YES;
_comingFromDown = NO;
}
else if(self.frame.origin.y == kDefaultDownY) {
_comingFromUp = NO;
_comingFromDown = YES;
}
}
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
//responding to tap
if(self.frame.origin.y == kDefaultUpY) {
[UIView animateWithDuration:0.5f delay:0.0f usingSpringWithDamping:0.75f initialSpringVelocity:1.0f options:UIViewAnimationOptionCurveEaseIn animations:^{
self.frame = CGRectMake(0, kDefaultDownY, self.frame.size.width, self.frame.size.height);
} completion:nil];
return;
}
else if(self.frame.origin.y == kDefaultDownY) {
[UIView animateWithDuration:0.5f delay:0.0f usingSpringWithDamping:0.75f initialSpringVelocity:1.0f options:UIViewAnimationOptionCurveEaseIn animations:^{
self.frame = CGRectMake(0, kDefaultUpY, self.frame.size.width, self.frame.size.height);
} completion:nil];
return;
}
//responding to drag
if(_comingFromDown) {
if(self.frame.origin.y < kDefaultDownY) {
//dragging up -- go up
[UIView animateWithDuration:0.5f delay:0.0f usingSpringWithDamping:0.75f initialSpringVelocity:1.0f options:UIViewAnimationOptionCurveEaseIn animations:^{
self.frame = CGRectMake(0, kDefaultUpY, self.frame.size.width, self.frame.size.height);
} completion:nil];
}
else if(self.frame.origin.y > kDefaultDownY) {
//dragging down -- stay down
[UIView animateWithDuration:0.5f delay:0.0f usingSpringWithDamping:0.75f initialSpringVelocity:1.0f options:UIViewAnimationOptionCurveEaseIn animations:^{
self.frame = CGRectMake(0, kDefaultDownY, self.frame.size.width, self.frame.size.height);
} completion:nil];
}
}
else if(_comingFromUp) {
if(self.frame.origin.y < kDefaultUpY) {
//dragging up -- stay up
[UIView animateWithDuration:0.5f delay:0.0f usingSpringWithDamping:0.75f initialSpringVelocity:1.0f options:UIViewAnimationOptionCurveEaseIn animations:^{
self.frame = CGRectMake(0, kDefaultUpY, self.frame.size.width, self.frame.size.height);
} completion:nil];
}
else if(self.frame.origin.y > kDefaultUpY) {
//dragging down -- go down
[UIView animateWithDuration:0.5f delay:0.0f usingSpringWithDamping:0.75f initialSpringVelocity:1.0f options:UIViewAnimationOptionCurveEaseIn animations:^{
self.frame = CGRectMake(0, kDefaultDownY, self.frame.size.width, self.frame.size.height);
} completion:nil];
}
}
}
How can I properly respond to the gestures associated with a "drawer" view? Is there a standard way of achieving this kind of functionality?

Answer 1

Use gesture recognizers rather than implementing touch handling code yourself. You can attach both a swipe gesture recognizer and a pan gesture recognize, and set up the pan gesture so the swipe has to fail before the pan is triggered. Make the animation for the swipe gesture be faster. Something like 0.1 or 0.2 seconds is probably right for a swipe gesture.
Something to watch out for, though: In iOS 7, a swipe gesture from the bottom of the screen triggers the system settings drawer to come up from the bottom of the screen. Our app Face Dancer has a controls drawer, and we recently discovered that under iOS 7 its hard to slid our controls drawer up without triggering the system settings drawer instead. We have a "thumb" region for dragging, and we are adding a tap gesture that will fully display it/hide it in one step.