使用Storyboard设置选定的Tab Bar Controller图像

Question

我正在使用Storyboard，并且有一个带有五个选项卡的标签栏控制器。在Storyboard中，我可以设置标签栏项目的图像。苹果文档建议为每个选项卡栏项目准备两个图标-一个用于选定状态，另一个用于未选定状态。

我无法弄清楚如何在Storyboard中实现这一点。

- Siddharth

---

简单明了的回答：目前来看，你无法这样做，因为它只是代码。initWithTitle:image:selectedImage: - T. Benjamin Larsen

Answer 1

您可以使用故事板来设置选定的标签栏图像。我已经尝试过并且对我有效。 选择UITabbarItem并添加运行时属性“ selectedImage”，选择类型为“ Image”，并将您的图像名称作为其值。 我正在使用XCode 6.0，我的最小部署目标是iOS 8.0。

- Hamza Azad

---

新版的XCode在属性检查器中有一个“已选图像”字段，但似乎无法正常工作。幸运的是，这个答案对我有用。 - Code Commander

我尝试过相同的方法，但对我没用。我不确定原因是什么。 - Mansi Panchal

谢谢。如果不起作用，可以先尝试清理一下。 - Marek Stój

在Xcode 7上进行测试 - UITabBarItem的Attributes Inspector中的Selected Image字段现在对我来说似乎运作良好。在iOS 9上进行测试。不确定它是否仍然适用于iOS 8设备。编辑：在8.4模拟器中测试 - 在那里使用storyboard中的选定图像字段也可以工作。 - sudoExclaimationExclaimation

现在您可以从检查器中使用 Bar Item -> Image 字段，注意不要使用 Tab Bar Item -> Selected Image。 - Loebre

Answer 2

以下是适用于XCode >= 8的Tabbar图像选中/未选中的完整解决方案:

• 前往“Image assets” -> 选择图像
• 选择“Render As: Original Image”

• 接下来，进入Storyboard -> 选择Tabbar项目
• 在属性检查器下，按照以下截图设置“Selected Image”和“Image”，就这么简单：

- Sagar Sukode

---

这对我有用。实际上，设置Render AS：“Original Image”并不是必要的，因为默认值也可以做到。 - Reinhard Männer

Answer 3

在XCode 8及以上版本中，您可以在“图像资源”中轻松完成此操作，只需选择图像并选择“呈现为“原始图像”即可。（请查看附加的图片）。享受乐趣 :)

- Infaz

---

这是非常重要的一部分，仅仅将UIImage设置为selectedImage对我来说没有任何作用。（我必须指出，我是通过编程来完成这个过程的）感谢@Infaz。 - mike.tihonchik

Answer 4

是的，这不能使用Storyboard完成 - 需要编写代码。

在 UINavigationViewController 的 viewDidLoad 方法中，我们可以编写以下代码 -

UITabBar *tabBar = self.tabBar;

UITabBarItem *targetTabBarItem = [[tabbar items] objectAtIndex:0]; // whichever tab-item
UIImage *selectedIcon = [UIImage imageNamed:@"name-of-selected-image.png"];
[targetTabBarItem setSelectedImage:selectedIcon];

- Siddharth

---

没有名为 UINavigationViewController 的类，如果你指的是 UINavigationController，它没有叫做 tabBar 的属性。 - Steve

实际的第一行代码应该是这样的：UITabBar *tabBar = self.navigationController.tabBarController.tabBar; - CTiPKA

Answer 5

您现在可以在Storyboard中轻松完成这项操作。对于每个TabViewController，它应该在层次结构中包含一个选项卡栏项目（看起来像一个小蓝色星星），单击此项，右侧的设置应该如下图所示。选项卡栏标题和图像可以在此更改。

- Trianna Brannon

---

@DavidNelson，您只能填写图像部分，必须将所选的图像部分留空才能正常工作。 - Trianna Brannon

在这种情况下，“Selected Image”是什么？为什么有“选项卡栏项目”和“栏项目”的单独部分？如果我选择系统项目之一，它可以正常工作 - 自定义图像会失败。 - wcochran

我在图像的位置得到了一个蓝色的正方形。请提供更多细节，如何使其工作？我正在使用xcode 7.1。可能有一些约束条件吗？高度、宽度等等？ - IamMashed

嗨！当选中标签栏时，我得到了一个彩色的正方形代替我想要的自定义图像。这是在使用你的答案中所示的故事板添加选定图像时发生的。有什么想法为什么会发生这种情况吗？我正在使用Xcode 9.2。 - Karthik Kannan

Answer 6

SWIFT 3.0 --> 设置选项卡按钮图像的理想方式如下：

首先设置您要用于按钮的图像：

    let homeImage = UIImage(named: "TabHome")
    let homeTappedImage = UIImage(named: "TabHomeRed")

然后设置类型为UITabButtonItem的按钮：

    let homeButton = UITabBarItem(title: homeText, image: homeImage, selectedImage: homeTappedImage)

    //with this method you set the image when the button is not selected 
    homeButton.image = homeImage?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)


    //with this method you set the image when the button is selected 
    homeButton.selectedImage = homeTappedImage?.withRenderingMode(.alwaysOriginal)

- MhmdRizk

Answer 7

我认为最简单的方法是从检查器中设置图像。 你有一个名为Bar Item -> Image的字段，就是在那里设置图像名称的。 注意，不要与Tab Bar Item -> Selected Image混淆。

- Loebre

Answer 8

在新版的Xcode 8中，您可以在Storyboard中完成操作，而无需像高分答案所建议的那样定义运行时属性。

不要忘记图片应该有以下尺寸：

• @1x: 约为25 x 25
• @2x: 约为50 x 50
• @3x: 约为75 x 75

- Tiago Mendes

---

非常困惑如何设置默认选项卡，感谢您的指导。 - Ethan Parker

我很高兴能够帮助到你 :D - Tiago Mendes

Answer 9

图标应该设置在相应的视图控制器中。这样做可以自由地重新排列故事板主选项卡控制器中的视图控制器顺序，而无需更改每个图标的代码（objectAtIndex：0）。

将以下行放入viewDidLoad方法中：

 if (self.navigationController.viewControllers.count < 2)
     self.navigationController.tabBarItem.selectedImage = [UIImage imageNamed:@"image-selected.png"];

< p > if条件确保按钮仅在最顶层的视图控制器中更改。当您将视图控制器在导航层次结构中重用为子视图控制器时，这是必需的。

- krizzzn

---

这应该是被接受的答案，需要注意“相应的视图控制器”是UINavigationController的根视图控制器。 - Steve