Setting Selected Image in Tab Bar Controller with Storyboard

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

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 2

Here is complete solution for selected/unselected image in Tabbar For XCode >= 8:

• Go to Image assets -> select image
• Select Render AS: "Original Image"

• After that go to storyboard -> Select Tabbar Item
• Under Attribute Inspectors, set "Selected Image" & "Image" as shown in following screenshot, that`s it:

Answer 3

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 4

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 5

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.

Answer 6

In the new Xcode 8 you can do in Storyboard without needing to defined the runtime attributes as is suggested in the high pointed answer.

Don't forget that image should have this size:

• @1x : about 25 x 25
• @2x : about 50 x 50
• @3x : about 75 x 75

Answer 7

I think that the easiest way is setting the image from the Inspector. you have a field called Bar Item -> Image, and it is in there where you have to set the image name. Watch out, not confuse with the Tab Bar Item -> Selected Image

Answer 8

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 9

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.