How to correctly show the tab bar item icon

Question

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

When I select an element of the tab bar using the storyboard in my attribute inspector, If I set the "Image element" element as checked, it will show some strange thing:

Of course I don’t want to. Perhaps the problem is that my marked icon is blue.

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

Also, can someone tell me what the difference is in “Tab Bar Element” and “Bar Element”?

Answer 1

To solve the problem with the “weird thing” with the image, you can do it in code: (Sorry, I don’t know the right word either)

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

Then give this image a UITabItem image:

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

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

You can also resize your image to the desired size, either outside (using the preview) or inside with the code (find a way to resize UIImage).

Answer 2

• Size error. I recommend using Sketch as an application icon tool that can import your icon, custom or downloaded, in up to three sizes (@ 1x, @ 2x and @ 3x). And I do not recommend you set the size of the icon in the code.
• Highlight the problem: you showed that you have different types of light for the icon, you can set the blue color as the highlight icon for the Selected Image in the Tab Bar Item panel.
• The problem with the item. I think the Bar Item is part of the Tab Bar Item . If you used the Default icon, such as More , favorited , feather , you do not need to set the Tab Bar Item . And you should select your icon in the Tab Bar Item after you select the System Item as Custom .

Answer 3

I just answer the same question! And then I'll find out!

There is nothing wrong with your code or setup

This is about your IMAGE

You can just watch the applications on your phone (almost). Gray tab bar item icons.

So, the icon will just display their UN Hollow in gray !!

[In addition, according to the official API, they wrote like this:

By default, unselected and selected images are automatically created from alpha values ​​in the original images . To prevent the system from coloring, create images using UIImageRenderingModeAlwaysOriginal .

]

Therefore, the solution: USE Sketch to make your icon instance heart part empty