0

I am trying to figure out how to use UINavigationController. Whenever I create one, and set a UIViewController as rootViewController, It shows the background color of the UIViewController as the color of the status bar, like this:

Nav Controller Example

The UIViewController .backgroundColor is set to System Teal Color, the Navigation Bar .background color is UIColor.gray. So the root view controller is showing through the navigation bar in the status bar area. How do I make the status bar the same color as the nav bar? Why is that area transparent?

Here's the main view controller class, which contains the UINavigationController as a child.

class ViewController: UIViewController {
let navVC: UINavigationController?
var mainVC: UIViewController?

required init?(coder: NSCoder) {
    mainVC = MainVC(nibName: "MainVC", bundle: nil)
    mainVC?.title = "Main"
    navVC = UINavigationController(rootViewController: mainVC!)
    navVC?.navigationBar.backgroundColor = UIColor.gray
    
    super.init(coder: coder)
}

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    navVC?.willMove(toParent: self)
    self.addChild(navVC!)
    self.view.addSubview(navVC!.view)
    navVC?.didMove(toParent: self)
    
    navVC?.view.translatesAutoresizingMaskIntoConstraints = false
    navVC?.view.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
    navVC?.view.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor).isActive = true
    navVC?.view.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true
    navVC?.view.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor).isActive = true
    
}

}

Here's the project for this example. Example Project

Build
  • 80
  • 8
  • Have you tried this: https://stackoverflow.com/questions/56556254/in-ios13-the-status-bar-background-colour-is-different-from-the-navigation-bar-i ? – lazarevzubov Jan 03 '22 at 21:11
  • Ok so I tried that method and now the nav bar is really short, like this: https://drive.google.com/file/d/1-sv9AOFeciDveHRyIFpaKAg-CcijM26V/view?usp=sharing – Build Jan 03 '22 at 21:34
  • 1
    Oh crap, I was using a color that didn't exist, in this project "TabbarColor". I changed it to UIColor.gray and it's working now perfectly. Thanks! – Build Jan 03 '22 at 21:54

1 Answers1

1

Thanks to lazarevzubov, who suggested this answer. Setting the navigationBar.standardAppearance and navigationBar.scrollEdgeAppearance fixed the problem.

Build
  • 80
  • 8