CODEWITHSUNDEEP
iosuitableviewstoryboarduinavigationbaruitabbar
Rainer Liao
Rainer Liao

Reputation: 223

How to show the tab bar item's icon correctly

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.

checked is blue unchecked is gray

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:

strange

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"?

enter image description here

Upvotes: 5

Views: 3224

Answers (3)

Microos
Microos

Reputation: 1768

I just meet the same question!And then I figure out it!

There is nothing wrong with your code or setting

It's about your IMAGEs

You can just look at the apps on your phone.(almost)Any tab bar item icons are in gray.

So the Icon will just display their UN Hollow parts in gray!!

[Additionally,according to official API,they wrote like this:

By default, unselected and selected images are automatically created from the alpha values in the source images. To prevent system coloring, provide images with UIImageRenderingModeAlwaysOriginal.

]

Consequently the solution is : USE Sketch to make your instance's icon heart-part to be hollow

Upvotes: 0

Yichen Zhou
Yichen Zhou

Reputation: 446

  • 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.

Upvotes: 2

Lord Zsolt
Lord Zsolt

Reputation: 6557

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).

Upvotes: 2

Related Questions