xcode - iOS filling my TabBar icon image?

I've set the selected image for my Tab Bar programatically in xcode as fowllows:

[tabItem setSelectedImage:[UIImage imageNamed:@"tabBar_Curriculum_active"]];

This is how 'tabBar_Curriculum_active' image looks like: enter image description here

But this is how it's rendered in the TabBar:

enter image description here

It's like iOS decided to ignore the white lines the designer added to the icon! Any ideas of what might be going on and how to fix it?

3 Answers

  1. Jack- Reply


    Just should add imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal to the selectedImage

    Something like this:

     [tabItem selectedImage: [[UIImage imageNamed:[imageName stringByAppendingString:@"tabBar_Curriculum_active"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]]
  2. Jackson- Reply


    You have to add two Image Sets. You've only added one thus far. One set is the icon that should appear when the tab is selected and the other when it is not.

    In the image below, My View Controller is embedded in a Navigation Controller, so I add my Tab Bar Item to the Navigation Controller.

    In attributes inspector, you'll under Tab Bar Item section -> There is a selected image dropdown. Under Bar Item Image section -> There is a drop down called image. This is where you selected an image in an unselected state.

    enter image description here

  3. Jacob- Reply


    It looks like the problem is that the white parts of your icon are opaque, rather than transparent. The image that you get in the tab bar is defined not by color, but by alpha. You will have to go back to your designer to fix the alpha, or use a tool like Sketch to fix your icons.

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>