UITabBar iOS Custom Icons

Question

I am developing a tabbed application and I want to integrate custom background and UITabbar icons. I already inserted a custom background, but I have a problem with the icons.

Here's what the icons should look like:

But after adding icons for each view in the storyboard, I get gray icons:

Does anyone have an idea why the icons are displayed in this way?

Many thanks!

Answer 1

This is how I do it in one of my applications. In your AppDelegates didFinishLaunchingWithOptions didFinishLaunchingWithOptions: add this and fill in the image names:

  UITabBarController *tabController = (UITabBarController *)self.window.rootViewController; //tab1 UIImage *selectedImage = [UIImage imageNamed:@"home-tab-selected"]; UIImage *unselectedImage = [UIImage imageNamed:@"home2-tab"]; MyTabBar *tabBar = (MyTabBar *)tabController.tabBar; UITabBarItem *item1 = [tabBar.items objectAtIndex:0]; [item1 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage]; //tab2 selectedImage = [UIImage imageNamed:@"customers-tab-selected"]; unselectedImage = [UIImage imageNamed:@"customers-tab"]; UITabBarItem *item2 = [tabBar.items objectAtIndex:1]; [item2 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage]; //tab3 selectedImage = [UIImage imageNamed:@"maps-tab-selected"]; unselectedImage = [UIImage imageNamed:@"maps-tab"]; UITabBarItem *item3 = [tabBar.items objectAtIndex:2]; [item3 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage]; //tab4 selectedImage = [UIImage imageNamed:@"reports-tab-selected"]; unselectedImage = [UIImage imageNamed:@"reports-tab"]; UITabBarItem *item4 = [tabBar.items objectAtIndex:3]; [item4 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage]; //tab5 selectedImage = [UIImage imageNamed:@"orders-tab-selected"]; unselectedImage = [UIImage imageNamed:@"orders-tab"]; UITabBarItem *item5 = [tabBar.items objectAtIndex:4]; [item5 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage]; if ([tabBar respondsToSelector:@selector(setBackgroundImage:)]) { // ios 5 code here [tabBar setBackgroundImage:[UIImage imageNamed:@"tab-bg"]]; } 

Great for me.

Answer 2

Using Xcode 6 to be able to modify images directly from the Storyboard, you can do this:

 @IBDesignable class CustomizedTabBarItem: UITabBarItem { @IBInspectable var finalImage:UIImage = UIImage() { didSet { self.image = finalImage.imageWithRenderingMode(.AlwaysOriginal) } } @IBInspectable var finalSelectedImage:UIImage = UIImage() { didSet { self.selectedImage = finalSelectedImage.imageWithRenderingMode(.AlwaysOriginal) } } } 

After that, you just need to set the images in the storyboard

Answer 3

I can not comment yet, so I will add as an answer.

Since iOS 7 setFinishedSelectedImage:withFinishedUnselectedImage: deprecated.

To solve this problem you can do it like this:

 UIImage *selectedImage = [UIImage imageNamed:@"tabbar-highlight"]; selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; UIImage *unselectedImage = [UIImage imageNamed:@"tabbar"]; unselectedImage = [unselectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; tabBarItem = [[UITabBarItem alloc] initWithTitle:@"TabBarItem1" image:unselectedImage selectedImage:selectedImage]; // //OR // UIImage *selectedImage = [UIImage imageNamed:@"tabbar-highlight"]; selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; UIImage *unselectedImage = [UIImage imageNamed:@"tabbar"]; unselectedImage = [unselectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; [yourTabBarItem setImage:unselectedImage]; [yourTabBarItem setSelectedImage:selectedImage]; 

Hope this help clarifies for iOS7 +.

Answer 4

You can set the finished image of the icons on the tab using setFinishedSelectedImage:withFinishedUnselectedImage: on UITabBarItem

Check out the docs here (look under Appearance)

The default behavior of UITabBarItem is to create a mask based on your icon, then it applies this special blue treatment as your vision.

Answer 5

You can also keep it simple;)

  [tabBarItemName setSelectedImage:[UIImage imageNamed:@"image name"]]; 

You need to declare the name tabBarItemName in ViewController.h

Answer 6

Updated version for Julien's answer about IBInspectable below

 import UIKit @IBDesignable class CustomTabBarItem: UITabBarItem { @IBInspectable var finalImage: UIImage = UIImage() { didSet { self.image = finalImage.withRenderingMode(.alwaysOriginal) } } @IBInspectable var finalSelectedImage: UIImage = UIImage() { didSet { self.selectedImage = finalSelectedImage.withRenderingMode(.alwaysOriginal) } } }