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
Views that have content already have a predetermined size and Auto Layout can use this to manipulate the view's frame. In this video, let's explore the notion of intrinsic content size.
-
0:00
You may have noticed in this example that we never gave the helmet Image View or
-
0:05
the skip button any height or width constraints.
-
0:08
Often times we don't even bother giving height and
-
0:11
width constraints to any labels or buttons that we use throughout our apps.
-
0:15
So how does auto-layout know how to size these views?
-
0:19
One of the more powerful features of Auto Layout comes into play where
-
0:22
you have views that contain some form of content.
-
0:25
So content can be text in a label or button as you see here, or
-
0:29
an image in an Image View.
-
0:31
Every view that contains content can calculate its intrinsic content size,
-
0:36
which is the minimum size needed to display the content contained in that
-
0:41
view without clipping any of it.
-
0:44
The intrinsic content size is calculated by a method on every UI view instance.
-
0:49
Now, not all views have an intrinsic content size but for
-
0:53
those that do this method returns a CG size instance.
-
0:57
Which is another C struct that contains the height and
-
1:00
width of the alignment rectangle needed to display the view's content.
-
1:04
When a view has an intrinsic content size it informs Auto Layout about this
-
1:09
predefined size.
-
1:10
And Auto Layout can use this information in turn to layout the views.
-
1:14
You have already relied on this property many times without realizing it.
-
1:19
When we create labels in a storyboard scene,
-
1:21
we never give the label any height or width constraints.
-
1:24
And this is because Auto Layout can determine the height and
-
1:27
width using the intrinsic size property of the view.
-
1:30
In our current example, since we're not scaling this image up or down and
-
1:34
we're using the original size.
-
1:36
Auto Layout can determine the size part of the equation from the content within
-
1:40
the view.
-
1:41
All we have to worry about is positioning it where we want to.
-
1:44
Basically, if we're working with views that have content, the intrinsic content
-
1:49
size and position constraints create a fully specified layout.
-
1:53
As you just saw however, if space is constrained in our views as it was with
-
1:57
the label when we started out, Auto Layout's first attempt at resolving
-
2:01
constraints is to clip some of the content inside the views to accommodate.
-
2:06
But sometimes we really don't want the content to be clipped.
-
2:09
Or we could have two labels where the content in one is more important than
-
2:13
the other.
-
2:14
Let's take a look at another example.
-
2:16
So, I'm going to close out this example and I'll create a new project.
-
2:22
Single view application again and we'll call this,
-
2:28
AutoLayoutExample3 and hand over to the storyboard scene.
-
2:34
Let's keep this simple and drag two labels on to the view.
-
2:39
We're going to set up these labels side by side to display some arbitrary amount
-
2:44
of text.
-
2:44
So we're going to pin the labels to either side right up against the margin.
-
2:51
I'll just place them anywhere in the middle here.
-
2:54
Well, with the first label we'll use the pin menu.
-
2:57
and we'll say zero to the margin, oops, add that constraint.
-
3:04
And we want a 8 point vertical or horizontal spacing
-
3:09
constraint right here so let me select that and
-
3:14
put the constables at eight points we're going to pin this one,
-
3:20
trailing space to contain our margin, and give it a constant of 8 points again.
-
3:30
And then we're going to give these labels an equal width constraint, oops.
-
3:37
Wrong selection so Ctrl+drag again and select equal widths and
-
3:41
then finally we'll center these vertically in the container.
-
3:46
Okay, update frames and now we have our label set up.
-
3:51
Let's create two outlets, so that we can use these labels in code, so
-
3:56
assistant editor.
-
3:58
We'll just name these really simple names.
-
4:01
So I'm going to call this one.
-
4:06
Label1 and we'll call the second one label2.
-
4:13
Okay next, let's go to the View Controller.
-
4:16
And we'll assign each of these labels some random text.
-
4:22
So we'll say label1.text.
-
4:31
And we'll put some fake text in like before.
-
4:37
And then we'll do the same thing for label2.
-
4:43
Let's run the app.
-
4:45
I'm gonna put this on an iPhone 6.
-
4:48
And you should see that since we have an equal width constraint on both the labels,
-
4:52
and they're both pinned equal amounts from the margins end from each other
-
4:57
the text is identically clipped on both labels and this should be expected.
-
5:01
The equal width constrain we added ensures that the label should be equally sized.
-
5:06
So at this point, Auto Layout ignores the intrinsic content size and
-
5:10
defines a label with.
-
5:11
But what if these labels aren't equally important.
-
5:15
Let's say that label one displays content that is more important to the user.
-
5:20
So, if there is content that fits in both labels,
-
5:23
okay great, we want them to be equally sized.
-
5:25
But in the event that both of the labels have content larger than the label width,
-
5:30
we really want label one to grow, and label two to shrink.
-
5:34
Let's take a break here, and in the next video, let's discuss how we can indicate
-
5:39
importance based on the content inside the view.
You need to sign up for Treehouse in order to download course files.
Sign up