Search code examples
iosobjective-cuitabbarcontrolleruitabbaruitabbaritem

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

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.

Solution

  • 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.