如何在导航栏中添加渐变 - iOS答案

【问题标题】：How to add gradient in navigation bar - iOS如何在导航栏中添加渐变 - iOS
【发布时间】：2018-05-08 11:20:21
【问题描述】：

我已经研究了很多关于如何在 iOS 的 NavigationBar 中添加渐变，但它没有显示我需要什么。我想要 2 种颜色渐变，顶部为白色，底部为 CLEAR。像这样：

尝试使用CAGradientLayer 和CRGradientNavigationBar，但是我尝试过的所有东西总是在顶部显示白色，但是当我将底部颜色设置为 CLEAR 时，它显示出一种奇怪的黑色半透明颜色。

如何实现类似上图的NavigationBar？

谢谢！

【问题讨论】：

标签： ios objective-c uinavigationbar gradient

【解决方案1】：

创建渐变层并将其添加为导航栏的背景。

CAGradientLayer *gradient = [CAGradientLayer layer];

gradient.frame = self.navigationController.navigationBar.bounds;

gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor], (id)[[UIColor blackColor] CGColor], nil];

[self.navigationController.navigationBar setBackgroundImage:[self imageFromLayer:gradient] forBarMetrics:UIBarMetricsDefault];

用于从图层创建图像。

(UIImage *)imageFromLayer:(CALayer *)layer
{
    UIGraphicsBeginImageContext([layer frame].size);

    [layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return outputImage;
}

另外，github 中有一个库：CRGradientNavigationBar 你也可以使用这个库。

【讨论】：

这两件事我都已经做过了.. 还使用了 CRGradientNavigationBar，但它们最终都显示为半透明的黑色而不是 CLEAR COLOUR

【解决方案2】：

知道了！来自this 链接。实际上clearColor 有一个黑色通道，alpha 为 0，所以改为使用

[UIColor colorWithWhite:1 alpha:0]

它会完成这项工作！谢谢！

【讨论】：

【解决方案3】：

您可以尝试在屏幕顶部创建一个 UIView，顶部约束为 -70，并在其中添加 CAGradientLayer 及其大小。然后通过添加 UIImage()//空图像使导航栏透明，作为背景，这样它将在背景中显示具有等级 CAGradientLayer 的 UIView

【讨论】：