iOS 8标签栏项背景颜色

Question

我过去一周一直在寻找解决方案，但是尝试了所有可能的解决方案，包括我能够找到或想到的每一个。我发现并尝试的每一个解决方案都没有起作用，要么已经过时了。

我有一个UITabBarController中的UITabBar，并且有5个UITabBarItem。我想在选定UITabBarItem时更改其背景颜色，并且当选定项更改时将其改回来。

我正在使用Swift和iOS SDK 8.3以及Xcode 6.3.1。如果您只能用Objective-C回答也没关系，任何答案都会有帮助！提前感谢大家，非常感激！

编辑：这里是我想要它做的视觉示例。 不同的背景颜色

- user2985289

Answer 1

在您的TabBarController中，您可以设置默认的UITabBar tintColor、barTintColor、selectionIndicatorImage（这里有点作弊）以及图像的渲染模式，请参见下面的注释：

    class MyTabBarController: UITabBarController, UINavigationControllerDelegate {
      ...
      override func viewDidLoad() {
        ...
        // Sets the default color of the icon of the selected UITabBarItem and Title
        UITabBar.appearance().tintColor = UIColor.redColor()

        // Sets the default color of the background of the UITabBar
        UITabBar.appearance().barTintColor = UIColor.blackColor()

        // Sets the background color of the selected UITabBarItem (using and plain colored UIImage with the width = 1/5 of the tabBar (if you have 5 items) and the height of the tabBar)
        UITabBar.appearance().selectionIndicatorImage = UIImage().makeImageWithColorAndSize(UIColor.blueColor(), size: CGSizeMake(tabBar.frame.width/5, tabBar.frame.height))

        // Uses the original colors for your images, so they aren't not rendered as grey automatically.
        for item in self.tabBar.items as! [UITabBarItem] {
          if let image = item.image {
            item.image = image.imageWithRenderingMode(.AlwaysOriginal)
          }
        }
      }
      ...
    }

您需要扩展UIImage类，以便制作所需大小的纯色图像：

extension UIImage {
  func makeImageWithColorAndSize(color: UIColor, size: CGSize) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    color.setFill()
    UIRectFill(CGRectMake(0, 0, size.width, size.height))
    var image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
  }
}

- Gwendle

---

非常好的答案，谢谢。有人应该将其标记为正确的答案。在UIImage扩展中，您传递了一个大小但没有使用它。我认为您想编写UIRectFill(CGRectMake(0, 0, size.width, size.height))。如果我替换此行，则您的解决方案完美运行。 - Philipp Otto

这是唯一对我有效的答案。谢谢。唯一需要改变的是 "UITabBar.appearance().selectionIndicatorImage = UIImage()..." 改为 "UITabBar.appearance().selectionIndicatorImage = UIImage().makeImageWithColorAndSize(UIColor.blueColor(), size: CGSizeMake(tabBar.frame.width/CGFloat(tabBar.items!.count), tabBar.frame.height))"，这样更加易于插入和使用。再次感谢！ - jovanjovanovic

应该被选为答案 - Abdurrahman

当我使用iPhone 6模拟器时，我的图像没有被拉伸。我已经添加了扩展名，但仍然无法工作。 - DrPepperGrad

为了在不同设备上获得正确的图像大小，您需要通过屏幕比例因子来分割宽度和高度，例如 CGSize(width: size.width / UIScreen.main.scale, height: size.height / UIScreen.main.scale)。 - Hodson

Answer 2

你可以尝试这个方法。在AppDelegate.swift中添加以下内容。

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        // Override point for customization after application launch.

        UITabBar.appearance().translucent = false
        UITabBar.appearance().barTintColor = UIColor(rgba: "#12296f")
        UITabBar.appearance().tintColor = UIColor.whiteColor()

        return true
    }

别忘了包含这个库。https://github.com/yeahdongcn/UIColor-Hex-Swift

- Nurdin

---

但是您的图标将根据所选项目更改选项卡栏颜色。 - Nurdin

Answer 3

受Gwendle的启发，这是我解决问题的方法：

override func viewWillAppear(animated: Bool) {
    guard let tabBar = tabBarController?.tabBar else { return }
    tabBar.tintColor = UIColor.whiteColor()
    tabBar.selectionIndicatorImage = UIImage().makeImageWithColorAndSize(UIColor.redColor(), size: CGSizeMake(tabBar.frame.width/5, tabBar.frame.height))
    super.viewWillAppear(animated)
}

同时还使用了这个扩展：

extension UIImage {
    func makeImageWithColorAndSize(color: UIColor, size: CGSize) -> UIImage {
        UIGraphicsBeginImageContext(size)
        color.setFill()
        UIRectFill(CGRectMake(0, 0, size.width, size.height))
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
}

请记住，设置了 selectionIndicationImage 之后，它将在所有其他选项卡中保持设置。以下是如何通过在其余选项卡的每个视图控制器中将其设置为 nil 来删除它的示例：

override func viewWillAppear(animated: Bool) {
    tabBarController?.tabBar.tintColor = UIColor.redColor()
    tabBarController?.tabBar.selectionIndicatorImage = nil
    super.viewWillAppear(animated)
}

使用Swift 2实现。

- Andrej

Answer 4

你试过这个吗？

在Storyboard中的视图控制器中选择选项卡栏图标图像。

在Xcode右侧面板的Identity and Type（最左边）选项卡（看起来像一张纸）中查找。

寻找全局色调设置。

- Garret

---

是的，就这样。您是想将全局色调仅更改为选项卡栏，还是整个程序都更改？这不起作用，因为它可能被高级导航级别覆盖。 - Garret

https://dev59.com/D2Eh5IYBdhLWcg3whT0S - Garret

同时确保没有任何代码行设置了你的色调颜色。http://stackoverflow.com/questions/23818808/uibarbuttonitem-title-text-is-always-global-tint-color - Garret

在Storyboard中，点击您的选项卡栏视图控制器的顶部部分。然后打开属性检查器。然后玩弄模拟指标以获得您想要的效果。 - Garret

我明白了，我从未像那样拆分选项卡栏。很抱歉我不能提供更多帮助。 - Garret

Answer 5

您可以从每个控制器中调用此函数，传递self.tabBarController和您想要的每种颜色。

功能：

static func customTabBar(controller: UIViewController?, backgroundColor: String, unselectedColor: String, selectedColor: String) {
        if let tabBarController = controller as? UITabBarController {
            tabBarController.tabBar.barTintColor = UIColor(hex: backgroundColor)
            tabBarController.tabBar.tintColor = UIColor(hex: selectedColor)
            tabBarController.tabBar.isTranslucent = false
            tabBarController.tabBar.selectedItem?.setTitleTextAttributes([NSAttributedString.Key.foregroundColor:UIColor(hex: selectedColor)], for: UIControl.State.selected)
            if #available(iOS 10.0, *) {
                tabBarController.tabBar.unselectedItemTintColor = UIColor(hex: unselectedColor)
            } else {
                // Fallback on earlier versions
            }
        }
    }

- BSK-Team