Exclude navigation bar from iOS "safe area"

Question

In my iOS app, I have views rendered beneath the navigation bar. This is because the navigation bar is hidden until the user taps the screen.

The screenshots below illustrate my problem.

The "X" button is rendered beneath the iPhone X's notch and can hardly be seen. This is when I constrain the button's topAnchor to its superview!.topAnchor.

Note that this works as intended for all devices except the iPhone X.

The "X" button in this screenshot is anchored to its superview!.safeAreaLayoutGuide.topAnchor and renders below the navigation bar. This makes sense given Apple's documentation on safeAreaLayoutGuide:

"this guide reflects the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views."

However, I want the "X" button to render below the iPhone X's notch and underneath the navigation bar. Here's what it looks like when the navigation bar is hidden:

The "X" button should render right below the notch.

So my question is:

Is there a way to exclude the navigation bar from a view's safeAreaLayoutGuide? And if not, what are my options, other than manually offsetting the button on iPhone X's.

Note that I'm doing everything programmatically. I no longer use Storyboards.

Thanks!

Answer 1

You can change the view controllers safe area insets by adding additional insets. Create a UIEdgeInsetsMake() object where you subtract the navigation bar height from the top inset. Then add it to the View Controllers additionalSafeAreaInsets.

Declaration: var additionalSafeAreaInsets: UIEdgeInsets { get set }