UITabBar not showing selected item images in ios 7

Question

The icons show fine in ios 6 but not in ios 7. I'm setting the selected state in the viewController viewDidLoad method. When the user selects a tab bar item the image disappears. Here is my code:

UITabBar *tabBar = self.tabBarController.tabBar;
if ([UITabBar instancesRespondToSelector:@selector(setSelectedImageTintColor:)]) {
    [self.tabBarController.tabBar setSelectedImageTintColor:[UIColor whiteColor]];
}
UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
UITabBarItem *item3 = [tabBar.items objectAtIndex:3];
[item0 setTitle:@"Home"];
[item1 setTitle:@"Calendar"];
[item2 setTitle:@"News"];
[item3 setTitle:@"My Events"];
[item0 setFinishedSelectedImage:[UIImage imageNamed:@"homeIconSelected.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"home2.png"]];
[item1 setFinishedSelectedImage:[UIImage imageNamed:@"Calendar"] withFinishedUnselectedImage:[UIImage imageNamed:@"CalendarIconSelected"]];
[item2 setFinishedSelectedImage:[UIImage imageNamed:@"NewsIconSelected"] withFinishedUnselectedImage:[UIImage imageNamed:@"News"]];
[item3 setFinishedSelectedImage:[UIImage imageNamed:@"EventsIconSelected"] withFinishedUnselectedImage:[UIImage imageNamed:@"Events"]];
[item1 imageInsets];
[item2 imageInsets];
[item3 imageInsets];

Answer 1

No answers helped fixing this issue. The main reason is that my TabBarController wasn't my RootViewController.

The solution I used for Storyboards, and I just clicked my UITabButton and I added a runtime attribute for selectedImage:

For each of the different views associated with the UITabController.

Answer 2

After spending a couple of hours trying to make my custom tabbar to work for both iOS 6 & 7, that's what worked for me...

UITabBarController *tabBarController = (UITabBarController *)[[self window] rootViewController];

UITabBar *tabBar = tabBarController.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];

tabBarItem1.title = @"Home";
tabBarItem2.title = @"Map";
tabBarItem3.title = @"Weather";
tabBarItem4.title = @"Info";

if ([[[UIDevice currentDevice] systemVersion] floatValue] < 7) {
    [tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"cyexplore_home_white.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"cyexplore_home_black.png"]];
    [tabBarItem2 setFinishedSelectedImage:[UIImage imageNamed:@"cyexplore_cloud_white.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"cyexplore_cloud_black.png"]];
    [tabBarItem3 setFinishedSelectedImage:[UIImage imageNamed:@"cyexplore_map_white.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"cyexplore_map_black.png"]];
    [tabBarItem4 setFinishedSelectedImage:[UIImage imageNamed:@"cyexplore_info_white.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"cyexplore_info_black.png"]];
} else {
    tabBarItem1.selectedImage = [[UIImage imageNamed:@"cyexplore_home_white"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
    tabBarItem1.image = [[UIImage imageNamed:@"cyexplore_home_black"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];

    tabBarItem2.selectedImage = [[UIImage imageNamed:@"cyexplore_cloud_white"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
    tabBarItem2.image = [[UIImage imageNamed:@"cyexplore_cloud_black"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];

    tabBarItem3.selectedImage = [[UIImage imageNamed:@"cyexplore_map_white"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
    tabBarItem3.image = [[UIImage imageNamed:@"cyexplore_map_black"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];

    tabBarItem4.selectedImage = [[UIImage imageNamed:@"cyexplore_info_white"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
    tabBarItem4.image = [[UIImage imageNamed:@"cyexplore_info_black"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal ];
}

UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
[[UITabBar appearance] setBackgroundImage:tabBarBackground];
[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tabbar_selected.png"]];
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor blackColor], UITextAttributeTextColor, nil] forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor, nil] forState:UIControlStateSelected];

Answer 3

It is easy and clean solution of category for UITabBar Items.

Just create category and use the Runtime Attribute and refer it from category like below.

#import "UITabBarItem+CustomTabBar.h"

@implementation UITabBarItem (CustomTabBar)

-(void)setValue:(id)value forKey:(NSString *)key {
    if([key isEqualToString:@"tabtitle"]){
        if([value isEqualToString:@"contacts"]) {
            [self setSelectedImage:[[UIImage imageNamed:@"contacts-selected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
        } else if([value isEqualToString:@"chat"]) {
            [self setSelectedImage:[[UIImage imageNamed:@"chat-selected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
        } else if([value isEqualToString:@"groupchat"]) {
            [self setSelectedImage:[[UIImage imageNamed:@"groupchat-selected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
        } else if([value isEqualToString:@"settings"]) {
            [self setSelectedImage:[[UIImage imageNamed:@"settings-selected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
        }
    }
    [self setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIFont fontWithName:@"Roboto-Regular" size:12.0f], NSFontAttributeName, [UIColor grayColor], NSForegroundColorAttributeName, nil] forState:UIControlStateNormal];
}

@end

Answer 4

Old questions, but going to add my solution here as well for Xamarin.iOS/C# and those who want to set the images via Interface builder. I set the Selected Image and Image attributes via Interface Builder. Then in code I defined an InitTabs() method like this:

public void InitTabs(){
        HomeTab.SelectedImage = HomeTab.SelectedImage.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
        HomeTab.Image = HomeTab.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
}

Call InitTabs() in ViewDidLoad and now the proper image will appear for both the selected and unselected state.

Answer 5

Set bar item image's render mode to original can solve this problem. This can be done by using images in the .xcassets, so you don't have to write lots of codes.

First step, drap&drop your bar item images to Assets.xcassets.

Second step, choose the bar item image, and change [Render As] to [Original Image]

ps: I usually set the TabBarController's tab bar items all by story board to avoid writing lots of code.

Answer 6

if you are working with storyboards you have to put the identifier : "custom" in Navigation Controller.

then :

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Assign tab bar item with titles
    UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
    UITabBar *tabBar = tabBarController.tabBar;
    UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
    UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
    UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];

    (void)[tabBarItem1 initWithTitle:nil image:[UIImage imageNamed:@"home.png"] selectedImage:[UIImage imageNamed:@"home_selected.png"]];
    (void)[tabBarItem2 initWithTitle:nil image:[UIImage imageNamed:@"home.png"] selectedImage:[UIImage imageNamed:@"home_selected.png"]];
    (void)[tabBarItem3 initWithTitle:nil image:[UIImage imageNamed:@"home.png"] selectedImage:[UIImage imageNamed:@"home_selected.png"]];

    // Change the tab bar background
    UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
    [[UITabBar appearance] setBackgroundImage:tabBarBackground];



    return YES;
}

This works for me.