How to Set the Uinavigationbar with Gradient Color

How can I set the UINavigationbar with gradient color?

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.

How to add vertical Gradient color in UINavigationBar?

Working code for swift 4.1. Just put the following in view did load:

func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.

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.5, y: 0.0) // vertical gradient start
gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0) // vertical gradient end

UIGraphicsBeginImageContext(gradientLayer.bounds.size)
gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

self.navigationController!.navigationBar.setBackgroundImage(image, for: UIBarMetrics.default)
}

Gradient color to Navigationbar

First your CAGradientLayer extension is getting bounds of navigation bar. Just initialising to UINavigationBar() won't work as its bound will be (0,0,0,0) and secondly you need to use below code to set it as backgroundImage.

UINavigationBar.appearance().setBackgroundImage(flareGradientImage, for:.default)

Setting gradient both on Navigation Bar and Status bar

This is how I manage it.

First I set the NavigationBar to transparent:

self.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.isTranslucent = true
self.navigationBar.backgroundColor = UIColor.clear

Then I add the gradient to the view behind the status bar and the navigation bar:

    let gradient = CAGradientLayer()
gradient.frame = CGRect(x: 0, y: 0, width: UIApplication.sharedApplication().statusBarFrame.width, height: UIApplication.sharedApplication().statusBarFrame.height + self.navigationController!.navigationBar.frame.height)
gradient.locations = [0.0,1.0]
gradient.colors = [UIColor.anyColor().colorWithAlphaComponent(0.4).CGColor, UIColor.clearColor().CGColor]
self.view.layer.addSublayer(gradient)
self.view.backgroundColor = UIColor.clear

How to add gradient in navigation bar - iOS

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!



Related Topics



Leave a reply



Submit