The layouts we've looked at so far have been simple layouts.

In reality our designs are going to be a bit more complicated

than a few rectangular views on screen.

Hopefully you worked through some of the recipes linked to in the previous videos,

and got some practice in because we're going to explore a few more concepts.

Let's bring that constraint equation back up on screen here.

When we talked about this equation earlier,

we said we were creating a relationship between two views.

So far we've only seen one type of relationship, an equal relationship.

There are two more types we can create, a less than or

equal, and a greater than or equal.

Where our previous relationships were fixed in that if we said

one view should be eight points away from another, it always stayed that way.

Less than or equal and greater than or

equal relationships can fluctuate to accommodate a layout within a given space.

This is easier to understand if we just start playing around, so

let's jump right into a new storyboard scene.

So we don't want to mess around with main.storyboard or layout guides.

Gonna right-click, add a new file.

Again, this is going to be a storyboard file and we'll call this Inequalities.

We'll add a view controller here to the scene, and

we'll set it as the initial view controller.

To illustrate this concept, let's build a seemingly simple layout.

So we're gonna drag out two labels from the object library.

And we'll center the first one, and we'll just drop the second one below somewhere.

So we'll give these labels arbitrary text.

I'm going to set the first one to first, and the second one to second.

This is zoomed out a bit too far, let's bring that in, there we go.

Okay, so make sure you have the first one set to the center of the scene.

You can drag it around until you get it to snap.

And then we'll set some constraints to position it here.

So from the Align submenu and the Auto Layout submenu at the bottom,

we're going to select horizontally and vertically in container.

Next, position the second label somewhere below this first centered label.

Now make sure that it is also horizontally centered so it's aligned.

And let's just assume that this is the final layout I want for my app.

So let's go ahead and add some constraints.

We'll give this label a horizontal center, or

Horizontally in Container alignment constraint.

And you can either use the Alignment menu or

just CTRL + drag from the label to the super view.

Next let's set vertical spacing constraints from the second label

to the first and the second label to the super view.

So I'm going to simply Ctrl drag here and accept whatever

constant values are automatically selected based on where I've positioned this label.

So second to first, vertical spacing.

And then second to bottom, bottom space to safe area.

Okay, so we've got blue I-bars all around here,

which means that our layout has been satisfied.

Let's see how this looks.

Right now we're previewing this design on an iPhone 8 or

more specifically the 4.7 inch device.

So let's see what this looks like on larger devices.

Now you can do that by clicking on View as at the bottom, and

then working your way through the devices.

On larger devices, our blue I-bars, if we click around,

oops, should still be there.

At least on the iPhone X over here, because we have plenty of space.

Now let's go up to the next one.

And this works here as well.

Let's work our way down from the iPhone 8 to the smaller devices.

And here you'll see that now we have red, no more blue I-bars,

indicating that we do have issues.

But least over here we can still see the labels, right.

And even if we go to the smallest device size we can.

Now if we go back to our original, and let's say I change this constant value.

I wanna put this a bit lower, I say 50 points, right, so it's closer down.

And then I'm going to delete this constraint.

Now it's positioned right here.

And I'll add that first vertical space in constraint again.

Now if we go through, it should still be fine on the larger device sizes.

But let's see what it looks like, okay, so on the second we still have red All right,

now these issues that you see here, these red values, these red I-bars, arise

because of the specific constraints that we've chosen at to arrive at our lay out.

Since we set the vertical spacing constraints in both directions,

we have one going to the bottom here, and one going to the first label at the top.

We’ve defined a very specific relationship that doesn’t leave much wiggle room.

So in the case of this second label, not only do we have a vertical spacing

constraint between the super view's bottom and the label's bottom, but

we also have a second vertical spacing constraint from the first label's bottom

to the second label's top, which is this red I-bar you see here.

This means that the second label can only occupy a very specific position

to satisfy the two constraints.

It cannot move up or down as the size of the device changes

because of these rigid values that we've set.

So fixed in between these two, as the views get smaller,

the system has no way to adjust the constraints to maintain a layout and

display the second label properly.

So here there's just not enough space to have this 252 point spacing

constraint at the top and a 50 point spacing constraint at the bottom.

We can fix this with the knowledge we already have.

So if we select the second label, I already have it selected,

then we'll go ahead and select the top vertical spacing constraint and delete it.

And now our problem goes away.

On all screens, we should just have blue all around.

Okay, let's try and tweak this.

Let's see how far we can take this, and add one more specification to our layout.

So back on the iPhone 8, the 4.7 inch layout, we're going to delete any

vertical spacing constraints on the second label, just so that we can start over.

