当在 Xcode 11, beta 2 的 Interface Builder 中指定条形着色颜色时，UITabBarItem 图标的颜色对于 iOS 13 不正确

Question

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:

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?

Answer 1

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

    } 

Answer 2

从表面上看，这似乎是一个错误，但是您可以通过在 UITabBar 实例上定义 .unselectedItemTintColor 来缓解它。

self.tabBar.unselectedItemTintColor = [UIColor lightGrayColor];

Answer 3

Use the attribute field "Image Tint" in IB.

Answer 4

Apple's own Podcasts App has the same issue. This is a bug currently.

Answer 5

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

Answer 6

    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
    }

Answer 7

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

Answer 8

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