How to properly customize UITabBar and UITabBarIte

Question

I am googling around so much, but nowhere I find a straight and consolidated answer.

I want to customize myUITabBarController such that:

1. the UITabBar itself is completely black
2. the text color of the item titles is white in non-highlighted state
3. the text color of the item titles is red in highlighted state
4. Use multicolored icons in the tab bar

1. Turn UITabBar black

I am guessing I need to use the UIAppearance API for this, and actually I was able to turn the UITbarBar black using: [[UITabBar appearance] setBarTintColor:[UIColor blackColor]];.

2. and 3. Modify color of item titles

However, the color of the text items doesn't seem to do what I want, after googling around, the following solutions made sense to me, but it only changes the non-highlighted state to white, highlighted stays white as well...

NSDictionary *titleAttributes = @{NSForegroundColorAttributeName : [UIColor whiteColor]};
[[UITabBarItem appearance] setTitleTextAttributes:titleAttributes forState:UIControlStateNormal];

UIColor *titleHighlightedColor = [UIColor redColor]; 
NSDictionary *highlightedTitleAttributes = @{NSForegroundColorAttributeName : titleHighlightedColor};
[[UITabBarItem appearance] setTitleTextAttributes:highlightedTitleAttributes forState:UIControlStateHighlighted];

4. Multicolored items

About the multicolored icons, so far by approach was to simply set the icons in Storyboards like this:

But this doesn't do what I want, it only shows the whole icon in grey when the item is not selected. When the item is selected, the icon completely disappears.

This is the original icon:

This is how it looks when the item is not selected:

And here it is in the selected stated, as mentioned the icon completely disappears:

So, my question is how precisely I can achieve the above mentioned requirements. What am I currently missing? Am I better off doing everything in code than in Storyboards?

Note: I am targeting iOS versions greater than 7.0, so please include any version specific information if the behaviour differs between iOS 7 and iOS 8.

Answer 1

I had the same problem as you. As far as I know there is no difference for the different iOS versions.
I solved it programmatically like this:

1. Turning the bar color black works as following (You already said it) (in AppDelegate):

   UITabBar.appearance().barTintColor = UIColor.blackColor()

2. To set the color of the title for the different states, I used this code (in AppDelegate):

   UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName!: UIColor.redColor()], forState:.Selected)
   UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName!: UIColor.whiteColor()], forState:.Normal)
   

3. (and 4.) You can achieve the different item colors, multicolored icons and different item colors for the different states, by setting the image programmatically and change the rendering mode (imageWithRenderingMode:) to UIImageRenderingMode.AlwaysOriginal, this looks as following (do this in the first view controller class for all your view controllers):

   var recentsItem = self.tabBarController!.tabBar.items![0] as UITabBarItem
   var recentsItemImage = UIImage(named:"recents.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
   var recentsItemImageSelected = UIImage(named: "recentsSelected.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
   recentsItem.image = recentsItemImage
   recentsItem.selectedImage = recentsItemImageSelected
   

I hope this helps, if you have any following questions, feel free to ask me.

Answer 2

Solution provided by smudis is great and because I don't have enough reputation to comment I decided to post the 3rd part of smudis' solution in Objective-C, in case it might help somebody:

To get a reference of the tabBar type the above code into AppDelegate's method application:didFinishLaunchingWithOptions:

UITabBarController *tbc = (UITabBarController*)self.window.rootViewController;
UITabBar *tb = tbc.tabBar;

Then the image adjustment can be done as follows:

for (UITabBarItem *tbi in tb.items) {
    tbi.selectedImage = [tbi.selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    tbi.image = [tbi.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}