Intive Blog

Size class

Introduction
Size class is a feature used to adapt the layout of a view according to different screen sizes and/or screen orientations by just using the interface builder.

1

At first glance, it may seem difficult to understand, but with a little bit of practice, it can become a very powerful and effective tool. Previously, when a project required an app to support landscape orientation, we would have spent hours making code to adjust frames and/or constraints to adapt our assets to the horizontal orientation. With Size Classes, much of this can be avoided, to the point that you may not even need to code at all. That brings me to the first misconception of the tool: it doesn’t necessarily mean that you’ll use classes. Call it a misnomer if you will. That theme will be something common in this text, the manner in which the tool is used is not very obvious at first. That’s why we are going to use the following example to explain each step along the way.

First of all, let’s look at this screen:

2

As you see, we have a view with a label on top. This view has leading, trailing and top constraints, as well as a height constraint. Now, if we turn the view to landscape, we can see that the view naturally stays on top with the same height as before.

3

Size Class and Constraints

Let’s look at the bottom of the xib view. Do you see that thing that says “wAny hC”?

4

That represents the size context that you’re looking at. Currently, it means that any constraint that we add here applies to all sizes and orientations. Now, if we click on that we’ll see a pop up like this.

5

If you drag the mouse around it, you’ll see that the text description changes. Each of these shapes drawn in the pop up represent a different size and/or orientation. Let’s choose the one that says “Compact Height”.

7 6

This one is for iphones in landscape mode. Notice how the bottom of the editor now is blue. This shows that we are on a different context of a screen.

8The next step is to deactivate the constraints that are not needed for the layout wanted. Let’ start off with the height constraint.

9

After selecting it, look at the Size Inspector. Do you see that “+” sign next to the “Installed” checkmark at the bottom? Click on it.

10

Now, you should see a contextual tool box with all the available size contexts. At the top of the list, you should see the present size context you’re standing in (Any Width | Compact Height). Select it.

11

Doing so, add the context to the Size Inspector. After that, uncheck the checkbox of the item we just added:

12 13

By doing this, we are telling the xib that this constraint will be disabled on landscape mode, but active on the normal portrait mode. Do the same with the Trailing constraint. The result should be like this:

14

The next step is to change the size of the view and add a Bottom constraint and a Width constraint:

15

Click on one of the constraints that we have just added. If you look a the Size Inspector, you’ll notice that only our current context is enabled:

16

This applies for any layout constraint that we add under this size context. Now if, you click back on the size class button and go back to the “wAny hAny” mode again (for that matter, also change the view orientation back to portrait), you’ll see that the constraints we just added are deactivated and the ones we previously disabled are active again. If you build the app and change orientations, your screen will adjust to the modes you have just configured.

17

18

19

Congratulations!, you have just learned the basics of how to use Size Classes. Now, this tool can also be used for other things besides constraints.

 

Size class and Fonts

Just like constraints, you can have different fonts for different contexts. After all, you might have more or less space to deal with. Any configuration in the inspectors that has a plus sign next to it can have these different setups.

20

21

Size Class and Views

Now consider this situation: what if you don’t want to show a certain view at all in landscape? What if the view needs to be outright a different one? With size classes you can also show and hide views. Let’ say for example that we have an arrow under the title that points the user at the content:

22

We don’t have any method to rotate the arrow (at least not without using code). So we have no choice but to hide it. If you select this view, you’ll see a “+” sign at the bottom of the inspector, just like the constraint. If we add the landscape context and disable it, the view will be “hidden”:

23

However, we still need an arrow for this context as well. If we proceed to add the horizontal arrow on this context you’ll see that, just like the constraints, views added in this size class context are only enable for the selected configuration:

24

Conclusion

This should cover the basic instructions needed to use Size Classes. Remember to change the orientation and screen size of the xib using the inspector of the View Controller to make sure that the configurations you’re setting look correct. As a final note, if you look at the different contexts of the size class, you’ll also see ipad sizes included. This is because, in Apple mindset, the same xib should be used for all cases. We know, of course, that most of the time this is not possible as images require much higher resolutions. Apple’s logic is more likely to disable and enable views just like the last written point. However, this would mean to have all the assets for all cases on the same xib, which might cause some clutter. Of course, this is just a matter of opinion and dependent on case by case basis. So it is good to keep in mind. That is all for now, happy coding.

 

Ezequiel González

Ezequiel Gonzalez is IOS developer at intive since August 2011. Videogame developer graduated from Escuela de Arte Multimedial Da Vinci, he worked two years as a QA tester and one year as a prototype developer for Flash games. Ezequiel´s hobbies are drawing, reading and playing videogames. He also goes to yoga once a week and excercices at home.

Add comment