更改标签栏项目图像和文本颜色iOS

75

这是我的标签栏：

在此处输入图片说明

下图显示了正在运行的程序并选择了“ NEWS”项：

在此处输入图片说明

很明显，酒吧色调颜色可以按我的要求正常工作！

但是tintColor仅影响图像而不影响文本。

另外，在选择了一个项目（就像上面说的，新闻）项目颜色变蓝！如何防止这种情况发生？我希望它保持白色。

为什么在选择文本时将其更改为白色，而在未选择文本时却将其更改为白色？

我基本上希望项目颜色和文本颜色始终保持白色。

我该如何实现？谢谢你的帮助。

是否需要为每个单独的项目提供快速代码？

编辑：

在此处输入图片说明

ios  swift  uitabbar  uitabbaritem 
— 格雷格·佩科里
source
您可以为所有白色和灰色图标创建图像吗？可以在需要时进行更改。
— 最多
选择时图像变为蓝色，未选择时文本为白色。我不知道为什么...这是我的问题
— Greg Peckory 2015年

Answers:

87

从UITabBarItem类文档：

默认情况下，实际的未选择和选择的图像是根据源图像中的alpha值自动创建的。为防止系统变色，请为图像提供UIImageRenderingModeAlwaysOriginal。

线索不是您是否使用UIImageRenderingModeAlwaysOriginal，重要的是何时使用它。

为了防止未选中项目的灰色，您只需要防止未选中图像的系统着色即可。这是操作方法：

var firstViewController:UIViewController = UIViewController()
// The following statement is what you need
var customTabBarItem:UITabBarItem = UITabBarItem(title: nil, image: UIImage(named: "YOUR_IMAGE_NAME")?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), selectedImage: UIImage(named: "YOUR_IMAGE_NAME"))
firstViewController.tabBarItem = customTabBarItem

如您所见，我要求iOS仅将图像的原始颜色（白色，黄色，红色等）应用于UNSELECTED状态，而将图像保留为SELECTED状态。

另外，您可能需要为标签栏添加淡色，以便为SELECTED状态应用其他颜色（而不是默认的iOS蓝色）。根据上面的屏幕截图，您正在为选定状态应用白色：

self.tabBar.tintColor = UIColor.whiteColor()

编辑：

在此处输入图片说明

— 金诺夫特
source
我需要创建一个与标签栏相对应的类来输入此代码吗？
— 格雷格·佩科里
AppDelegate中的@GregoryPeck或创建您自己的TabBarClass，但不要忘记通过Interface Builder进行分配
— Kingofmit 2015年
如您所见，我在上面设置了tintColor。另外，我已将渲染设置为原始图像，请参见编辑。
— Greg Peckory 2015年
而我在哪里放置代码firstViewController.tabBarItem = customTabBarItem
— Greg Peckory 2015年
2
对不起所有问题，但是我不确定如何创建Tab Bar类。即- TabBarClass: ??, ??，我似乎无法将其与我的标签栏连接。我必须将其连接到标签栏或标签栏控制器吗？
— Greg Peckory
74

迅捷3

我是通过创建自定义标签栏控制器并将其添加到viewDidLoad方法中来完成的。

    if let count = self.tabBar.items?.count {
        for i in 0...(count-1) {
            let imageNameForSelectedState   = arrayOfImageNameForSelectedState[i]
            let imageNameForUnselectedState = arrayOfImageNameForUnselectedState[i]

            self.tabBar.items?[i].selectedImage = UIImage(named: imageNameForSelectedState)?.withRenderingMode(.alwaysOriginal)
            self.tabBar.items?[i].image = UIImage(named: imageNameForUnselectedState)?.withRenderingMode(.alwaysOriginal)
        }
    }

    let selectedColor   = UIColor(red: 246.0/255.0, green: 155.0/255.0, blue: 13.0/255.0, alpha: 1.0)
    let unselectedColor = UIColor(red: 16.0/255.0, green: 224.0/255.0, blue: 223.0/255.0, alpha: 1.0)

    UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: unselectedColor], for: .normal)
    UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: selectedColor], for: .selected)

它为我工作！

在此处输入图片说明

— 阿马龙
source
1
在Swift 4中，“ NSForegroundColorAttributeName”已重命名为“ NSAttributedStringKey.foregroundColor”。
— Alienbash17年
...并且在Swift4.2中，“ NSAttributedStringKey”已重命名为“ NSAttributedString.Key”。
— XLE_22 '19
54

迅速

对于图像：

custom.tabBarItem = UITabBarItem(title: "Home", image: UIImage(named: "tab_icon_normal"), selectedImage: UIImage(named: "tab_icon_selected"))

对于文字：

UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.gray], for: .normal)
    
UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.red], for: .selected)
— 拉杰什（Rajesh Loganathan）
source
48

Swift 4.2和Xcode 10

对我有用的解决方案：

  1. 图像设置-从情节提要中设置Bar Item Image和Selected Image。要删除图像上的色彩覆盖，请转到“资产”目录，选择图像并更改其渲染模式，如下所示：

图像渲染模式

这将防止Tab栏组件设置其默认图像色调。

  1. 文本-在这里，我创建了一个简单的UITabBarController子类，并在其viewDidLoad方法中自定义了默认的和选定的文本颜色，如下所示：

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

        let appearance = UITabBarItem.appearance(whenContainedInInstancesOf: [HomeTabBarController.self])
        appearance.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: .black], for: .normal)
        appearance.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: .red], for: .selected)
    }
}

只需在IB的身份检查器中将此类设置为Tab栏控制器自定义类即可。

瞧！而已。

iOS 13更新：

将此添加到iOS 13的设置中：

if #available(iOS 13, *) {
    let appearance = UITabBarAppearance()
    appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: .red]
    tabBar.standardAppearance = appearance
}
— 瓦西尔·加洛夫（Vasil Garov）
source
如果您想使用检查器来做，这应该是公认的答案！非常感谢，这解决了我的问题
— Emanuel Amiguinho
谢谢，您的iOS 13更新确实为我提供了帮助。我有一个奇怪的错误，在最初创建标签栏时，所选项目文本的颜色是正确的，但是在隐藏了该标签栏并重新出现之后（例如，呈现全屏模式然后将其关闭），更改选项卡会将所选项目文本的颜色重置为色彩。添加iOS 13安装程序可以修复该问题。
— 萨尔
16

迅捷3

这对我有用（指设置tabBarItems图像颜色）：

UITabBar.appearance().tintColor = ThemeColor.Blue

if let items = tabBarController.tabBar.items {
        let tabBarImages = getTabBarImages() // tabBarImages: [UIImage]
        for i in 0..<items.count {
            let tabBarItem = items[i]
            let tabBarImage = tabBarImages[i]
            tabBarItem.image = tabBarImage.withRenderingMode(.alwaysOriginal)
            tabBarItem.selectedImage = tabBarImage
        }
    }

我注意到，如果使用渲染模式= .alwaysOriginal设置图像，则UITabBar.tintColor无效。

— 巴托斯·奥尔萨诺夫斯基
source
15

Swift 4：在您的UITabBarController中通过以下代码对其进行更改

tabBar.unselectedItemTintColor = .black
— 米克森·麦克拉伦
source
12

迅捷3

首先，确保已将BOOLEAN键“基于视图控制器的状态栏外观”添加到Info.plist，并将其值设置为“ NO”。

Appdelegate.swift

在“ launchOptions：[UIApplicationLaunchOptionsKey：Any] ?？”之后的某处插入代码）-> Bool {”

  1. 使用RGB颜色值更改选项卡栏本身的颜色：

UITabBar.appearance().barTintColor = UIColor(red: 0.145, green: 0.592, blue: 0.804, alpha: 1.00)

或默认的UI颜色之一：

UITabBar.appearance().barTintColor = UIColor.white)

  1. 更改选项卡项目的文本颜色：

所选项目

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.white], for: .selected)

无效项目

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.black], for: .normal)

  1. 要更改图像的颜色，我相信最简单的方法是对图像进行分离，每个状态一个。

如果您不从头开始制作图标，则在Photoshop中相对容易制作黑白交替版本。

Adobe Photoshop（几乎任何版本都可以）

确保图标图像具有透明背景，并且图标本身为纯黑色（或紧密）。

打开图像文件，将其保存为其他文件名（例如exampleFilename-Inverted.png）

在“图像”菜单上的“调整”子菜单中：

点击“反转”

现在，您的原始图标为负数。

在XCode中，在情节提要的“标签栏”属性下将其中一张图像设置为“选定的图像”，并在“栏项”图像下指定“非活动”版本。

塔达🍺

— 安德烈亚斯
source
对于您的第3点，您可以不使用photoshop进行更改，例如：UITabBar.appearance().tintColor = UIColor.black
— Chaudhry Talha，2017年
@ ChaudhryTalha，tintcolor适用于标签栏图标的选定状态。但是对于未选择的状态图标颜色（在iOS10上），是否有可以更改的类似属性？
— anoo_radha
10

尝试将其添加到AppDelegate.swift（内部应用程序方法）中：

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

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

例：

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Tab bar icon selected color
    UITabBar.appearance().tintColor = UIColor(red: 0/255.0, green: 0/255.0, blue: 0/255.0, alpha: 1.0)
    // For WHITE color: UITabBar.appearance().tintColor = UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 1.0)
    return true
}

