How to use Auto Layout for iOS apps in Xcode 8

How to use Auto Layout for iOS apps in Xcode 8


Hi I’m Brent Schooley and I’m a Developer Evangelist at Twilio. In this video, I’m going to walk through the basics of using Auto Layout for iOS apps using Xcode 8. If you’ve ever started an iOS project and gotten to the Interface Builder screen and thought “What do all of these buttons and menus do?” This is the screencast for you. iOS uses a layout system called Auto Layout that determines where to place views on screen based on constraints you specify. This allows the views to be repositioned when screen orientation or screen size changes. It also allows you to specify a UI that works for both phone and tablet from the same storyboard file. There are multiple ways to create and edit constraints. The first one we’ll use is the Control-drag method. I Control-click on the red view and drag to the blue view and release. The resulting menu shows me a set of constraints I can specify between the red and blue views. I’ll select Vertical Spacing to set a constraint that tells Auto Layout to maintain the current vertical distance between red and blue. We can see that constraint listed in the Document Outline as well as on the view’s surface. The constraint specifies that the top of red should be the same distance as blue bottom plus 82 pixels. 82 is a rather strange number so I’m going to change this to 8 which is the standard vertical distance between views on iOS. Now that we’ve specified 1 constraint, Auto Layout attempts to resolve the entire UI and realizes it doesn’t have enough constraints to position all of its views. It let’s us know by showing a red arrow at the top of the Document Outline. Let’s click on that to see what’s going on. Ok, so we’re missing the X-position, height, and width for both the red and blue views as well as the Y-position for the blue view. You might remember that we just set the Y-position for the red view in the previous step. Let’s specify some more constraints to satisfy the Auto Layout system. We’ll start by positioning the blue view in the top left corner by dragging it to the blue dotted lines. Next, we’ll use one of Auto Layout’s most versatile tools known as the Pin tool. (It’s the one that looks like the Tie Fighter down here…) If we click that, we get a popover that let’s us specify a bunch of different things. We’re going to use the nearest neighbor constraints at the top here to specify that we want the top and left constraints to be locked to where their current positions are in the view. We’re also going to use the height and width checkboxes to specify that the blue view should maintain its 100×100 size. Down at the bottom here we can click the “Add 4 Constraints” button and just like that we’ve added all of the constraints needed to position the blue view from one place. The Pin tool is super efficient. Next we’ll use the Align tool to alight the left edges of the blue and red views. Keep the blue view selected and shift-click on the red view to select both views. Next, we’ll use the Align tool, which is the second tool down in that drawer, and check the box for leading edges. This is going to lock the left edges so that they always stay aligned with each other. And we’ll click “Add 1 Constraint.” Next we can set the red view’s size to be equal to the blue view’s size by Control-dragging from the red view to the blue view like we did before. In the menu that pops up we can hold the Shift key to select multiple constraints. Hold down Shift and select “Equal Widths” and “Equal Heights” and then hit “Add Constraints” down here at the bottom. This is another shortcut for specifying multiple constraints at once. Looking at the screen though it’s clear that we still have some issues to resolve. For starters, there’s an orange dotted box showing up in the view and there’s some orange lines in Interface Builder as well. Also, you’ll note that if we go back to the Document Outline it’s now showing “Misplaced Views”. What’s going on here? Interface Builder respects the positions you have manually placed the views into, but they don’t represent where the views would be placed at runtime. The orange dotted box in this case is the position and size Auto Layout has determined the red view should be in based on the constraints we specified. The orange lines indicate how far the current frame is from where it should be in both the horizontal and vertical direction. Xcode makes it really easy to clean this up and provides a few options for doing so. The first is the Resolve Auto Layout Issues tool. (It’s the one in the bottom right.) If we select that tool, we can update frames to match constraints, update constraints to match frames, add missing constraints, or even remove all constraints if we make a mistake and want to start over. The “Update Constraints” and “Add Missing Constraints” options can generate constraints that don’t necessarily match what you would do manually so use these options carefully. To update our frames so that they match our constraints we’ll click the “Update Frames” option under “All Views in View Controller”. And voilà! Our frames now represent the constraint system accurately. Undo the last action so we can look at the other way to resolve this. In the Document Outline, we can click the warning icon to get a similar popover. to the “Resolve Auto Layout Issues” tool. We’ll select “Update frames” and click the checkbox for “Apply to all views in container” and finally click the “Fix Misplacement” button. Now that we specified our constraints, our views will always be at the top left with the same size and placement regardless of screen size. We can verify that by changing the orientation and changing the device size. You’ll notice that they maintain their top left position and keep their spacing equal. What if we wanted the blue and red boxes to stretch all the way from the left margin of the screen to the right margin? First, we would select the blue box and find its width constraint. There are a few places to find it so with that selected, on the Size Inspector we can scroll down and see the width constraint right here. We could also select it in the view which will pull up the Attributes Inspector. We could also look in the Document Outline and find it in the blue view right here. Regardless of how you find it, the goal here is to delete it. So, let’s do that. We don’t want the width to be specified at 100px fixed, we want it to vary based on the screen size. Now, let’s head into that Pin tool we were using before and set the right constraint to nearest neighbor equal to 0 by typing that in the box here. We’ll set “Update Frames” to “All Frames in Container” so that the frames update as soon as we add the constraint. We won’t get the “misplaced views” that we got before. Clicking “Add Constraint” you’ll notice that both views stretch to fill the container. Remember the red box’s view had its width set to be equal to the blue box’s width. Now if we toggle orientation and screen size, you’ll see that the views always stretch to fill the entire screen. This is where we start to see the true power of Auto Layout. Now for one last time and frustration saving tool. What if we wanted to insert a green box inbetween red and blue? The painful way to do this would be to clear out the constraints, move the boxes into position, and then set all of the constraints again. It would be possible but then next week when the designer says they need a yellow box at the top we’re doing it all over again. Thankfully, there’s a better way to do this and it’s called UIStackView. We’ll create our stack by selecting the blue and red views and using the Stack tool inside of Interface Builder. You’ll notice that the Stack View has been created with a Vertical axis based on the inferred current position. Stack views also work in Horizontal so if we select that they’ll lay out horizontally. But, we want the Vertical setting. And to get back our 8-pixel spacing that we lost we can change this to 8 and things look like they did before. They’re not quite ready for primetime though because we lost our X and Y coordinates for the blue and red views. We only need to specify the topmost item’s X and Y position within the Stack View to resolve that, so select the blue view and specify the top and left constraints and add those 2 constraints to the view. Now we’re just missing an X and Y position for the Stack View. We use our handy dandy Pin tool to select the top, left and right constraints to pin it both to the top and stretch it from left to right margin. We’ll add those 3 constraints and everything will be ready to go. We can change the orientation and see that things still work the way they did before. Now we can add that green view inbetween the blue and red that the designer wanted. We’ll drag a View out from the Library and drag it inbetween the two views. We need to set our constraint now. We don’t have a Y position or height for this new view so we’ll Control-drag up to the blue view and set “Equal Heights” as we did for the red view. Then we’ll just change the background color to green to satisfy the designer’s whim. And that’s it, the Stack View is super flexible and extremely convenient. That’ll wrap up this tour of iOS Auto Layout in Xcode 8. I hope this demystified some of the concepts surrounding Auto Layout and that you now feel armed to take on the challenge of building your iOS user interface. If you’re looking for some new tools to put in your mobile tool belt, you should check out Twilio’s IP Messaging and Video products. To find out about these SDKS and more, visit the Twilio Docs.

7 thoughts on “How to use Auto Layout for iOS apps in Xcode 8

Leave a Reply

Your email address will not be published. Required fields are marked *