自定义选项卡栏图标颜色

Question

我目前正在使用Xcode 5开发一个列表导向的应用程序。我有一个自定义的标签栏色调，自定义的标签图标，自定义选中时标签栏图标的颜色，但是我找不到如何自定义未选中时图标的颜色。现在它只是默认的灰色，在我的绿色标签栏中几乎看不见。我想让标签栏图标的图片和名称变成白色。

有人知道如何在Xcode 5中设置标签栏图标的图像色调吗？

- ian

Answer 1

你需要为每个选项卡的（未选中的）图片设置渲染模式为UIImageRenderingModeAlwaysOriginal。因此，在你的应用代理中，获取指向标签栏的引用，然后遍历每个标签栏项目，调整图像模式。

可能有更好的方法来获取标签栏的引用，但我做了以下操作：

UIStoryboard *sb = [UIStoryboard storyboardWithName:@"Main" bundle:nil];
UITabBarController *tbc = [sb instantiateInitialViewController];
self.window.rootViewController = tbc;
UITabBar *tb = tbc.tabBar;

那么图像调整可以按以下步骤进行：

NSArray *items = tb.items;

for (UITabBarItem *tbi in items) {
    UIImage *image = tbi.image;
    tbi.selectedImage = image;
    tbi.image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}

- Matthew Burke

---

谢谢Matthew。我把那段代码放到了我的.m应用程序委托中，但是它返回了一个问题，说“不支持的配置”“在Navigation Item, Main.storyboard中不支持Plain Style。” - ian

我的代码假定选项卡栏控制器是故事板中的初始视图控制器。如果您的应用程序设置不同，那可能就是问题的根源。 - Matthew Burke

这个可以工作，但只适用于其中一张图片。基本上我有一个未选中和选中的图标。这个技巧让未选中的工作了，但选中的仍然是一团蓝色混乱。 - Halsafar

@Halsafar 那是因为你只为基础的 image 设置了渲染模式。同样地，也要为 selectedImage 进行设置，尽管你可能想将它设置为不同的图像，否则你就看不出选中和未选中之间的区别了。 - Charlie Scott-Skinner

Answer 2

你可以尝试以下方法来给所选图标着色：

// Custom the tab bar
[[UITabBar appearance] setSelectedImageTintColor:[UIColor whiteColor]];

并使用此方法对非活动图标进行着色：

[self.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"item_seleted.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"item_unselected.png"]];

- Jordan Montel

---

请注意，在iOS 7中，setFinisheSelectedImage:withFinishedUnselectedImage已被弃用。 - Matthew Burke

如果在iOS 7中它已经被弃用了，那么还有其他方法可以解决这个问题吗？还是因为苹果想保持灰色默认图标的标准？ - ian

@user2792129 - 是的，只需要我花几分钟时间就能打出我的答案 <g/>。 - Matthew Burke

嘿，如果我不想使用标题怎么办？因为它已经在图像中了。我想要使用标题空间来适配选项卡栏中心的图标。 - Sourabh Bhardwaj

更新的方法只需使用[[UITabBar appearance] setTintColor:[UIColor whiteColor]]; - thailey01

Answer 3

您可以纯粹通过在故事板中添加“用户定义的运行时属性”而不编写任何代码来完成此操作：

1. 选择您在故事板中的UITabViewController
2. 打开“文档大纲”，确保选择了场景中的“选项卡栏”视图。
3. 显示“身份验证检查器”。 您应该会看到“用户定义的运行时属性”部分。
4. 添加以下内容：
   • 键路径：tintColor
   • 类型：颜色
   • 值：选择所需颜色。

请注意，保留HTML标记。

- tebs1200

---

好知道。但用户定义的运行时属性是绝对的调试噩梦。 - Vijay Tholpadi

除了tintColor，您还能在关键路径中输入什么？ - Bidstrup

@RasmusBidstrup，获取所选 IB 项的所有相关属性。在我们的情况下是 UITabBar。因此，请前往 Apple 文档并阅读 UITabBar 文档。 - OhadM

请纠正我，但这将设置您选择图像时的颜色。他想更改项目的默认灰色而不是所选颜色？ - h3dkandi

Answer 4

尝试这种方法...对我有用。

在应用程序委托中：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{


 UITabBarController *tabBarController=(UITabBarController*)(self.window.rootViewController);
    UITabBar *tabBar=tabBarController.tabBar;
  UITabBarItem *tabBarItem1=[[tabBar items] objectAtIndex:0];//first tab bar
 [tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"yourImageSelected.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"yourImageUnselected.png"]];//image should be 30 by 30
}

运行并启动

- Tunvir Rahman Tusher

Answer 5

如果您的标签栏在可视化编辑器中，您可以在这里完成此操作。选择标签栏，在“用户定义的运行时属性”中添加属性： 键路径：selectedImageTintColor 类型：颜色 值：

- Bartłomiej Jończy

---

像魔术一样神奇。对于未被选中的图标，是否也有美丽的魔法呢？ - Aviel Gross

Answer 6

设置自定义选项卡栏，包括选中和未选中的图像。同时将选项卡项图像插入位置设置为中心。

UITabBar *tabBar = self.tabBarController.tabBar;

UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
UITabBarItem *item3 = [tabBar.items objectAtIndex:3];

[item0 setFinishedSelectedImage:[UIImage imageNamed:@"iconBlue.png"]  withFinishedUnselectedImage:[UIImage imageNamed:@"iconGray.png"] ];
[item1 setFinishedSelectedImage:[UIImage imageNamed:@"iconBlue2.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"icon-2.png"]];
[item2 setFinishedSelectedImage:[UIImage imageNamed:@"iconBlue3.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"icon-3.png"]];
[item3 setFinishedSelectedImage:[UIImage imageNamed:@"iconBlue4.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"icon-4.png"]];

item0.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
item1.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
item2.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
item3.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);

在第一个视图控制器的viewWillAppear方法中。

- Ram S

Answer 7

因为setFinishedSelectedImage:withFinishedUnselectedImage已经被弃用，所以我使用了Ram S的回答的修改版本，将其替换为：

[item0 setFinishedSelectedImage:[UIImage imageNamed:@"iconBlue.png"]  withFinishedUnselectedImage:[UIImage imageNamed:@"iconGray.png"] ];

使用：

[item0 setImage:[[UIImage imageNamed:@"iconGray.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
[item0 setSelectedImage:[[UIImage imageNamed:@"iconBlue.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

请参考UITabBarItem setFinishedSelectedImage:在iOS7中已过时以获取更多信息。

- dstudeba