How to properly customize UITabBar and UITabBarItem on iOS 7 and iOS 8?

nburk picture nburk · Nov 26, 2014 · Viewed 13.1k times · Source

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:

enter image description here

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:

enter image description here

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

enter image description here

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

enter image description here

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

smudis picture smudis · Nov 28, 2014

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.