And we'll say that we want this second label

to be 200 points from the bottom here.

Okay, on this device, that looks okay.

But let's go to a smaller device, and then an even smaller device.

So on the iPhone SE size, or the iPhone 4S, well actually let's back up.

On the iPhone SE, this is not too bad.

But on the iPhone 4S, this is way too close to the first label, right.

I don't like how it looks.

What I would like is for the second label to be below the first like it is now, but

not too close to it.

So essentially what we want here are two constraints.

One that defines a minimum spacing between the first and

the second label so that it looks decent, the second label doesn't get too close.

But then I also want a second constraint to pin the bottom at a desired height.

But we already looked at that, right.

That's what we started out with.

Having two constraints, a top and

a bottom space constraint, makes our layout inflexible.

To solve this we have two tools or concepts at our disposal.

The first, as we talked about, is an equality relationship, or

rather a greater than or equal or a lesser than or equal relationship.

So let's implement this.

We'll go back to our base, our iPhone 8 size, and

again we'll delete the existing vertical constraints.

Now let's also make sure that, like before,

we have two sets of vertical spacing constraints on it.

So we'll do one from the second label to the firs,

so this will be a vertical spacing constraint.

Let's adjust the size, there we go.

And then a second vertical spacing constraint from the second label to

the super view's bottom.

And that should be set to 200 points.

There we go.

Okay, next we're going to select the vertical space constraint.

Now really quick, if you go all the way to the bottom, right,

and you click, we're back at our problem, red I-bars.

Let's go back now and we're going to select that

vertical space constraint between the two labels, and then make sure

in the attribute inspector this section should pop once you select the constraint.

We're going to modify this relation property.

Right now it's set to equal.

Let's change this to greater than or equal.

By doing this we're indicating that this constraint can be greater than or

equal to the value of the constant specified.

Now when I say I don't want the second label to get too close to the first,

more specifically I want to say that it should be no closer than 32 points.

So let's specify that as the constant.

A greater than or equal relation, unlike the equal only relation,

allows a constraint to grow and shrink as the layout around it changes.

By specifying a greater than or

equal relation with a constant value of 32 points, we're stating

that at minimum the constraint should be no less than 32 points.

Meaning that the third, or rather the second label,

should not get any closer to the first than my 32 points.

Once this bottom constraint has been satisfied, if the space between the second

and the first label is greater than 32 points, then the constraint can grow,

so to speak, to position the second label a distance greater than 32 points away.

This is why it's called a greater than or equal relation.

We're allowing it to be greater than 32 points if possible, but

at the very minimum it should be equal to 32.

The less than or equal to constraint is the opposite of this.

If we apply a less than or

equal relation here with a constant value of 32 points, we're indicating

that we want the maximum distance between the two labels to be 32 points.

So the constraint can be less, it can shrink if it needs to to accommodate

other constraints in the layout, but it cannot grow more than 32 points.

Now with the changes we've made, our layout will work in most cases but

not all.

So you can see that it works, is expected to work on the iPhone 8 because here,

after satisfying the bottom spacing constraint, there's still enough space for

this to be more than 32 points.

And this constraint grows, and everything is fine.

If we go the iPhone SE, you will see that we still have blue I-bars so

we've solved this problem.

Now in all but the last device size, this does not work.

So it seems like it works, right, you still have blue I-bars.

But in this device size, or at least in all but this device size,

there's enough space available that after you set the bottom space constraint,

the vertical space constraint can still be added to the top one without any issues.

That's because that remaining space is greater than 32 points and can grow.

For the smallest device though,

this available space below the first label is really small.

That means that after setting the bottom space constraint with a constant value

of 200 points, there isn't enough space to add that top vertical space constraint.

Or conversely, after setting this minimum 32 point spacing between the second and

the first label,

there isn't enough space left below to add a 200 point vertical space constraint.

Remember that since our top constraint has a greater than or

equal relation, the minimum value is 32 points.

It can be greater than that but it cannot be less.

Since the available space for

the top vertical spacing constraint on the second label is less than 32 points

on the smallest device, auto layout cannot resolve this issue.

And so what it's done here is it starts to reduce the height of the label,

and in our case the height has dropped below zero and

you just can't see the second label at all.

So in a situation like this,

auto layout can make some decisions on its own in an effort to resolve the layout.

One decision it can make is to not install a constraint

when we have defined a layout that cannot be resolved.

So in the case of this iPhone 4S, we have two constraints competing

to determine the vertical position of the second label.

Now to solve this problem, we need to reach into our toolbox for

another approach.

But we'll tackle that in the next video.