Unselected UITabBar color?

Viewed 64268

I have an UITabBar with 5 items. I want to change the unselected color of all items. The items aren't declared in the UIViewController classes (i built them and linked the views in the Storyboard).

Is there an code like this : [[UITabBar appearance] set***UN***SelectedImageTintColor:[UIColor whiteColor]]; ?

14 Answers

In iOS 10 and higher, there are 3 possible easy solutions:

A. Instance from code (Swift):

self.tabBar.unselectedItemTintColor = unselectedcolor

B. Instance from IB:

Add a Key Path: unselectedItemTintColor of type: Color

C. Global appearance (Swift):

UITabBar.appearance().unselectedItemTintColor = unselectedcolor

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

Or just without coding. Swift 4, Xcode 10.1.

  1. Add UITabBar on your View Controller using Interface Builder.
  2. Select the added view in the left panel.
  3. Type cmd + alt + 3 or just click Show the Identity Inspector in the right panel.
  4. In section User Defined Runtime Attributes click on plus button to add a new attribute and call it as unselectedItemTintColor (see here).
  5. Without leaving the section from the previous step (see number 4) under Type column choose Color type.
  6. Finally, set the necessary color under Value section.
  7. Compile your project
  8. Over. Congratulations.

enter image description here

Swift 4 version (Without implicitly unwrapping Optionals) :

UIImage+Overlay.swift

import UIKit

extension UIImage {
    func with(color: UIColor) -> UIImage? {
        guard let cgImage = self.cgImage else {
            return self
        }
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        if let context = UIGraphicsGetCurrentContext() {
            context.translateBy(x: 0, y: size.height)
            context.scaleBy(x: 1.0, y: -1.0)
            context.setBlendMode(.normal)
            let imageRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
            context.clip(to: imageRect, mask: cgImage)
            color.setFill()
            context.fill(imageRect)
            if let newImage = UIGraphicsGetImageFromCurrentImageContext() {
                UIGraphicsEndImageContext();
                return newImage
            }
        }
        return nil;
    }
}


CustomTabBarController.swift

class CustomTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        if #available(iOS 10.0, *) {
            self.tabBar.unselectedItemTintColor = UIColor.init(white: 1, alpha: 0.5)
        } else {
            // Fallback on earlier versions
            if let items = self.tabBar.items {
                let unselectedColor = UIColor.init(white: 1, alpha: 0.5)
                let selectedColor = UIColor.white
                // Unselected state colors
                for item in items {
                    if let selectedImage = item.selectedImage?.with(color: unselectedColor)?.withRenderingMode(.alwaysOriginal) {
                        item.image = selectedImage
                    }
                }
                UITabBarItem.appearance().setTitleTextAttributes([NSAttributedStringKey.foregroundColor : unselectedColor], for: .normal)

                // Selected state colors
                tabBar.tintColor = selectedColor
                UITabBarItem.appearance().setTitleTextAttributes([NSAttributedStringKey.foregroundColor : selectedColor], for: .selected)
            }
        }

        UITabBarItem.appearance().setTitleTextAttributes([NSAttributedStringKey.font: UIFont(name: "overpass-light", size: 12)!, NSAttributedStringKey.foregroundColor: UIColor.white], for: UIControlState.normal)
    }
}

Unselected Color of Tabbar using swift

  1. Get Reference of your TabBarViewController
  2. Use the following code.

       [You tabbar controller name]?.tabBar.unselectedItemTintColor = [color name here]
    

Hope it will help.

Related