Dragging UITableView

Question

I'm working on an iPhone application where I want to drag the table view (not the cells) upto a certain point in the screen. I have the tableview sitting in the bottom half of the screen and I have an image in the top-half.

When I scroll the table to see the rows below, the table should actually move up going above the image (y pos decreases and the height will increase). Table will go up until it fills the entire screen leaving a few pixels for the image and it docks there and from that point onwards, the table should scroll. Same behavior is expected for scrolling down as well.

This might sound a little weird but this is a new iOS pattern that's emerging.

I managed to do the first part using the code snippet below.

UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePanForScrollView:)];
panGestureRecognizer.maximumNumberOfTouches = 1;
panGestureRecognizer.delegate = self;
panGestureRecognizer.minimumNumberOfTouches = 1;
[self.tableView addGestureRecognizer:panGestureRecognizer];

- (void)handlePanForScrollView:(UIPanGestureRecognizer *)gesture {
    switch (gesture.state) {
        case UIGestureRecognizerStateBegan:
            break;
        case UIGestureRecognizerStateChanged: {

            CGPoint movement = [gesture translationInView:self.view];
            CGRect frame = self.tableView.frame;
            frame.origin.y += movement.y;
            if(frame.origin.y >= Y_OFFSET && frame.origin.y < self.original_frame.origin.y){
                frame.size.height -= movement.y;
                self.tableView.frame = frame;
                [gesture setTranslation:CGPointZero inView:self.view];
            }
            break;
        }
        case UIGestureRecognizerStateEnded:
        case UIGestureRecognizerStateCancelled:{
            //NSLog(@"End");
            break;
        }
        default:
            ;
            break;
    }
}

This is working fine and the table moves up and docks below the Y_OFFSET. But as you would have imagined, the table doesn't scroll any more.

So I tried this

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    if(self.tableView.frame.origin.y <= Y_OFFSET ||  self.tableView.frame.origin.y >= self.original_frame.origin.y){
        NSLog(@"Here");
        return YES;
    }   
    return NO;
}

"Here" message is getting printed on the console but the table doesn't scroll.

I even tried using the panGestureRecognizer for the UITableView instead of my UIPanGestureRecognizer.

self.tableView.panGestureRecognizer addTarget:self action:@selector(handlePanForScrollView:)

But now the table scrolls and moves up.

"I want the table not to scroll but to move until a certain point on the screen and then stop moving and start scrolling."

What's the best way to deal with this ?

Cheers

Answer 1

I think the way you're doing it is fine. You just need to stop the UIGestureRecognizer from handling any more touches after a certain point. So what I would do (with the least amount of change to your existing code) is just override the delegate function:

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch

In that function, analyze the position of the table view and if the table view has reached a certain height already, return NO. This will stop the UIPanGestureRecognizer from accepting the touch event and pass it up the chain, which should go straight to the UIScrollView of the table view.

Alternative, if I had the time to figure this out, I would try to accomplish this with the image as the table's header (self.tableView.tableHeaderView). This way all of the scrolling is done within the the scrollview of the table and the table's frame doesn't have to move. If you wanted to add some cool effects to the tableHeaderView, you could always override the UIScrollViewDelegate function - (void)scrollViewDidScroll:(UIScrollView *)scrollView and slightly shift the image in the header as the table scrolls up the initial half screen (this is the same effect that Path does). However, this wouldn't allow you to peg the image at the very top of the table view... the entire image would scroll away. Just my 2 cents. :)

Answer 2

If I rightly understand the question, the simplest solution is to programmatically set the tableView header to the desired image. (I think this is like what Path does for setting a location, with the exception that they are using a map not an image.)

UIImage *image = [UIImage imageNamed:@"image_name"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[self.tableView setTableHeaderView:imageView];

This is equivalent to dragging a UIImageView, with the appropriate image, onto the tableView header in a storyboard.

Please note: The table header view is different from a section header. See Documentation for more info.

Answer 3

Can you try this code for moving tableview

   [UIView animateWithDuration:1.5 animations:^
     {
         //ADD CODES HERE FOR STARTING STATE (FRAME FOR UITABLEVIEW )
        // eg: table.frame=CGRectMake(0,320,320,200);   tableview lying on bottom of viewcontroller with 200px height 


     } completion:^(BOOL finished)
     {


        // ADD CODES HERE  TO MAKE YOUR FINAL FRAME OF UITABLEVIEW
         // eg: table.frame=CGRectMake(0,0,320,200);   tableview moving to top of viewcontroller with 200px height



     }];

try this let me know the results

PLEASE BEFORE MARKING DOWN VOTE LET ME KNOW THE REASON ,BECAUSE THIS CODES IS WORKING FOR ME