Frank
Frank

Reputation: 3121

Is there a way to use a custom selected image for UITabBarItem?

I like to have a custom selected image when a user selects an item on the tab bar, by default it selects as blue like but would like to have a green color instead. something like below any thoughts?

alt text

Upvotes: 8

Views: 9767

Answers (9)

Dustin
Dustin

Reputation: 94

In my UITabBarController's viewDidLoad:, based on Rizzu's answer:

for (int i = 0; i < [self.viewControllers count]; i++)
{
    UIViewController* viewController = [self.viewControllers objectAtIndex:i];

    if(i == 0)
    {
        [viewController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"btn_list_all_hover.png"]withFinishedUnselectedImage:[UIImage imageNamed:@"btn_list_all.png"]];
    }
    else if(i == 1)
    {
        [viewController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"btn_settings_hover.png"]withFinishedUnselectedImage:[UIImage imageNamed:@"btn_settings.png"]];
    }
}

Upvotes: 0

philm5
philm5

Reputation: 273

When using storyboards you can simply select your TabBarController's TabBar and then change the Image Tint in the Identity Inspector. This should also work with XIBs.

Look here for an image describing the todos

Upvotes: 1

Muhammad Rizwan
Muhammad Rizwan

Reputation: 3480

In iOS 6 I have change the selected tabbatitem image like -

in tabbar controller delegate method

- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController

{
    if([tabBarController selectedIndex] == 0)
    {
        [viewController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"selected.png"]withFinishedUnselectedImage:[UIImage imageNamed:@"unselect.png"]];
    }    
}

through this you can change your image.

Or you can use directly in your view controllers init(or ViewWillAppear) method, like

        [viewController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"selected.png"]withFinishedUnselectedImage:[UIImage imageNamed:@"unselect.png"]];

i hope this'll help you.

Upvotes: 6

Popeye
Popeye

Reputation: 12123

I believe you can now do this with :

[[[[self tabBar] items] objectAtIndex:0] setFinishedSelectedImage:nil withFinishedUnselectedImage:nil];

Upvotes: 1

Ashoor
Ashoor

Reputation: 1368

In AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions (NSDictionary *)launchOptions {

[[UITabBar appearance] setSelectedImageTintColor:[UIColor redColor]]; 

return YES;

}

This will give you a red color, change the color with the one you wish whiteColor, blueColor etc..

Upvotes: 0

JosephH
JosephH

Reputation: 37505

For iOS5 and upwards, you can just do this:

rootTabBarController.tabBar.selectedImageTintColor = [UIColor greenColor];

Upvotes: 1

Frank
Frank

Reputation: 3121

Just found my solution. Basically, I subclassed UITabItem and set this in the navigation controller:

-(void) viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];

    CustomTabBarItem *tabItem = [[CustomTabBarItem alloc] initWithTitle:@"Events" image:[UIImage imageNamed:@"tabIcon.png"] tag:0];
    tabItem.customHighlightedImage=[UIImage imageNamed:@"tabIconSelected.png"];
    self.tabBarItem = tabItem;
    [tabItem release];
    tabItem=nil;            
}

Here's what the CustomTabBarItem class looks like:

@interface CustomTabBarItem : UITabBarItem
{
    UIImage  *customHighlightedImage;
}

@property (nonatomic, retain) UIImage *customHighlightedImage;

@end

implementation:

#import "CustomTabBarItem.h

@implementation CustomTabBarItem

@synthesize customHighlightedImage;

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

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

@end

Upvotes: 11

Justin
Justin

Reputation: 20609

This is not officially supported in the SDK. You may be able to probe and adjust the tab's views at runtime, but you risk a rejection from Apple.

Edit: For completeness, I should mention that your other option is to roll your own UITabBar.

Upvotes: 2

cutsoy
cutsoy

Reputation: 10251

Just add some custom views (using insertSubview:atIndex:) when the UITabBarController-delegate-methods are called.

Example:

– (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
    [tabBarController.tabBar insertSubview:someView atIndex:someIndex];
}

You can try changing someIndex yourself till you have the result you want.

Upvotes: 2

Related Questions