例：

在此处输入图片说明

在此处输入图片说明

我的英语太差了！对不起！:-)

— 弗雷德·索萨（Fred Sousa）
source
10

我知道这里有很多答案，但是我找不到适用于Swift 4.2 / Swift 5.1的简单有效的复制/粘贴答案

tabBarController?.tabBar.tintColor = UIColor.red
tabBarController?.tabBar.unselectedItemTintColor = UIColor.green

或使用UITabBarItem.appearance()代替tabBarController?.tabBar

图片必须是UIImageRenderingModeAlwaysTemplate

— 库兹杜
source
4

斯威夫特3.0

我创建了标签栏类文件，并编写了以下代码

在viewDidLoad：

self.tabBar.barTintColor = UIColor.white
self.tabBar.isTranslucent = true

let selectedColor   = UIColor.red
let unselectedColor = UIColor.cyan

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: unselectedColor,NSFontAttributeName: UIFont(name: "Gotham-Book", size: 10)!], for: .normal)
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: selectedColor,NSFontAttributeName: UIFont(name: "Gotham-Book", size: 10)!], for: .selected)

if let items = self.tabBar.items {
    for item in items {
        if let image = item.image {
            item.image = image.withRenderingMode( .alwaysOriginal )
            item.selectedImage = UIImage(named: "(Imagename)-a")?.withRenderingMode(.alwaysOriginal)
        }
    }
}

之后viewDidLoad：

   override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {

   if(item.title! == "title")
   {
    item.selectedImage = UIImage(named: "(Imagname)-a")?.withRenderingMode(.alwaysOriginal)

    }
    if(item.title! == "title")
    {
        item.selectedImage = UIImage(named: "(Imagname)-a")?.withRenderingMode(.alwaysOriginal)

    }
    if(item.title! == "title")
    {
        item.selectedImage = UIImage(named: "(Imagname)-a")?.withRenderingMode(.alwaysOriginal)

    }
    if(item.title! == "title")
    {
        item.selectedImage = UIImage(named: "(Imagname)-a")?.withRenderingMode(.alwaysOriginal)

    }
    if(item.title! == "title")
    {
        item.selectedImage = UIImage(named: "(Imagname)-a")?.withRenderingMode(.alwaysOriginal)

    }

}

在视图加载方法中，您必须设置所选图像，而其他图像则使用RenderingMode显示，并且在选项卡栏委托方法中，您可以按标题设置所选图像

— 阿莫尔·波卡莱（Amol Pokale）
source
4

对于Swift 4.0，现在更改为：

tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: UIColor.gray], for: .normal)
tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: UIColor.blue], for: .selected)

如果您只需要更改文本颜色，则不必子类化UITabBarItem。只需将以上代码放入视图控制器的viewDidLoad函数中即可。

对于全局设置，请更改tabBarItem为UITabBarItem.appearance()。

— 袁ric
source
3

在Swift 4.2中：

UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.white], for: .normal)
UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.red], for: .selected)
— 维努·雅各布
source
1
我把它放到AppDelegate中，在func应用程序下效果很好！
— Steffo Dimfelt
2

您可以设置UIBarItem的tintColor：

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.magentaColor()], forState:.Normal)
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.redColor()], forState:.Selected)
— 苏尼尔·普拉贾帕蒂（Sunil Prajapati）
source
2

您也可以通过这种方式进行：

