Tab Bar Item - Selected/Unselected icon

6
votes

In Xcode 6, you now have the ability to set the icon for a tab item for its selected and unselected states. Please see the descriptions in the images below:

Selected Image - The image displayed when the tab bar item is selected.

and

Image - The image used to represent the item.

The only problem is that the image for the SELECTED states does not show. It just shows blank. Anyone else have this issue? Please see the screenshots below of the results:

REPORT tab is UNSELECTED

and

REPORT tab is SELECTED

Thanks!!!

2
iosxcodeinterface-builderuitabbarcontrolleruitabbaritem
there are some suggestion, first make sure that selected image exists, and if it exists enter correct name, secondly, please check that you have images for iphone and ipad both retina and non retina. – ZAZ
@ZAZ Yes, I do have them set properly as I can choose them from a drop down menu. I created image sets for the two images and included the regular, 2x, and 3x variations for each. Everything is there. Just not sure why it's not being set. – Mario A Guzman
which device (retina or non retina) you are deploying the app? can u show the image which is not being shown – ZAZ
I've ran the app on my retina iPad, as well as the iPad 2 simulator and all the other retina simulators available. None of them seem to be working... :( – Mario A Guzman

2 Answers

3
votes

So the way to go around this:

  1. Set the tab with the default, unselected icon image you want to use in the "BAR ITEM" section in the Attributes Inspector:

enter image description here

  1. Click on the Identity Inspector, and under "USER DEFINED RUNTIME ATTRIBUTES," click the + to add a new value.

KEYPATH: selectedImage (IT HAS TO BE THIS!!!)

TYPE: Image

VALUE: The name of your selected/highlighted icon image. I use Images.xcassets for my image assets.

enter image description here

Run your app. You'll notice that the image changes to the selected (not just highlighted version of it.

Works like a charm.

0
votes

I want to add some info about the colored tab icon. To change tab selection color:

  1. Select the tabItem.
  2. Set "tintColor" attribute with your prefer color.

enter image description here