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
Swift - Apply Local CSS to Web View
iOS Swift Multiple Dimension Arrays - Compiliing Takes Ages. What Should I Change
Remove Space Navigationtitle But Not the Back Button
Disabling Nslog for Production in Swift Project
How to Put a Logo in Navigationview in Swiftui
Getting Back a Date from a String
How to Make the View Update Instant in Swiftui
CSS Gradient Not Working on iOS
Dial Ussd Code from iPhone Programmatically
Swift Unrecognized Selector Sent to Instance Error
Storing and Retrieving Image in SQLite with Swift
How to Use Sfsafariviewcontroller with Swiftui
Decode Base-64 Encoded Png in an Nsstring
How to Create Otp Verification Screen and Detect Delete Backward on Multiple Uitextfield Is Swift
iPhone 6 and 6 Plus Responsive Breakpoints
Pass Parameter in Webservice in Swift
Swift Formatting String to Have 2 Decimal Numbers If It Is Not a Whole Number