John Doah
John Doah

Reputation: 1999

How to make Navigation Bar to conform to safe area?

I moving from a screen without a navigation bar to a screen with a navigation bar. When going to the navigation bar screen, the bar is not included in any safe area constraints and is overlapping with the status bar on the iPhone X. I looked for a solution but nothing worked for me. How can I make the navigation bar to conform to safe area guide on the iPhone X so it won't overlap? also, it's height seems too short, but I guess that would be solved with the constraints.

Thanks in advance!

AppDelegate:

var window: UIWindow?
var navigationController: UINavigationController?
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    window = UIWindow(frame: UIScreen.main.bounds)

    if let window = window{
        let mainVC = ViewController()
        navigationController = UINavigationController(rootViewController: mainVC)
        window.rootViewController = navigationController
        window.makeKeyAndVisible()
    }
    return true
}

This is the method I'm using to move from ViewController to AboutViewController:

    @objc private func infoButtonTap(){
    let aboutVC = AboutViewController()
    self.navigationController?.pushViewController(aboutVC, animated: true)
}

EDIT: This is how it looks: https://i.sstatic.net/ONxTb.jpg

AboutVC:

this line is in viewDidLoad:

        navigationController?.isNavigationBarHidden = false

to make the navigation bar visible.

Upvotes: 3

Views: 6036

Answers (4)

mrc5
mrc5

Reputation: 79

I'm not quiet sure what the problem is. Your screenshot refers to landscape mode. This behaviour is intended since iOS8 for landscape. As you included the navigationbar via the corresponding UINavigationController and pushed the next ViewController you are good to go as you are.

UINavigationBar is 44ps but StatusBarFrames differ - you could work with UIApplication.shared.statusBarFrame.height to get the actual height of statusbar and add it to you navigationbar-height.

Btw: If you want to respect the sareAreaLayouts for iPhone X, Xs and Xr there is a suitable NSLayout-Y/X-AxisAnchor to satisfy your needs.

Upvotes: -1

Developer Sheldon
Developer Sheldon

Reputation: 2160

If you really want to make your navigation controller to be within the safe area. This is one solution for you.

  1. Created a UIController as the very base controller of everything. Let's call it SuperParentController.

  2. Make sure SuperParentController also be the parent of your navigation controller.

  3. Then you can operate the content and layout for your SuperParentController to make sure navigation controller is positioned as you wanted.

We kinda use this strategy to show a universal banner for our app that can be presented any time.

Upvotes: 6

Jeffery Thomas
Jeffery Thomas

Reputation: 42598

Everything in your sample looks correct. I'm guessing there is some manipulation of the frames happening in either ViewController or AboutViewController. Look to see when the window.rootViewController changes it frame or bounds to debug what's happening.

Upvotes: 0

Marwan
Marwan

Reputation: 96

Embed the view controller in a navigation controller rather than adding a navigation bar manually. Select the view controller in your storyboard then follow the instructions in the attached screenshot.

Editor -> Embed In -> Navigation Controller

Upvotes: -1

Related Questions