UITabBarItem icon not colored correctly for iOS 13 when a bar tint color is specified in Interface Builder in Xcode 11, beta 2

user_4055958 0
Viewed 12357

I have a problem with the color of my UITabBarItems when I run on iOS 13 simulators, using Xcode 11, beta 2. I have made a sample project from scratch, and everything works correctly when I do not specify a bar tint color. However, when I do specify a custom bar tint color via Interface Builder, I get this:

Both selected an unselected item icons have highlight color

All items icons in the tab bar have the selected color if I set the "Bar Tint" property in Interface Builder to anything but clear. When it is set to clear, the icons are colored properly. The icons are also colored properly if I compile and run in an iOS 12 simulator.

This seems like a bug in Xcode 11, but maybe I'm missing something?

xcode11 uitabbaritem uitabbarcontroller interface-builder ios
7 Answers

There is a new appearance API in iOS 13. To color tabbar item's icon and text correctly using Xcode 11.0 you can use it like this:

    if #available(iOS 13, *) {
        let appearance = UITabBarAppearance()

        appearance.backgroundColor = .white
        appearance.shadowImage = UIImage()
        appearance.shadowColor = .white

        appearance.stackedLayoutAppearance.normal.iconColor = .black
        appearance.stackedLayoutAppearance.normal.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.black]
        appearance.stackedLayoutAppearance.normal.badgeBackgroundColor = .blue

        appearance.stackedLayoutAppearance.selected.iconColor = .red
        appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.red]

        self.tabBar.standardAppearance = appearance

    }
user_27436330

On the surface, this might seem like a bug, however you can mitigate it by defining an .unselectedItemTintColor on your UITabBar instance.

self.tabBar.unselectedItemTintColor = [UIColor lightGrayColor];
user_10910440

Use the attribute field "Image Tint" in IB.

Use the attribute field "Image Tint" in IB

user_82208080

For Objective C you can use in AppDelegate:

[[UITabBar appearance] setTintColor:[UIColor whiteColor]];
[[UITabBar appearance] setUnselectedItemTintColor:[UIColor colorWithRed:255.0f/255.0f green:255.0f/255.0f blue:255.0f/255.0f alpha:0.65f]];
user_31754210 
    if #available(iOS 13.0, *) {
        let appearance = tabBar.standardAppearance
        appearance.stackedLayoutAppearance.normal.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.black]
        appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.blue]
        appearance.stackedLayoutAppearance.normal.iconColor = UIColor.black
        appearance.stackedLayoutAppearance.selected.iconColor = UIColor.blue
        tabBar.standardAppearance = appearance
    } else {
        tabBar.unselectedItemTintColor = UIColor.black
        tabBar.tintColor = UIColor.blue
    }
user_62453190

Thanks for Samuël's answer. Here is the UITabBar setting in my app, it is 2021 already but still rare helpful information in internet about how to set UITabBar for iOS 13 and above.

    if #available(iOS 13, *) {
            let appearance = UITabBarAppearance()
            
//            appearance.backgroundColor = .white
            appearance.shadowImage = UIImage()
            appearance.shadowColor = .white
            
            appearance.stackedLayoutAppearance.normal.iconColor = .gray
            appearance.stackedLayoutAppearance.normal.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.gray]
//            appearance.stackedLayoutAppearance.normal.badgeBackgroundColor = .yellow
            
            appearance.stackedLayoutAppearance.selected.iconColor = .systemPink
            appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.systemPink]
            
            // set padding between tabbar item title and image
            appearance.stackedLayoutAppearance.selected.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 4)
            appearance.stackedLayoutAppearance.normal.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 4)
            
            self.tabBar.standardAppearance = appearance
        } else {
            // set padding between tabbar item title and image
            UITabBarItem.appearance().titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 4)
            UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.gray], for: .normal)
            UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.systemPink], for: .selected)
        }
user_101583980 
self.tabBarController?.tabBar.unselectedItemTintColor = UIColor.lightGray

This works for me in swift 4. Just put this in the override func viewWillDisappear(_ animated: Bool) method and this will update as the view is changing.

So it will look something like this 

override func viewWillDisappear(_ animated: Bool) {
    self.tabBarController?.tabBar.unselectedItemTintColor = UIColor.lightGray
}

Even if this is a bug(I'm not sure) you can use this to change the color of the tab bar item by using any color of you choice

user_101469720
Related