How to change inactive icon/text color on tab bar?
How can I change inactive icon/text color on iOS 7 tab bar? The one in gray color.
Solution 1:
You can also set the property Render As
of your tab bar images within your asset catalog directly. There you have the option to set the property to Default
, Original Image
and Template Image
.
Solution 2:
In every first ViewController for each TabBar:
- (void)viewDidLoad
{
[super viewDidLoad];
// changing the unselected image color, you should change the selected image
// color if you want them to be different
self.tabBarItem.selectedImage = [[UIImage imageNamed:@"yourImage_selectedImage"]
imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
self.tabBarItem.image = [[UIImage imageNamed:@"yourImage_image"]
imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
The clue of this code is 'UIImageRenderingModeAlwaysOriginal':
Rendering Modes by Apple Documentation:
UIImageRenderingModeAutomatic, // Use the default rendering mode for the context where the image is used
UIImageRenderingModeAlwaysOriginal, // Always draw the original image, without treating it as a template
UIImageRenderingModeAlwaysTemplate, // Always draw the image as a template image, ignoring its color information
To change text color:
In AppDelegate:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// Add this if you only want to change Selected Image color
// and/or selected image text
[[UITabBar appearance] setTintColor:[UIColor redColor]];
// Add this code to change StateNormal text Color,
[UITabBarItem.appearance setTitleTextAttributes:
@{NSForegroundColorAttributeName : [UIColor greenColor]}
forState:UIControlStateNormal];
// then if StateSelected should be different, you should add this code
[UITabBarItem.appearance setTitleTextAttributes:
@{NSForegroundColorAttributeName : [UIColor purpleColor]}
forState:UIControlStateSelected];
return YES;
}
Solution 3:
for changing color of unselect icons of tabbar
For below iOS 10:
// this code need to be placed on home page of tabbar
for(UITabBarItem *item in self.tabBarController.tabBar.items) {
item.image = [item.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
Above iOS 10:
// this need to be in appdelegate didFinishLaunchingWithOptions
[[UITabBar appearance] setUnselectedItemTintColor:[UIColor blackColor]];
Solution 4:
Instead adding it to every UIViewController, you can create an extension and alter the appearance of an UITabBarController
Change unselected icon color
extension UITabBarController {
override public func viewDidLoad() {
super.viewDidLoad()
tabBar.items?.forEach({ (item) -> () in
item.image = item.selectedImage?.imageWithColor(UIColor.redColor()).imageWithRenderingMode(.AlwaysOriginal)
})
}
}
Change selected icon color
let tabBarAppearance = UITabBar.appearance()
tabBarAppearance.tintColor = UIColor.blackColor()
Change (un)selected title color
let tabBarItemApperance = UITabBarItem.appearance()
tabBarItemApperance.setTitleTextAttributes([NSFontAttributeName: UIFont(name: "Edmondsans-Bold", size: 10)!, NSForegroundColorAttributeName:UIColor.redColor()], forState: UIControlState.Normal)
tabBarItemApperance.setTitleTextAttributes([NSFontAttributeName: UIFont(name: "Edmondsans-Bold", size: 10)!, NSForegroundColorAttributeName:UIColor.blackColor()], forState: UIControlState.Selected)
UIImage extension
extension UIImage {
func imageWithColor(color1: UIColor) -> UIImage {
UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
color1.setFill()
let context = UIGraphicsGetCurrentContext()
CGContextTranslateCTM(context!, 0, self.size.height)
CGContextScaleCTM(context!, 1.0, -1.0);
CGContextSetBlendMode(context!, .Normal)
let rect = CGRectMake(0, 0, self.size.width, self.size.height) as CGRect
CGContextClipToMask(context!, rect, self.CGImage!)
CGContextFillRect(context!, rect)
let newImage = UIGraphicsGetImageFromCurrentImageContext()! as UIImage
UIGraphicsEndImageContext()
return newImage
}
}