iOS Development Tips Weekly is a series you can find at the Lynda.com and LinkedIn Learning libraries.  You can find the start project here on GitHub

iOS Developer’s Weekly: Layout and iPhone X

With the introduction of the iPhone X, you get that full screen, but the notch gets in the way. To get around that and common other problems on all phones, there is the safe area. Let me show you how to use the safe area, and how to avoid it when necessary.

Load the demo app. I’ve set this app up to be one you might have built before Xcode 9 or 10. Set your simulator to iPhone X and run this.

When it runs, There’s also something at the top, but we can’t tell what, hidden under the navigation bar.

I can rotate, and buttons can get blocked by the notch. You can also see something under the navigation bar starts to appear.

Stop the app.

The safe area is meant to prevent this behavior. As you rotate an iPhone X that notch and the navigation bar will move. The safe area takes this into consideration, changing the layout. Because this is so important, it is the default behavior of Xcode.

Click on the doughnuts in the document outline. Control-drag up to the view, and you’ll get a menu that only lets you set the safe view, not the superview.

Shift-click  top, bottom left and right for the constraints and add the constraints. You’ll see in the document outline the doughnuts are in relationship with the safe area.

This application was a storyboard made in Xcode 8, a situation you might run into. The Pay button and stack view here are aligned to the superview, not the safe view. You’ll need to correct this. Start with the Pay button. In the outline select the Pay.top  = top. In the attributes inspector , change Superview.top to safe area.top by clicking onto dropdown and selecting safe area.

The constant will change to keep the position the same, so change the constant to 0. The pay bar appears. Do the same for the StackView’s Leading and trailing constraints, though the constant remains 0.

Run this. In landscape, you see a big difference.

the stack view of doughnut types fits, while the pay button extends over the age area to the end. In portrait, we cansee the buttons.

I also want the donut photo to be an edge to edge  background. This is when you’ll want the superview instead of the safe area. I’ll start with the leading constraint, setting the constant to 0 when done. Then the top, with 0. Bottom with 0. And trailing with 0. The doughnut is on the wrong stack order for this so move  it between pay and the safe area. To keep the aspect ratio in the attribute inspector change the content mode to aspect fill.

Run the app. Rotate with command left or right arrow to check out different orientations. All work now.

The safe area is great for keeping navigation bars,  toolbars and the iPhone X notch from getting in the way of your applications. It is the default guide for laying out views in Storyboard. You’ll need to convert legacy code to use it, and a few situations where it is not useful. As I’ve shown, these all are as easy as changing an attribute or two  in a constraint.