Today is a day where I want to get really practical with you about auto-layout. Let’s not waste any words and dive right in. I’ll explain as we go on with the topic. Let’s do this!
Designing a simple Layout
First of, here’s what we’re going to be creating. It’s nothing fancy, but it definitely will help us get a sense of what auto-layout is and how we can use the interface builder to get things done.
The main focus on this layout is, to keep the two top views exactly the same. We want them both to have the same height and the same width. The bottom one should also be the same height but it should have a different width as the ones on the top. Lastly, we also want there to be a margin of 8 between the colored views. Of course they should always fill out the entire screen and the distance to the edge of the device should also always be the same. That’s our goal for today. Think you can handle it? Alright then. Let’s do it!
Let’s get started
We’re going to start with a plain Xcode project. Nothing prepared. We’re doing this from the ground up.
First of, our auto-layout needs something that can be layed out, so let’s drop in a couple of plain views.
The first thing that I want to draw your attention to, is something you’ve encountered probably dozens of times already if you’ve been working with the interface builder before. What I’m talking about is margin.
Margin is those dotted lines that appear when you move a view around or resize it. If you’ve got everything set up in the right way, your views will snap to those lines. But what are they?
Margins are a way to give us a grid system to work with. It helps us align things so it looks nice and I always like to say it gives things „a little bit of space to breathe“. It sounds weird but if you ask any designer, he’s going to tell you the same thing. A good layout benefits from clear boundaries, well-aligned items and most importantly: whitespace.
Anyways, I’m not here to convince you to use whitespace, I want to draw your attention to these margins, because auto-layout has a way of making use of them and it’s something you need to keep in mind while creating constraints. You’ll see that later.
For now let’s move on with coloring our views, that we just dropped in. I used the colors #398EEA for blue and #FF6E6E for red. Feel free to use any colors you like!
Next we are going to fill out the space with the views approximately. It doesn’t need to be exactly like we want it to be. It actually helps to have the views in a bit off balance so you can see what your constraints are doing to your layout.
Pinning a view
Now to the actual constraints. There are many types of constraints that you can use to create layouts and define different types of behavior. We’re now going to take a look at pinning views.
What is pinning?
Imagine what you’re doing when you’re using a pin, to stick a piece of paper to some cardboard. Or a magnet to pin something to the fridge. What you’re doing is essentially, making sure that when the door of the fridge opens, or the piece of cardboard gets moved around, the items stay on the same spot. They don’t immediately fall of to the ground. (If they do, you should get better fridge magnets! ☺️)
Were basically doing the same thing to views in this example. We will pin our outside bounds of our views to the margins of the view that they are nested inside. Basically we’re telling auto-layout that if the margins of the canvas move around or if the screen changes sizes, the bounds of the views we pinned to the margins should move with it.
We’r not going to do this for all of the bounds, because that wouldn’t make sense, but we’re going to start with the outward facing ones.
First we’ll take the top and left boundary of the left blue view and pin them to the edges. We’re going to do that with the „Add New Constraints“ menu, just like in the image. It’s important that „Constraints to margins“ is checked. Also the numbers in there define the space that is left between the margins and the bounds. We want a constant of 0 on the left and 8 on the top.
Now the same thing on the right.
And finally we’ll pin the left, right and bottom of the red view.
This will make sure that the views will always stay on the edges of the canvas that we have. But if we were to change the canvas now, the views would get confused. That is because we haven’t defined how much space there should be in between the views themselves.
We want a space of 8 between the views. I would want to use margins for that, if the views were embedded into each other, but in this case we need to take a different approach, because the views are side by side.
Lets select the left blue view and add a constraint of 8 to the boundary on the right. like so.
This will make sure the distance to its righthand neighbor will stay 8 throughout runtime.
Now also add a constraint to the bottom of the same view, which makes sure that the distance from the left blue view to the red neighbor is also always 8.
And the same thing with the right blue view.
That looks great. So far we’ve taken control over the edges and we made sure that every view stays in a secure distance of at least 8 to its neighbor so our views don’t overlap. But if you compare what we have right now to the result we want to get to, you can clearly see that the proportions of our views are not right at all. So let’s address that as well.
We want all of the views to have exactly the same height. This will mean that the height of the view will be evenly distributed between the red view and the two blue ones.
We’re going to do that by selecting all three views, the red one and the two blue ones, opening the „Add New Constraint“ menu again, and checking „Equal Heights“. As soon as we click add, you can see that auto-layout starts adjusting the heights. That’s a great sign, because if auto-layout starts adjusting things on screen, that means we’re getting closer to our goal. If auto-layout doesn’t adjust anything, that either means that something is conflicting, or something is missing.
Equal Widths, Equal Heights
The last thing that we need to do, is make sure that our two blue views always have the same width. That means that we need to select them both and through the „Add New Constraint“ menu, check „Equal Widths“ and hit „Add Constraint“.
What you should end up with is exactly the layout that we wanted to have. You can now choose to play around with different screen sizes by switching them in the interface builder or you can run it in the simulator and rotate the device to see if everything works.
If you want to change some constraints, you can just go ahead and find them either in the outline on the left
Or you can select the view that the constrains are applied to and find a selection of constrains that just affect the selected view in the size inspector (that’s the ruler icon) on the righthand side.
And here’s what your solution should look like on other devices! As you can see the margins around the edges stay the same al the time, but the views have different aspect ratios and make use of the space in different ways.
Of course you can take this layout to new levels, by adding a less-or-equal relation, playing around with priorities and other fun stuff, but for this tutorial, that’s it. You can now give yourself a big pat on the back because you did it!
I hope this helped to make auto-layout a little more clear to you. I really recommend you play around with it and try to create different simple layouts for practicing. If you struggle at any point to make things happen or your having difficulties figuring out how to achieve certain things, feel free to shoot me an email, or check out the auto-layout module. This is a course that I’ve focused explicitly on auto-layout and constraints to make things a s easy as possible for you!