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];
        }
    }
}

Answer 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.