How to change the color of unselected tab bar items in iOS 7?

Question

Im trying to change the color of the unselected images in the tab bar, by default they are changed to gray, even if the image is another color.

I already search this, but the answers are only for iOS 6 or below.

Answer 1

This drove me mad just recently so I wrote my own class to handle it that works with every version of iOS I've tried it on ;) Its really easy to extend to do whatever you want it to do too!

GozTabBar.h:

#import <UIKit/UIKit.h>
#import "GozTabBarItem.h"

@protocol GozTabBarDelegate;

@interface GozTabBar : UIView
{
    UITapGestureRecognizer* pTapGestureRecognizer;

}

@property                                   UIColor*                    backgroundColour;
@property (unsafe_unretained, nonatomic)    id < GozTabBarDelegate >    delegate;
@end

@protocol GozTabBarDelegate < NSObject >

- (int)             getNumberOfTabBarItemsForTabBar: (GozTabBar*) pTabBar;
- (GozTabBarItem*)  getTabBarItemsAtIndex: (int) index ForTabBar: (GozTabBar*) pTabBar;
- (void)            selectedItemAtIndex: (int) index ForTabBar: (GozTabBar*) pTabBar;
- (int)             getSelectedItemIndexForTabBar: (GozTabBar*) pTabBar;
@end

GozTabBar.m

#import "GozTabBar.h"
#import "GozTabBarItem.h"

@implementation GozTabBar

@synthesize backgroundColour;
@synthesize delegate;

const int leftEdgeInset         = 8;
const int rightEdgeInset        = 8;

const int topEdgeInset          = 8;
const int bottomEdgeInset       = 8;

- (id)init
{
    self = [super init];
    if (self)
    {
        pTapGestureRecognizer   = [[UITapGestureRecognizer alloc] initWithTarget: self action: @selector( onTap: )];
        [self addGestureRecognizer: pTapGestureRecognizer];
    }
    return self;
}

- (id) initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self)
    {
        pTapGestureRecognizer   = [[UITapGestureRecognizer alloc] initWithTarget: self action: @selector( onTap: )];
        [self addGestureRecognizer: pTapGestureRecognizer];
    }
    return  self;
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        pTapGestureRecognizer   = [[UITapGestureRecognizer alloc] initWithTarget: self action: @selector( onTap: )];
        [self addGestureRecognizer: pTapGestureRecognizer];
    }
    return self;
}

// Recognise a tap on the item (If it is on an item).
- (void)onTap: (UIGestureRecognizer *)gestureRecognizer
{
    const int leftRightEdgeInset    = leftEdgeInset + rightEdgeInset;
    const int topBottomEdgeInset    = topEdgeInset + bottomEdgeInset;

    int numItems        = 0;
    if ( [self.delegate respondsToSelector: @selector( getNumberOfTabBarItemsForTabBar: )] )
    {
        numItems    = [self.delegate getNumberOfTabBarItemsForTabBar: self];
    }
    if ( numItems > 0 )
    {
        int widthLessInset  = (self.frame.size.width - leftRightEdgeInset);
        int itemWidth       = widthLessInset / numItems;

        int heightLessInset = self.frame.size.height - topBottomEdgeInset;
        int itemHeight      = heightLessInset;

        CGPoint tapPoint    = [gestureRecognizer locationInView: self];

        // Draw the custom items.
        for( int i = 0; i < numItems; i++ )
        {
            CGRect tabBarItemRect   = CGRectMake( leftEdgeInset + (itemWidth * i), 0, itemWidth, itemHeight );
            if ( CGRectContainsPoint( tabBarItemRect, tapPoint ) )
            {
                if ( [self.delegate respondsToSelector: @selector(selectedItemAtIndex:ForTabBar:)] )
                {
                    [self.delegate selectedItemAtIndex: i ForTabBar: self];
                }
                break;
            }
        }
    }
}


- (void)drawRect:(CGRect)rect
{
    const int leftRightEdgeInset    = leftEdgeInset + rightEdgeInset;
    const int topBottomEdgeInset    = topEdgeInset + bottomEdgeInset;

    CGContextRef ctx    = UIGraphicsGetCurrentContext();

    // Fill the background in the relevant colour.
    CGContextSetFillColorWithColor( ctx, backgroundColour.CGColor );
    CGContextFillRect( ctx, rect );

    int numItems        = 0;
    if ( [self.delegate respondsToSelector: @selector( getNumberOfTabBarItemsForTabBar: )] )
    {
        numItems    = [self.delegate getNumberOfTabBarItemsForTabBar: self];
    }
    if ( numItems > 0 )
    {
        int widthLessInset  = (rect.size.width - leftRightEdgeInset);
        int itemWidth       = widthLessInset / numItems;

        int heightLessInset = rect.size.height - topBottomEdgeInset;
        int itemHeight      = heightLessInset;

        int selectedIndex   = 0;
        if ( [self.delegate respondsToSelector: @selector(getSelectedItemIndexForTabBar:)] )
        {
            selectedIndex   = [self.delegate getSelectedItemIndexForTabBar: self];
        }


        // Draw the custom items.
        for( int i = 0; i < numItems; i++ )
        {
            //GozTabBarItem*    pItem   = [self.items objectAtIndex: i];
            GozTabBarItem*  pItem   = nil;
            if ( [self.delegate respondsToSelector: @selector(getTabBarItemsAtIndex:ForTabBar:)] )
            {
                pItem   = [self.delegate getTabBarItemsAtIndex: i ForTabBar: self];
            }
            if ( pItem != nil )
            {
                CGRect  tabBarItemRect      = CGRectMake( leftEdgeInset + (itemWidth * i), topEdgeInset, itemWidth, itemHeight );
                CGPoint tabBarItemCenter    = CGPointMake( tabBarItemRect.origin.x + (tabBarItemRect.size.width / 2), tabBarItemRect.origin.y + (tabBarItemRect.size.height / 2) );

                UIImage* pDrawImage = nil;
                if ( i == selectedIndex )
                {
                    pDrawImage = pItem.selectedImage;
                }
                else
                {
                    pDrawImage = pItem.unSelectedImage;
                }

                CGRect drawRect = CGRectMake( tabBarItemCenter.x - (pDrawImage.size.width / 2), tabBarItemCenter.y - (pDrawImage.size.height / 2), pDrawImage.size.width, pDrawImage.size.height );
                [pDrawImage drawInRect: drawRect];
            }
        }
    }
}

GozTabBarItem.h

#import <UIKit/UIKit.h>

@interface GozTabBarItem : NSObject
{
}

@property UIImage*  selectedImage;
@property UIImage*  unSelectedImage;

- (id) initWithSelectedImage: (UIImage*) selectedImage andUnselectedImage: (UIImage*) unSelectedImage;

@end

GozTabBarItem.m

#import "GozTabBarItem.h"

@implementation GozTabBarItem

@synthesize selectedImage;
@synthesize unSelectedImage;

- (id) initWithSelectedImage: (UIImage*) selectedImg andUnselectedImage: (UIImage*) unSelectedImg
{
    self = [super init];
    if (self)
    {
        self.selectedImage      = selectedImg;
        self.unSelectedImage    = unSelectedImg;
    }
    return self;
}
@end

Hope that helps.