CODEWITHSUNDEEP
iosiphoneobjective-cios7
crzyonez777
crzyonez777

Reputation: 1807

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???

Upvotes: 9

Views: 7611

Answers (3)

imm
imm

Reputation: 1

add this to your UITabBarController

UITabBarItem *item0 = [self.tabBar.items objectAtIndex:0];
//unselected icon
item0.image = [[UIImage imageNamed:@"your_icon.png"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
//selected icon
item0.selectedImage = [UIImage imageNamed:@"your_icon.png"];

Upvotes: 0

Eimantas
Eimantas

Reputation: 49344

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.

Upvotes: 1

Leon Deriglazov
Leon Deriglazov

Reputation: 1132

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!

Upvotes: 13

Related Questions