Set image view underneath the navigation bar

Question

In my UIViewController I have UIImageView that takes up the full size of the controller (screen) and serves as a background. On top of UIImageView I have a UITableView with a clear background. I set the navigation bar to translucent like this:

self.navigationController.navigationBar.translucent = YES;

UIImageView is underneath the navigation bar as I want it to be. Unfortunately the same happens to UITableView. I want to put UITableView at the bottom of navigation bar, leaving UIImageView underneath. If I set:

[self setEdgesForExtendedLayout:UIRectEdgeBottom]

then UITableView is at the bottom of the navigation bar, but the same happens also to UIImageView. What would be the easiest solution to leave UIImageView underneath the navigation bar and push down the UITableView at the bottom of the navigation bar?

Answer 1

By default in iOS 7 the content extends to the top and bottom of the screen, underneath any navigation bars, tool bars, or tab bars. If you were to set the frame of the table view to be start after the navigation bar, the content of the table view would not scroll beneath the navigation bar providing the nice blur effect.

What you'll probably want to do instead, is keep the y origin of your table view at 0, underneath the navigation bar, and set the content inset so the content starts after the navigation bar.

This is pretty simple. If you're using auto layout the top layout guide of the view controller will recognise the height of the status bar and navigation bar so you don't need to calculate this yourself. The bottom of the navigation bar should end at 66.

//Using Auto Layout
CGFloat navigationBarHeight = self.topLayoutGuide.length;

//Not using Auto Layout
UINavigationBar *nav = self.navigationController.navigationBar;
CGFloat navigationBarHeight = nav.frame.origin.y + nav.frame.size.height;

myTableView.contentInset = UIEdgeInsetsMake(navigationBarHeight, 0, 0, 0)

And of course if you actually do want the frame to start after the navigation bar the height above stays the same, you just need to manually set the frame of the table view.

CGRect tableViewFrame = self.view.bounds;
tableViewFrame.origin = CGPointMake(tableViewFrame.origin.x, navigationBarHeight);
tableViewFrame.size = CGSizeMake(tableViewFrame.size.width, tableViewFrame.size.height - navigationBarHeight*2);
myTableView.frame = tableViewFrame;

EDIT: Ah, almost forgot. You'll also want to change the scrollIndicatorInsets to match the contentInset, so your scroll bars don't move offscreen.

myTableView.scrollIndicatorInsets = myTableView.contentInset;