How to show the tab bar item's icon correctly

Question

I have created an application using storyboard and has a tab bar controller with 3 tabs. Each tab has a tab icon and a tab title, and I have two styles images (checked and unchecked) for the tab icons. Both are 54*54.

When I select the tab bar item using storyboard, in its attributes inspector, If I set the Bar item's Image to be the checked one , it will show some strange thing like this:

Of course that's not I want. I guess maybe the problem is that my checked icon is blue.

I am wondering how can I get the right icon for the tab. Both in right size and appearance.

Also, could someone tell me what's the difference about "Tab Bar Item" and "Bar Item"?

Answer 1

To resolve the problem with 'strange thing' with the image, you can do this in code: (Sorry, I don't know the proper word for that either)

UIImage *image = [[UIImage imageNamed:@"imageName"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

Then assign this image to the UITabItem's image:

UITabBarItem * tabItem = [tabBarController.tabBar.items objectAtIndex:0];
tabItem.image = image;

I don't exactly know how you can do this in storyboard.

You could also resize your image to the correct size, either outside (using preview) or inside, with code (Search for a method to resize an UIImage).

Answer 2

• Size Issue: I recommend you to use Sketch as you App Icon Tool which is capable of importing your icon, custom one or downloaded one, to three size (@1x,@2x and @3x) conveniently. And I do not recommend you set your icon's size in the code.
• Highlight Issue: You showed you have different-light types for icon, you can set blue one as the highlight-icon for Selected Image in the panel Tab Bar Item.
• Item Bar Issue: I think the Bar Item is part of Tab Bar Item. If you just used the Default icon, like More, favorited, feather, then you do not need to set the Tab Bar Item. And you shall choose your own icon in the Tab Bar Item after you selected the System Item as Custom.