如何通过以编程方式创建 UIImage 来更改 UITabBar 顶部边框的颜色？

Question

据我了解，更改顶部边框颜色的唯一方法是设置背景图像（320x49，像素线在顶部）。在我看来，这是唯一的方法（如果我错了请指正）。

有没有办法不使用图像文件来做到这一点？例如，有人通过从代码创建 UIImage 来帮助我更改 NavigationBar 底部边框：

UINavigationBar.appearance().shadowImage = UIImage.colorForNavBar(UIColor.redColor())

extension UIImage {   
    class func colorForNavBar(color: UIColor) -> UIImage {
        let rect = CGRectMake(0.0, 0.0, 1.0, 1.0)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()

        CGContextSetFillColorWithColor(context, color.CGColor)
        CGContextFillRect(context, rect)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image
    }
}

这个解决方案实际上很有效；它改变了我底部边框的颜色。

我尝试将其应用于 TabBar，但没有任何变化。

UITabBar.appearance().shadowImage = UIImage.colorForNavBar(.redColor())

Answer 1

您需要为 UINavigationBar.appearance().backgroundImage 提供不同的图像。

例如：

UINavigationBar.appearance().backgroundImage = UIImage.colorForNavBar(.blackColor())
UINavigationBar.appearance().shadowImage = UIImage.colorForNavBar(.redColor())

Answer 2

您几乎已经回答了您自己的问题。您可以对 UITabBar 执行与 UINavigationBar 相同的操作。如果要更改阴影图像（即 "top border"），则必须更改背景图像。直接来自 Apple:

The custom shadow image for the tab bar. This attribute is ignored if the tab bar does not also have a custom background image. To set this attribute programmatically, use the shadowImage property.

在你自己的问题中你似乎意识到了这一点：

the only way to change the color of the top border is to set the background image (320x49, with pixel line at top)

除了顶部有一条线的不是背景图片。您只需将背景图像设置为任何内容，然后您就可以根据自己的喜好设置阴影图像。

如果您在 Xcode 中打开简单的 "tabbed application" 模板，您会发现添加这两行代码（以及您的 UIImage 扩展代码）确实有效：

// White background with red border on top
UITabBar.appearance().backgroundImage = UIImage.colorForNavBar(.whiteColor())
UITabBar.appearance().shadowImage = UIImage.colorForNavBar(.redColor())

Answer 3

通常，其他答案都是正确的 - 您必须同时设置背景图像和阴影图像。但是，这样做会导致条形图降低其半透明度（模糊）；即使您设置了透明图像，该栏也会是透明的，而不是半透明的。

我们也有类似的需求，但我们希望保持栏的半透明。我们没有设置阴影图像，而是对条形图进行了子类化，并放置了一个带有我们想要的颜色的细线子视图。当条形图布置它的子视图时，我们将细线的框架设置为条形图的宽度，正好是一个像素。

参见my GitHub demo project。

这是结果的屏幕截图：

在您的项目中包含我的子视图后，只需使用以下行来设置颜色：

if let tabBar = tabBarController?.tabBar as? ColoredHairlineTabBar {
    tabBar.hairlineColor = ... //Your color
}

Answer 4

简单地对 UITabBar 进行子类化并向 layoutSubviews 中的视图添加一个新的子层怎么样？

Swift 示例：

override func layoutSubviews() {
    super.layoutSubviews()

    let topBorder = CALayer()

    let borderHeight: CGFloat = 2

    topBorder.borderWidth = borderHeight
    topBorder.borderColor = UIColor.redColor().CGColor
    topBorder.frame = CGRect(x: 0, y: -1, width: self.frame.width, height: borderHeight)

    self.layer.addSublayer(topBorder)
}

Answer 5

这是 Swift 3 的解决方案：

extension UIImage {
    class func colorForNavBar(color: UIColor) -> UIImage {
        let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 1.0)
        //    Or if you need a thinner border :
        //    let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 0.5)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()

        context!.setFillColor(color.cgColor)
        context!.fill(rect)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image!
    }
}

在 UITabBarController 的 viewDidLoad 中与上面的代码一起使用

UITabBar.appearance().backgroundImage = UIImage.colorForNavBar(color: .white)
UITabBar.appearance().shadowImage = UIImage.colorForNavBar(color: .red)

Answer 6

您不需要扩展来创建特定大小的图像，UIImage 有一个非常好的构造函数。

为防止丢失半透明模糊，您可以设置条形色调颜色而不是背景图像。您还可以使用屏幕比例来确保边框为一个像素，例如原始边框为：

    let hairlineHeight = CGFloat(1) / UIScreen.main.scale
    tabBar.barTintColor = .white
    tabBar.shadowImage = UIImage(color: .black, size: CGSize(width: 1, height: hairlineHeight))

如何通过以编程方式创建 UIImage 来更改 UITabBar 顶部边框的颜色？

How can I change the color of the UITabBar top border by creating a UIImage programmatically?

uiimage

uitabbar

ios

swift