Join Steven Lipton for an in-depth discussion in this video Layout and iPhone X, part of iOS Development Tips Weekly.
- [Instructor] With the introduction of the iPhone X, you get that full screen, but that notch gets in the way. To get around that and some common other problems, 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 Nine. Set your simulator to iPhone X, and run this. When you run this, you'll see that there are some things at the top but we can't tell where they are because they're hidden under the navigation bar.
I can rotate with the command right arrow, and you can see some of it pop up. You've got some buttons here. And we've got something else hidden under the navigation bar. I can also see that some of my buttons could get obscured by the notch. Go ahead and stop the app. Head over to the main storyboard. The safe area is meant to prevent this behavior. As you rotate an iPhone X, that notch in 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 starting at Xcode Nine. Click on the donuts in the document outline, or on the screen. Control-drag up to the view, and release. You'll get a menu that only lets you go to the safe area, not the superview. Shift click top, bottom, leading and trailing space to safe area. And add the constraints.
When you open constraints in the document outline, you'll see the donuts are in relationship to the safe area. This application was a storyboard made in a previous version of Xcode, 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 equals top. In the attributes inspector, change superview dot top to safe area.
The constant will change to keep the position the same, so change that constant to zero. The pay bar appears. Now do the same for the stack view's leading and trailing buttons. So we've got stack view leading, and we've got second item is superview leading, I'm going to take that. I'm going to make that the safe area. That one's already zero so I don't have to change anything. And the same thing with the stack view trailing. I'm going to change the superview here, which is on the top, to safe, and it's zero.
And the constant is already zero. So we can go ahead and run. On the iPhone X, we can now see the pay button, and we can see our donut type buttons here. If I hit the command left arrow, I can go back to portrait and I can see everything once again. And we'll notice that everything's not hiding behind the navigation bar, and one more time, going back to landscape, you can see that the pay button is flush, but the stack view is not impeded by the notch.
Go ahead and stop that. 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. I'll click on the leading constraint, either on the I-beam or I can do it in the constraints in the document outline. I can go here, and where it says safe area leading, I'm going to change that to superview.
And then I'm going to change the constant here to zero. And I'll do the same thing for the top. Change from safe area to superview. Change that to zero. And then do the same thing again for the trailing. Safe area goes to superview. Change the constant to zero. Same thing on the bottom, safe area becomes superview, change the constant to zero.
Of course I've now obscured everything here, so what I'm going to do is take donuts and select it in the outline, and I'm going to move it above pay, and between safe area and pay here, by just dragging, and that puts it underneath. It's still distorted, so I'm going to go from content mode, and change it to aspect fill. And then I'm ready to run the app again.
And this time I have my donut background, and here I'm edge to edge, and I can again go back to portrait, and here I'm edge to edge. The safe area is great for keeping navigation bars, tool bars, 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 like backgrounds where it's not very useful. As I've shown, these are all as easy as changing an attribute or two and a constraint.