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

Question

关于如何在iOS中的NavigationBar中添加渐变，我研究了很多，但它没有显示我需要的东西。我想要 2 个颜色渐变，顶部为白色，底部为透明。像这样：

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

如何实现类似上图的NavigationBar？

谢谢！

Answer 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 你也可以使用这个库。

Answer 2

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

[UIColor colorWithWhite:1 alpha:0]

它会完成工作！谢谢！

Answer 3

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

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

How to add gradient in navigation bar - iOS

gradient

objective-c

uinavigationbar

ios