Swift Components Tour – Autolayout Intro – Why?

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, why use autolayout.

Kyle Roberts
Swift Guru at Large

Kyle's Series


Tap on time to skip ahead


Hello world. Kyle here with Brax.tv. We are in the Swift Components Tour app here to talk about the Why of Autolayout. Why should I use it? Why is it amazing? And why is it so much better than frame based layouts?


Think back all the way to the previous video about Autolayout, what is Autolayout? I went through some different screen sizes and different canvas sizes for content and that it still displayed nicely with the different sizes of views. This has all been created with Autolayout.


If we were going to use frame based layout, let’s go back into the storyboard here, if we removed all these constraints and kept these X, Y, width and height values the same, then that would be great as long as our canvas size was 600 x 600, which is what this view is here. We can see that the center label looks centered. The bottom label looks a certain distance from the bottom of the screen. The top label looks a certain distance from the top of the screen. They are all centered horizontally, which is all fine and dandy when we’re working with the 600 x 600 canvas size.


But, if we ran this in the app, you can see what frame based layout has done to us. Yes, all of these three labels still have the same height and width, X and Y values that they have in the storyboard but it doesn’t look how we intended. We intended for all of them to be centered horizontally and each spaced a certain distance from the top and bottom of the screen as well as from each other. But since we’re using the same X and Y values that we set in the storyboard, since we just worked with that based off the 600 x 600 canvas, as opposed to the 720 x 1080 canvas, then all the content looks like it’s placed too high and too far left.


We could resize this view controller in the storyboard to 720 x 1080 and then set the views with the frame based layout, set their X and Y, how we would want it to look on this larger screen. But then we run into the same problem if we rotate the screen, because then they might be placed nicely but the X and Y values can still be off. Especially the Y value since the width of the landscape detail view controller is the same as the portrait, our main problem here is going to be the Y values. This bottom label might even be hanging off screen somewhere down here, which is not what we’re looking for.


This is just worrying about the landscape and portrait orientation of one screen on one device. What about iPhones? There’s at least three different sizes there with two orientations each. We’re already up to eight different use cases that we’ll have to adjust the frames based on the content size. We could work with frames and ask for the view controller’s view size and do some math to determine the center value for each label and then place them about ⅓ of the distance away from each other of the view controller’s height. But why take that half way? Why not go the entire distance and just convert it to Autolayout? Xcode or Objective-C or iOS is doing all of that math for you, you just have to tell it what you want. Thanks for watching.

Additional Info

Register to get access to additional resources and info.