如何为我的 iOS 导航栏创建水平渐变背景？答案

【问题标题】：How can I create a horizontal gradient background for my iOS nav bar?如何为我的 iOS 导航栏创建水平渐变背景？
【发布时间】：2015-10-31 14:22:48
【问题描述】：

我知道如何设置导航栏背景颜色（使用 barTintColor），但现在我正在开发一个需要水平渐变（不是典型的垂直渐变）的 iOS 应用。

如何创建具有水平渐变背景的导航栏？

【问题讨论】：

将此作为资源发布，希望对您有所帮助。 stackoverflow.com/questions/19632081/…nscookbook.com/2013/04/…

标签： ios objective-c ios7 ios8 rubymotion

【解决方案1】：

如果您想以编程方式设置给定 UINavigationBar 的渐变，我可以为您提供解决方案。

首先使用您想要的颜色和位置设置CAGradientLayer。

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = navigationBar.bounds;
gradientLayer.colors = @[ (__bridge id)[UIColor greenColor].CGColor,
                          (__bridge id)[UIColor blueColor].CGColor ];
gradientLayer.startPoint = CGPointMake(0.0, 0.5);
gradientLayer.endPoint = CGPointMake(1.0, 0.5);

然后抓取该层的 UImage。

UIGraphicsBeginImageContext(gradientLayer.bounds.size);
[gradientLayer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

将gradientImage 设置为UINavigationBar 的背景图像。

[navigationBar setBackgroundImage:gradientImage forBarMetrics:UIBarMetricsDefault];

快速解决方案：

[![// Setup the gradient
let gradientLayer = CAGradientLayer()
gradientLayer.frame = navigationBar.bounds
gradientLayer.colors = [UIColor.green.cgColor, UIColor.blue.cgColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

// Render the gradient to UIImage
UIGraphicsBeginImageContext(gradientLayer.bounds.size)
gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

 Set the UIImage as background property
navigationBar.setBackgroundImage(image, for: UIBarMetrics.default)

【讨论】：

谢谢！终于有机会实现这一点，它奏效了！我首先尝试将图层添加为子图层，但它似乎与我正在使用的 SVProgressHUD 库冲突。我收到错误[SVIndefiniteAnimatedView _barPosition]: unrecognized selector sent to instance。当我按照您的建议尝试将其设置为背景图像时，它起作用了！
我必须补充一点，这段代码不会考虑状态栏。如果你想让你的渐变也占据整个状态栏，你可以简单地做这样的事情：var updatedFrame = navigationBar.bounds updatedFrame.size.height += 20 gradientLayer.frame = updatedFrame

【解决方案2】：

更新了 iOS 10 / swift 3.0 的 @JulianM 答案：

let gradientLayer = CAGradientLayer()
var updatedFrame = self.navigationController!.navigationBar.bounds
updatedFrame.size.height += 20
gradientLayer.frame = updatedFrame
gradientLayer.colors = [UIColor.green.cgColor, UIColor.blue.cgColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

UIGraphicsBeginImageContext(gradientLayer.bounds.size)
gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

self.navigationController!.navigationBar.setBackgroundImage(image, for: UIBarMetrics.default)

【讨论】：

【解决方案3】：

你可以使用它：

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"gardientImage"] forBarMetrics:UIBarMetricsDefault];

对于 ios 7 导航栏高度是 64px

【讨论】：

【解决方案4】：

斯威夫特

在全局类中添加这个函数

func setHorizontalGradientColor(view: UIView) {
    let gradientLayer = CAGradientLayer()
    var updatedFrame = view.bounds
    updatedFrame.size.height += 20
    gradientLayer.frame = updatedFrame
    gradientLayer.colors = [UIColor.black.cgColor, UIColor.blue.cgColor]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
    view.layer.insertSublayer(gradientLayer, at: 0)
}

在任何地方使用：

setHorizontalGradientColor(view: self.bgView)

【讨论】：