In this recipe we're going to create two views that occupy equal widths on screen

regardless of device size.

Here are the desired end results.

The views are going to fill the superview vertically.

The views are going to have equal widths on screen.

And the views will have fixed margins of eight points on all sides.

In our AutoLayoutCookbook group, you can start a brand new project.

There's nothing in here that you need.

We're going to add a new storyboard file here, so New File.

And we'll select the Storyboard option, hit Next, and

we'll name this EqualWidthViews.

For each of the recipes in this workshop series

we're going to use a different storyboard file to define the layout so

you can compare and contrast everything at the end.

We'll add an empty view controller here to start.

And in this basic scene now we're going to drop two View objects in

which is all the way at the bottom, or you can type in view to filter.

So drag one in here and another one.

Let's also change the background colors to differentiate.

So for this one I'm going to use some recently used colors.

We'll give it that red and a blue here.

So what were our desired end results?

Fill the superview vertically, occupy equal widths on screen and

have fixed margins of 8 points on all side.

Let's start with the margins.

Select the first view.

And from the pin menu in the bottom, in the AutoLayout sub menu,

give it a top leading and

bottom edge to superview constraint here with constant values of 8 points.

Now, if I do this now and select this bottom space constraint,

it's going to pin it to the blue view because this pin menu,

this model here, simply pins to the nearest available view.

So let's rearrange this a little bit so that we can ensure it doesn't happen.

Okay, so now we'll select the pin menu again.

And we want this to be 8 points, so 8 on the top,

8 on the leading edge, and 8 on the bottom.

We won't be constraining to margins here, so let's uncheck this box and

hit Add Constraints.

Okay we'll do the same with the second view, except instead of

a leading constraint, we need to define a trailing to superview constraint.

So again, at the top 8, trailing is 8, and bottom is 8.

And then again, uncheck Constrain to margins, and Add the 3 Constraints.

At this point AutoLayout has the information

to determine the vertical positioning and size but

it can not determine how to size these views horizontally.

Now, it knows that each of these views should be offset from either side

by 8, at least on this side, but

we haven't provided enough information about the horizontal orientation.

So, to start with, I'm going to add a trailing

constraint here to the red view and again, set a space of 8 points.

So we now have some basic information but it's not enough.

It knows here that each of these views should be offset 8 points from all sides

at least in the horizontal axis.

But because it has no information about the widths of each view,

there's no way to currently satisfy this layout.

The final layout could be anything from a one point wide red view

with the blue view occupying the rest of the available space to an inverse of that

with a one point wide blue view.

To specify that we want these views to be of equal width,

we're going to Ctrl+drag from the red to the blue view.

And then from the model that pops up we're going to select

Equal Widths and that's it.

The last bit of the puzzle, if you didn't do it already,

is to give it that horizontal spacing constraint of 8 points between the two

views which provides all the information we need in the horizontal axis.

Now, we can do this either from the pin menu, over here,

like I did earlier in selecting a trailing space constraint on the red view.

Or to be more direct, we can CTRL+drag from the red to the blue and

select a Horizontal Spacing constraint.

Now, when you do that you might have to then find that constraint in the size

inspector down here, right, so Trailing Space.

And you might have to edit the constant value.

Now, in whatever device or orientation you inspect the view,

the layout is maintained, and you can check this

by going to the View as: section below in the AutoLayout sub menu.

And then cycling through different devices to see how it looks on each one, and

orientations as well.

You'll see that it's maintained throughout.

The important thing to note is that there's more than one way to construct

this layout.

For example, rather than setting margins on both views individually,

we could've set the margins on one of them then aligned the edges of the second view

to the first one.

So we could've set an 8 point margin to the top of the red view and

then simply aligned the top edge of the blue view to the top edge of the red view.

The advantage of this approach, pinning the edges here,

is that if we wanted to change the margins, say the top one,

we only have to do that for one view and the second view automatically adjusts.

Another approach would've involved setting both an equal width and

equal height constraint along with a center x constraint.

So you could have said that the blue view should have the same height as

the red view.

And then pinned both these views to the center of the screen.

So take away, there's always more than one way to handle a particular layout.

But you should go with what is easiest to understand and maintain.

If you're interested in how to implement this layout in code,

check the notes section of this video for a link.