override func viewWillLayoutSubviews() {  
  if let items = self.tabBar.items {
    for item in 0..<items.count {
      items[item].image = items[item].image?.withRenderingMode(.alwaysOriginal)
            items[item].selectedImage = items[item].selectedImage?.withRenderingMode(.alwaysTemplate)
    }

可选的：

 UITabBar.appearance().tintColor = UIColor.red

希望对您有帮助。

— VD Purohit
source
2

年：2020 iOS 13.3

将以下代码复制到AppDelegate.swift- > func didFinishLaunchingWithOptions

//Set Tab bar text/item fonts and size
let fontAttributes = [NSAttributedString.Key.font: UIFont(name: "YourFontName", size: 12.0)!]
UITabBarItem.appearance().setTitleTextAttributes(fontAttributes, for: .normal)
//Set Tab bar text/item color
UITabBar.appearance().tintColor = UIColor.init(named: "YourColorName")
— 天空
source
2

如果要更改按下时的图像，此代码适用于Swift 4Tab Bar Item。复制并粘贴在viewDidLoad项目中找到的第一个方法

   let arrayOfImageNameForSelectedState:[String] = ["Image1Color", "Image2Color","Image3Color"]
   let arrayOfImageNameForUnselectedState: [String] = ["Image1NoColor","Image2NoColor","Image3NoColor"]


    print(self.tabBarController?.tabBar.items?.count)

    if let count = self.tabBarController?.tabBar.items?.count {
        for i in 0...(count-1) {
            let imageNameForSelectedState   = arrayOfImageNameForSelectedState[i]
            print(imageNameForSelectedState)
            let imageNameForUnselectedState = arrayOfImageNameForUnselectedState[i]
            print(imageNameForUnselectedState)
            self.tabBarController?.tabBar.items?[i].selectedImage = UIImage(named: imageNameForSelectedState)?.withRenderingMode(.alwaysOriginal)
            self.tabBarController?.tabBar.items?[i].image = UIImage(named: imageNameForUnselectedState)?.withRenderingMode(.alwaysOriginal)
        }
    }
— 丹尼尔·瓦伦苏埃拉
source
1

从这里。

每个选项卡栏项都有标题，选定的图像，未选定的图像和标志值。

使用“图像色调”（selectedImageTintColor）字段来指定选择该选项卡时条项目的色调颜色。默认情况下，该颜色为蓝色。

— vp_gold
source
4
链接已失效（404）
— Maximelc
1

斯威夫特5：

let homeTab = UITabBarItem(title: "Home", image: UIImage(named: "YOUR_IMAGE_NAME_FROM_ASSETS")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal), tag: 1)
— 阿雷卜111
source
1

在Swift 5 ioS 13.2中，TabBar样式已更改，下面的代码可以100％进行测试。

将以下代码添加到您的UITabBarController类中。

override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        let appearance = UITabBarAppearance()
        appearance.backgroundColor = .white

        setTabBarItemColors(appearance.stackedLayoutAppearance)
        setTabBarItemColors(appearance.inlineLayoutAppearance)
        setTabBarItemColors(appearance.compactInlineLayoutAppearance)

        setTabBarItemBadgeAppearance(appearance.stackedLayoutAppearance)
        setTabBarItemBadgeAppearance(appearance.inlineLayoutAppearance)
        setTabBarItemBadgeAppearance(appearance.compactInlineLayoutAppearance)

        tabBar.standardAppearance = appearance
 }

@available(iOS 13.0, *)
private func setTabBarItemColors(_ itemAppearance: UITabBarItemAppearance) {
    itemAppearance.normal.iconColor = .lightGray
    itemAppearance.normal.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.gray]

    itemAppearance.selected.iconColor = .white
    itemAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.orange]
}

@available(iOS 13.0, *)
private func setTabBarItemBadgeAppearance(_ itemAppearance: UITabBarItemAppearance) {
    //Adjust the badge position as well as set its color
    itemAppearance.normal.badgeBackgroundColor = .orange
    itemAppearance.normal.badgeTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
    itemAppearance.normal.badgePositionAdjustment = UIOffset(horizontal: 1, vertical: -1)
}
— 马利斯·库鲁维塔（Malith Kuruwita）
source
1

迅捷5.3

let vc = UIViewController()
vc.tabBarItem.title = "sample"
vc.tabBarItem.image = UIImage(imageLiteralResourceName: "image.png").withRenderingMode(.alwaysOriginal)
vc.tabBarItem.selectedImage = UIImage(imageLiteralResourceName: "image.png").withRenderingMode(.alwaysOriginal)
        
// for text displayed below the tabBar item
UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.black], for: .selected)
— 巴瓦法利
source
0

只需向项目添加一个新的UITabBarController引用，然后在此控制器中创建UITabBar的引用：

@IBOutlet weak var appTabBar: UITabBar!

在其viewDidLoad（）中，只需在标题文本颜色下面添加以下内容：

    appTabBar.tintColor = UIColor.scandidThemeColor()

对于图像

    tabBarItem = UITabBarItem(title: "FirstTab", image: UIImage(named: "firstImage"), selectedImage: UIImage(named: "firstSelectedImage"))
— 肖比希特C
source
0

子类化TabbarViewController，并在ViewDidLoad中放置以下代码：

 [UITabBarItem.appearance setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor darkGreyColorBT]} forState:UIControlStateNormal];
    [UITabBarItem.appearance setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor nightyDarkColorBT]} forState:UIControlStateSelected];

    self.tabBar.items[0].image  = [[UIImage imageNamed:@"ic-pack off@3x.png"]  imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[0].selectedImage  = [[UIImage imageNamed:@"ic-pack@3x.png"]  imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[1].image = [[UIImage imageNamed:@"ic-sleeptracker off@3x.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[1].selectedImage  = [[UIImage imageNamed:@"ic-sleeptracker@3x.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[2].image = [[UIImage imageNamed:@"ic-profile off@3x.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[2].selectedImage  = [[UIImage imageNamed:@"ic-profile@3x.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

这是我拥有的最简单的工作解决方案

— coolcool1994
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.