Setting Selected Image in Tab Bar Controller with

Question

I am using Storyboarding and I have a tab bar controller with five tabs. In the storyboard, I am able to set the image for the tab bar item. Apple docs suggest to have two icons for each tab bar item - one for selected and one for the unselected state.

I am not able to figure out how I can do this using storyboard.

Answer 1

The icon should be set in the corresponding view controller. When doing this you're free to rearrange the order of view controllers inside the storyboards main tab controller without having to change the code (objectAtIndex:0) for each and every icon.

Put the following line into the viewDidLoad method:

 if (self.navigationController.viewControllers.count < 2)
     self.navigationController.tabBarItem.selectedImage = [UIImage imageNamed:@"image-selected.png"];

The ifcondition makes sure that the button is only changed for the top most view controller. This is required when you reuse view controllers in a navigation hierarchy as sub view controllers.

Answer 2

You can use storyboard to set selected image of tabbar. I tried and it worked for me. Select the UITabbarItem and add a run-time attribute 'selectedImage', select Type as 'Image' and give the name of your image as its value.

I am using XCode 6.0 and my minimum deployment target is iOS 8.0.

Answer 3

Yes, this cannot be done using storyboards - needs code to be written.

In the UINavigationViewController's viewDidLoad method, we can write the following code -

UITabBar *tabBar = self.tabBar;

UITabBarItem *targetTabBarItem = [[tabbar items] objectAtIndex:0]; // whichever tab-item
UIImage *selectedIcon = [UIImage imageNamed:@"name-of-selected-image.png"];
[targetTabBarItem setSelectedImage:selectedIcon];

Answer 4

SWIFT 3.0 --> The Ideal way to set your tab bar button images is as follows :

first set the images you want to use for the button :

    let homeImage = UIImage(named: "TabHome")
    let homeTappedImage = UIImage(named: "TabHomeRed")

then set the button of type UITabButtonItem :

    let homeButton = UITabBarItem(title: homeText, image: homeImage, selectedImage: homeTappedImage)

    //with this method you set the image when the button is not selected 
    homeButton.image = homeImage?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)


    //with this method you set the image when the button is selected 
    homeButton.selectedImage = homeTappedImage?.withRenderingMode(.alwaysOriginal)

Answer 5

In XCode 8 and above you can simply do it in Image assets,Just select the image and select Render as "Original Image". (Please check attached image)..Have FUN :)

Answer 6

You can now do this easily in storyboard. On each tabviewcontroller that you have, it should contain a Tab Bar Item in the hierarchy (looks like a little blue star), Click on this and the settings on the right should look like the image below. The tab bar title & image can be changed here.