httpwwwbethedevcom
324329524619168

iOS Gradient Navigation Bar Swift 4

Decorating iOS 12 and below UINavigationController Gradient Color by Creating an extension for UINavigationBar. Create a gradient layer and add it as the background of the navigation bar. 

UIImage extension allows creating an image from CALayer.

func getImageFrom(gradientLayer:CAGradientLayer) -> UIImage? {
var gradientImage:UIImage?
UIGraphicsBeginImageContext(gradientLayer.frame.size)
if let context = UIGraphicsGetCurrentContext() {
gradientLayer.render(in: context)
gradientImage = UIGraphicsGetImageFromCurrentImageContext()?.resizableImage(withCapInsets: UIEdgeInsets.zero, resizingMode: .stretch)
}
UIGraphicsEndImageContext()
return gradientImage
}

This function creates and returns a gradient image. Changing the startPoint and endPoint (currently horizontal) to change the gradient direction to apply on Navigation Controller.

Then add the following function for complete UINavigationBar Extensions. 
import Foundation
import UIKit
extension UINavigationBar {
func setGradientBackground(to navController: UINavigationController) {
let gradient = CAGradientLayer()
var bounds = navController.navigationBar.bounds
bounds.size.height += UIApplication.shared.statusBarFrame.size.height
gradient.frame = bounds
gradient.colors = [ColorName.secoandary.color.cgColor, ColorName.primary.color.cgColor]
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 0, y: 1)
if let image = getImageFrom(gradientLayer: gradient) {
navController.navigationBar.setBackgroundImage(image, for: UIBarMetrics.default)
}
}
func getImageFrom(gradientLayer:CAGradientLayer) -> UIImage? {
var gradientImage:UIImage?
UIGraphicsBeginImageContext(gradientLayer.frame.size)
if let context = UIGraphicsGetCurrentContext() {
gradientLayer.render(in: context)
gradientImage = UIGraphicsGetImageFromCurrentImageContext()?.resizableImage(withCapInsets: UIEdgeInsets.zero, resizingMode: .stretch)
}
UIGraphicsEndImageContext()
return gradientImage
}
}
Usage on NavigationController:
override func viewWillAppear(_ animated: Bool) {
navigationController?.navigationBar.setGradientBackground(to: self.navigationController!)
}
If you have any questions please post your comments below.
Thank you!

Post a Comment Default Comments Disqus Comments

  1. the gradient shows vertically ... i need horizontally

    ReplyDelete

emo-but-icon
:noprob:
:smile:
:shy:
:trope:
:sneered:
:happy:
:escort:
:rapt:
:love:
:heart:
:angry:
:hate:
:sad:
:sigh:
:disappointed:
:cry:
:fear:
:surprise:
:unbelieve:
:shit:
:like:
:dislike:
:clap:
:cuff:
:fist:
:ok:
:file:
:link:
:place:
:contact:

Home item

Popular Posts

Random Posts