title: How to properly customize UITabBar and UITabBarItem on iOS 7 and iOS 8?
body: <p>I am googling around so much, but nowhere I find a <em>straight</em> and <em>consolidated</em> answer.</p>
  
  <p>I want to customize my<code>UITabBarController</code> such that:</p>
  
  <ol>
  <li>the <code>UITabBar</code> itself is completely black</li>
  <li>the text color of the item titles is white in <em>non-highlighted</em> state</li>
  <li>the text color of the item titles is red in <em>highlighted</em> state</li>
  <li>Use multicolored icons in the tab bar</li>
  </ol>
  
  <h3>1. Turn <code>UITabBar</code> black</h3>
  
  <p>I am guessing I need to use the <code>UIAppearance</code> API for this, and actually I was able to turn the <code>UITbarBar</code> black using: <code>[[UITabBar appearance] setBarTintColor:[UIColor blackColor]];</code>.</p>
  
  <h3>2. and 3. Modify color of item titles</h3>
  
  <p>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 <em>non-highlighted</em> state to white, <em>highlighted</em> stays white as well...</p>
  
  <pre><code>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];
  </code></pre>
  
  <h3>4. Multicolored items</h3>
  
  <p>About the multicolored icons, so far by approach was to simply set the icons in <em>Storyboards</em> like this:</p>
  
  <p><img src="https://i.stack.imgur.com/bp2Ch.png" alt="enter image description here"></p>
  
  <p>But this doesn't do what I want, it only shows the whole icon in grey when the item is <em>not</em> selected. When the item is selected, the icon completely disappears.</p>
  
  <p>This is the original icon:</p>
  
  <p><img src="https://i.stack.imgur.com/3RIgS.png" alt="enter image description here"></p>
  
  <p>This is how it looks when the item is <em>not</em> selected:</p>
  
  <p><img src="https://i.stack.imgur.com/JuSIz.png" alt="enter image description here"></p>
  
  <p>And here it is in the selected stated, as mentioned the icon completely disappears:</p>
  
  <p><img src="https://i.stack.imgur.com/uksI4.png" alt="enter image description here"></p>
  
  <p>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?</p>
  
  <p><strong>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.</strong></p>