CODEWITHSUNDEEP
iosuitabbarcontrollerinterface-builderuitabbaritemxcode11
Jordan Wood
Jordan Wood

Reputation: 2889

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

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?

Upvotes: 17

Views: 13871

Answers (7)

Zhou Haibo
Zhou Haibo

Reputation: 2068

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

Upvotes: 1

Samuël
Samuël

Reputation: 1191

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

    }

Upvotes: 45

Mohsen Hosseinpour
Mohsen Hosseinpour

Reputation: 534

    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
    }

Upvotes: 1

Ing. Ron
Ing. Ron

Reputation: 2095

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]];

Upvotes: 3

Ivan Belousov
Ivan Belousov

Reputation: 71

Use the attribute field "Image Tint" in IB.

Use the attribute field "Image Tint" in IB

Upvotes: 7

Bhavin p
Bhavin p

Reputation: 102

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

Upvotes: 0

mmackh
mmackh

Reputation: 3630

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];

Upvotes: 20

Related Questions