使用故事板在标签栏控制器中设置选定的图像

Question

我正在使用Storyboarding，我有一个带有五个标签的标签栏控制器。 在故事板中，我可以设置标签栏项目的图像。 Apple文档建议每个标签栏项目有两个图标 - 一个用于选定状态，另一个用于未选择状态。

我无法弄清楚如何使用故事板来做到这一点。

Answer 1

您可以使用故事板设置选定的tabbar图像。 我试过，它对我有用。 选择UITabbarItem并添加运行时属性'selectedImage'，选择Type作为'Image'并将图像的名称作为其值。

我使用的是XCode 6.0，我的最低部署目标是iOS 8.0。

Answer 2

以下是Tabbar For XCode> = 8中选定/未选定图像的完整解决方案：

• 转到图像资源 - >选择图像
• 选择渲染AS：“原始图像”

• 之后转到故事板 - >选择Tabbar项目
• 在Attribute Inspectors下，设置“Selected Image”和“Image”，如下面的屏幕截图所示：

Answer 3

在XCode 8及更高版本中，您只需在图像资源中执行此操作，只需选择图像并选择渲染为“原始图像”即可。 （请查看附图）..有乐趣:)

Answer 4

是的，这不能使用故事板来完成 - 需要编写代码。

在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];

Answer 5

您现在可以在故事板中轻松完成此操作。 在您拥有的每个tabview控制器上，它应该在层次结构中包含一个Tab Bar项（看起来像一个小蓝星），单击此按钮，右侧的设置应如下图所示。 标签栏标题和图像可以在此处更改。

Answer 6

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

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

• @ 1x：约25 x 25
• @ 2x：约50 x 50
• @ 3x：约75 x 75

Answer 7

我认为最简单的方法是从Inspector设置图像。 你有一个名为Bar Item - > Image的字段，你必须在那里设置图像名称。 注意，不要与标签栏项目 - >选定图像混淆

Answer 8

应在相应的视图控制器中设置图标。 执行此操作时，您可以自由重新排列故事板主选项卡控制器内的视图控制器的顺序，而无需为每个图标更改代码（ objectAtIndex:0 ）。

viewDidLoad下行放入viewDidLoad方法：

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

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

Answer 9

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)