Position Navigation Bar top of the safe area

Question

I upgraded to a new iphone and upgrade my apps. I added in the x/xr/xs layout so the black borders are gone now.

I have a navigation bar at the top of my views but now it rides up into the status bar too much? How do I fix this? Doing it programmatically and not storyboard (to learn code).

Some code:

func buildTopbar()
{
    statusbar = UIView(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width, height: 20));

    statusbar.backgroundColor = UIColor(red: 247/255, green: 247/255, blue: 247/255, alpha: 1.0);

    navigationbar = UINavigationBar(frame: CGRect(x: 0, y: 20, width: self.view.bounds.width, height: 44));

    navigationbar.barTintColor = UIColor(red: 247/255, green: 247/255, blue: 247/255, alpha: 1.0);

    let texta = UIBarButtonItem(title: "A", style: .plain, target: self, action: #selector(settingToolbar(sender:)));
    let textb = UIBarButtonItem(title: "B", style: .plain, target: self, action: #selector(inviteToolbar(sender:)));

    texta.tintColor = ColorHelper.primaryColor();
    textb.tintColor = ColorHelper.primaryColor();

    ...

    navigationbar.setItems([title], animated: false);

    self.view.addSubview(statusbar);
    self.view.addSubview(navigationbar);
}

I set the status bar at 20 which was what it was in the old phones.

okay , are you used the autolayout or auto resizing – Anbu.Karthik Dec 04 '18 at 06:44 — Anbu.Karthik, Dec 04 '18 at 06:44

score 2 · Answer 1 · answered Dec 04 '18 at 06:50

I'd recommend to create a UINavigationController and add your controller to that Navigation Controller, it will automatically adjust the navigation bar.

In case you want to manually add the navigation bar. You must set it's frame Y position right.

To calculate starting Y position of Nav bar

let startingYPos = UIApplication.sharedApplication.statusBarFrame.size.height;
navigationbar = UINavigationBar(frame: CGRect(x: 0, y: startingYPos, width: self.view.bounds.width, height: 44));

score 1 · Answer 2 · answered Dec 04 '18 at 07:28

My suggestion is go with adding some constraints for the top.And set the constraints values based on your iPhone device size or iOS Versions. Recently i achieved it by setting like this. My issues was with iOS Version, my view is near to status bar.So i set some constraints programatically and handled it. This way it wont affect the iphone screens below iphone 7.

In Viewdidload()
     if #available(iOS 11, *)  {
            }
            else{
                topConstraints.constant = 20
            }

Here i checked the version's. You can also check the device and you can set the constraints. If you want for the device check, let me know.

Hope it will work !!

score 0 · Answer 3 · answered Dec 04 '18 at 06:52

Height of status bar has changed now from 20pt to 44pt (from iPhone X onwards). If you want to use your existing code, you need to apply device specific check for status bar height.

Here is a post which explains nav bar layout(for iPhone X and later devices) in more detail:

What is the top bar height of iPhone X?

Suhail · Answer 4 · 2018-12-18T13:31:56.027

I would suggest you to take UIScreen height & put it in a condition:

if UIScreen.main.bounds.size.height > 750 {
        navigationBar  = UINavigationBar(frame: CGRect(x: 0, y: 43, width: view.frame.size.width, height: 44))
    }
    else{
        navigationBar  = UINavigationBar(frame: CGRect(x: 0, y: 20, width: view.frame.size.width, height: 44))
    }

it may not work if your view's having a scrolling view & it's height is set to more than default value, then try :-

view.bounds.size.height

score 0 · Answer 5 · answered Aug 10 '20 at 09:20

You can have it aligned to the safe area even without UINavigationController or some "magic" fixed height constants.

You should have @IBOutlet of your navigation bar (or reference if navigation bar is made programmatically). Also, keep the bar's top constraint to Safe area.
Make your ViewController conform to UINavigationBarDelegate and set delegate of navigation bar (navigationBar.delegate = self)
Implement this function and return .topAttached:

func position(for bar: UIBarPositioning) -> UIBarPosition { return .topAttached }

Position Navigation Bar top of the safe area

5 Answers5