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.

Answer 2

As mentioned here you have to set barTintColor to something you want to change the color.

These settings automatically apply when you set any style for barStyle or any custom color for barTintColor. If you prefer, you can make the tab bar opaque by setting the translucent property to NO programmatically. In this case, the bar draws an opaque background using black if the tab bar has UIBarStyleBlack style, white if the tab bar has UIBarStyleDefault, or the tab bar’s barTintColor if a custom value is defined.

Something that I used for my project

self.tabBarController.tabBar.barTintColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0];

self.tabBarController.tabBar.translucent = NO;

Answer 3

I have acontroller with TableView and both translucent NavigationBar and translucent TabBar.
In this situation using

viewController.extendedLayoutIncludesOpaqueBars = YES;

causes a problem of both bars overlaping my table view.

It can be managed by setting

viewController.edgesForExtendedLayout = UIRectEdgeBottom;

which results in TableView hiding only behind Tab Bar.

Answer 4

It looks like you've set up the view controller's view so that its bottom is at the same position as the top of the tab bar, when it should be at the bottom of the screen. If you do that, then your content will appear correctly (content visible through the tab bar or not) whether the tab bar is set to translucent or not.

Answer 5

For those who actually want a translucent Tabbar and a table view (or collection view for me) that can be seen behind, here is my solution for ios 7/8:

If you are using constraints, you should add one on the bottom of the table view to the "Bottom Layout Guide" so your tableview stops before the Tabbar. This is an example with Storyboard, but it can be done in code as well.

Then you just need to make sure you can still see the table view behind the Tabbar by settings the "clipsToBounds" property to NO.

self.mytableview.clipsToBounds = NO;

This is my solution, hope it helps.

Answer 6

I don't think the currently accepted answer is correct. You don't need to extend the layout under opaque bars to solve the issue.

There is no code provided in the OP, but it is likely that the bottom of the view containing the items is constrained to the bottom of its superview, which would have taken the items underneath the translucent tab bar. To prevent this, a manual inset could have been set from the bottom. In short, the superview extends underneath the translucent bar and so did its subviews.

As soon as the tab bar was made opaque, the root view (or the superview) only extended until the top of the tab bar.

The 'more' correct fix would be to just remove the manual inset of content, not extending the view under opaque bars.