0

I want to add gradient color in UINavigationBar. code for horizontal gradient working perfectly but for vertical gradient, its not showing proper color.

Thanx in advance!!!

My Current Code for vertical gradient :

extension UINavigationBar {
    /// Applies a background gradient with the given colors
    func applyNavigationGradient( colors : [UIColor]) {

        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = self.bounds
        gradientLayer.colors = colors.map { $0.cgColor }

        // *** for horizontal gradient ***
        // gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
        // gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

        // *** for vertical gradient ***
        // gradientLayer.locations = [0,1]
        gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)


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

         setBackgroundImage(image, for: UIBarMetrics.default)
     }
}
Shivam Tripathi
  • 1,405
  • 3
  • 19
  • 37
sejal thesiya
  • 11
  • 1
  • 9

1 Answers1

3

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)
}
shanezzar
  • 1,031
  • 13
  • 17
  • Welcome, if this is what you were looking for just thumbs up and make it an approved answer :) – shanezzar May 11 '18 at 06:14
  • 1
    Should be noted that this won't work with an iOS11 large title option, for gradients on that, check out: https://stackoverflow.com/questions/46196848/custom-background-image-with-large-titles-navigationbar-in-ios-11 – 10000RubyPools Jan 07 '19 at 01:21