带梯度的UINavigationBar tintColor

Question

我想通过编程更改UINavigationBar的tintColor，并保持界面生成器中的渐变效果。

当我在代码中更改tintColor时，渐变会消失，但当我在界面生成器中更改tintColor时，渐变会保留下来。

有什么想法吗？

Answer 1

这是一个古老的问题，但我在搜索听起来像这个问题，但又不同的东西时偶然发现了这个问题。希望它能帮助别人(或者别人能告诉我一个更好的方法)……

如何在UINavigationBar上实现自定义渐变？

首先，让我们以通常的方式获取自定义渐变(作为CALayer)：

- (CALayer *)gradientBGLayerForBounds:(CGRect)bounds
{
    CAGradientLayer * gradientBG = [CAGradientLayer layer];
    gradientBG.frame = bounds;
    gradientBG.colors = @[ (id)[[UIColor redColor] CGColor], (id)[[UIColor purpleColor] CGColor] ];
    return gradientBG;
}

在这里，一个渐变看起来像一个有问题的朋克摇滚乐的化妆选择，这是很好的，因为这个代码是为假设的应用程序我有一个Punk-Rocker在我的口袋中有可疑的品味。我的名字有点太长了..。

现在我想把这一层放在我的UINavigationBar上，这应该很容易吧？只需将其添加为子层，对吗？这里的问题是，它会掩盖UINavigationController提供给你的精彩按钮和东西。那可不好。

相反，让我们看看我们在iOS5+中用来改变应用程序中所有UINavigationBar外观的非常方便的方法：

[[UINavigationBar appearance] setBackgroundImage:SOME_IMAGE
                                   forBarMetrics:UIBarMetricsDefault];

这里唯一的问题是我们没有UIImage，我们有一个CALayer。一个朋克摇滚爱好者该怎么做？

CALayer * bgGradientLayer = [self gradientBGLayerForBounds:ONE_OF_YOUR_NAV_CONTROLLERS.navigationBar.bounds];
UIGraphicsBeginImageContext(bgGradientLayer.bounds.size);
[bgGradientLayer renderInContext:UIGraphicsGetCurrentContext()];
UIImage * bgAsImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

现在我们已经将CALayer转换为UIImage (希望如此)，剩下的就是设置它了：

if (bgAsImage != nil)
{
    [[UINavigationBar appearance] setBackgroundImage:bgAsImage
                                       forBarMetrics:UIBarMetricsDefault];
}
else
{
    NSLog(@"Failded to create gradient bg image, user will see standard tint color gradient.");
}

我喜欢这个解决方案的原因是

• 我的应用程序中所有UINavigationBar的集中式代码(在AppDelegate中)
• tintColor将仍然适用于所有UINavigation按钮(后退、编辑等)
• 如果UIImage创建失败，我的UINavigationBar将仍然适用tintColor
• 我不必依赖实际的图像资源/易于更新

< code >F215

但我仍然不相信这是最好的方法。所以，如果它对你有帮助，请让我知道如何改进它，如果你可以。

~谢谢

Answer 2

将barStyle设置为UIBarStyleBlackTranslucent如下设置tintColor：

navigationBar.tintColor = [UIColor colorWithRed:.7 green:.5 blue:.2 alpha:1];

这将设置适当的渐变。使用您需要的任何组合。

Answer 3

我刚把它写成Swift 2.0的UIImage扩展。也许它会有一些用处。

extension UIImage {

    class func convertGradientToImage(colors: [UIColor], frame: CGRect) -> UIImage {

        // start with a CAGradientLayer
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = frame

        // add colors as CGCologRef to a new array and calculate the distances
        var colorsRef : [CGColorRef] = []
        var locations : [NSNumber] = []

        for i in 0 ... colors.count-1 {
            colorsRef.append(colors[i].CGColor as CGColorRef)
            locations.append(Float(i)/Float(colors.count))
        }

        gradientLayer.colors = colorsRef
        gradientLayer.locations = locations

        // now build a UIImage from the gradient
        UIGraphicsBeginImageContext(gradientLayer.bounds.size)
        gradientLayer.renderInContext(UIGraphicsGetCurrentContext()!)
        let gradientImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        // return the gradient image
        return gradientImage
    }
}

这样叫它：

let colors = [
    UIColor.blueColor(),
    UIColor.greenColor()
    // and many more if you wish
]
let gradientImage = UIImage.convertGradientToImage(colors, frame: navigationBar.bounds)
navigationBar.setBackgroundImage(gradientImage, forBarMetrics: .Default)