iPhone X - Hidden status bar pushes Navigation Bar upwards

Question

I'm testing iPhone X behavior using the Xcode simulator. For some odd reason, if I'm hiding the Status Bar the Navigation Bar pushed upwards causing the title to completely disappear and cutting the left and right buttons. This is happening only on the iPhone X.

Illustration:

How can I hide the status bar and keep the Navigation Bar at a visible position?

UPDATE:

Sample project for your convince:

https://drive.google.com/file/d/0B5qJARV-Oc9ra1hvZkpXZm9lRUE/view?usp=sharing

Can you try to enable the "Relative to margin" top constraint? — Kerberos, Sep 29 '17 at 13:15
@Kerberos I don't think I have this option. The navigationBar is built in (I'm doing Editor > Embed In Navigation controller), so It's static navigationBar. I can't pull constraints.. — Roi Mulia, Sep 29 '17 at 14:16
@RoiMulia not on the navigationBar but on the View of the ViewController. — Kerberos, Sep 29 '17 at 14:36
@Kerberos I don't find this option. I don't think it's exists. I've attached a demo project (link at the OP). Hope we can shed some light on this issue, as I'm sure it'll be very commonly asked.. — Roi Mulia, Sep 29 '17 at 14:58
If you want the status bar hidden, but you're not putting something else up in the "ears" of the iPhone X display... why? — rickster, Sep 29 '17 at 16:58
@rickster On all the previous iPhone it's a common scenario to hide the status bar. It's only make sense that on the iPhone X that status bar won't be visible if the developer chose so. And it's making even more sense that if the developer chose not to show it, It won't damage the UI (like it was in previous devices), and the expected result would be the same one Nathan present below. — Roi Mulia, Sep 30 '17 at 16:39
On previous iPhones, hiding the status bar gained you space that’s useful to your app, so hiding it became commonplace at least some kinds of apps. It’s harder to do something useful with the “ears” on iPhone X, hence the advice in [Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/): “if your app currently hides the status bar, reconsider that decision on iPhone X”. — rickster, Oct 01 '17 at 05:18
Have you tried this code on Xcode 9 beta 1 / iOS 11.1 yet? Thankfully I see different (better) behavior there, where nav bar title is still visible even when status bar is hidden. — Peter E, Oct 03 '17 at 20:10
i think you need to use "safeAreaLayoutGuide" new update in iOS 11 — Nandkishor mewara, Oct 09 '17 at 06:35

score 14 · Answer 1 · answered Sep 29 '17 at 17:08

14

One solution is to embed the navigation controller inside a container view controller which is properly constrained to the safe area.

Just create another view controller and drag a "Container View" from the Object Library. This view has top, bottom, leading, and trailing constraints to the safe area, all with constants equal to 0. If you control-drag from the container view to the navigation controller, you'll get an option to set an "embed segue" which will embed the selected view controller as a child view controller.

I set the status bar to be hidden on the new view controller I created, and it works fine.

This feels like something that UINavigationBar should handle automatically, but this workaround seems like it should work pretty well.

Another note: if you change the color of the navigation bar, you'll also need to create another view above the container view, and change its color to match the color of the navigation bar.

answered Sep 29 '17 at 17:08

nathangitter

9,607
3
33
42

Hey Nathan. Thank you for providing this answer. A few questions if I may: 1) How did you create the screenshot of the iPhone Including the buzzels etc'? 2) In general, like you've said, It's like a pretty basic scenario which Apple didn't handle, I'm wondering if this is the expected behavior (unlikely I believe), or else should I feel a Radar? What do you think? – Roi Mulia Sep 30 '17 at 16:37
2

1) I took a screenshot of the simulator using `Command`-`Shift`-`4`, and then pressed `space` and clicked on the simulator window. You may have to check Window > Show Device Bezels. 2) I think this is an uncommon use case. Normally if you are using a navigation bar, there's no harm in leaving the status bar visible. I don't expect this to be fixed anytime soon, as it breaks common iOS conventions. – nathangitter Sep 30 '17 at 17:05
@RoiMulia Is my solution working for you? Let me know if you are having any issues. – nathangitter Oct 08 '17 at 15:32
1

Hey Nathan. In general this workaround would work (not for my specific case but for more general issues). But as @Peter E commented at the OP, it might was a bug that solved at iOS 11.1/xCode 9.1. You'll probably get the bounty tho because you are the highest voted answer – Roi Mulia Oct 08 '17 at 17:34
@RoiMulia Just tried it in the Xcode 9.1 beta on iOS 11.1. When I set the status bar hidden in a view controller that is embedded in a navigation controller, the status bar is shown anyways. Again, this could change in a future beta or iOS version. – nathangitter Oct 08 '17 at 20:12
1

How would you do this programatically without a story board? – Wez Jan 02 '18 at 11:10

Symanski · Answer 2 · 2017-10-07T23:51:46.647

I, for a small app, changed from using a Push to a Modal segue and adding in my own navigation bar. I used Push because it looks good, and already had a Modal for another part, which I wanted to animate differently for style reasons.

For smaller apps this may be the quickest and easiest solution, but my next update I need to use the navigation controller. For that I think I'll switch on the status bar, which is no big deal for me and allows it to work.

Nandkishor mewara · Answer 3 · 2017-10-09T07:10:51.250

0

I think you need to use "safeAreaLayoutGuide" new update in iOS 11

Apple has provided us with the necessary APIs to get around the unsafe regions of this iphone x. We do this by using the new safeAreaLayoutGuide anchors in our code safeAreaLayoutGuide

edited Oct 09 '17 at 07:10

answered Oct 09 '17 at 06:41

Nandkishor mewara

2,552
16
29

iPhone X - Hidden status bar pushes Navigation Bar upwards

3 Answers3