0

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:

pageController on iPhone 8 pageController on iPhone X

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
vrthmy5312
  • 107
  • 3
  • 14

3 Answers3

4

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:

enter image description here

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

enter image description here

matt
  • 515,959
  • 87
  • 875
  • 1,141
  • That does make sense, but how is it possible to "pin" it to the safe area. Is there any way, when defining the y-position, to assign it to the highest possible spot within the safe area? – vrthmy5312 Feb 03 '18 at 20:31
  • 2
    Yes, just set the top of the page control equal to the top of the safe area (constant of zero). It sounds like you may not know _anything_ about autolayout. You'd better start learning about it, because it's crucial if you want your interface to work on all sizes of phone. – matt Feb 03 '18 at 20:39
  • `pageControl = UIPageControl(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 0))` is the code I applied to define the pageControl. The problem with this, however, is that it positions the pageControl for the iPhone X right onto the border of the ears', just in the center, completely ignoring the notch. Assigning 50 to the y-value would set this outside of this non-visible area, but make all other devices not fit visually. – vrthmy5312 Feb 03 '18 at 20:59
  • 1
    Right, because that's not what I said to do. `UIPageControl(frame:` is _not_ autolayout. It is _not_ "pinning" anything to anything. Find out about autolayout. Try googling; it ain't much but it's a start. – matt Feb 03 '18 at 21:51
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.

vrthmy5312
  • 107
  • 3
  • 14
-2

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.