Search code examples
iosswiftuitabbaritemios15

UITabBarAppearance does not work on iOS15 iPad (title color)


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

enter image description here


Solution

  • 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