Swift Components Tour – Autolayout Intro – How? pt. 1 – Button2

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, how to use autolayout, part 1, Button2.

Kyle Roberts
Swift Guru at Large

Kyle's Series


Tap on time to skip ahead


Hello world. Kyle here with Brax.tv. Today we’re going to go over the How? of Autolayout. How to do Autolayout could be broken into dozens and dozens of separate videos. So, don’t expect to know everything of Autolayout. I have one goal here and that’s what we are going to do. A very basic overview of how to do Autolayout. And to just reiterate that since using Autolayout in Interface Building is superior than any other way of using Autolayout and above frame based layout, that is where we are going to cover it.


You should recall from the Where of the Autolayout, we were trying to place two buttons 12 pixels apart from each other. And those buttons were called Button1 and 2, so I’m just going to fix that and move that to that aqua standard distance there of 12 pixels.


Here we have this screen, we have no constraints whatsoever. What we want this to look like on any canvas size, any aspect ratio, is Button2 centered and Button1’s right side 12 pixels to the left of Button2. We did this in the last video but I skipped over how we did all that, other than just what I needed to convince you that you should use Autolayout in the storyboard. The Where of Autolayout. Today is the How.


Centering a view to it’s superview is very easy. As we know, to set a constraint on a view, we right click and drag from the first view in the constraint to the second view in the constraint. Since we are wanting to center Button2 to the view controller’s view, we have to drag from Button2 to the view. We can see that we have all these options here. These options are sort of context sensitive from where we release right click on which view. Since I release right click to the top right of Button2, it’s assuming that we want to set a constraint from the right side of Button2 or we want to set a constraint to the top side of Button2 or maybe we want to center it horizontally or vertically, as well as setting some size sort of stuff right here. Also, if you wanted more you can hold Option for some other options.


To show you what I mean about this context sensitive stuff, we can drag to the bottom left, it is assuming that we want to set a constraint from the left side or the leading side of Button2 or even from the bottom side of Button2. Again, here’s the center horizontally, vertically, and this equal width equal height stuff. The height and width stuff is just a relationship that you can set between almost any two views so it’s always going to show up. We can select both of these here using shift and selecting them now. I also want to show you more about this context sensitive stuff.


If we release directly above Button2 we can see that our options are narrowed down a lot from the the top of Button2 or to center horizontally in the container. We are going to do that and center Button2 horizontally in the view controller’s view. To do this same but with centering vertically, we can drag it either to the left or the right, making sure that we are selecting the view and center vertically in container.


We’re going to mix it up a little bit and what if we wanted Button2 to be a little larger. I’m going to see if there’s a way to add a border. We can add a background color, I think. Just so it’s easy to see the outside edges of the button. Now we are getting some warnings which there are a couple ways to fix but this isn’t a debugging how to, this is just a basic Autolayout how to. So I’m just going to drag that back into the center using these guidelines to make sure it’s in the center. Button1 out of the way. We’re still getting a warning, let’s see what that’s about. Here’s what it’s complaining about which I was actually going to go over next.


We need a way to set the height and the width of this view. Often times, the content of your view controller can be displayed on a different canvas size and maybe some borders or paddings or X Y values might be adjusted, but what I’ve run into is a lot of the time you want the size of something to stay the same. There are a lot of ways to do this, not just keeping the size the same but we can adjust the button size based on the canvas size. We can do a lot of stuff but we are going to set the height and width of this button to what it is at right now, which is 124 width and 58 height.


We go down here to this Pen menu and there’s a lot of stuff going on here to add new constraints mostly over the height and the width of this item that we have selected. But I’m just going to select the width and the height constraints and we can customize those here but since we want to leave them where they’re at, we can add these two constraints. Now on any canvas size, this button is going to be this height and this width.


It’s still complaining a little bit about this. So maybe I need to move it a little. No. So here’s an example of how we can fix this warning that’s going on here. It actually thinks on this canvas the button’s X value should be 242 based on the constraints but where we have placed it is 238. A good way to fix this is to go down to this resolve Autolayout issues menu and under the selected views section, we can say update frames. Then we’ll get rid of that miscommunication between where we’ve placed the view in the scene on the storyboard and where the constraints think it should be.


So now, no matter what the canvas size, it can even be as large as the button or as large as the iPad aspect ratio, this button will always be center and will always be 124 x 58. Cool beans. But what about Button1?

Additional Info

Register to get access to additional resources and info.