如何为iOS导航栏创建水平渐变背景?

And*_*rew 19 objective-c ios rubymotion ios7 ios8

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

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

Jul*_*anM 66

如果你想以编程方式设置给定UINavigationBar的渐变,我有一个解决方案.

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

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);
Run Code Online (Sandbox Code Playgroud)

然后抓取该图层的UImage.

UIGraphicsBeginImageContext(gradientLayer.bounds.size);
[gradientLayer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
Run Code Online (Sandbox Code Playgroud)

设置gradientImage为您的backgroundImage UINavigationBar.

[navigationBar setBackgroundImage:gradientImage forBarMetrics:UIBarMetricsDefault];
Run Code Online (Sandbox Code Playgroud)

Swift解决方案:

[![// 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)
Run Code Online (Sandbox Code Playgroud)

结果

  • 我必须补充一点,这段代码不会考虑状态栏.如果你想让你的渐变接管整个状态栏,你可以简单地做这样的事情:`var updatedFrame = navigationBar.bounds updatedFrame.size.height + = 20 gradientLayer.frame = updatedFrame` (3认同)

Mak*_*ele 14

更新了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)
Run Code Online (Sandbox Code Playgroud)