The horizontal and

vertical size classes we just learned about are considered traits.

A trait describes the environment in which view controllers and

views must operate and help you make high level decisions about your interface.

All view controllers, views, and few other objects manage a collection of traits

that specify the current environment associated with that object.

We looked at a single trait, size classes.

What other traits can we use to specify the final designs in our apps?

Aside from side classes we also have a property known as the display scale.

A display scale of a trait collection identifies whether a device is a retina or

a non retina display.

This allows us to serve up different assets based on the screen resolution.

We also have a user interface idiom that helps us identify the type of interface,

which can either be phone, pad, TV, or car.

The combination of a size class, user interface idiom,

and a display scale create what is known as a trait collection.

And allows us to think about layouts in a very generalized manner.

Let's take a look at a simple example.

Here we have another brand new empty project, a single view application.

Now we know that this scene represents our view controller.

If you look at the bottom of the screen,

you'll notice something that we haven't talked about before.

It should say over here any any or any width any height.

Like the auto layout sub many this size class sub menu

allows us to provide layout changes for different size class combinations.

When using size classes we always start with the any any configuration and

lay out our app.

This allows us to create a generic layout that applies to every single device and

orientation.

So let's work on a simple UI.

First, let's select the view.

And in the attributes inspector, change the background color to something,

recently used.

I'll make it blue.

Now let's go through a quick exercise to demonstrate the flexibility

of size classes and how we can use them.

So let's add a label to our view.

And we're going to center it both horizontally and

vertically using the Align menu.

And that's all we're going to do with this label.

One thing we haven't talked about before is that the constraints we add to elements

in our view, as we just did, are dependent on the size classes that we use them with.

Since this constraint was set on a size class of any,

any the label is going to be centered on all devices and all orientations.

You can verify this by bringing up the preview pane in the assistant editor and

going through a few examples.

Now let me do that for a couple.

So switch to assistant editor and go to the preview mode.

Now this brings up the four inch iPhone loaded up by default.

So let's also add in here the iPhone six or the 5.5 inch iPhone.

And as you can see here the label is centered in both device sizes.

But let's pretend that in our layout when we rotate the phones to landscape mode so

let me do that for both.

Our label doesn't look good centered on any phone, other than the iPhone six plus.

So we want to keep it centered on the six plus.

But pin it to the right edge on all other phones in landscape.

Okay.

To target all other phones in landscape other than the six plus, if we go back to

our grid, we need to use the compact width, compact height size class.

So in the storyboard scene, let me go back to the standard editor.

At the bottom where you see it says Any Any for the size class, click on it.

You can hover your mouse over this grid that appears

to create a combination of size classes you want, and then click to set it.

At the bottom as you scroll around,

there's a brief description of the devices and orientations that you will target if

you select the size class that you're hovering over.

So we're going to select the box in the top left corner to get the compact width,

compact height size class.

And at the bottom it says that this targets 3.5, 4, and

4.7 inch iPhones in landscape, which is what we want.

And when we click it your storyboard scene should immediately change.

At the bottom the menu bar in interface builder is highlighted in blue

to indicate that you are now working on a specific size class,

rather than the generic Any Any.

So over here let's move the label to the right edge,

all the way up to the right margin.

And we're simply going to modify or update the constraints so

that we are now positioned at this new position up against the right margin.

Okay so the moment you do this if you go back to the preview pane in the assistant

editor, you'll notice that the label changed position in the preview for

the four inch iPhone.

It's positioned up against the right margin but

it's still positioned in the center for the six plus.

Pretty easy right?

So to use size classes, we first start out with the Any Any size class to create

a generic layout then we make specific changes to target certain device sizes and

orientations that we want.

And we select the specific size class combination that allows us to do so.

In this way we can add constraints that are very specific to each size class.