Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change color of inactive tab-bar icons in ios7?

I'd like to change the color of inactive icons in the tab bar in ios7.

I know how to set the color to selected TabBar item, But I don't know how to set the color to inactive TabBar items.

Does anyone know how to do it? Thanks in advance!!

This is my code in appDelegate.m

//tint color for tabbar
[UITabBar appearance].barTintColor = [UIColor colorWithRed:0.077 green:0.411 blue:0.672 alpha:1.000];

//tint color for the text of inactive tabbar item.
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName:        [UIColor whiteColor]} forState:UIControlStateNormal];

//tint color for the text of selected tabbar item.
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName:        [UIColor orangeColor]} forState:UIControlStateSelected];

//tint color for the selected tabbar item.
[[UITabBar appearance] setTintColor:[UIColor whiteColor]];

//tint color for the inactive tabbar items.
//Question:how can I set tint color for the inactive tabbar items???
like image 267
crzyonez777 Avatar asked Feb 05 '14 00:02

crzyonez777


2 Answers

It's true that there no easy way to do change the colour of inactive image. It does not seem to be possible to do within a storyboard at all. There's a pretty straightforward solution though — just assign the item an image with imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal rendering mode.

Given that your images are already coloured for inactive state originally, you can create a simple custom subclass of UITabBarItem with the following implementation

@implementation P2TabBarItem

- (void)awakeFromNib {
    [self setImage:self.image]; // calls setter below to adjust image from storyboard / nib file
}

- (void)setImage:(UIImage *)image {
    [super setImage:[image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
    self.selectedImage = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
}

@end

In your storyboard, fill the Class field of all your UITabBarItems to the newly created subclass name — that's it!

like image 146
Leon Deriglazov Avatar answered Oct 30 '22 11:10

Leon Deriglazov


Apple discourages of changing a tint of active item only because color blind users will have a hard time distinguishing which tab bar item is active.

Having said that, even if you still want different color inactive item icons, you should initialise your tabBarItem property in view controller's initialiser with images that are returned from imageWithRenderingMode: method.

Something like

- (instancetype)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];

    if (self) {
        UIImage * tabImage = [[UIImage imageNamed:@"InactiveImage"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        UIImage * selectedTabImage = [[UIImage imageNamed:@"ActiveImage"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        self.tabBarItem = [[UITabBarItem alloc] initWithTitle:NSLocalizedString(@"Item", @"Tab bar button title for 'Item'")
                                                        image:tabImage
                                                selectedImage:selectedTabImage];
    };
    return self;
}

This way item will switch between your provided icons without adding a tint on them. The text though will still switch the tint color that you provided through either IB or appearance proxy in code.

like image 43
Eimantas Avatar answered Oct 30 '22 09:10

Eimantas