UI layout for iOS 11 and iPhone X

Question

Created Jun ’18

Replies 6

Boosts 0

Views 1.2k

Participants 3

We have an app which has been out there since 2011 which was written with objective-c. The latest jump to iOS 11 prevented it from running as it wasn't 64-bit. So we're working on updating it for that. It now runs under iOS 11 with our internal builds.

I noticed that when I run on the iPhone X simulator, though, my views all "snap" to the upper left corner of the screen. This interferes with the "notch" which I'm aware we need to avoid and it just doesn't look good.

I tried selecting the View in the XIB editor and then in the attributes inspector changing the "content mode" attribute, but this does not seem to have any effect.

Is there an easy way to just ask for my view contents to remain as they are, except to be centered vertically and horizontally on the screen?

The app will not run on just iPhone X, it will also be used on previous iPhone devices as well as iPods and iPads.

Boost

Answer 1

Claude31 OP

Jun ’18

Did you set a safe area for the constraints ?

0

Answer 2

Nerdtron OP

Jun ’18

No, I've seen descriptions of the safe area but am not sure how to add that to an existing XIB.

After more experimentation, I see that adjusting the layout constraint toggles (the arrows with the animation) may help. I'm thinking the right combination of those may allow me to just get my controls centered which would then look good on various sizes and avoid the notch area on the iPhone X.

0

Answer 3

Nerdtron OP

Jun ’18

Accepted Answer

I got it working. It was just a matter of properly setting up the layout arrows (position/size toggles in the XIB editor with the little animated rectangles, not sure of the exact name). Many of them had been set to lock to left top of the screen which is why the layout looked bad on a larger screen. By releasing all but the top one, the controls all center nicely on different sized screens. I then just had to shift the controls down a bit which results in them avoiding the "notch" on the iPhone X simulator.

I didn't figure out how to use the safe area stuff. Did some more reading on it, but it wasn't clear to me how to add a safe area display to an existing XIB layout. So it was experimenting with the above settings and then some manual adjustment and testing on the simulator and I think its looking pretty good now.

0

Answer 4

Claude31 OP

Jun ’18

Sure, you can tweak it manually. But, really, I would not go that way.

How does it work when you rotate device ?

Tomorrow, there will be notches with different sizes and you will run into problem.

To set safe area, just go to IB, select the Size Inspector for the view and check "Safe area layout guide". You will see "Safe area" appear in Document Browser.

0

Answer 5

KMT OP

Jun ’18

I believe that only 'safe area margins' is a choice when working w/XIBs.

'safe area layout guide' requires storyboards, where both choices are available.

0

Answer 6

Nerdtron OP

Jun ’18

The app currently does not deal with rotation, its locked to portrait orientation. Yes, there will probably be other "notches" to deal with in the future. When editing a XIB UI, I did see the safe area margins as KMT also mentioned and experimented with them but they didn't seem to have any effect visual or otherwise.

And no, I am not using storyboards, just a series of XIB files which I manually transition between in code.

0