How to make Navigation Bar like Instagram

Question

I need to implement something like this:

tableView must bounce, but not navigation bar.

I tried a bunch of different variants. Something like this:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGRect imageViewFrame = self.imageView.frame;
    CGRect tableViewFrame = self.tableView.frame;
    //ImageView - is top view(instead of NavBar)
    //defaultHeight - is default height of tableView
    imageViewFrame.origin.y = MIN(0, MAX(-scrollView.contentOffset.y, -100));
    tableViewFrame.origin.y = imageViewFrame.origin.y + 100;
    tableViewFrame.size.height = defaultHeight - imageViewFrame.origin.y;

    self.imageView.frame = imageViewFrame;
    self.tableView.frame = tableViewFrame;
}

Get this:

it is not suitable because in Instagram size of tableView doesn't change(just look at scroll indicators, if size of tableView changed, they also changed)

Also I tried add View as subView into tableView, it works, but not exactly what I need is. In Instagram navigation bar outside the tableView, so it is not suitable too.

In the facebook app search bar behaves exactly the same

Can anyone help me?

Thanks!

Answer 1

Have the same approach in the sample code but rather than increasing the tableview's height, you have it preloaded with the additional (not-visible height) and just move it upwards by decreasing the frame's y. The additional height will be off-screen. If the content height is not big enough to go off-screen then you don't need to have the off-screen height.

Add a header with height = 0 at start, and as you scroll down it increases the size, up to 100 (the empty header will be off screen now). That way the content will not get cut off as you scroll.

Answer 2

The instagram "navigation bar" isn't a navigation bar. It's a table section header. You'll notice that when you tap on a photo, the entire navigation bar slides away. That's because it's part of the table view controller and not a "real" navigation bar.

You can achieve this by using a UINavigationController but hiding the navigation bar (setNavigationBarHidden:YES). You just call pushViewController:animated: manually when you want to push.

Interestingly it looks like the other tabs of instagram just use a normal navigation bar and don't do anything fancy. I guess they really wanted those 44 points back on the main feed screen.

Answer 3

If you are targeting iOS 5+ than you can easily customize the navigation bar like this:

1- Add Your TableViewController inside a UINavigationController

2- Customize The Navigation Bar:

Set Background Image For Navigation Bar

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"bar_background"] 
                                   forBarMetrics:UIBarMetricsDefault];

Add Refresh Button on Right Side

UIImage *img = [UIImage imageNamed:@"refresh.png"];
UIButton *rButton = [UIButton buttonWithType:UIButtonTypeCustom];
[rButton setImage:img forState:UIControlStateNormal];
[rButton addTarget:vc action:@selector(didTapRefreshButton:) forControlEvents:UIControlEventTouchUpInside];
rButton.frame = CGRectMake(0.0f, 0.0f, img.size.width, img.size.height);
UIBarButtonItem *rButtonItem = [[UIBarButtonItem alloc] initWithCustomView:rButton];

self.navigationItem.rightBarButtonItem = rButtonItem;
[rButtonItem release];

Hope that Helps!