问题
How can I change inactive icon/text color on iOS 7 tab bar? The one in gray color.
回答1:
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;
}
回答2:
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.
回答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]];
回答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
}
}
回答5:
There is a better way without using each ViewController by only using appdelegate.m
In your AppDelegate.m - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions function, try this.
UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
UITabBar *tabBar = tabBarController.tabBar;
// repeat for every tab, but increment the index each time
UITabBarItem *firstTab = [tabBar.items objectAtIndex:0];
// also repeat for every tab
firstTab.image = [[UIImage imageNamed:@"someImage.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
firstTab.selectedImage = [[UIImage imageNamed:@"someImageSelected.png"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
回答6:
To change tab selection color instead blue color:
- Select the tabItem.
- From "Show the Identity inspector" in the right side menu.
- Set "tintColor" attribute with your prefer color.
回答7:
The new answer to do this programmatically as of iOS 10+ with Swift 3 is to use the unselectedItemTintColor API. For example, if you have initialized your tab bar controller inside your AppDelegate, it would looks like the following:
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
...
let firstViewController = VC1()
let secondViewController = VC2()
let thirdViewController = VC3()
let tabBarCtrl = UITabBarController()
tabBarCtrl.viewControllers = [firstViewController, secondViewController, thirdViewController]
// set the color of the active tab
tabBarCtrl.tabBar.tintColor = UIColor.white
// set the color of the inactive tabs
tabBarCtrl.tabBar.unselectedItemTintColor = UIColor.gray
// set the text color
...
}
And for setting the selected and unselected text colors:
let unselectedItem = [NSForegroundColorAttributeName: UIColor.green]
let selectedItem = [NSForegroundColorAttributeName: UIColor.red]
self.tabBarItem.setTitleTextAttributes(unselectedItem, for: .normal)
self.tabBarItem.setTitleTextAttributes(selectedItem, for: .selected)
回答8:
In Swift 3.0 you can write it as follows
For unselected tab bar image
viewController.tabBarItem.image = UIImage(named: "image")?.withRenderingMode(.alwaysOriginal)
For selected tab bar image
viewController.tabBarItem.selectedImage = UIImage(named: "image")?.withRenderingMode(.alwaysOriginal)
回答9:
Instead of adding rendering image code in each viewController for tabBarItem, use extension
extension UITabBar{
func inActiveTintColor() {
if let items = items{
for item in items{
item.image = item.image?.withRenderingMode(.alwaysOriginal)
item.setTitleTextAttributes([NSForegroundColorAttributeName : UIColor.green], for: .normal)
item.setTitleTextAttributes([NSForegroundColorAttributeName : UIColor.white], for: .selected)
}
}
}
}
Then call this in your UITabBarController class like
class CustomTabBarViewController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
tabBar.inActiveTintColor()
}
}
You will get output like : NOTE: Don't forget to assign CustomTabBarViewController class to your TabBarController in storyboard.
回答10:
I think @anka's answer is quite good, and I also added the following code to enable tint color for highlighted items:
let image = UIImage(named:"tab-account")!.imageWithRenderingMode(.AlwaysTemplate)
let item = tabBar.items![IC.const.tab_account] as! UITabBarItem
item.selectedImage = image
Or in one line:
(tabBar.items![IC.const.tab_account] as! UITabBarItem).selectedImage = UIImage(named:"tab-account")!.imageWithRenderingMode(.AlwaysTemplate)
So it looks like:
回答11:
You only need put this code in your first ViewController called for TabBarViewController (ViewDidload):
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
[self loadIconsTabBar];
}
-(void) loadIconsTabBar{
UITabBar *tabBar = self.tabBarController.tabBar;
//
UITabBarItem *firstTab = [tabBar.items objectAtIndex:0];
UITabBarItem *secondTab = [tabBar.items objectAtIndex:1];
firstTab.image = [[UIImage imageNamed:@"icono1.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
firstTab.selectedImage = [[UIImage imageNamed:@"icono1.png"]imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
secondTab.image = [[UIImage imageNamed:@"icono2.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
secondTab.selectedImage = [[UIImage imageNamed:@"icono2.png"]imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
}
回答12:
You only need put this code in your appDelegate.m called (didFinishLaunchingWithOptions):
[UITabBarItem.appearance setTitleTextAttributes:
@{NSForegroundColorAttributeName : [UIColor whiteColor]}
forState:UIControlStateNormal];
[UITabBarItem.appearance setTitleTextAttributes:
@{NSForegroundColorAttributeName : [UIColor orangeColor]}
forState:UIControlStateSelected];
[[UITabBar appearance] setTintColor:[UIColor whiteColor]]; // for unselected items that are gray
[[UITabBar appearance] setUnselectedItemTintColor:[UIColor whiteColor]];
回答13:
If you are looking for an iOS 11 swift 4 solution, do something like this in the appDelegate. This is changing all the unselected ones to black.
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
UITabBar.appearance().unselectedItemTintColor = UIColor(displayP3Red: 0, green: 0, blue: 0, alpha: 1)
return true
}
回答14:
The best way to change the color of the Selected tab bar item is add a single code on appdelegate didFinishLaunchingWithOptions method
UITabBar.appearance().tintColor = UIColor(red: 242/255.0, green: 32/255.0, blue: 80/255.0, alpha: 1.0)
It will change the selected item text color
回答15:
You can do it all through the interface builder, check this answer out, it shows how to do both active and inactive, "Change tab bar item selected color in a storyboard"
回答16:
for swift 3:
// both have to declare in view hierarchy method
//(i.e: viewdidload, viewwillappear) according to your need.
//this one is, when tab bar is selected
self.tabBarItem.selectedImage = UIImage.init(named: "iOS")?.withRenderingMode(.alwaysOriginal)
// this one is when tab bar is not selected
self.tabBarItem.image = UIImage.init(named: "otp")?.withRenderingMode(.alwaysOriginal)
回答17:
I think it's time to use
UITabBar unselectedItemTintColor appearance
/// Unselected items in this tab bar will be tinted with this color. Setting this value to nil indicates that UITabBar should use its default value instead.
@available(iOS 10.0, *)
@NSCopying open var unselectedItemTintColor: UIColor?
Just add this line into App did finish launching
UITabBar.appearance().unselectedItemTintColor = {your color}
// Example
UITabBar.appearance().unselectedItemTintColor = .black
回答18:
this worked for me SWIFT 3
viewConroller.tabBarItem = UITabBarItem(title: "", image: UIImage(named: "image")?.withRenderingMode(.alwaysOriginal),
selectedImage: UIImage(named: "image"))
回答19:
Swift solution : for UNSELECED item : in every ViewController -> ViewDidLoad()
self.tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "PHOTO_NAME")?.imageWithRenderingMode(.AlwaysOriginal), selectedImage: UIImage(named: "NAME"))
来源：https://stackoverflow.com/questions/22767098/how-to-change-inactive-icon-text-color-on-tab-bar