How to add gradient in navigation bar - iOS

Question

I have researched a lot on how to add gradient in NavigationBar in iOS, but it doesn't show what I need. I want 2 color gradient with WHITE on TOP and CLEAR on BOTTOM. like this :

Tried using CAGradientLayer and also CRGradientNavigationBar , but everything I have tried always shows White on TOP but when i set bottom color to CLEAR, it shows a weird black translucent color.

How to achieve similar NavigationBar like in the picture above?

Thanks!

Answer 1

Create gradient layer and add it as background of navigation bar.

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];

For creating image from layer.

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

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

    UIGraphicsEndImageContext();

    return outputImage;
}

One more thing, there is one library available in github : CRGradientNavigationBar you can also use this library.

Answer 2

Got it! From this link. Actually clearColor has a black color channel with an alpha of 0, so instead use

[UIColor colorWithWhite:1 alpha:0]

and it will do the job! Thanks!

Answer 3

You can try creating a UIView on the top of your screen with the top constrain -70, and add CAGradientLayer inside it with it size. then make your navigation bar transparent by adding UIImage()//empty image, to is as a background, this way it will show the UIView with grade CAGradientLayer in background