Swift Components Tour – Autolayout Intro – What?

In this lesson

The Swift Components Tour is over! But let’s talk about autolayout, specifically the who, what, when, where, why, and how of autolayout. Today, what is autolayout.

Kyle Roberts
Swift Guru at Large

Kyle's Series


Tap on time to skip ahead


Hello world, Kyle here with Brax.tv. We’re back in the Swift Components Tour app. But sadly the tour’s over. Don’t leave yet because now we’re going to talk about some things that might not have obviously been part of the tour, but you totally want to learn about.


For the next round of videos, we’re going to be talking about Autolayout. My hope here is not to teach you how to use Autolayout perfectly, like a boss, but maybe get you interested in it enough so that you can do that on your own. Pretty much what I want to cover is the who, what, when, where, why, how of Autolayout. Today we’re going to talk about what. What is Autolayout? Let’s get into that.


Autolayout is basically what is going to keep all of these view controllers in the Swift Components Tour app pretty, no matter the view controller’s view size. You can see here in portrait, the view controller takes up almost the entire screen except for the navigation bar at the top. But if we rotate to landscape, then the view controller keeps the same width but it’s a lot shorter, yet the content stays beautiful.


For another example, we can even look at the Storyboard. All of these views are laid out with Autolayout. We go back to the view that we were on and it’s laid out beautifully here as well even on a smaller canvas.


So this is different, I’ve launched the Swift Components Tour app on the iPhone simulator and we are in an iPhone 6+ just to prove how awesome Autolayout is. We are in a completely different device with a completely different aspect ratio and resolution of the screen, yet we’re on the same view controller and everything is still laid out in a nicely presented form.


There are a lot of bugs because this app was not designed for iPhones. But if we rotate it we can open this menu on the side. Let’s open another view controller, we can see that there’s not enough space in this view controller to show all of the views. But we can rotate back to portrait and it looks- let’s rotate to portrait correctly because iPhones can’t have apps upside down. The view looks how you would expect it to look. It looks good on this smaller screen and everything is still laid out correctly. Yes, there are a lot of bugs in some of the other controllers. I think the sliders one. No, the sliders one looks great. See, a lot of them still look good even though it’s on the smaller screen. What is great about that is that I did not even design this for iPhones. It’s just Autolayout working it’s magic and keeping things looking nice on different aspect ratios and screen sizes. It’s pretty amazing but I still haven’t even told you what Autolayout is.


Autolayout was introduced with iOS 6, I do believe, as an alternative or even a solution, to frame based layout. We all know how frame based layouts work, it’s very logical and to the point but there are also a lot of issues that come with that that we’ll be talking about in the Why video. Basically, Autolayout uses something called constraints to display content where you want it.


Let’s take this top label, for example. These blue lines placed around this label are the individual constraints placed in the storyboard. Autolayout works wonderfully with the storyboard.


We view over here in the utility section of Xcode, we can actually see which constraints have been applied to this view. We can see that we have set the width to 305. We’ve aligned the center of the X to the background view to this view controller so that it’s always centered horizontally. Set the bottom space to this center label here to 97 pixels and the top space to the top of the view controller to 49 pixels.


These bottom and top space constraints can cause issues in a few different places. We can dive into these and set different priorities so that if the constraints do not match up, say if the center label is moved down too far and there’s more than 97 pixels between it and this top label, we can actually set the priority of this one to lower so that this constraint constraining this label to the top of this view controller will actually override anything with a lower priority. It’s very cool, it’s very easy once you know what you’re doing. I think it works a lot better than frame based layouts. Anything that we’ve done here with Autolayout in this view controller, we can also do in code. Thanks for watching.

Additional Info

Register to get access to additional resources and info.