Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
In this recipe we're going to create two views that occupy equal widths on screen, regardless of device size.
Concept Videos
Cookbook Videos
-
0:01
In this recipe we're going to create two views that occupy equal widths on screen
-
0:05
regardless of device size.
-
0:08
Here are the desired end results.
-
0:10
The views are going to fill the superview vertically.
-
0:13
The views are going to have equal widths on screen.
-
0:16
And the views will have fixed margins of eight points on all sides.
-
0:21
In our AutoLayoutCookbook group, you can start a brand new project.
-
0:25
There's nothing in here that you need.
-
0:28
We're going to add a new storyboard file here, so New File.
-
0:32
And we'll select the Storyboard option, hit Next, and
-
0:36
we'll name this EqualWidthViews.
-
0:40
For each of the recipes in this workshop series
-
0:43
we're going to use a different storyboard file to define the layout so
-
0:47
you can compare and contrast everything at the end.
-
0:50
We'll add an empty view controller here to start.
-
0:54
And in this basic scene now we're going to drop two View objects in
-
0:59
which is all the way at the bottom, or you can type in view to filter.
-
1:05
So drag one in here and another one.
-
1:09
Let's also change the background colors to differentiate.
-
1:12
So for this one I'm going to use some recently used colors.
-
1:19
We'll give it that red and a blue here.
-
1:23
So what were our desired end results?
-
1:26
Fill the superview vertically, occupy equal widths on screen and
-
1:29
have fixed margins of 8 points on all side.
-
1:32
Let's start with the margins.
-
1:34
Select the first view.
-
1:35
And from the pin menu in the bottom, in the AutoLayout sub menu,
-
1:40
give it a top leading and
-
1:44
bottom edge to superview constraint here with constant values of 8 points.
-
1:49
Now, if I do this now and select this bottom space constraint,
-
1:52
it's going to pin it to the blue view because this pin menu,
-
1:56
this model here, simply pins to the nearest available view.
-
1:59
So let's rearrange this a little bit so that we can ensure it doesn't happen.
-
2:06
Okay, so now we'll select the pin menu again.
-
2:09
And we want this to be 8 points, so 8 on the top,
-
2:12
8 on the leading edge, and 8 on the bottom.
-
2:18
We won't be constraining to margins here, so let's uncheck this box and
-
2:22
hit Add Constraints.
-
2:25
Okay we'll do the same with the second view, except instead of
-
2:28
a leading constraint, we need to define a trailing to superview constraint.
-
2:33
So again, at the top 8, trailing is 8, and bottom is 8.
-
2:39
And then again, uncheck Constrain to margins, and Add the 3 Constraints.
-
2:44
At this point AutoLayout has the information
-
2:46
to determine the vertical positioning and size but
-
2:49
it can not determine how to size these views horizontally.
-
2:53
Now, it knows that each of these views should be offset from either side
-
2:58
by 8, at least on this side, but
-
3:00
we haven't provided enough information about the horizontal orientation.
-
3:05
So, to start with, I'm going to add a trailing
-
3:10
constraint here to the red view and again, set a space of 8 points.
-
3:15
So we now have some basic information but it's not enough.
-
3:18
It knows here that each of these views should be offset 8 points from all sides
-
3:23
at least in the horizontal axis.
-
3:25
But because it has no information about the widths of each view,
-
3:28
there's no way to currently satisfy this layout.
-
3:31
The final layout could be anything from a one point wide red view
-
3:35
with the blue view occupying the rest of the available space to an inverse of that
-
3:39
with a one point wide blue view.
-
3:42
To specify that we want these views to be of equal width,
-
3:46
we're going to Ctrl+drag from the red to the blue view.
-
3:50
And then from the model that pops up we're going to select
-
3:52
Equal Widths and that's it.
-
3:56
The last bit of the puzzle, if you didn't do it already,
-
3:58
is to give it that horizontal spacing constraint of 8 points between the two
-
4:01
views which provides all the information we need in the horizontal axis.
-
4:06
Now, we can do this either from the pin menu, over here,
-
4:10
like I did earlier in selecting a trailing space constraint on the red view.
-
4:15
Or to be more direct, we can CTRL+drag from the red to the blue and
-
4:20
select a Horizontal Spacing constraint.
-
4:22
Now, when you do that you might have to then find that constraint in the size
-
4:27
inspector down here, right, so Trailing Space.
-
4:30
And you might have to edit the constant value.
-
4:33
Now, in whatever device or orientation you inspect the view,
-
4:37
the layout is maintained, and you can check this
-
4:39
by going to the View as: section below in the AutoLayout sub menu.
-
4:44
And then cycling through different devices to see how it looks on each one, and
-
4:49
orientations as well.
-
4:51
You'll see that it's maintained throughout.
-
4:54
The important thing to note is that there's more than one way to construct
-
4:58
this layout.
-
4:59
For example, rather than setting margins on both views individually,
-
5:03
we could've set the margins on one of them then aligned the edges of the second view
-
5:08
to the first one.
-
5:09
So we could've set an 8 point margin to the top of the red view and
-
5:13
then simply aligned the top edge of the blue view to the top edge of the red view.
-
5:18
The advantage of this approach, pinning the edges here,
-
5:21
is that if we wanted to change the margins, say the top one,
-
5:24
we only have to do that for one view and the second view automatically adjusts.
-
5:29
Another approach would've involved setting both an equal width and
-
5:33
equal height constraint along with a center x constraint.
-
5:37
So you could have said that the blue view should have the same height as
-
5:41
the red view.
-
5:42
And then pinned both these views to the center of the screen.
-
5:45
So take away, there's always more than one way to handle a particular layout.
-
5:50
But you should go with what is easiest to understand and maintain.
-
5:55
If you're interested in how to implement this layout in code,
-
5:59
check the notes section of this video for a link.
You need to sign up for Treehouse in order to download course files.
Sign up