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
Earlier we learned about three types of constraint relationships but only implemented one. In this video, let's take a look at how the remaining relationship types allow us to create fluid layouts.
-
0:00
To implement the changes we want to make we're going to use a new tool,
-
0:04
inequality relationships.
-
0:06
If you click on any constraint, so
-
0:08
let's click on the walk-through label or the header label.
-
0:12
Click on a constraint, and then go to the details.
-
0:16
You can see that in all the constraints we have implemented so
-
0:19
far, we have set the relation type to equal.
-
0:22
Equal indicates that the relationship between the attributes
-
0:25
must be exactly equal to the offset value provided in the constant field.
-
0:31
If we don't want to create a relationship that is exactly equal to the constants
-
0:35
value, we have two other options, Less Than or Equal and Greater Than or Equal.
-
0:40
These allow us to create inequality relationships.
-
0:44
This is best learned in my usage, so let's tweak a few constraints.
-
0:48
Select the skip, button that's at the very bottom of the scene, and
-
0:52
select the constraint connecting it to the body label above.
-
0:56
That's the top space constraint.
-
0:58
In the size inspector, we can see the constraint we created earlier.
-
1:02
On the y-axis we're specifying two constraints for the skip button.
-
1:06
So let me go back real quick.
-
1:09
So one constraint pins it 20 points from the bottom and
-
1:13
another pins it 50 points to the bottom of the body label.
-
1:17
On the larger devices, these constraints are in conflict with each other.
-
1:20
So AutoLayout takes its best guess and moves the button up in the view.
-
1:25
We could solve it with a priority constraint, but instead,
-
1:28
we're going to set the relation drop down on this constraint right here.
-
1:33
So select the skip constraint or the skip button.
-
1:37
Go to the top space constraint in the size inspector and double click it.
-
1:41
And then from the relation drop down we're going to set it to greater than or equal.
-
1:46
Okay so now when we run it on the 6S.
-
1:50
And boom, problem solved.
-
1:52
So what just happened here?
-
1:53
If you look at all the previews, so
-
1:56
let me go to the Assistant Editor and load up a few.
-
2:00
You'll notice that the Skip button is exactly where we want it to be.
-
2:03
And while we haven't deleted the top constraint,
-
2:06
the spacing between the skip and body label is now variable between the views.
-
2:11
So on the lowest, on the smallest device it looks really good and
-
2:14
it does here as well.
-
2:15
By changing the constraint from equal to greater than or
-
2:18
equal, we're allowing AutoLayout to make an important decision.
-
2:22
We're saying that this constraint, so if I go back to the list
-
2:27
the top space constraint, we're saying that it needs to be equal to 54 points.
-
2:33
But if there's room, it can actually be greater.
-
2:36
In the case of the 3.5 inch device, the constraint leaves 54 point
-
2:40
spacing between the button and the label, as we can see here.
-
2:44
But on larger devices where there's much more space, the label can go as high up as
-
2:49
it needs to without dragging the Skip button up as well,
-
2:52
because that constraint can grow.
-
2:54
Okay, so this looks great on the 3.5-inch so far.
-
2:57
But on the 5.5-inch device that you see here, the labels are simply too high up.
-
3:03
Again, we can let it move freely by changing the type of relation on
-
3:07
the header top to the helmet bottom constraint,
-
3:12
which is right here and we'll change that from equal to greater than or equal.
-
3:19
Now the label is allowed to move down, but it actually does go too far down.
-
3:24
So if I get rid of the utilities area,
-
3:27
you'll see that it still looks great on the three point five inch.
-
3:29
But it's gone a little bit too far down over here.
-
3:32
Let's maybe get it somewhere about over here.
-
3:35
So how do we solve this?
-
3:37
Sometimes, especially as your layouts get trickier, you might have to add more than
-
3:42
one constraint to govern a particular relationship.
-
3:45
In this case I'm saying that the header label has to be
-
3:48
at least 28 points from the helmet view, but it can grow if needed.
-
3:52
The problem is, I don't want to grow too far as it's just doing right now.
-
3:57
So, let's add another vertical space in constraint.
-
4:00
So, control drag from the label again to the helmet, and
-
4:04
select vertical spacing yet again.
-
4:06
Now, this forces it to snap back to the top, that's okay.
-
4:09
We'll go back to the utilities area, select the new constraint that we added,
-
4:14
top space to helmet.
-
4:16
And again, by default, it's set as an equal relationship.
-
4:20
And this overrides our settings from earlier.
-
4:22
Change this to less than or equal, and set a constant of 120 points.
-
4:29
With a combination of both these constraints, it looks much better.
-
4:33
And we're now saying that the header label has to be at least 28 points away from
-
4:38
the helmet image, and can grow if it needs to, but it cannot grow more than 120.
-
4:43
Because we have a less than or
-
4:45
equal constraint working in the opposite direction.
-
4:48
We're saying that this constraint has to be equal to 120, at most, away from
-
4:52
the helmet, but it can be less if it needs to and that's really all there is to it.
-
4:57
Inequality constraints allow us to build flexible relationships and
-
5:00
with some tweaking, we can arrive at our final values.
-
5:04
One very important thing to know is that because inequality constraints
-
5:07
are flexible.
-
5:08
And can accommodate various layout without breaking, it's quite difficult to start
-
5:13
out directly with inequality constraints to set up our views.
-
5:17
Unless you're quite comfortable with using AutoLayout,
-
5:20
I recommend getting your basic layout into a decent shape first.
-
5:24
Using simple equality constraints as we just did.
-
5:26
And then from there tweak one constraint at a time to position views
-
5:31
exactly where you need them to be.
-
5:33
This way you have a better understanding of what exactly you are changing.
-
5:37
Now, there's only one problem with this layout, that we haven't looked at at all.
-
5:41
It actually completely breaks in landscape.
-
5:44
So if I click here, yikes.
-
5:47
Now I'll leave it up to you to decide whether in this hypothetical app
-
5:51
you want to allow landscape orientation to begin with.
-
5:54
If the answer to that is yes, go ahead and see how you can fix these layouts and
-
5:59
get something that you're happy with in the end.
You need to sign up for Treehouse in order to download course files.
Sign up