Size classes allow you to control changes in your layouts based on a device, orientation, or abstract size. This movie shows how size classes work in iOS 10.
- [Narrator] Size classes enable you to design for different devices, resolutions, aspect ratios, and orientations. This is important because there are so many different iOS devices out there. Think of all the devices that run iOS 10. There's iPhones, iPads, iPad Pros, iPod Touches, and even inside of those little ecosystems, there are different sizes of devices, there are different aspect ratios, different resolutions.
So there's a lot to worry about, and with size classes we have a little bit more control over that. Now the first thing you may be wondering is what's the difference between size classes and Auto Layout that we've already looked at? Well, they're both useful in developing your applications. Auto Layout enables you to layout objects relative to the edges of the screen or to other objects. Size classes can be used with Auto Layout to give you control over changing the entire layout of your application in a different size class.
So, this whole chapter is gonna be about size classes, so my goal for this movie is not to teach you everything there is to know, but to just show you how they work. So, in the bottom of the screen in Interface Builder you're going to see View as and it's going to say the name of a device, and it's going to have width and height in parentheses. You're going to see with width is C for an iPhone SE and the height is R. Those stand for compact and regular. So you can click that button, and you can change the device that you're viewing as.
So if we want to view it as a 6s or a 6s Plus or an SE, 4s, et cetera, we can control that. We can also control the orientation, portrait or landscape, in the orientation section. I want you to pay special attention to the width and the height, compact and regular, for the various devices and orientations, because they are not exactly what you may expect. For example, the iPhone SE in portrait mode has a compact width and a regular height.
In landscape mode, you may expect it to have a regular width and a compact height, but it has a compact width and a compact height. In fact, the only iPhone that has a regular width in landscape mode is the Plus model. So the 6s Plus, the 7 Plus has a regular width and a compact height. So that's just important to know when you're designing an application. So, let's say we want to design something that's going to be a little bit different when we have a regular width versus a compact width.
For example, our interface may benefit from that extra horizontal space. So, what I'm gonna do is go into portrait mode for the 6S Plus. And here I'm going to search for a label in the object library and just drag and drop it on the screen. And so we have our label, and whether we're in portrait or in landscape, the label is still there in its top left position. And of course, that's because the coordinates in iOS start at the top left, so no matter what device or orientation, this label is going to be in the top left all the time.
So, now let's say we want to customize the layout for only regular width objects. So what I'm gonna do is, viewing as an iPhone 6s Plus, or if your Xcode says iPhone 7 Plus, you want to select that device, and then you can go into landscape mode, then click Vary For Traits, and then what you want to do is Introduce Variations Based On Width, so check that box, and this whole area is going to turn blue.
Now, for more information you can always click the question mark, but basically what we're doing is we're designing a layout that only applies to regular width devices. And you can see which devices this applies to through this drop-down. So we have the iPads and the only iPhone in here is the 6s Plus in landscape. So, let's say I want to add an extra user interface element, like a switch, for example.
Drag a switch onto the screen, and I'm gonna put it right here, and of course if you want to you can drag out extra user interface elements, but I'm not going to do that now, I'm actually going to click Done Varying. So this turns back to that gray color, the blue is now gone, and we've created this user interface, and everything pretty much just looks like it always does, but watch what happens in the document outline when I change the orientation to portrait. So the document outline is this left area in interface builder here.
If you watch there where the switch is and I click portrait, you're going to see that it gets grayed out, because it is no longer there. It's not just off the screen, it doesn't exist in this layout, in this orientation, so by using these size classes, we can add and remove different user interface elements, and of course there are limitations to that, which we're going to talk through throughout the rest of this chapter, but for now what I want you to take away is that size classes enable you to completely customize your applications depending on the width and the height of your screens, including adding and subtracting user interface elements as you please.
- Adding picker views
- Responding to selections in picker views
- Creating UI elements with code
- Creating image views to display images
- Creating web views to display web content
- Changing fonts, pins, and views with size classes