简体   繁体   English

更改故事板中的标签栏项目选定颜色

[英]Change tab bar item selected color in a storyboard

I want to change my tab bar items to be pink when selected instead of the default blue.我想在选择时将我的标签栏项目更改为粉红色,而不是默认的蓝色。

How can i accomplish this using the storyboard editor in Xcode 6?如何使用 Xcode 6 中的故事板编辑器完成此操作?

Here are my current setting which are not working, the blue background works but the pink doesnt work:这是我当前无法使用的设置,蓝色背景有效,但粉红色背景无效:

在此处输入图片说明

Add Runtime Color attribute named "tintColor" from StoryBoard.从 StoryBoard 添加名为“tintColor”的运行时颜色属性。 This is working( for Xcode 8 and above ).这是有效的(对于 Xcode 8 及更高版本)。

if you want unselected color.. you can add unselectedItemTintColor too.如果你想要未选择的颜色..你也可以添加unselectedItemTintColor

将 tintColor 设置为运行时属性

This elegant solution works great on SWIFT 3.0 , SWIFT 4.2 and SWIFT 5.1 :这个优雅的解决方案在SWIFT 3.0SWIFT 4.2SWIFT 5.1上效果很好:

On the Storyboard:在故事板上:

  1. Select your Tab Bar选择您的标签栏
  2. Set a Runtime Attibute called tintColor for the desired color of the Selected Icon on the tab bar为选项卡栏上选定图标的所需颜色设置名为tintColor运行时属性
  3. Set a Runtime Attibute called unselectedItemTintColor for the desired color of the Unselected Icon on the tab bar设置名为unselectedItemTintColor运行时属性,用于选项卡栏上未选择图标的所需颜色

在此处输入图片说明

Edit: Working with Xcode 8/10, for iOS 10/12 and above .编辑:使用 Xcode 8/10,适用于 iOS 10/12 及更高版本

In Swift, using xcode 7 (and later), you can add the following to your AppDelegate.swift file:在 Swift 中,使用 xcode 7(及更高版本),您可以将以下内容添加到 AppDelegate.swift 文件中:

UITabBar.appearance().tintColor = UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 1.0)

This is the what the complete method looks like:这是完整方法的样子:

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

    // I added this line
    UITabBar.appearance().tintColor = UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 1.0)

    return true
}

In the example above my item will be white.在上面的例子中,我的项目是白色的。 The "/255.0" is needed because it expects a value from 0 to 1. For white, I could have just used 1. But for other color you'll probably be using RGB values. “/255.0”是必需的,因为它需要一个从 0 到 1 的值。对于白色,我可以只使用 1。但是对于其他颜色,您可能会使用 RGB 值。

On Xcode8 I have changed the ImageTint from the storyboard and it works well.Xcode8我更改了情节ImageTint ,并且效果很好。

在此处输入图片说明

The result:结果:

在此处输入图片说明

Swift 3 |斯威夫特 3 | Xcode 10 Xcode 10

If you want to make all tab bar items the same color (selected & unselected)...如果您想让所有标签栏项目具有相同的颜色(选中和未选中)...


Step 1第1步

Make sure your image assets are setup to Render As = Template Image .确保您的图像资产设置为Render As = Template Image This allows them to inherit color.这允许他们继承颜色。

Xcode 资产


Step 2第2步

Use the storyboard editor to change your tab bar settings as follows:使用情节提要编辑器更改标签栏设置,如下所示:

  • Set Tab Bar: Image Tint to the color you want the selected icon to inherit.Tab Bar: Image Tint设置为您希望所选图标继承的颜色。
  • Set Tab Bar: Bar Tint to the color you want the tab bar to be.Tab Bar: Bar Tint设置为您希望标签栏的颜色。
  • Set View: Tint to the color you want to see in the storyboard editor, this doesn't affect the icon color when your app is run.View: Tint设置为您希望在故事板编辑器中看到的颜色,这不会影响您的应用程序运行时的图标颜色。

Xcode 故事板编辑器


Step 3第 3 步

Steps 1 & 2 will change the color for the selected icon.步骤 1 和 2 将更改所选图标的颜色。 If you still want to change the color of the unselected items, you need to do it in code.如果你还想改变未选中项的颜色,则需要在代码中进行。 I haven't found a way to do it via the storyboard editor.我还没有找到通过故事板编辑器来做到这一点的方法。

Create a custom tab bar controller class...创建自定义标签栏控制器类...

