iOS：为什么自定义标签栏项目仅显示为灰色轮廓？

Question

I am trying to set the tab bar icons of my UITabBarController with custom *.png files (one for the selected and one for unselected).

The images are all in non-interlaced png format and are named correctly (@2x, @3x, etc) residing in an *.imageset.

But the tab bar items are only shown as silhouettes like this:

I tried to set these images within Interface Builder, without success. Then I also tried to set them programmatically in the "loadView" function of MyTabBarController (which is extending UITabBarController) like this:

UIImage *selectedImage;
UIImage *unselectedImage;

// tab1
selectedImage = [UIImage imageNamed:@"cmdGamesActive"];
unselectedImage = [UIImage imageNamed:@"cmdGamesInactive"];
UITabBarItem *item1 = [self.tabBar.items objectAtIndex:0];
item1 = [item1 initWithTitle:@"Games" image:unselectedImage selectedImage:selectedImage];

// tab2
selectedImage = [UIImage imageNamed:@"cmdFriendsActive"];
unselectedImage = [UIImage imageNamed:@"cmdFriendsInactive"];
UITabBarItem *item2 = [self.tabBar.items objectAtIndex:1];
item2 = [item2 initWithTitle:@"Friends" image:unselectedImage selectedImage:selectedImage];

// tab3
selectedImage = [UIImage imageNamed:@"cmdTrophiesActive"];
unselectedImage = [UIImage imageNamed:@"cmdTrophiesInactive"];
UITabBarItem *item3 = [self.tabBar.items objectAtIndex:2];
item3 = [item3 initWithTitle:@"Trophies" image:unselectedImage selectedImage:selectedImage];

// tab4
selectedImage = [UIImage imageNamed:@"cmdSettingsActive"];
unselectedImage = [UIImage imageNamed:@"cmdSettingsInactive"];
UITabBarItem *item4 = [self.tabBar.items objectAtIndex:3];
item4 = [item4 initWithTitle:@"Settings" image:unselectedImage selectedImage:selectedImage];

... with the same result.

Any ideas how to solve this issue ?

Answer 1

According to this answer , I did something extra and kind of have answer for you here. I have my custom UITabBarController, which is linked with my UITabBarController in the StoryBoard file. So in order to remove the automatic tint provided by iOS when the TabBar is unselected, I ended up removing it in this manner. The images can be a vast variety of images but just in the way recommended here . Here it goes:

NSArray *navConArr = self.viewControllers;//self is custom UITabBarController
UINavigationController *naviOne = [navConArr objectAtIndex:0];//I have 3 different tabs, objectAtIndex:0 means the first tab navigation controller
UITabBarItem *naviBtn  = naviOne.tabBarItem;
UIImage *image = [[UIImage imageNamed:@"iconNaviOne"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[naviBtn setSelectedImage:image];
[naviBtn setImage:image];

Thankfully, this works like a charm (:

Answer 2

I was facing a similar issue. I had chosen few icons for my tabs such as 'mic', 'smiley' and 'settings'.

But the only things visible when I executed the program were grey and blue squares.

I modified my '.png' images to be transparent and now they are visible as they were intended to.

ie, make sure the images used for tab icons do not have a background.

Answer 3

This should do the trick:

UITabBarItem *item0 = [_tabBar.items objectAtIndex:0];
item0.image  = [[UIImage imageNamed:@"edit_profile_tab"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
item0.selectedImage  = [[UIImage imageNamed:@"edit_profile_tab_active"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];