How to overlap status bar when adding UIView on top of UINavigationBar?

Question

I am using UINavigationController as a rootController with UIViewController. In UIViewController, i am adding custom UIView into the navigationBar(because i want to use CAGradientLayer to my custom UIView).

Everything's working fine except that my custom UIView does not overlap the status bar, which means my custom UIView is padding from top of the navigationBar.

Is there any solution and way to make it overlap statusBar? Here i included UI of what i want to achieve.

Why won't you tried [this](https://stackoverflow.com/questions/30884170/how-can-i-set-the-uinavigationbar-with-gradient-color) ?? Instead of adding new view you can add gradient to your nav bar. — dahiya_boy, Aug 20 '19 at 06:37

score 0 · Answer 1 · answered Aug 20 '19 at 06:37

Status bar is always there so if you don't want it when you add your view you have to override a property prefersStatusBarHidden of the ViewController where your new View is added like so:-

Declare a new variable say:

   var myNewViewIsVisible: Bool = false {
    didSet {
        DispatchQueue.main.async { [weak self] in
            guard let self = self else {return}
            self.setNeedsStatusBarAppearanceUpdate()
        }
    }
}

Then override the property like so: -

 override var prefersStatusBarHidden: Bool {
    return myNewViewIsVisible
}

Explanation: First you declare your variable and observe it for changes. If it is changed ie.. when you add your new view, change it to true then force the ViewController to update statatusBar, that will cause it to hide because your myNewViewIsVisible will be true.

Thank you for the response but what i want is status but should be there no disappearing when i add the view. I want my view overlap the navBar fully not like that image mentioned above. — Ulugbek, Aug 20 '19 at 06:44

score 0 · Answer 2 · answered Aug 20 '19 at 06:59

        let gradient = CAGradientLayer()
        gradient.frame =  CGRect(x: 0, y: 0, width: navigationBar.frame.width, height: 100)

        let leftColor = UIColor.red
        let rightColor = UIColor.purple
        gradient.colors = [leftColor.cgColor, rightColor.cgColor]
        gradient.startPoint = CGPoint(x: 0, y: 0.5)
        gradient.endPoint = CGPoint(x: 1.0, y: 0.5)

        navigationBar.setBackgroundImage(image(fromLayer: gradient), for: .default)


     func image(fromLayer layer: CALayer) -> UIImage {
         UIGraphicsBeginImageContext(layer.frame.size)

         layer.render(in: UIGraphicsGetCurrentContext()!)

         let outputImage = UIGraphicsGetImageFromCurrentImageContext()

         UIGraphicsEndImageContext()

       return outputImage!
      }

score 0 · Answer 3 · answered Aug 20 '19 at 07:00

You need to hide the navigation bar :

self.navigationController?.setNavigationBarHidden(true, animated: false)

Then you need to show status bar :

override var prefersStatusBarHidden: Bool{
     return false
 }
override var preferredStatusBarStyle: UIStatusBarStyle {
     return .lightContent
 }

Also then you have to set the background of the status bar view :

let statusBarView = UIView(frame: CGRect(x: 0, y: 0, width:UIScreen.main.bounds.width, height: UIApplication.shared.statusBarFrame.height))
statusBarView.backgroundColor = UIColor.gray
self.navigationController?.view.addSubview(statusBarView)

How to overlap status bar when adding UIView on top of UINavigationBar?

3 Answers3