iOS 11 iPhone X simulator UITabBar icons and titles being rendered on top covering eachother

iphone uitabbar ios11 xcode9-beta iphone-x
adrian chen picture adrian chen · Sep 14, 2017 · Viewed 32.2k times · Source

Anyone having issue with the iPhone X simulator around the UITabBar component?

Mine seem to be rendering the icons and title on top of each other, I'm not sure if I'm missing anything, I also ran it in the iPhone 8 simulator, and one actual devices where it looks fine just as shown on the story board.

iPhone X:

iPhone X UITabBar bug

iPhone 8

iPhone 8 UITabBar works

Answer

David Hooper picture David Hooper · Sep 27, 2017

I was able to get around the problem by simply calling invalidateIntrinsicContentSize on the UITabBar in viewDidLayoutSubviews.

-(void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    [self.tabBar invalidateIntrinsicContentSize];
}

Note: The bottom of the tab bar will need to be contained to the bottom of the main view, rather than the safe area, and the tab bar should have no height constraint.

Related questions

Changing Tint / Background color of UITabBar

The UINavigationBar and UISearchBar both have a tintColor property that allows you to change the tint color (surprising, I know) of both of those items. I want to do the same thing to the UITabBar in my application, but have …

Read More
How to set the Tab bar item 1 to be selected by default in iphone?

I am new to iPhone development. I am creating a view based application. I have added a tab bar in my view (and not a tab bar controller). By setting the tag vale of the tab bar item to 1, 2, I …

Read More
calculating height of UITabBar

I'm writing an app that uses UITabBar for parts of the navigation. I'm also using UIScrollView for presenting more information than what the screen can typically handle. Because of this, I'm needing to set the scroll view to take into …

Read More