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.
Documentation
-
0:00
The layouts we've looked at so far have been simple layouts.
-
0:04
In reality our designs are going to be a bit more complicated
-
0:08
than a few rectangular views on screen.
-
0:11
Hopefully you worked through some of the recipes linked to in the previous videos,
-
0:15
and got some practice in because we're going to explore a few more concepts.
-
0:20
Let's bring that constraint equation back up on screen here.
-
0:24
When we talked about this equation earlier,
-
0:26
we said we were creating a relationship between two views.
-
0:30
So far we've only seen one type of relationship, an equal relationship.
-
0:36
There are two more types we can create, a less than or
-
0:39
equal, and a greater than or equal.
-
0:42
Where our previous relationships were fixed in that if we said
-
0:46
one view should be eight points away from another, it always stayed that way.
-
0:51
Less than or equal and greater than or
-
0:54
equal relationships can fluctuate to accommodate a layout within a given space.
-
0:59
This is easier to understand if we just start playing around, so
-
1:03
let's jump right into a new storyboard scene.
-
1:06
So we don't want to mess around with main.storyboard or layout guides.
-
1:10
Gonna right-click, add a new file.
-
1:13
Again, this is going to be a storyboard file and we'll call this Inequalities.
-
1:20
We'll add a view controller here to the scene, and
-
1:24
we'll set it as the initial view controller.
-
1:31
To illustrate this concept, let's build a seemingly simple layout.
-
1:36
So we're gonna drag out two labels from the object library.
-
1:43
And we'll center the first one, and we'll just drop the second one below somewhere.
-
1:49
So we'll give these labels arbitrary text.
-
1:52
I'm going to set the first one to first, and the second one to second.
-
2:00
This is zoomed out a bit too far, let's bring that in, there we go.
-
2:04
Okay, so make sure you have the first one set to the center of the scene.
-
2:07
You can drag it around until you get it to snap.
-
2:10
And then we'll set some constraints to position it here.
-
2:13
So from the Align submenu and the Auto Layout submenu at the bottom,
-
2:16
we're going to select horizontally and vertically in container.
-
2:20
Next, position the second label somewhere below this first centered label.
-
2:25
Now make sure that it is also horizontally centered so it's aligned.
-
2:30
And let's just assume that this is the final layout I want for my app.
-
2:35
So let's go ahead and add some constraints.
-
2:37
We'll give this label a horizontal center, or
-
2:40
Horizontally in Container alignment constraint.
-
2:43
And you can either use the Alignment menu or
-
2:45
just CTRL + drag from the label to the super view.
-
2:50
Next let's set vertical spacing constraints from the second label
-
2:54
to the first and the second label to the super view.
-
2:57
So I'm going to simply Ctrl drag here and accept whatever
-
3:00
constant values are automatically selected based on where I've positioned this label.
-
3:06
So second to first, vertical spacing.
-
3:09
And then second to bottom, bottom space to safe area.
-
3:14
Okay, so we've got blue I-bars all around here,
-
3:17
which means that our layout has been satisfied.
-
3:20
Let's see how this looks.
-
3:22
Right now we're previewing this design on an iPhone 8 or
-
3:25
more specifically the 4.7 inch device.
-
3:28
So let's see what this looks like on larger devices.
-
3:31
Now you can do that by clicking on View as at the bottom, and
-
3:34
then working your way through the devices.
-
3:38
On larger devices, our blue I-bars, if we click around,
-
3:44
oops, should still be there.
-
3:48
At least on the iPhone X over here, because we have plenty of space.
-
3:52
Now let's go up to the next one.
-
3:53
And this works here as well.
-
3:56
Let's work our way down from the iPhone 8 to the smaller devices.
-
3:58
And here you'll see that now we have red, no more blue I-bars,
-
4:03
indicating that we do have issues.
-
4:06
But least over here we can still see the labels, right.
-
4:09
And even if we go to the smallest device size we can.
-
4:14
Now if we go back to our original, and let's say I change this constant value.
-
4:19
I wanna put this a bit lower, I say 50 points, right, so it's closer down.
-
4:24
And then I'm going to delete this constraint.
-
4:27
Now it's positioned right here.
-
4:28
And I'll add that first vertical space in constraint again.
-
4:32
Now if we go through, it should still be fine on the larger device sizes.
-
4:39
But let's see what it looks like, okay, so on the second we still have red All right,
-
4:48
now these issues that you see here, these red values, these red I-bars, arise
-
4:53
because of the specific constraints that we've chosen at to arrive at our lay out.
-
5:00
Since we set the vertical spacing constraints in both directions,
-
5:04
we have one going to the bottom here, and one going to the first label at the top.
-
5:08
We’ve defined a very specific relationship that doesn’t leave much wiggle room.
-
5:13
So in the case of this second label, not only do we have a vertical spacing
-
5:17
constraint between the super view's bottom and the label's bottom, but
-
5:21
we also have a second vertical spacing constraint from the first label's bottom
-
5:25
to the second label's top, which is this red I-bar you see here.
-
5:29
This means that the second label can only occupy a very specific position
-
5:34
to satisfy the two constraints.
-
5:36
It cannot move up or down as the size of the device changes
-
5:40
because of these rigid values that we've set.
-
5:43
So fixed in between these two, as the views get smaller,
-
5:47
the system has no way to adjust the constraints to maintain a layout and
-
5:52
display the second label properly.
-
5:54
So here there's just not enough space to have this 252 point spacing
-
5:59
constraint at the top and a 50 point spacing constraint at the bottom.
-
6:04
We can fix this with the knowledge we already have.
-
6:08
So if we select the second label, I already have it selected,
-
6:11
then we'll go ahead and select the top vertical spacing constraint and delete it.
-
6:16
And now our problem goes away.
-
6:19
On all screens, we should just have blue all around.
-
6:23
Okay, let's try and tweak this.
-
6:25
Let's see how far we can take this, and add one more specification to our layout.
-
6:29
So back on the iPhone 8, the 4.7 inch layout, we're going to delete any
-
6:34
vertical spacing constraints on the second label, just so that we can start over.
-
6:39
And we'll say that we want this second label
-
6:42
to be 200 points from the bottom here.
-
6:47
Okay, on this device, that looks okay.
-
6:49
But let's go to a smaller device, and then an even smaller device.
-
6:53
So on the iPhone SE size, or the iPhone 4S, well actually let's back up.
-
6:59
On the iPhone SE, this is not too bad.
-
7:01
But on the iPhone 4S, this is way too close to the first label, right.
-
7:07
I don't like how it looks.
-
7:09
What I would like is for the second label to be below the first like it is now, but
-
7:13
not too close to it.
-
7:15
So essentially what we want here are two constraints.
-
7:19
One that defines a minimum spacing between the first and
-
7:22
the second label so that it looks decent, the second label doesn't get too close.
-
7:27
But then I also want a second constraint to pin the bottom at a desired height.
-
7:32
But we already looked at that, right.
-
7:34
That's what we started out with.
-
7:36
Having two constraints, a top and
-
7:39
a bottom space constraint, makes our layout inflexible.
-
7:43
To solve this we have two tools or concepts at our disposal.
-
7:48
The first, as we talked about, is an equality relationship, or
-
7:53
rather a greater than or equal or a lesser than or equal relationship.
-
7:57
So let's implement this.
-
7:59
We'll go back to our base, our iPhone 8 size, and
-
8:02
again we'll delete the existing vertical constraints.
-
8:08
Now let's also make sure that, like before,
-
8:11
we have two sets of vertical spacing constraints on it.
-
8:14
So we'll do one from the second label to the firs,
-
8:18
so this will be a vertical spacing constraint.
-
8:22
Let's adjust the size, there we go.
-
8:25
And then a second vertical spacing constraint from the second label to
-
8:30
the super view's bottom.
-
8:32
And that should be set to 200 points.
-
8:35
There we go.
-
8:36
Okay, next we're going to select the vertical space constraint.
-
8:40
Now really quick, if you go all the way to the bottom, right,
-
8:43
and you click, we're back at our problem, red I-bars.
-
8:46
Let's go back now and we're going to select that
-
8:51
vertical space constraint between the two labels, and then make sure
-
8:55
in the attribute inspector this section should pop once you select the constraint.
-
9:00
We're going to modify this relation property.
-
9:03
Right now it's set to equal.
-
9:05
Let's change this to greater than or equal.
-
9:08
By doing this we're indicating that this constraint can be greater than or
-
9:12
equal to the value of the constant specified.
-
9:16
Now when I say I don't want the second label to get too close to the first,
-
9:21
more specifically I want to say that it should be no closer than 32 points.
-
9:26
So let's specify that as the constant.
-
9:29
A greater than or equal relation, unlike the equal only relation,
-
9:34
allows a constraint to grow and shrink as the layout around it changes.
-
9:38
By specifying a greater than or
-
9:40
equal relation with a constant value of 32 points, we're stating
-
9:45
that at minimum the constraint should be no less than 32 points.
-
9:50
Meaning that the third, or rather the second label,
-
9:53
should not get any closer to the first than my 32 points.
-
9:58
Once this bottom constraint has been satisfied, if the space between the second
-
10:03
and the first label is greater than 32 points, then the constraint can grow,
-
10:09
so to speak, to position the second label a distance greater than 32 points away.
-
10:15
This is why it's called a greater than or equal relation.
-
10:19
We're allowing it to be greater than 32 points if possible, but
-
10:23
at the very minimum it should be equal to 32.
-
10:26
The less than or equal to constraint is the opposite of this.
-
10:30
If we apply a less than or
-
10:31
equal relation here with a constant value of 32 points, we're indicating
-
10:36
that we want the maximum distance between the two labels to be 32 points.
-
10:41
So the constraint can be less, it can shrink if it needs to to accommodate
-
10:45
other constraints in the layout, but it cannot grow more than 32 points.
-
10:50
Now with the changes we've made, our layout will work in most cases but
-
10:55
not all.
-
10:56
So you can see that it works, is expected to work on the iPhone 8 because here,
-
11:00
after satisfying the bottom spacing constraint, there's still enough space for
-
11:04
this to be more than 32 points.
-
11:05
And this constraint grows, and everything is fine.
-
11:09
If we go the iPhone SE, you will see that we still have blue I-bars so
-
11:13
we've solved this problem.
-
11:14
Now in all but the last device size, this does not work.
-
11:18
So it seems like it works, right, you still have blue I-bars.
-
11:22
But in this device size, or at least in all but this device size,
-
11:26
there's enough space available that after you set the bottom space constraint,
-
11:32
the vertical space constraint can still be added to the top one without any issues.
-
11:38
That's because that remaining space is greater than 32 points and can grow.
-
11:42
For the smallest device though,
-
11:44
this available space below the first label is really small.
-
11:48
That means that after setting the bottom space constraint with a constant value
-
11:52
of 200 points, there isn't enough space to add that top vertical space constraint.
-
11:58
Or conversely, after setting this minimum 32 point spacing between the second and
-
12:03
the first label,
-
12:04
there isn't enough space left below to add a 200 point vertical space constraint.
-
12:10
Remember that since our top constraint has a greater than or
-
12:13
equal relation, the minimum value is 32 points.
-
12:18
It can be greater than that but it cannot be less.
-
12:21
Since the available space for
-
12:23
the top vertical spacing constraint on the second label is less than 32 points
-
12:27
on the smallest device, auto layout cannot resolve this issue.
-
12:31
And so what it's done here is it starts to reduce the height of the label,
-
12:36
and in our case the height has dropped below zero and
-
12:39
you just can't see the second label at all.
-
12:42
So in a situation like this,
-
12:43
auto layout can make some decisions on its own in an effort to resolve the layout.
-
12:49
One decision it can make is to not install a constraint
-
12:53
when we have defined a layout that cannot be resolved.
-
12:57
So in the case of this iPhone 4S, we have two constraints competing
-
13:02
to determine the vertical position of the second label.
-
13:05
Now to solve this problem, we need to reach into our toolbox for
-
13:08
another approach.
-
13:09
But we'll tackle that in the next video.
You need to sign up for Treehouse in order to download course files.
Sign up