iOS: Gesture recogniser for smooth scrolling and flicking a View

Question

I am building an iPad app where I needed to allow resizing views functionality using divider view provided between two views. The divider view is just a 20px height view between two half screen content views - please refer attached images.

When user scrolls this divider view up or down, both content views changes their sizes appropriately. I have extended UIView and implemented this using touchMoved delegate as code given below in touchesMoved delegate. It works fine. The only thing is missing with TouchMoved is you can't flick divider view to top or bottom directly. You have to drag all the way to top or bottom!

To support flicking the view I have tried UIPanGestureRecognizer but I don't see smooth dragging with it. Setting split-position of parent resizes both content views as shown in the code. When I handle split position change in UIGestureRecognizerStateChanged state, just touching divider view flick it to top or bottom. Handling split position change in UIGestureRecognizerStateEnded does the same but I don't see content view resizing with dividerview scrolling!

Could someone please tell me how could I achieve both smooth scrolling of divider view with resizing content views (like touchMoved) and flicking the view? Any alternative approach would also be fine. Thanks.

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    if (touch) {
        CGPoint lastPt = [touch previousLocationInView:self];
        CGPoint pt = [touch locationInView:self];
        float offset = pt.y - lastPt.y;
        self.parentViewController.splitPosition = self.parentViewController.splitPosition + offset;
    }
}

- (void)handlePan:(UIPanGestureRecognizer*)recognizer {

    CGPoint translation = [recognizer translationInView:recognizer.view];
    CGPoint velocity = [recognizer velocityInView:recognizer.view];

    if (recognizer.state == UIGestureRecognizerStateBegan) {
    } else if (recognizer.state == UIGestureRecognizerStateChanged) {
       // If I change split position here, I don't see smooth scrolling dividerview...it directly jumps to the top or bottom!
       self.parentViewController.splitPosition = self.parentViewController.splitPosition + translation.y;
    } else if (recognizer.state == UIGestureRecognizerStateEnded) {
      // If I change split position here, the same thing happens at end and I don't see my divider view moving with my scrolling and resizing my views.
        self.parentViewController.splitPosition = self.parentViewController.splitPosition + translation.y;
    }
}

Initial screen

Increased top view size by scrolling divider view towards bottom.

Top view is totally hidden here but I have to scroll divider view all the way to top. I want to flick the divider view so that it directly goes from any position to top

Answer 1

If I understand you correctly, you have two separate problems here.

1st: The 'unsmooth' dragging when using the GestureRecognizer. The problem in your code is, that you add the translation every time the GR calls it's handle method. Since the translation is measured continuously, you're adding a higher value every time it's called (i.e. the first call adds 10 to the split position, the 2nd 20, the 3rd 30 and so on).

To solve this you should set the translation to zero after you've updated the split position:

- (void)handlePan:(UIPanGestureRecognizer*)recognizer {

    CGPoint translation = [recognizer translationInView:recognizer.view];

    if (recognizer.state == UIGestureRecognizerStateChanged) {
       self.parentViewController.splitPosition = self.parentViewController.splitPosition + translation.y;
    } 
    [recognizer setTranslation:CGPointZero inView:recognizer.view];
}

2nd: To allow the user to flick the split position to the top or bottom, you could check the velocity in UIGestureRecognizerStateEnded, and if it exeeds some value instantly set the splitposition to top or bottom.

But it might be more convenient to use a UISwipeGestureRecognizer.

- (void)handleSwipe:(UISwipeGestureRecognizer *)gr
{
    if (gr.direction == UISwipeGestureRecognizerDirectionUp){
        [self.parentViewController moveSplitViewToTop];
    }
    else if (gr.direction == UISwipeGestureRecognizerDirectionDown){
        [self.parentViewController moveSplitViewToBottom];
    }
}

In this case it might be necessary (not sure, maybe it's not) to require the SwipeGR to fail before the PanGR triggers by setting:

[panGestureRecognizer requireGestureRecognizerToFail:swipeGestureRecognizer];

Hope that helped.

Edit: Regarding your comment, I assume by frequency you mean velocity. If you only use the PanGR you could modify the code above to sth. like this:

- (void)handlePan:(UIPanGestureRecognizer*)recognizer {

    CGPoint translation = [recognizer translationInView:recognizer.view];
    CGPoint velocity = [recognizer velocityInView:recognizer.view];

    if (recognizer.state == UIGestureRecognizerStateChanged) {
       self.parentViewController.splitPosition = self.parentViewController.splitPosition + translation.y;
    } 
    else if (recognizer.state == UIGestureRecognizerStateEnded){
        if (velocity.y > someValue){
            [self.parentViewController moveSplitViewToBottom];
        }
        else if (velocity.y < someValue){
            [self.parentViewController moveSplitViewToTop];
        }
    }
    [recognizer setTranslation:CGPointZero inView:recognizer.view];
}

I'm not sure if the velocity is signed, if not you've got to check for the translation again in the if-block.