iOS 7 TableView in a ViewController and NavigationBar blurred effect

Question

I started building a TableView in my app by using a TableViewController in a storyboard. When you do this, you have a very cool effect when you scroll down your list : the cells moving behind the nav bar get blurred.

Some time later, I had to move from this TableViewController to a ViewController with a TableView inside (I had to add other views at the bottom of the table).

In order to avoid having the first cells hidden by the navigation bar (being over it), I added constraints to the Top and Bottom Layout Guides, and to the left and right edges of the view.

This works fine, but I lost the cool blurred scrolling effect : the cells seem to be disappearing before going behind the navigation bar.

I've seen workarounds with people not using constraints and putting magic numbers in interface builder. I cannot do this, first because I dislike it, and second because I have to be iOS 6 compatible.

What did I miss to be able to benefit again from the blurred navigation bar effect ?

Answer 1

You have to manually adjust the contentInset of the table view and make sure the table view frame origin is 0, 0. In this way the table view will be below the navigation bar, but there will be some margin between the content and the scroll view edges (the content gets shifted down).

I advise you to use the topLayoutGuide property of the view controller to set the right contentInsets, instead of hard coding 64 (status bar + navigation bar). There's also bottomLayoutGuide, which you should use in case of UITapBars.

Here is some sample code (viewDidLoad should be fine):

// Set edge insets
CGFloat topLayoutGuide = self.topLayoutGuide.length;
tableView.contentInset = UIEdgeInsetsMake(topLayoutGuide, 0, 0, 0);

By the way, this properties of UIViewController might help you (you should not need to change their default values, but I don't know what your view hierarchy is):

• automaticallyAdjustsScrollViewInsets
• edgesForExtendedLayout
• extendedLayoutIncludesOpaqueBars