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
    }
}

Just add this -> tabbar.tintColor = .orange – Gourav Mandliya Mar 21 '23 at 09:54 — Gourav Mandliya, Mar 21 '23 at 09:54

finebel · Accepted Answer · 2021-09-17T07:05:23.117

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

score 1 · Answer 2 · answered Apr 21 '22 at 21:43

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.

Gourav Mandliya · Answer 3 · 2023-03-21T09:59:29.250

0

This is ios15 bug you will find in Ipad, just set tintColor to fix this issue

 if #available(iOS 15.0, *) {

     tabbar.tintColor = .orange
    
   } else {
    
    tabBar.barTintColor = .orange
    
   }

edited Mar 21 '23 at 09:59

answered Mar 21 '23 at 09:51

Gourav Mandliya

89
1
4

score -1 · Answer 4 · answered Aug 22 '23 at 10:46

       let appearance = self.tabBar.standardAppearance.copy()
        
        appearance.configureWithTransparentBackground()
        appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]

        let normalAttributes: [NSAttributedString.Key: Any]
        = [NSAttributedString.Key.foregroundColor: Constant.AppColor.tabBarItemUnselectedColor]
        appearance.stackedLayoutAppearance.normal.titleTextAttributes = normalAttributes
        appearance.inlineLayoutAppearance.normal.titleTextAttributes = normalAttributes
        appearance.compactInlineLayoutAppearance.normal.titleTextAttributes = normalAttributes

        tabBar.standardAppearance = appearance

Please do not post code-only answers. A good answer explains what was wrong in the question and it explains how the answer solves the issue. — HangarRash, Aug 22 '23 at 17:24

UITabBarAppearance does not work on iOS15 iPad (title color)

4 Answers4

Linked