UITabBarAppearance does not work on iOS15 iPad (title color)

Question

I created a simple demo and only created a UITabBarController's subclass and set in storyboard.

I want to set the TabBarButtonItem's title to an orange color when selected and black color when normal. The following code works fine on any iOS version on iPhone, but on iOS 15's iPad (both device and simulator) the selected color changes to blue and wired normal state color.

Is this an Apple bug or have I missed something?(I'm using Xcode13)

class CustomViewController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let tabBarAppearnace = UITabBarAppearance()
        let tabFont =  UIFont.boldSystemFont(ofSize: 18)
        
        let selectedAttributes: [NSAttributedString.Key: Any]
        = [NSAttributedString.Key.font: tabFont, NSAttributedString.Key.foregroundColor: UIColor.orange]
        let normalAttributes: [NSAttributedString.Key: Any]
        = [NSAttributedString.Key.font: tabFont, NSAttributedString.Key.foregroundColor: UIColor.black]
        
        tabBarAppearnace.stackedLayoutAppearance.normal.titleTextAttributes = normalAttributes
        tabBarAppearnace.stackedLayoutAppearance.selected.titleTextAttributes = selectedAttributes
        
        tabBar.standardAppearance = tabBarAppearnace
    }
}

Answer 1

For iPadOS you have to use the inlineLayoutAppearance attribute, because on iPad the items in the TabBar are displayed inline by default (title and icon are displayed next to each other).
But in fact you should also configure compactInlineLayoutAppearance because otherwise your custom styling won't apply if you are using landscape mode on an iPhone for example.

class CustomViewController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let tabBarAppearnace = UITabBarAppearance()
        let tabFont =  UIFont.boldSystemFont(ofSize: 18)
        
        let selectedAttributes: [NSAttributedString.Key: Any]
        = [NSAttributedString.Key.font: tabFont, NSAttributedString.Key.foregroundColor: UIColor.orange]
        let normalAttributes: [NSAttributedString.Key: Any]
        = [NSAttributedString.Key.font: tabFont, NSAttributedString.Key.foregroundColor: UIColor.black]
        
        tabBarAppearnace.stackedLayoutAppearance.normal.titleTextAttributes = normalAttributes
        tabBarAppearnace.stackedLayoutAppearance.selected.titleTextAttributes = selectedAttributes
        
        //New        
        tabBarAppearnace.inlineLayoutAppearance.normal.titleTextAttributes = normalAttributes
        tabBarAppearnace.inlineLayoutAppearance.selected.titleTextAttributes = selectedAttributes

        tabBarAppearnace.compactInlineLayoutAppearance.normal.titleTextAttributes = normalAttributes
        tabBarAppearnace.compactInlineLayoutAppearance.selected.titleTextAttributes = selectedAttributes


        tabBar.standardAppearance = tabBarAppearnace
    }
}

For more info: https://developer.apple.com/documentation/uikit/uitabbarappearance

Answer 2

If anyone is interested, you can also achieve this in storyboard for iOS 15, Xcode 13:

• In storyboard, highlight the Tab Bar
• Open Inspector (top right button on the Xcode window)
• Open the Attribute Inspector (three slidy bars)
• Under Tab Bar, check the Appearance box: Standard and/or Scroll Edge

• Then scroll down and find the Standard Layout Appearance
• Set the stacked option to Custom
• Now you should see the Standard Stacked Layout Appearance properties
• For State Config set to Normal, make sure to set the Title and Icon Colors.
• Then also change the State to Selected and set the Title and Icon colors.

Now we need to configure the Inline Layout for iPad

So now we need to do the same thing for the Inline Layout, in the same section in the Attribute Inspector, you will the Inline property, change that option to Custom. and set the just like the steps above.

I would recommend you also do the same for the Compact Inline Layout.

If you are using storyboard instead of coding this, then you may want to consider configuring the Scroll Edge appearance as well, you would have to repeat duplicate everything we just did for Standard Appearance for the Scroll Edge appearance.