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
Now that we know what size classes are, let's see how we can use them to modify our layout at a high level.
-
0:00
The horizontal and
-
0:02
vertical size classes we just learned about are considered traits.
-
0:06
A trait describes the environment in which view controllers and
-
0:10
views must operate and help you make high level decisions about your interface.
-
0:15
All view controllers, views, and few other objects manage a collection of traits
-
0:20
that specify the current environment associated with that object.
-
0:25
We looked at a single trait, size classes.
-
0:28
What other traits can we use to specify the final designs in our apps?
-
0:33
Aside from side classes we also have a property known as the display scale.
-
0:38
A display scale of a trait collection identifies whether a device is a retina or
-
0:43
a non retina display.
-
0:45
This allows us to serve up different assets based on the screen resolution.
-
0:50
We also have a user interface idiom that helps us identify the type of interface,
-
0:56
which can either be phone, pad, TV, or car.
-
1:00
The combination of a size class, user interface idiom,
-
1:04
and a display scale create what is known as a trait collection.
-
1:08
And allows us to think about layouts in a very generalized manner.
-
1:12
Let's take a look at a simple example.
-
1:14
Here we have another brand new empty project, a single view application.
-
1:19
Now we know that this scene represents our view controller.
-
1:22
If you look at the bottom of the screen,
-
1:24
you'll notice something that we haven't talked about before.
-
1:27
It should say over here any any or any width any height.
-
1:32
Like the auto layout sub many this size class sub menu
-
1:36
allows us to provide layout changes for different size class combinations.
-
1:41
When using size classes we always start with the any any configuration and
-
1:46
lay out our app.
-
1:47
This allows us to create a generic layout that applies to every single device and
-
1:51
orientation.
-
1:52
So let's work on a simple UI.
-
1:54
First, let's select the view.
-
1:56
And in the attributes inspector, change the background color to something,
-
1:59
recently used.
-
2:01
I'll make it blue.
-
2:02
Now let's go through a quick exercise to demonstrate the flexibility
-
2:06
of size classes and how we can use them.
-
2:09
So let's add a label to our view.
-
2:13
And we're going to center it both horizontally and
-
2:16
vertically using the Align menu.
-
2:20
And that's all we're going to do with this label.
-
2:23
One thing we haven't talked about before is that the constraints we add to elements
-
2:27
in our view, as we just did, are dependent on the size classes that we use them with.
-
2:33
Since this constraint was set on a size class of any,
-
2:36
any the label is going to be centered on all devices and all orientations.
-
2:41
You can verify this by bringing up the preview pane in the assistant editor and
-
2:45
going through a few examples.
-
2:47
Now let me do that for a couple.
-
2:50
So switch to assistant editor and go to the preview mode.
-
2:54
Now this brings up the four inch iPhone loaded up by default.
-
2:57
So let's also add in here the iPhone six or the 5.5 inch iPhone.
-
3:01
And as you can see here the label is centered in both device sizes.
-
3:07
But let's pretend that in our layout when we rotate the phones to landscape mode so
-
3:12
let me do that for both.
-
3:15
Our label doesn't look good centered on any phone, other than the iPhone six plus.
-
3:20
So we want to keep it centered on the six plus.
-
3:23
But pin it to the right edge on all other phones in landscape.
-
3:27
Okay.
-
3:27
To target all other phones in landscape other than the six plus, if we go back to
-
3:32
our grid, we need to use the compact width, compact height size class.
-
3:38
So in the storyboard scene, let me go back to the standard editor.
-
3:43
At the bottom where you see it says Any Any for the size class, click on it.
-
3:47
You can hover your mouse over this grid that appears
-
3:51
to create a combination of size classes you want, and then click to set it.
-
3:55
At the bottom as you scroll around,
-
3:57
there's a brief description of the devices and orientations that you will target if
-
4:02
you select the size class that you're hovering over.
-
4:05
So we're going to select the box in the top left corner to get the compact width,
-
4:10
compact height size class.
-
4:12
And at the bottom it says that this targets 3.5, 4, and
-
4:14
4.7 inch iPhones in landscape, which is what we want.
-
4:19
And when we click it your storyboard scene should immediately change.
-
4:23
At the bottom the menu bar in interface builder is highlighted in blue
-
4:28
to indicate that you are now working on a specific size class,
-
4:31
rather than the generic Any Any.
-
4:33
So over here let's move the label to the right edge,
-
4:37
all the way up to the right margin.
-
4:39
And we're simply going to modify or update the constraints so
-
4:43
that we are now positioned at this new position up against the right margin.
-
4:48
Okay so the moment you do this if you go back to the preview pane in the assistant
-
4:53
editor, you'll notice that the label changed position in the preview for
-
4:59
the four inch iPhone.
-
5:00
It's positioned up against the right margin but
-
5:03
it's still positioned in the center for the six plus.
-
5:06
Pretty easy right?
-
5:07
So to use size classes, we first start out with the Any Any size class to create
-
5:12
a generic layout then we make specific changes to target certain device sizes and
-
5:18
orientations that we want.
-
5:20
And we select the specific size class combination that allows us to do so.
-
5:25
In this way we can add constraints that are very specific to each size class.
You need to sign up for Treehouse in order to download course files.
Sign up