UINavigationBar status bar color issue on iPhone X

Question

On iPhone 8 :

On iPhone X :

The issue lies with status bar. The is nothing exclusive I am doing here. It is just that the color is a gradient one, but it should not matter.

ViewController's attributes :

Function for setting gradient :

func setNavigationBarAppearence() {
        let gradient = CAGradientLayer()
        let sizeLength = UIScreen.main.bounds.size.height * 2
        let defaultNavigationBarFrame = CGRect(x: 0, y: 0, width: sizeLength, height: self.navigationController.navigationBar.frame.size.height)
        gradient.frame = defaultNavigationBarFrame
        gradient.colors = [UIColor(red: 30/255, green: 234/255, blue: 191/255, alpha: 1).cgColor, UIColor(red: 12/255, green: 198/255, blue: 183/255, alpha: 1).cgColor]
        UINavigationBar.appearance().setBackgroundImage(self.image(fromLayer: gradient), for: .default)
        UINavigationBar.appearance().tintColor = UIColor.white        
    }

    func image(fromLayer layer: CALayer) -> UIImage {
        UIGraphicsBeginImageContext(layer.frame.size)
        layer.render(in: UIGraphicsGetCurrentContext()!)
        let outputImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return outputImage!
    }

Answer 1

This was related to the total height of navigation bar + status bar. I fixed it as follows :

func setNavigationBarAppearence() {
        let gradient = CAGradientLayer()
        let sizeLength = UIScreen.main.bounds.size.height * 2
        var defaultNavigationBarFrame = CGRect(x: 0, y: 0, width: sizeLength, height: self.navigationController.navigationBar.frame.size.height)
        if UIDevice().userInterfaceIdiom == .phone {
            if UIScreen.main.nativeBounds.height == 2436{
                defaultNavigationBarFrame.size.height += 44
            } else {
                defaultNavigationBarFrame.size.height += 20
            }
        }

        gradient.frame = defaultNavigationBarFrame
        gradient.colors = [UIColor(red: 30/255, green: 234/255, blue: 191/255, alpha: 1).cgColor, UIColor(red: 12/255, green: 198/255, blue: 183/255, alpha: 1).cgColor]
        UINavigationBar.appearance().setBackgroundImage(self.image(fromLayer: gradient), for: .default)
        UINavigationBar.appearance().tintColor = UIColor.white        
    }

    func image(fromLayer layer: CALayer) -> UIImage {
        UIGraphicsBeginImageContext(layer.frame.size)
        layer.render(in: UIGraphicsGetCurrentContext()!)
        let outputImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return outputImage!
    }  

Not the perfect fix I would say, but a working alternative.

Answer 2

Here is how I used this:

extension CAGradientLayer {
    convenience init(frame: CGRect, colors: [UIColor]) {
        self.init()
        self.frame = frame
        self.colors = []
        for color in colors {
            self.colors?.append(color.cgColor)
        }
        startPoint = CGPoint(x: 0, y: 0)
        endPoint = CGPoint(x: 0, y: 1)
    }

    func createGradientImage() -> UIImage? {
        var image: UIImage? = nil
        UIGraphicsBeginImageContext(bounds.size)
        if let context = UIGraphicsGetCurrentContext() {
            render(in: context)
            image = UIGraphicsGetImageFromCurrentImageContext()
        }
        UIGraphicsEndImageContext()
        return image
    }
}

extension UINavigationBar {
    func setGradientBackground(colors: [UIColor]) {
        var updatedFrame = bounds
        updatedFrame.size.height += self.frame.origin.y 
        // above adjustment is important, otherwise the frame is considered without 
        // the status bar height which in turns causes the gradient layer to be calculated wrong
        let gradientLayer = CAGradientLayer(frame: updatedFrame, colors: colors)
        setBackgroundImage(gradientLayer.createGradientImage(), for: .default)
    }
}

Usage:

override func viewDidLoad() {
    ...
    let colors = [UIColor(red: 30/255, green: 234/255, blue: 191/255, alpha: 1), UIColor(red: 12/255, green: 198/255, blue: 183/255, alpha: 1)]
    navigationController?.navigationBar.setGradientBackground(colors: colors)
    ...
}

Answer 3

Try this approch. May this solve your problem

 /// Applies a background gradient with the given colors
    func apply(gradient colors : [CGColor]) {
        var frameAndStatusBar: CGRect = self.bounds
        frameAndStatusBar.size.height += UIApplication.shared.statusBarFrame.height

        let gradient = CAGradientLayer()
        gradient.frame = frameAndStatusBar
        gradient.colors = colors
//        gradient.locations = [0.0,1.0]
        gradient.startPoint = CGPoint.init(x: 0.0, y: 0.0)
        gradient.endPoint = CGPoint.init(x: 0.0, y: 1.0)
        if let img = self.image(fromLayer: gradient)
        {
            setBackgroundImage(img, for: .default)
        }
    }

    /// Creates a gradient image with the given settings
    func image(fromLayer layer: CALayer) -> UIImage? {
        UIGraphicsBeginImageContext(layer.frame.size)

        if let context =  UIGraphicsGetCurrentContext()
        {
            layer.render(in:context)

            let outputImage = UIGraphicsGetImageFromCurrentImageContext()

            UIGraphicsEndImageContext()

            return outputImage
        }
        return nil
    }