Auto Layout not properly handling iPhone X notch

Question

I have implemented a pageViewIndicator to the top of my application using swift. I have constantly tested it on my personal iPhone, which has worked, but when using the iPhone X simulator, I have noticed that it disappears behind the notch, simply because I did not reference to place it within the safe area or the safe area is not properly configured yet. Here is the comparison:

It seems like an easy question, yet I currently have not found any proper support on how to handle this: the main suggestion is to adjust the safeAreaInsets, yet I do not understand how to apply this to the AutoLayout functionality. I have tried adding a topAnchor constraint to the pageController, yet would it even be possible editing this using basic arithmetic?

pageControl.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

Answer 1

I have found my problem, which was actually something I have simply overseen: I forgot to add

pageControl.translatesAutoresizingMaskIntoConstraints = false

to the pageControl before adding it as a subview. With this, I was able to assign following constraints to properly position my pageController where I wanted it to be:

let safeViewMargins = self.view.safeAreaLayoutGuide
pageControl.topAnchor.constraint(equalTo: safeViewMargins.topAnchor).isActive = true
pageControl.leadingAnchor.constraint(equalTo: safeViewMargins.leadingAnchor).isActive = true
pageControl.trailingAnchor.constraint(equalTo: safeViewMargins.trailingAnchor).isActive = true

This then perfectly ran on all devices.

Answer 2

There is no need to "adjust" anything. The whole point of the safe area is that its top is below the status bar on non-X iPhones and below the "notch" on an iPhone X. That is what the safe area is for.

So, just pin the top of the page control to the top of the safe area. Here's how it looks on an iPhone 5s simulator:

And here's how it looks on an iPhone X simulator:

Answer 3

I have the same issue in an app I'm currently upgrading. It has a column of buttons on the right side on the main screen. In landscape orientation with the notch on the right, the buttons are partially cut off. I don't want to move the buttons if I don't have to because that will significantly reduce the dimensions of a message area to the left of that, especially in Portrait mode.

I didn't see a constraint in Xcode corresponding to a "safe area" and didn't want to go into the rabbit hole that is dynamic positioning, so my solution was to restrict the orientations to Portrait and Landscape Right (which means notch on the left).

It would be great if we had per-device-type orientation restrictions, but not holding my breath for that.

Hoping in a couple of years, this ugly notch fad goes away.