Hiding a toolbar element when UITableView scrolls (similar to Facebook's app?)

Question

How I can achieve this effect?

Answer 1

This isn't immediately noticeable from your screenshots, but I believe you want the that header toolbar to slide up as the user scrolls, right? (I'd suggest clarifying on that part)

You can do this a few ways, and in all of them you will have to implement your own scrolling logic, meaning how much the header toolbar slides up depending on where you have scrolled. That said, here's how to do it:

1. If you're using UITableView, I assume you've got your view controller set as its delegate. Since UITableView is a subclass of UIScrollView already, just add the UIScrollViewDelegate to your view controller. That will give us scroll events as they happen. You'll want to do your logic in scrollViewDidScroll:.

2.. If you're simply using UIScrollView, just set your view controller as its delegate, implement UIScrollViewDelegate, and do your logic in scrollViewDidScroll:.

That said, your code might look something like this:

- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
    CGPoint scrollPos = scrollView.contentOffset;

    if(scrollPos.y >= 40 /* or CGRectGetHeight(yourToolbar.frame) */){
        // Fully hide your toolbar
    } else {
        // Slide it up incrementally, etc.
    }
}

Anyway, hope I helped.

Answer 2

If you have properly set the delegate, your table will call scrollViewDidScroll: when scrolled.

So in your controller, you can add something like :

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (scrollView.contentOffset.y >0)    //means that the user began to scroll down the table
    {
        [UIView animateWithDuration:0.4 animations:^{
            //animations you want to perform
        }];
    }
}