Auto Layout is Xcode and iOS's way of handling different device sizes, aspect ratios, and resoluiions. This tutorial explains the basics of Auto Layout in Xcode 8.
- [Narrator] When you're designing an app for IOS, you gotta remember that the devices have different sizes, and different aspect ratios. So what we looked at earlier was matching your active scheme with your view as device. But what if you wanted your app to just look right on multiple devices? Where that's where something called auto layout comes into play. With auto layout we can place pins in our apps so we can pin user interface objects to the edges of the screen, or to other objects, we can control the spacing between objects.
All kinds of features that enable us to run the same app on multiple devices and have our displays adapt based on the display of the device when the app is running. So let's look at how that works. What I'm going to do is just click on a few different devices here in the view as section. So if you don't see the device section right here, just click on view as and you can toggle whether that's visible. So here what I want to do is just look at these different devices. So I'm going to an iPad Pro, 12.9 inch.
And it's actually kind of difficult to even find my label, so I'm going to zoom out using this minus button right here. And then I can zoom back in. And there, the label is right at the top over there. So these coordinates are coming based on the top left of our app. So if we want the right label to hug the right edge of the device, this is not going to work. So right now we have this left is here, and the right is over here.
So let's look at it on a different device. We've looked at an iPad Pro. I'm going to click that device drop down where I selected iPad, and I'm going to choose iPhone 6s plus. And we're getting the same problem here, where the right label does not hug the right edge. Same with the 6s, and then what about with the 4s? The 4s looks fine. So the 4s matches the SE, they have the same width. But all these other device have different widths, so how do we manage that? So let's look at how to add those pins.
I'm going to zoom in all the way, and then I'm going to right click and drag from this left label right here. So I'm right clicking, and dragging to the left edge. Now don't drag pas the left edge, just drag to it. So it's still highlighted, so you should see that big blue box around it. So release my mouse button, and I'm going to pin the leading space to the container margin. That means, keep it this many points away from the container margin. Now it's important that we look at these in terms of points rather than pixels.
Remember that IOS devices have retina displays, and some are at 2x, some are at 3x. So where an object in the same position may be one pixel away from the edge on a device without retina display, if we have a 2x display, it will actually be two pixels from the edge, and if we have a 3x display, it'll be three pixels from the edge. So in order to overcome all of that funkiness, we use points instead of pixels. So when we say it's one point from the edge, it's one pixel at 1x, two pixels at 2x, three pixels at 3x.
So let's pin the leading space, the container margin. And then we get this red line. Now, as you may guess, a red line is bad. When we specify a horizontal position of an object in Xcode, we need to also specify the vertical position as well. 'Cause once we add a pin, we're saying, let pins handle where the position of this object is. And so when we don't provide a Y coordinate along with an X coordinate, then the pins don't work.
So we need to provide a Y coordinate now. So I'm going to right click from the same label and drag it up, and then near the top edge here I'm going to release the mouse button. And then choose vertical spacing to top layout guide. And that's going to pin the object in place. Now you may have noticed that the pin changed from red to orange. And orange is not saying that the layout's going to break, it's just saying that the layout, what you're seeing on the screen, is not matching what the numbers on the pins say.
And there's a way to fix that that we're going to look at later. For now, we can just leave it at orange. I'm going to select the right label and do the same thing. Right click and drag to the right edge, 'cause we want to pin this to the right edge. Choose Trailing Space to Container Margin. So leading is for the left side, trailing is for the right side. So I'm going to choose that. And of course, we get the red lines again, because we haven't defined where it's going to be vertically. So I'm going to right click and drag up from that label, and choose Vertical Spacing to Top Layout Guide.
And that's going to give us the blue lines. So this one has an orange line, which for now, we're not going to worry about, and this one has blue lines. So we should be good to be able to test it on multiple devices. So I can click on the 4s, and of course, that's the same. And I can click on the 6s, and of course, it pins to the appropriate areas, and then 6s plus, sure enough. What about an iPad? There it is. Left and right. So no matter what device we run this application on, we have now taken control of our layout.
And we can choose how to pin objects to the edges of the screen.
- Navigating storyboards
- Working with views and view controllers
- Using Auto Layout
- Adding constraints
- Creating UI elements with code
- Adding sliders and progress bars
- Using image and web views