Question

I would like to implement a drawer that operates like in iPhone Game Center app. When you pull a UITableView then providing that we have reached the top of the table there is this drawer sliding that shows more content.

I tried a few solutions here, all of them kinda work but I can’t recreate the same functionality as in Game Center example. I tried to embed a UITableView inside a UIScrollView – this scroll view has one view on top that plays the drawer role and a tableView beneath. I setup the UIScrollViewDelegate for both my big scrollView and a tableView and managed to synchronize contentOffsets of both. I have disabled scrollBars for my big scrollView so I can only see scrollBars from my tableView.

Then I tried with setting a tableView as a subview of the whole view and setting another view – a drawer view as a subview of the same view and again played with UIScrollViewDelegate of the tableView to adjust frames of both views.

Both solutions kinda work but it is not what I was looking for. What I consider the biggest flaw of both solutions is that when I pull my tableView to reveal the drawer I can see clearly that I am not interacting with my tableView scrollView because the scrollBars stay on top in the same position during the whole dragging process. When the drawer is fully expanded I can now interact with tableView scrollView (tableView content scrolls and scrollBars are moving)

If you look at attached pictures you can see that in Game Center app scrollBars are moving when the drawer is expanded. It’s like the drawer is a part of the tableView’s scrollView but when fully expanded stops moving and if I keep pulling this tableView I get more space between the tableView and the drawer. If you push the tableView up in order to hide the drawer the scrollBar goes down.

I would like to implement a drawer that operates like in iPhone Game Center app. When you pull a UITableView then providing that we have reached the top of the table there is this drawer sliding that shows more content.

I would like to replicate a viewController like this in Game Center. If anyone knows how to do it than please share the solution.

You can see the screenshots here:

https://i.stack.imgur.com/O44IS.png

https://i.stack.imgur.com/qDf7v.png

Thanks

Adam

Answer 1

I think I found exactly how they did it in Game Center app. My solutions works the same and is very simple to implement.

First I made a UITableViewController subclass added a UIView property called “blueView” and made some adjustments to tableView property:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.blueView = [[UIView alloc] initWithFrame:CGRectMake(0.0, -100.0, 320.0, 100.0)];
    self.blueView.backgroundColor = [UIColor blueColor];

    [self.tableView addSubview:self.blueView];
    [self.tableView setContentInset:UIEdgeInsetsMake(100.0, 0.0, 0.0, 0.0)];
    [self.tableView setScrollIndicatorInsets:UIEdgeInsetsMake(100.0, 0.0, 0.0, 0.0)];

}

Then in - (void)scrollViewDidScroll:(UIScrollView *)scrollView method I am adjusting the view according to scrollView.contentOffset.y so it stays always on top.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{

    if (scrollView.contentOffset.y < -100) {
        self.blueView.frame = CGRectMake(0.0, scrollView.contentOffset.y, 320.0, 100.0);
    } else {
        self.blueView.frame = CGRectMake(0.0, -100.0, 320.0, 100.0);
    }
}

Voila! Maybe that will save somebody’s time.