19
votes

(NOTE: I see there are several similar questions on SO, but none of them seem to get at my specific issue of wanting to change the unselected appearance of both custom and system UITabBarItems.)

I'm working in iOS7. I have a UITabBar with some buttons. Some of them are my buttons, some are system buttons. Example:

UITabBarItem *searchButton = [[UITabBarItem alloc] initWithTabBarSystemItem: UITabBarSystemItemSearch    tag: navSearchItem];
UITabBarItem *bookMkButton = [[UITabBarItem alloc] initWithTabBarSystemItem: UITabBarSystemItemBookmarks tag: navBookmarksItem];
UITabBarItem *homeButton   = [[UITabBarItem alloc] initWithTitle: @"Home"     image: [self tabBarImageNamed: @"home-tab"]     tag: navHomeItem];
UITabBarItem *setingButton = [[UITabBarItem alloc] initWithTitle: @"Settings" image: [self tabBarImageNamed: @"settings-tab"] tag: navSettingsItem];

navTabBar.items = @[ searchButton, homeButton, bookMkButton, setingButton];

I can set the selected-button tint easily enough, with:

[[UITabBar appearance] setSelectedImageTintColor: MY_FAVORITE_COLOR];

I can set the unselected button text color to white:

[[UITabBarItem appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys: [UIColor whiteColor], UITextAttributeTextColor, nil]
                                         forState: UIControlStateNormal];

What I want to do is set the UNSELECTED button's image tint color to white. I could set the unselected image easily enough, but that only works for my buttons. I want to do this for the system buttons, also. That is, I want my search & bookmarks buttons to also be unselected-white.

I'm pretty sure Apple will complain if I try to recreate their icons to make custom buttons. The docs are pretty specific that we shouldn't do anything remotely resembling Apple's icons.

Hints?

Thanks!

EDIT: The reason I want unselected=white is that, against my designed background, the default grey makes the icons/text hard on the eyes.

6

6 Answers

12
votes

The only way I was successful in setting a custom unselected UITabBarItem image to white was by using the following (white) image and loading it with a specific rendering mode

UIImage *tabImage = [[UIImage imageNamed:@"white_tab_item"] 
                      imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

self.tabItem.image = tabImage;

"tabItem" being a UITabBarItem Outlet of the class

Credits go to Aaron Brager's answer: UITabBarController unselected icon image tint

3
votes

Are you up for some private API use?

Do this sometime after the tab bar has been populated:

for (UIView *v in self.tabBar.subviews)
  if ([NSStringFromClass(v.class) isEqual:@"UITabBarButton"])
    [v performSelector:@selector(_setUnselectedTintColor:)
              withObject:[UIColor whiteColor]];

Usual warnings about private API apply: Apple would rather you not do this; if it breaks you get to keep both pieces; etc.

The example code is not particularly stealthy with regard to App Store review. Apple will catch it, as presented. Add your favorite stealth techniques to suit.

Works on at least iOS 7.0.1 and 7.1.

2
votes

In iOS 10 UITabBar exposes unselectedItemTintColor that you can use to specify the tint of unselected items. See the docs for more.

This means when you are configuring a tab bar you have the following tint options:

  • tintColor applies to the selected tabs
  • unselectedItemTintColor applies to all unselected tabs
0
votes

this code to change select button title color

////define these code for ios7

  #define SYSTEM_VERSION_EQUAL_TO(v)                  ([[[UIDevice currentDevice] systemVersion]   compare:v options:NSNumericSearch] == NSOrderedSame)

 #define SYSTEM_VERSION_GREATER_THAN(v)              ([[[UIDevice currentDevice] systemVersion] compare:v options:NSNumericSearch] == NSOrderedDescending)

 #define SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(v)  ([[[UIDevice currentDevice] systemVersion] compare:v options:NSNumericSearch] != NSOrderedAscending)

 #define SYSTEM_VERSION_LESS_THAN(v)                 ([[[UIDevice currentDevice] systemVersion] compare:v options:NSNumericSearch] == NSOrderedAscending)

 #define SYSTEM_VERSION_LESS_THAN_OR_EQUAL_TO(v)     ([[[UIDevice currentDevice] systemVersion] compare:v options:NSNumericSearch] != NSOrderedDescending)





 if (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"7.0")){

   NSLog(@"ios77777");


[[UITabBarItem appearance] setTitleTextAttributes:@{NSFontAttributeName : [UIFont            fontWithName:@"HelveticaNeue-Bold" size:10.0f],
                                                        NSForegroundColorAttributeName :   [UIColor redColor]



 }

      forState:UIControlStateNormal];

    }
0
votes

If you're using Storyboard you can also set both Image for Bar Item and Selected Image for Selected Bar Item to get unaltered image in tabBar.

-4
votes

Should it be:

[[UITabBar appearance] setTintColor:[UIColor whiteColor]]

Taken from: iOS Custom UI Series: TabBar & NavBar: http://bit.ly/1ahr9Ao