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!

score 1 · Answer 1 · answered Nov 24 '17 at 12:31

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.

I already did both of these things.. Also used CRGradientNavigationBar, but both of them end up showing the translucent black color instead of CLEAR COLOUR — Hyder, Nov 24 '17 at 12:36

score 1 · Accepted Answer · answered Nov 24 '17 at 12:49

1

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!

answered Nov 24 '17 at 12:49

Hyder

1,163
2
13
37

score 0 · Answer 3 · answered Nov 24 '17 at 16:22

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

How to add gradient in navigation bar - iOS

3 Answers3