Reputation: 223
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"?
Upvotes: 5
Views: 3224
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
Reputation: 446
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.Selected Image
in the panel Tab Bar Item
.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
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