2

I'm trying to update my app for the new iPhone X. After reading about the safe area feature and the check box "Safe Area Relative Margins" in each UIObject's "Size Inspector" (ruler tab), I didn't think this would be too bad. However, that feature does not seem to be working for me.

Nothing changed for regular iPhones, which is good, however for the X, the top of my app overlaps the top inset of the phone by a third. Is there any known way to fix this* or something I'm missing?

*By fix this, I mean make it so that my objects start below the outcrop, like the second picture.

What is happening:

Safe area relative margins not working

Desired Behavior (from https://arstechnica.com/gadgets/2017/11/how-devs-updated-their-apps-for-the-iphone-xs-screen-and-the-notch/): Desired behavior Constraints

Prime624
  • 226
  • 4
  • 14
  • You haven't told us anything about what you're actually _doing_, so it's impossible to say what you're doing _wrong_. – matt Nov 28 '17 at 01:15
  • I'd like the top bar to begin just below the black outcrop, but it's not doing this. According to the descriptions of the safe area I've read, it should do this automatically, which it doesn't, despite that I've enabled it. – Prime624 Nov 28 '17 at 02:58
  • As I said in the question, I checked the "safe area relative margins" box in each of my UIViews. That is the only thing I did, but it's not doing what it says (making the margins relative to the safe area). What do you mean "use it in your autolayout constraints"? I'm not using auto-layout because it didn't work as advertised when I started a couple years ago. I'd like to not have to switch if possible, which is why I'm asking here. My UIViews are relative to the margins (ex: x offset = 0). – Prime624 Nov 28 '17 at 07:49

3 Answers3

2

I too have wasted hours on this. And while I cannot answer your question of why this is broken in Xcode, I can provide a solution.

But first let me note than in Xcode 11.3.1, I experience the same issue in a new project created from scratch.

Set up your storyboard:

  1. On your storyboard, select "Use Safe Area Layout Guides". This will add a safe area to each of your ViewControllers. It will also require you to target iOS9+. You might be able to skip this step though (see step 4 below).
  2. View your storyboard as iPhone 4s.

Fix each ViewController:

  1. Select all views under the top-level view.
  2. Click Editor | Embed In | View Without Inset. This creates a new view and puts all your views inside.
  3. Make this new view expand to the safe area by adding safe area constraints (by control-dragging your new view onto the top level view).
    • Leading space to safe area
    • Top space to safe area
    • Trailing space to safe area
    • Bottom space to safe area
  4. If you did not opt into using a safe area storyboard above, you may be able to create four equivalent constraints by using the Top Layout Guide, Bottom Layout Guide, and the left/right sides of the top-level view. This may not work in landscape though. And I did not test this.
  5. Set your new view as transparent.
  6. Give your new view a name like "SafeAreaView".
Ian
  • 841
  • 5
  • 10
1

In iOS 11, margins are inset from the safe area. Thus, your zero top margin becomes a 20 top margin — explaining your screen shot. If that's not what you want, set the view's insetsLayoutMarginsFromSafeArea property to false.

matt
  • 515,959
  • 87
  • 875
  • 1,141
  • That is exactly what I'm aiming for. Unfortunately, as shown in the first picture, the safe area overlaps with the inset. Do I need to set it manually? – Prime624 Nov 28 '17 at 17:53
  • Since you have _repeatedly_ failed to respond to my _repeated_ requests to show your code and reveal what you are doing, I can go no further at this time. I cannot fix code that I cannot see. – matt Nov 28 '17 at 18:04
  • 1) I told you _everything_ that I am doing. I don't have code for it because I did it in the storyboard editor. – Prime624 Nov 28 '17 at 18:07
  • If you "did it in the storyboard editor" then you must have done it with constraints (to the margins? to the edges? what?). But, again, you have not revealed what those constraints are (and in fact at one point you denied using constraints, which confused me). – matt Nov 28 '17 at 18:13
  • "My UIViews are relative to the margins (ex: x offset = 0)." So, for specifically the top bar, the y offset, relative to the margin is 0. – Prime624 Nov 28 '17 at 18:17
  • Yes, but this is about y and the top of the view, is it not? This reluctance merely to show an actual view in the storyboard and its constraints, along with the difference between what you actually get and what you desire, is most mysterious. That is how we ask questions here on Stack Overflow. Please see https://stackoverflow.com/help/mcve – matt Nov 28 '17 at 18:19
0

In my case modalPresentationStyle = .fullScreen has to be set to the view controller being presented

Anton Tropashko
  • 5,486
  • 5
  • 41
  • 66