You may have noticed in this example that we never gave the helmet Image View or

the skip button any height or width constraints.

Often times we don't even bother giving height and

width constraints to any labels or buttons that we use throughout our apps.

So how does auto-layout know how to size these views?

One of the more powerful features of Auto Layout comes into play where

you have views that contain some form of content.

So content can be text in a label or button as you see here, or

an image in an Image View.

Every view that contains content can calculate its intrinsic content size,

which is the minimum size needed to display the content contained in that

view without clipping any of it.

The intrinsic content size is calculated by a method on every UI view instance.

Now, not all views have an intrinsic content size but for

those that do this method returns a CG size instance.

Which is another C struct that contains the height and

width of the alignment rectangle needed to display the view's content.

When a view has an intrinsic content size it informs Auto Layout about this

predefined size.

And Auto Layout can use this information in turn to layout the views.

You have already relied on this property many times without realizing it.

When we create labels in a storyboard scene,

we never give the label any height or width constraints.

And this is because Auto Layout can determine the height and

width using the intrinsic size property of the view.

In our current example, since we're not scaling this image up or down and

we're using the original size.

Auto Layout can determine the size part of the equation from the content within

the view.

All we have to worry about is positioning it where we want to.

Basically, if we're working with views that have content, the intrinsic content

size and position constraints create a fully specified layout.

As you just saw however, if space is constrained in our views as it was with

the label when we started out, Auto Layout's first attempt at resolving

constraints is to clip some of the content inside the views to accommodate.

But sometimes we really don't want the content to be clipped.

Or we could have two labels where the content in one is more important than

the other.

Let's take a look at another example.

So, I'm going to close out this example and I'll create a new project.

Single view application again and we'll call this,

AutoLayoutExample3 and hand over to the storyboard scene.

Let's keep this simple and drag two labels on to the view.

We're going to set up these labels side by side to display some arbitrary amount

of text.

So we're going to pin the labels to either side right up against the margin.

I'll just place them anywhere in the middle here.

Well, with the first label we'll use the pin menu.

and we'll say zero to the margin, oops, add that constraint.

And we want a 8 point vertical or horizontal spacing

constraint right here so let me select that and

put the constables at eight points we're going to pin this one,

trailing space to contain our margin, and give it a constant of 8 points again.

And then we're going to give these labels an equal width constraint, oops.

Wrong selection so Ctrl+drag again and select equal widths and

then finally we'll center these vertically in the container.

Okay, update frames and now we have our label set up.

Let's create two outlets, so that we can use these labels in code, so

assistant editor.

We'll just name these really simple names.

So I'm going to call this one.

Label1 and we'll call the second one label2.

Okay next, let's go to the View Controller.

And we'll assign each of these labels some random text.

So we'll say label1.text.

And we'll put some fake text in like before.

And then we'll do the same thing for label2.

Let's run the app.

I'm gonna put this on an iPhone 6.

And you should see that since we have an equal width constraint on both the labels,

and they're both pinned equal amounts from the margins end from each other

the text is identically clipped on both labels and this should be expected.

The equal width constrain we added ensures that the label should be equally sized.

So at this point, Auto Layout ignores the intrinsic content size and

defines a label with.

But what if these labels aren't equally important.

Let's say that label one displays content that is more important to the user.

So, if there is content that fits in both labels,

okay great, we want them to be equally sized.

But in the event that both of the labels have content larger than the label width,

we really want label one to grow, and label two to shrink.

Let's take a break here, and in the next video, let's discuss how we can indicate

importance based on the content inside the view.