tabbar item image and selectedImage

Question

I have a tab bar controller (its a tab bar based application, so tab bar is on MainWindow.xib). In this xib, I have added 4 tab bar items and I have set the image of all tab bar item. Due to this, I am facing 2 issues:

1) The image is white-colored, but when I run the application, its showing all the images on tab bar item as gray colored. How can I make it look same as is in the original image.

2) I have a selected image, that I want to add on the tab bar item which is currently selected. How should I do this???

UPDATED AFTER NICK's CODE:

Hey, in iOS 5, you will have to write following code in your app delegate for setting tab bar item selected and unselected image (the category solution will work only on 4):

if ([[[UIDevice currentDevice] systemVersion] floatValue]>4.9) {
    NSString *selectedImageName,*unselectedImageName;

    for (int counter = 0; counter < [self.tabBarController.tabBar.items count]; counter++) {
        if (counter==0) {
            selectedImageName = <someImagename>;
            unselectedImageName = <someImagename>;
        }
        else if (counter==1) {
            selectedImageName = <someImagename>;
            unselectedImageName = <someImagename>;
        }
        .
                    .
        else {
            selectedImageName = <someImagename>;
            unselectedImageName = <someImagename>;
        }
        UIImage *selectedImage = [UIImage imageNamed:selectedImageName];
        UIImage *unselectedImage = [UIImage imageNamed:unselectedImageName];

        UITabBarItem *item = [self.tabBarController.tabBar.items objectAtIndex:counter];
        if ([item respondsToSelector:@selector(setFinishedSelectedImage:withFinishedUnselectedImage:)]) {
            [item setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];
        }
    }
}

Solution 1

Add this category to your project. It will force tab bar items to use your original image as the disabled state instead of applying a grey gradient to them:

@implementation UItabBarItem (CustomUnselectedImage)

- (UIImage *)unselectedImage
{
    return self.image;
}

@end

This may seem like it is using private APIs but I've seen this used multiple times on apps that were approved. It's not actually calling a private method, just overriding one.

If you need to specify different images for the selected and unselected image, your best bet is probably to use the tag property of the UITabBarItem and a switch statement, like this:

@implementation UItabBarItem (Custom)

- (UIImage *)selectedImage
{
    switch (self.tag)
    {
        case 1:
            return [UIImage imageNamed:@"tab-selected1.png"];
        case 2:
            return [UIImage imageNamed:@"tab-selected2.png"];
        etc...
    }
}

- (UIImage *)unselectedImage
{
    switch (self.tag)
    {
        case 1:
            return [UIImage imageNamed:@"tab-unselected1.png"];
        case 2:
            return [UIImage imageNamed:@"tab-unselected2.png"];
        etc...
    }
}

@end

Then in interface builder, don't bother with setting the tab bar item images as they'll just be ignored. Instead, set their tags to match up with the images you've specified in your switch statements.

Note that if you have multiple tab bars in your app, and you don't want them to all be overridden in this way, you can define these methods on a subclass of UITabBarItem instead of as a category. Then you can set the class of the tab bar items in your nib file to be your custom subclass instead of regular UITabBarItems, and only those ones will be affected.

EDIT:

Note that as of iOS 5 there is a better way of doing this using the UIAppearance APIs. This technique should still work, but who knows if Apple might start cracking down on it now that there is an officially supported approach. Better to use the new method unless you really need iOS 4 support.

Solution 2

Based on http://blog.theanalogguy.be/ works for me. Add the category UItabBarItem (CustomUnselectedImage) - haven't effect =(

the *.h

@interface CustomTabBarItem : UITabBarItem {  
    UIImage *customHighlightedImage;  
    UIImage *customNormalImage;  
}  

@property (nonatomic, retain) UIImage *customHighlightedImage;  
@property (nonatomic, retain) UIImage *customNormalImage;  

- (id)initWithTitle:(NSString *)title 
        normalImage:(UIImage *)normalImage 
    highlightedImage:(UIImage *)highlightedImage 
                tag:(NSInteger)tag;
@end

and *.m

#import "CustomTabBarItem.h"

@implementation CustomTabBarItem  

@synthesize customHighlightedImage;  
@synthesize customNormalImage;  

- (id)initWithTitle:(NSString *)title 
        normalImage:(UIImage *)normalImage 
    highlightedImage:(UIImage *)highlightedImage 
                tag:(NSInteger)tag{

    [self initWithTitle:title
                    image:nil
                    tag:tag];
    [self setCustomNormalImage:normalImage];
    [self setCustomHighlightedImage:highlightedImage];
    return self;
}

- (void) dealloc  
{  
    [customHighlightedImage release];
    customHighlightedImage=nil;  
    [customNormalImage release]; 
    customNormalImage=nil;  
    [super dealloc];  
}  

-(UIImage *) selectedImage  
{  
    return self.customHighlightedImage;  
}  

-(UIImage *) unselectedImage  
{  
    return self.customNormalImage;  
}  

@end  

happy coding =]-

Comments

[Sagar Kothari]

Just go through this tutorial once - sugartin.info/2011/07/01/customizing-tab-bar - Illustrated everything u need including sample code. Cheers & Best of luck.

[Nick Lockwood]

Actually the category works on iOS5 too, just not in the simulator.

[anshul]

Hey Nick, One doubt... Where will I call this method (in my code)??

[anshul]

Thanx Nick.. I tried this in my didSelectViewController delegate method of tab bar controller and it worked. Thanx Man [self.tabBarController.tabBarItem setImage:[self.tabBarController.tabBarItem unselectedImage]];' One More question: will it work on iOS 5 because I have tested it only on simulator 4.3 and not on 5.0???

[Nick Lockwood]

No, you misunderstood. You don't call this code, you just put it in a .m file on its own. It calls itself automatically. In Xcode create a new category on UITabBarItem and call it CustomUnselectedImage. And yes, it should work on iOS 5, but it may not work in the simulator.

[Nick Lockwood]

You shouldn't call unselectedImage anywhere in your code. It's a private method and may get your app rejected. Just set the image property on your UITabBarItems as you would do normally, and let the category do the magic of disabling the styling that Apple normally applies.

[anshul]

ohk, so I set the image of my tabbar items in main window xib file and I shouldn't call this unselectedImage method anywhere.. Ryt??

[Nick Lockwood]

Right. If you need to replace the selected image as well then it's a bit more complex though, so let me know if that's the case and I'll update the answer with more detail.

[anshul]

ya, I need to replace the selected image, too for the tabbar items. It would be so nice of you if you can tell me how to achieve this. Thanx a lot man. I owe you one.

[anshul]

Hey Nick, Thanks Buddy. Its really awesome. you are brilliant dude. Hats off to you. 100 votes up :) ;)

[Stas]

Nick could you please explain why the images looks bigger then they are? It seems that it uses the actual size (retina) so should I resize the retina images before setting?