To implement the changes we want to make we're going to use a new tool,

inequality relationships.

If you click on any constraint, so

let's click on the walk-through label or the header label.

Click on a constraint, and then go to the details.

You can see that in all the constraints we have implemented so

far, we have set the relation type to equal.

Equal indicates that the relationship between the attributes

must be exactly equal to the offset value provided in the constant field.

If we don't want to create a relationship that is exactly equal to the constants

value, we have two other options, Less Than or Equal and Greater Than or Equal.

These allow us to create inequality relationships.

This is best learned in my usage, so let's tweak a few constraints.

Select the skip, button that's at the very bottom of the scene, and

select the constraint connecting it to the body label above.

That's the top space constraint.

In the size inspector, we can see the constraint we created earlier.

On the y-axis we're specifying two constraints for the skip button.

So let me go back real quick.

So one constraint pins it 20 points from the bottom and

another pins it 50 points to the bottom of the body label.

On the larger devices, these constraints are in conflict with each other.

So AutoLayout takes its best guess and moves the button up in the view.

We could solve it with a priority constraint, but instead,

we're going to set the relation drop down on this constraint right here.

So select the skip constraint or the skip button.

Go to the top space constraint in the size inspector and double click it.

And then from the relation drop down we're going to set it to greater than or equal.

Okay so now when we run it on the 6S.

And boom, problem solved.

So what just happened here?

If you look at all the previews, so

let me go to the Assistant Editor and load up a few.

You'll notice that the Skip button is exactly where we want it to be.

And while we haven't deleted the top constraint,

the spacing between the skip and body label is now variable between the views.

So on the lowest, on the smallest device it looks really good and

it does here as well.

By changing the constraint from equal to greater than or

equal, we're allowing AutoLayout to make an important decision.

We're saying that this constraint, so if I go back to the list

the top space constraint, we're saying that it needs to be equal to 54 points.

But if there's room, it can actually be greater.

In the case of the 3.5 inch device, the constraint leaves 54 point

spacing between the button and the label, as we can see here.

But on larger devices where there's much more space, the label can go as high up as

it needs to without dragging the Skip button up as well,

because that constraint can grow.

Okay, so this looks great on the 3.5-inch so far.

But on the 5.5-inch device that you see here, the labels are simply too high up.

Again, we can let it move freely by changing the type of relation on

the header top to the helmet bottom constraint,

which is right here and we'll change that from equal to greater than or equal.

Now the label is allowed to move down, but it actually does go too far down.

So if I get rid of the utilities area,

you'll see that it still looks great on the three point five inch.

But it's gone a little bit too far down over here.

Let's maybe get it somewhere about over here.

So how do we solve this?

Sometimes, especially as your layouts get trickier, you might have to add more than

one constraint to govern a particular relationship.

In this case I'm saying that the header label has to be

at least 28 points from the helmet view, but it can grow if needed.

The problem is, I don't want to grow too far as it's just doing right now.

So, let's add another vertical space in constraint.

So, control drag from the label again to the helmet, and

select vertical spacing yet again.

Now, this forces it to snap back to the top, that's okay.

We'll go back to the utilities area, select the new constraint that we added,

top space to helmet.

And again, by default, it's set as an equal relationship.

And this overrides our settings from earlier.

Change this to less than or equal, and set a constant of 120 points.

With a combination of both these constraints, it looks much better.

And we're now saying that the header label has to be at least 28 points away from

the helmet image, and can grow if it needs to, but it cannot grow more than 120.

Because we have a less than or

equal constraint working in the opposite direction.

We're saying that this constraint has to be equal to 120, at most, away from

the helmet, but it can be less if it needs to and that's really all there is to it.

Inequality constraints allow us to build flexible relationships and

with some tweaking, we can arrive at our final values.

One very important thing to know is that because inequality constraints

are flexible.

And can accommodate various layout without breaking, it's quite difficult to start

out directly with inequality constraints to set up our views.

Unless you're quite comfortable with using AutoLayout,

I recommend getting your basic layout into a decent shape first.

Using simple equality constraints as we just did.

And then from there tweak one constraint at a time to position views

exactly where you need them to be.

This way you have a better understanding of what exactly you are changing.

Now, there's only one problem with this layout, that we haven't looked at at all.

It actually completely breaks in landscape.

So if I click here, yikes.

Now I'll leave it up to you to decide whether in this hypothetical app

you want to allow landscape orientation to begin with.

If the answer to that is yes, go ahead and see how you can fix these layouts and

get something that you're happy with in the end.