//  TabBarController.swift

class TabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // make unselected icons white
        self.tabBar.unselectedItemTintColor = UIColor.white
    }
}

... and assign the custom class to your tab bar scene controller. ...并将自定义类分配给您的标签栏场景控制器。

Xcode 故事板编辑器


If you figure out how to change the unselected icon color via the storyboard editor please let me know.如果您想知道如何通过故事板编辑器更改未选择的图标颜色,请告诉我。 Thanks!谢谢!

将此代码放在要更改颜色的视图控制器的 viewDidLoad 中

[[UITabBar appearance] setSelectedImageTintColor:[UIColor whiteColor]];

This best way is to change Image Tint in storyboard最好的方法是在情节Image Tint中更改Image Tint

在此处输入图片说明

You can also set selected image bar tint color by key path:您还可以通过关键路径设置选定的图像条色调颜色:

在此处输入图片说明

Hope this will help you!!希望能帮到你!! Thanks谢谢

XCode 8.2、iOS 10、Swift 3:现在tabBar有一个unselectedItemTintColor属性:

self.tabBar.unselectedItemTintColor = UIColor(red: 0/255.0, green: 200/255.0, blue: 0/255.0, alpha: 1.0)

You can change colors UITabBarItem by storyboard but if you want to change colors by code it's very easy:您可以通过情节提要更改 UITabBarItem 的颜色,但如果您想通过代码更改颜色,则非常简单:

// Use this for change color of selected bar // 使用它来改变选定条的颜色

   [[UITabBar appearance] setTintColor:[UIColor blueColor]];

// This for change unselected bar (iOS 10) // 这用于更改未选中的栏(iOS 10)

   [[UITabBar appearance] setUnselectedItemTintColor:[UIColor yellowColor]];

// And this line for change color of all tabbar // 此行用于更改所有标签栏的颜色

   [[UITabBar appearance] setBarTintColor:[UIColor whiteColor]];

不知何故,我们无法单独使用情节提要更改选项卡栏所选项目的色调颜色,因此我在我的 ViewDidLoad 中添加了以下代码,希望这会有所帮助。

[[UITabBar appearance] setTintColor:[UIColor whiteColor]]; 

Add this code in your app delegate -did_finish_launching_with_options function将此代码添加到您的应用程序委托 -did_finish_launching_with_options 函数中

UITabBar.appearance().tintColor = UIColor( red: CGFloat(255/255.0), green: CGFloat(99/255.0), blue: CGFloat(95/255.0), alpha: CGFloat(1.0) )

put the RGB of the required color放入所需颜色的RGB

This is the solution in Swift 3 that works in iOS 10:这是适用于 iOS 10 的 Swift 3 中的解决方案:

Firstly, you create your own tab bar controller subclass and add it to your tab controller in your storyboard.首先,您创建自己的标签栏控制器子类并将其添加到故事板中的标签控制器。 In the viewDidLoad() method you can then customize the tab bar.viewDidLoad()方法中,您可以自定义标签栏。 It should be stated here that the tintColor attribute of the tabBar represents the color of the selected item not the color of the unselected ones!这里需要说明的是, tabBartintColor属性代表的是选中项的颜色,而不是未选中项的颜色! In order to change the color of the unselected items, I recommend looping through each item and use the original colors of your images, so they are not rendered as grey automatically.为了更改未选择项目的颜色,我建议循环遍历每个项目并使用图像的原始颜色,这样它们就不会自动呈现为灰色。

class CustomTabBarVC: UITabBarController
{
    override func viewDidLoad()
    {
        super.viewDidLoad()

        self.tabBar.tintColor = AppColor.normalRed
        self.tabBar.barTintColor = .white
        self.tabBar.isTranslucent = true

        if let items = self.tabBar.items
        {
            for item in items
            {
                if let image = item.image
                {
                    item.image = image.withRenderingMode( .alwaysOriginal )
                }
            }
        }
    }
}

The only downside with this approach is that your item images must already have the desired color you aim for.这种方法的唯一缺点是您的项目图像必须已经具有您想要的颜色。

You can subclass the UITabBarController , and replace the one with it in the storyboard.您可以UITabBarController ,并在故事板中用它替换那个。 In your viewDidLoad implementation of subclass call this:在子类的viewDidLoad实现中调用:

[self.tabBar setTintColor:[UIColor greenColor]];

Image Tint from storyboard worked for me.故事板中的图像色调对我有用。

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM