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

Question

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

Answer 1

For me the solution was to select the Tab Bar in the view hierarchy, then go to: Editor -> Resolve Auto Layout Issues, and under "Selected Views" (not "All views in view") choose "Add missing constraints".

Answer 2

I think this is a bug UIKit from iPhoneX. because it works:

if (@available(iOS 11.0, *)) {
    if ([UIApplication sharedApplication].keyWindow.safeAreaInsets.top > 0.0) {
       self.tabBarBottomLayoutConstraint.constant = 1.0;
    }
} 

Answer 3

Aha! It's actually magic!

I finally figured this out after hours of cursing Apple.

UIKit actually does handle this for you, and it appears that the shifted tab bar items are due to incorrect setup (and probably an actual UIKit bug). There is no need for subclassing or a background view.

UITabBar will "just work" if it is constrained to the superview's bottom, NOT to the bottom safe area.

It even works in Interface builder.

Correct Setup

1. In interface builder, viewing as iPhone X, drag a UITabBar out to where it snaps to the bottom safe area inset. When you drop it, it should look correct (fill the space all the way to the bottom edge).
2. You can then do an "Add Missing Constraints" and IB will add the correct constraints and your tab bar will magically work on all iPhones! (Note that the bottom constraint looks like it has a constant value equal to the height of the iPhone X unsafe area, but the constant is actually 0)

---

Sometimes it still doesn't work

What's really dumb is that you can actaully see the bug in IB as well, even if you add the exact constraints that IB adds in the steps above!

1. Drag out a UITabBar and don't snap it to the bottom safe area inset
2. Add leading, trailing and bottom constraints all to superview (not safe area) Weirdly, this will fix itself if you do a "Reverse First And Second Item" in the constraint inspector for the bottom constraint. ¯_(ツ)_/¯

Answer 4

My case was that I had set a custom UITabBar height in my UITabBarController, like this:

  override func viewWillLayoutSubviews() {            
        var tabFrame = tabBar.frame
        tabFrame.size.height = 60
        tabFrame.origin.y = self.view.frame.size.height - 60
        tabBar.frame = tabFrame
    }

Removing this code was the solution for the TabBar to display correctly on iPhone X.

Answer 5

For me, remove [self.tabBar setBackgroundImage:] work, maybe it's UIKit bug

Answer 6

Solved for me by calling [tabController.view setNeedsLayout]; after dismissing the modal in completion block.

[vc dismissViewControllerAnimated:YES completion:^(){ 
     UITabBarController* tabController = [UIApplication sharedApplication].delegate.window.rootViewController;
     [tabController.view setNeedsLayout];
}];