ios 11 UITabBar UITabBarItem positioning issue

Question

I have built my app using new Xcode 9 beta for ios 11. I have found an issue with UITabBar where items are spread through the UITabBar and title is right aligned to the imag

Answer 1

NOTE: This fix above seems to work quite nicely. Not sure how it will work in the future, but for now it's working quite well.

---

According to this WWDC talk, this is the new behavior for:

• iPhone in landscape
• iPad all the time

And if I'm reading correctly, this behavior cannot be changed:

We've got this brand new appearance for the tab bar, both in landscape and on iPad, where we show the icon and the text side by side. And in particular on iPhones the icon is smaller and the tab bar is smaller to give a bit more room vertically.

Answer 2

Swift 4 version with a subclass that avoids extension/category naming collision:

class TabBar: UITabBar {
  override var traitCollection: UITraitCollection {
    guard UIDevice.current.userInterfaceIdiom == .pad else {
      return super.traitCollection
    }

    return UITraitCollection(horizontalSizeClass: .compact)
  }
}

If you use Interface Builder and storyboards, you can select the tab bar view in your UITabBarController scene and change its class to TabBar in the Identity Inspector:

Answer 3

In Addition to John's answer:

If you have more than 4 Tab Bar Items and don't want the "More" Button you have to take a different Size Class. And if you want the original centred layout of items you have to add another method like so:

#import "PreIOS11TabBarController.h"

@interface PreIOS11TabBarController ()

@end

@implementation PreIOS11TabBarController

// In iOS 11, UITabBarItem's have the title to the right of the icon in horizontally regular environments
// (i.e. the iPad).  In order to keep the title below the icon, it was necessary to subclass UITabBar and override
// traitCollection to make it horizontally compact.

- (UITraitCollection *)traitCollection {
    return [UITraitCollection traitCollectionWithHorizontalSizeClass:UIUserInterfaceSizeClassUnspecified];
}


- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];

    self.tabBar.itemPositioning = UITabBarItemPositioningCentered;
}

@end

Answer 4

Based on John C's answer, here is the Swift 3 version that can be used programmatically without need for Storyboard or subclassing:

extension UITabBar {
    // Workaround for iOS 11's new UITabBar behavior where on iPad, the UITabBar inside
    // the Master view controller shows the UITabBarItem icon next to the text
    override open var traitCollection: UITraitCollection {
        if UIDevice.current.userInterfaceIdiom == .pad {
            return UITraitCollection(horizontalSizeClass: .compact)
        }
        return super.traitCollection
    }
}

Answer 5

To avoid messing up any other traits is it not better to combine with the superclasses:

- (UITraitCollection *)traitCollection
{
  UITraitCollection *curr = [super traitCollection];
  UITraitCollection *compact = [UITraitCollection  traitCollectionWithHorizontalSizeClass:UIUserInterfaceSizeClassCompact];

  return [UITraitCollection traitCollectionWithTraitsFromCollections:@[curr, compact]];
}

Answer 6

@massimobio's answer is good, however it caused the large navigation bar title to disappear for me. Have not investiaged the issue further, but this seems to fix it:

override var traitCollection: UITraitCollection {
        guard UIDevice.current.userInterfaceIdiom == .pad else {
            return super.traitCollection
        }

        return UITraitCollection(traitsFrom: [super.traitCollection, UITraitCollection(horizontalSizeClass: .compact)])
    }