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

Setting Selected Image in Tab Bar Controller with Storyboard

提问by Siddharth

I am using Storyboarding and I have a tab bar controller with five tabs. In the storyboard, I am able to set the image for the tab bar item. Apple docs suggest to have two icons for each tab bar item - one for selected and one for the unselected state.

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

I am not able to figure out how I can do this using storyboard.

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

回答by Hamza Azad

You can use storyboard to set selected image of tabbar. I tried and it worked for me. Select the UITabbarItem and add a run-time attribute 'selectedImage', select Type as 'Image' and give the name of your image as its value.

您可以使用情节提要设置选项卡栏的选定图像。我试过了，它对我有用。选择 UITabbarItem 并添加运行时属性“selectedImage”，选择“类型”为“图像”，并将图像名称作为其值。

I am using XCode 6.0 and my minimum deployment target is iOS 8.0.

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

回答by Sagar Sukode

Here is complete solution for selected/unselected image in Tabbar For XCode >= 8:

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

• Go to Image assets -> select image
• Select Render AS: "Original Image"

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

• After that go to storyboard -> Select Tabbar Item
• Under Attribute Inspectors, set "Selected Image" & "Image" as shown in following screenshot, that`s it:

• 之后去故事板 - >选择标签栏项目
• 在属性检查器下，设置“Selected Image”和“Image”，如下图所示，就是这样：

回答by Infaz

In XCode 8 and above you can simply do it in Image assets,Just select the image and select Render as "Original Image". (Please check attached image)..Have FUN :)

在 XCode 8 及更高版本中，您可以简单地在图像资产中执行此操作，只需选择图像并选择渲染为“原始图像”。（请检查附件图片）..玩得开心:)

回答by Siddharth

Yes, this cannot be done using storyboards - needs code to be written.

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

In the UINavigationViewController's viewDidLoadmethod, we can write the following code -

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

回答by Trianna Brannon

You can now do this easily in storyboard. On each tabviewcontroller that you have, it should contain a Tab Bar Item in the hierarchy (looks like a little blue star), Click on this and the settings on the right should look like the image below. The tab bar title & image can be changed here.

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

回答by Tiago Mendes

In the new Xcode 8 you can do in Storyboard without needing to defined the runtime attributes as is suggested in the high pointed answer.

在新的 Xcode 8 中，您可以在 Storyboard 中进行操作，而无需按照高分答案中的建议定义运行时属性。

Don't forget that image should have this size:

不要忘记图像应该有这个尺寸：

• @1x : about 25 x 25
• @2x : about 50 x 50
• @3x : about 75 x 75

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

回答by Loebre

I think that the easiest way is setting the image from the Inspector. you have a field called Bar Item -> Image, and it is in there where you have to set the image name. Watch out, not confuse with the Tab Bar Item -> Selected Image

我认为最简单的方法是从 Inspector 设置图像。您有一个名为Bar Item -> Image的字段，您必须在其中设置图像名称。注意，不要与Tab Bar Item -> Selected Image混淆

回答by krizzzn

The icon should be set in the corresponding view controller. When doing this you're free to rearrange the order of view controllers inside the storyboards main tab controller without having to change the code (objectAtIndex:0) for each and every icon.

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

Put the following line into the viewDidLoadmethod:

将以下行放入viewDidLoad方法中：

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

The ifcondition makes sure that the button is only changed for the top most view controller. This is required when you reuse view controllers in a navigation hierarchy as sub view controllers.

该if条件确保按钮仅针对最顶层的视图控制器进行更改。当您在导航层次结构中重用视图控制器作为子视图控制器时，这是必需的。

回答by MhmdRizk

SWIFT 3.0 --> The Ideal way to set your tab bar button images is as follows :

SWIFT 3.0 --> 设置标签栏按钮图像的理想方法如下：

first set the images you want to use for the button :

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

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

then set the button of type UITabButtonItem :

然后设置类型为 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)