Navigation Bar gradient background image not uniformed across different simulator device?

Question

I am setting my navigation bar background image from gradientlayer as follow:

first i have a global gradient layer declared in my Util.swift

let lightBlueToBlueGradientLayer: CAGradientLayer = {
    let layer = CAGradientLayer()
    layer.colors = [
        UIColor(red: 29/255, green: 172/255, blue: 235/255, alpha: 1).cgColor,
        UIColor(red: 17/255, green: 116/255, blue: 187/255, alpha: 1).cgColor]
    return layer
}()

Then i set my navigation bar background image as the gradient layer

let navBackgroundImageGradient = lightBlueToBlueGradientLayer 

func configureNavBar(){
    let nav = self.navigationController?.navigationBar
    navBackgroundImageGradient.frame = (nav?.bounds)!
    navBackgroundImageGradient.startPoint = CGPoint(x: 1.0, y: 0.5)
    navBackgroundImageGradient.endPoint = CGPoint(x: 0.0, y: 1.0)
    nav?.setBackgroundImage(self.image(fromLayer: navBackgroundImageGradient), for: .default)
    nav?.tintColor = .white
}

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

I have an Iphone 6 physical device and i've tested it and it seems okay. But since my project will have to target different iOS device i wanted to use the simulator to test out and i've noticed this.

My Iphone 8 simulator nav screenshot

My Iphone X simulator nav screenshot

Obviously i don't have iphone 8...to iphone X physical device to test it all out, but i've noticed that in the simulator, device with smaller screen tends to have this happen. (eg. iphone8, iphone 4s, etc..)

Now my question is this, is this just a simulator bug or will it happen to the real device as well? (or is there problem with my code?)

Thanks in advance.

Jay Patel Jay Patel · Accepted Answer · 2018-08-21T06:44:26

You need to change nav height by adding status bar height.

let nav = self.navigationController?.navigationBar
nav?.frame.size.height += UIApplication.shared.statusBarFrame.height

Let iOS decide to get height of iPhone (iPhone 5/6/7/8 or iPhone X)

Navigation Bar gradient background image not uniformed across different simulator device?

1 Answers