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

Question

这是我的标签栏：

下图显示正在运行的程序和选择的 "NEWS" 项：

很明显，条形色调颜色正常，正如我所希望的！

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

Also, when the an item is selected (as seen above, news) the item color goes blue!我如何防止这种情况发生？我希望它保持白色。

为什么文本在选中时变为白色，而在取消选中时却没有？

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

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

每个项目都需要 swift 代码吗？

编辑：

Answer 1

来自 UITabBarItem class 文档：

By default, the actual unselected and selected images are automatically created from the alpha values in the source images. To prevent system coloring, provide images with 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 仅对未选择状态应用图像的原始颜色（白色、黄色、红色等），而对选择状态保留图像原样状态。

此外，您可能需要为选项卡栏添加一种色调，以便为 SELECTED 状态应用不同的颜色（而不是默认的 iOS 蓝色）。根据上面的屏幕截图，您正在为所选状态应用白色：

self.tabBar.tintColor = UIColor.whiteColor()

编辑：

Answer 2

来自 here。

每个标签栏项目都有一个标题、已选择的图像、未选择的图像和标记值。

使用图像色调 (selectedImageTintColor) 字段指定栏项目在选择该选项卡时的色调。默认情况下，该颜色为蓝色。

Answer 3

Swift

图片:

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)

Answer 4

您可以设置 UIBarItem 的 tintColor :

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.magentaColor()], forState:.Normal)
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.redColor()], forState:.Selected)

Answer 5

Swift 3

首先，请确保您已将BOOLEAN键"View controller-based status bar appearance"添加到Info.plist，并将值设置为"NO"。

Appdelegate.swift

在"launchOptions:[UIApplicationLaunchOptionsKey: Any]?) -> Bool {"

之后的某处插入代码

使用 RGB 颜色值更改标签栏本身的颜色：

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

或默认 UI 颜色之一：

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

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

所选项目

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

不活跃的项目

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

要改变图像的颜色，我认为最简单的方法是制作单独的图像，每个状态一个。

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

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

确保您的图标图像具有透明背景，并且图标本身是纯黑色（或接近黑色）。

打开图像文件，将其保存在不同的文件名下（例如 exampleFilename-Inverted.png）

在 "Image" 菜单的 "Adjustments" 子菜单中：

点击"Invert"

您现在有了原始图标的底片。

在 XCode 中，在故事板的标签栏属性下将其中一张图像设置为 "Selected Image"，并在 "Bar Item" 图像下指定 "inactive" 版本。

Ta-Da

Answer 6

Swift 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)

对我有用！

Answer 7

Swift 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 没有任何效果。

Answer 8

尝试将其添加到 AppDelegate.swift（在 application 方法中）：

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
}

示例：

我的英文太烂了！对不起！ :-)

Answer 9

只需将新的 UITabBarController 引用添加到 project.Next 在此控制器中创建 UITabBar 的引用：

@IBOutlet weak var appTabBar: UITabBar!

在其 viewDidLoad() 中，只需在下面添加 title text color:

    appTabBar.tintColor = UIColor.scandidThemeColor()

图片

    tabBarItem = UITabBarItem(title: "FirstTab", image: UIImage(named: "firstImage"), selectedImage: UIImage(named: "firstSelectedImage"))

Answer 10

Swift 3.0

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

在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 显示，在选项卡栏委托方法中，您根据标题设置所选图像

Answer 11

子类化您的 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];

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

Answer 12

对于Swift 4.0，现在更改为：

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

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

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

Answer 13

您也可以这样操作：

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

希望对你有所帮助

Answer 14

Swift 4: 在你的 UITabBarController 中用这个代码改变它

tabBar.unselectedItemTintColor = .black

Answer 15

Swift 4.2 和 Xcode 10

对我有用的解决方案：

图像设置 - 从情节提要中设置栏项目图像和选定图像。要删除图像上的色调覆盖，请转到资产目录，select 图像并像这样更改其渲染模式：

这将阻止选项卡栏组件设置其默认图像色调。

Text - 这里我创建了一个简单的 UITabBarController subclass 并在它的 viewDidLoad 方法中自定义了默认值和 selected文字颜色如下：

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 的身份检查器中将此 class 设置为自定义标签栏控制器 class。

瞧！而已。

iOS 13 更新:

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

if #available(iOS 13, *) {
    let appearance = UITabBarAppearance()
    appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: .red]
    tabBar.standardAppearance = appearance
}

Answer 16

在Swift 4.2:

UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.white], for: .normal)
UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.red], for: .selected)

Answer 17

此代码适用于 Swift 4 如果您想在按下时更改 Tab 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)
        }
    }

Answer 18

我知道这里有很多答案，但我找不到 Swift 4.2/ Swift 5.1[=22 的简单有效 copy/paste 答案=]

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

或者像这样使用 UITabBar.appearances() 而不是 tabBarController?.tabBar：

UITabBar.appearances().tintColor = UIColor.red UITabBar.appearances().unselectedItemTintColor = UIColor.green

图片必须 UIImageRenderingModeAlwaysTemplate

Answer 19

年份：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")

Answer 20

Swift 5:

let homeTab = UITabBarItem(title: "Home", image: UIImage(named: "YOUR_IMAGE_NAME_FROM_ASSETS")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal), tag: 1)

Answer 21

在 Swift 5 ioS 13.2 中，TabBar 样式发生了变化，下面的代码工作 100%，经过测试。

在您的 UITabBarController class.

中添加以下代码

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)
}

Answer 22

Swift 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)

Answer 23

如果你想支持iOS 13及以上请试试这段代码，因为设置UItabBar的方式完全不同于iOS 13.

        if #available(iOS 13, *) {
            let appearance = UITabBarAppearance()
            
//            appearance.backgroundColor = .white
            appearance.shadowImage = UIImage()
            appearance.shadowColor = .white
            
            appearance.stackedLayoutAppearance.normal.iconColor = .gray
            appearance.stackedLayoutAppearance.normal.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.gray]
//            appearance.stackedLayoutAppearance.normal.badgeBackgroundColor = .yellow
            
            appearance.stackedLayoutAppearance.selected.iconColor = .systemPink
            appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.systemPink]
            
            // set padding between tabbar item title and image
            appearance.stackedLayoutAppearance.selected.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 4)
            appearance.stackedLayoutAppearance.normal.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 4)
            
            self.tabBar.standardAppearance = appearance
        } else {
            // set padding between tabbar item title and image
            UITabBarItem.appearance().titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 4)
            UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.gray], for: .normal)
            UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.systemPink], for: .selected)
        }

Answer 24

从 Xcode 13.0 开始，您也可以选择在 UI 上设置此颜色： Select 选项卡栏，然后在检查器中自定义标准和滚动到边缘外观，在此项目下方，您将找到堆叠和内联自定义选项。如果您 select 自定义，那么您将拥有“标题颜色”设置。您必须全部设置 (4)。

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

Changing tab bar item image and text color iOS

uitabbaritem

uitabbar

ios

swift

Swift

Swift 3

Swift 4.2 和 Xcode 10

年份：2020 iOS 13.3

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