Setting UITabBarItem image in storyboard but different looking after run app

Question

1) i add four png image in Assets.xcassets.

2)In storyboard, i embed in a Tab Bar Controller. Setting TabBarItem image.

3) But after running app. I found the image look seems a little different with my setting and i don't known why, can anyone know why and how to fixed? Waiting for you help,thanks

Answer 1

The reason why the image looks different is because it is being filled with plane colour, while your .png contains some white instead of empty background. UIImage has a property called renderingMode. This property can be default, AlwaysOrigin, AlwaysTemplate.

So for UITabBarItem the default rendering mode is AlwaysTemplate, that is why your image is being filled. And since your image contains a white background inside the search icon (where it should have contained no drawing) it gets also filled.

So you have two options:
1. Remove the white background from the icon.
2. Since you are using XCAssets, you can change the rendering mode in XCAssets attributes pane.

Here is where you can do that from XCAssets:

Answer 2

you need set UIImage.renderingMode, try this

NSArray *items = self.tabBar.items;
UITabBarItem *item = items[0];
item.image = [[UIImage imageNamed:@"tabbar_recruit.png"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];