iOS 7 TabBar Translucent issue

Question

I have an issue, when I set the translucent box off on a TabBar, there is something blocking some of my view.

It looks like it's a sort of extra tab bar or I don't even know. I'm using storyboard.

Please see the images attached:

With Translucent (OFF - NO):

With Translucent (ON or YES):

Does anybody know why it looks like this?

Thanks

PS: Which tabBar do you guys like? Black or this one:

Answer 1

This happens in iOS7 when you set tabBar.translucent to NO. iOS is trying to be smart and say "hey the tabbar is not translucent so we better push everything up on top of it". Fix it by setting the extendedLayoutIncludesOpaqueBars property of the view controller inside the navigation controller which is inside the tabbar controller to YES.

Example (not actually ran):

UITabBarController *tabBarController = [[UITabBarController alloc] init];
tabBarController.tabBar.barStyle = UIBarStyleBlack;
tabBarController.tabBar.translucent = NO;

UIViewController *viewController = [[UIViewController alloc] init];
viewController.extendedLayoutIncludesOpaqueBars = YES; // <-- This is important!!!!!!

UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController: viewController];

tabBarController.viewControllers = @[navigationController];

Source: https://web.archive.org/web/20160405135605/https://developer.apple.com/library/ios/documentation/userexperience/conceptual/TransitionGuide/AppearanceCustomization.html

And BTW, I like the non-translucent tabbar the best.

Edit

As Andy mentioned below, this flag does not have to be set in code. You can set it in IB if that's what you use.