When we learned about the basics of auto layout we covered some aspects of

layout guide.

If you're unfamiliar with that content follow the link list below.

A layout guide, as we previously discussed,

is an empty rectangle that we can use to help build layouts.

In Interface Builder we're restricted

to only being able to use the predefined layout guides, like the top and

bottom layout guides available on a view controller, but only prior to iOS 11.

In code, however, we can do a bit more with layout guides.

So, let's attempt to build a layout here with three views.

The goal is to space the three views out vertically

with equal spacing between the views, like so.

This sort of layout is achievable using stack views, but

stack views are a fairly new thing, and

if you're targeting older versions of iOS, you won't be able to use them.

Plus, it's always good to know all the tools you have on hand.

So in my project I've added a new swift file named LayoutGuides, and

in here we have a view controller named LayoutGuidesController.

Inside the class I have defined three views,

added it to the view hierarchy, and given it some constraints.

You can find this set up code in a link in the teacher's notes to this video.

Now to create the layout we want, the first thing we need is layout guides.

So I'm going to add a comment here.

// Layout Guides, and we'll define four stored properties and

assign a layout guide to each of them.

So, let firstLayoutGuide = UILayoutGuide,

and then I'm just going to copy this three times, paste it here.

I'll say, second.

Third and four.

Using layout guides is pretty straightforward.

You instantiate a new layout guide as we just did, and

add the layout guide to the view.

Let's do that now.

Layout guides function sort of as dummy views, but they aren't views, so

we don't add them as sub views.

We don't want them in our view hierarchy.

Instead, we have a method on UI view named

view.addLayoutGuide that allows us to add a layout guide, but

not involve them in the view hierarchy so that we don't have to draw a view.

So here we'll say firstLayoutGuide and we'll do this for all of them.

AddLayoutGuide(secondLayoutGuide), view.addLayoutGuide(thirdLayoutGuide),

and the last one.

Next we need to define the position and

size of each layout guide using auto layout.

If you, again, think of a layout guide as an invisible rectangle,

or a dummy view, much like regular views, they need to have a position and size.

We'll add these constraints in the activate method on NSLayoutConstraint.

So, right at the bottom, after all these, so these constraints here,

they simply give each of our views a height and a width, and

then position them or align them to the center x-axis.

So, we can add the rest of our constraints here in a new activate method,

NSLayoutConstraint.activate, and we'll start by placing

the first layout guide at the very top of our column of views.

So firstLayoutGuide.topAnchor.constraint(equ-

alTo: -- view.safeAreaLayoutGuide,

and obviously now you know that the safeAreaLayoutGuide is also

a layout guide, which is an empty rectangle, topAnchor.

It's just a pre-defined one.

Next, we'll pin the bottom of this layout guide to the top of the first

view we want to place, so view A.

So firstLayoutGuide.bottomAnchor.constraint(-

equalTo: viewA.topAnchor).

Each of these layout guides is going to go in between a view, so above and below it.

So now step two is to place the seond layout guide in between view A and

view B, and to do that, we'll take the topAnchor, of the secondLayoutGuide,

and pin it to viewA.bottomAnchor.

Then, next we'll do secondLayoutGuide.bottomAnchor and

this one we want to pin to viewB.topAnchor.

If this is confusing, you can put comments in between these things to say

which layout guide or which view is going in between what.

In between view B and view C we'll place the third layout guide.

So, thirdLayoutGuide.topAnchor.constraint(equ-

alTo: viewB.bottomAnchor), and then the layout guides,

so we're still on the third one,

it's bottom anchor is going to be pinned to viewC.topAnchor.

So just basic pattern here, and

finally we'll place the fourth layout guide after viewC.

So fourthLayoutGuide.topAnchor.constraint(eq-

ualTo: viewC.bottomAnchor), and finally the last anchor here, so

the fourth layout guide's bottom anchor is going to be pinned

back to the view.safeAreaLayoutGuide, and this time we want the bottomAnchor.

The trick to get this to work out is to set all the layout guides to have equal

heights.

This way after deducting all the heights of the views that we care about,

auto layout can take the remaining space and evenly divide it between the four

layout guides resulting in equal spacing above and below the views.

So a few more constraints here.

We'll say fourthLayoutGuide.heightAnchor.constraint-

(equalTo: thirdLayoutGuide.heightanchor).

Then we'll say thirdLayoutGuide.heightAnchor(equalTo:

secondLayoutGuide.heightAnchor, and we'll just walk up the chain this way.

SecondLayoutGuide.heightAnchor.constraint- (equal to:

firstLayoutGuide.heightAnchor), and then for the last one we'll

say firstLayoutGuide.heightAnchor(equalTo: fourthLayoutGuide.heightAnchor).

Okay, let's see what this looks like, Oops,

this is constraint equalTo, not constraint equalToConstant.

Okay, so to run this, we're going to go back to Main.storyboard,

and we'll set this backing class on

this default seen here to LayoutGuidesController, and

we'll run the app, And now you can see the end result.

So here we have three views that are equally spaced in the main view.

Now the benefit of this approach,

since the heights of the layout guides are determined by just dividing the available

space, is that we're not dependent on knowing the heights of any of the views,

nor do the views have to be of equal heights.

You can modify the height of either one of these views,

and we'll still get equal spacing above and below.

In addition, this layout can easily adapt to different device sizes and

orientations.

So to summarize, in Interface Builder you have access to some

predefined layout guides that you can use, like the safe area layout guides or

the previously named top and bottom layout guides.

But in code layout guides are much more flexible.

You can define any number of layout guides and

use them as dummy views to position your real views.

You cannot do this in Interface Builder.