Size Classes Tutorial in iOS and Xcode 6

Introduction

After the current variety of iOS devices screen sizes, was necessary to find a new tool or a new concept for designing the layout of your app. To make an app that works in all screen sizes is not an a easy thing and many cases you have to write code to handle them. Apple came with Autolayout and solved a lot of these problems and you could add constraints to control your views efficiently. Although Autolayout solves a lot of problems, we still have some issues to make a single storyboard runs in any screen-sizes even iPads. The magic started in Xcode 6 when Apple came with a new helpful feature called Size Classes.

Size classes allows you to design your storyboard and XIB files to run in any iOS device (all screen sizes). Also you can control which views to appear or which constraints to apply in each Size Class.

Let me show you an example that describes the problem that SizeClasses solve it. In the following image you will see the native mail app in landscape mode in iPhones versions except for iPhone6:

display-zoom-5

And in iPhone 6 plus:

6a010535fde333970c01b7c6dd1e99970b

In iPhone 6 plus, the screen size is very big and its logical to exploit this big space to show more content. Imagine your app will do the same to add more content or apply different design in iPhone 6 plus to exploit the big space, what will you do?. To solve problems like this, you should use size classes to define new constraints or add views specific for the size class of iPhone 6 plus.

In size classes you have relative amount for width and height dimensions:

  • Regular: think of it as BIG like the width and height in iPad or the width of iPhone 6 Plus in landscape mode.
  • Compact: think of it as LITTLE like the iPhone height in landscape orientation or the iPhone width in portrait.
  • Any: used when your layout doesn’t change in any screen size.

Tip:

When you are going to use Size classes, try to design your view controllers abstractly or in general using Any Size class. Then start to think in special cases or specific screen areas that will have different content of general layout. In this case you can:

  •  Add or remove views.
  • Add, remove or edit constrains.
  • Changing the font used by an UIView display text like UILabel or UITextView.

Enabling Size Classes in Xcode project

First create new Xcode project with Single View temple. Then to enable Size Classes in you project in Xcode(make sure that you use Xcode 6 or later), follow theses steps:

  1. Make sure first that you enabled AutoLayout. Size Class requires AutoLayout to work.
  2. Click on storyboard or xib file.
  3. Choose View -> Utilities -> Open File Inspector.
  4. Check-mark “Use Size Classes“.

Screen_Shot_2014-11-26_at_6_11_14_PM

In the view controller in storyboard, when you click on it you will find in the bottom center an indicator to the current size class that you are using. By default you will find (w Any  h Any) which means design your view for any width and andy height.

This what we should use abstractly in our work to make a layout that will match most of our screens. Then start customizing your layout for specific screens dimensions.

Choosing Size Classes

To customize for specific screens, choose the the appropriate Size Class by clicking on the bottom center and choose it. By moving with mouse pointer you can select the rectangle that fits your desired dimension. The description of selected Size class is written below the grid.

sc_size_tool_compact_regular_2x

 

Once you select your Size class, the layout will change to the specific screen size that you want. If you made a layout for (w Any h Any), the same layout will be presented in the new specific screen size that you selected. Then you can install or uninstall views, constrains or changing fonts.

To understand Size Classes, we will build simple demo that will run in iPhone’s (Portrait and Landscape).

Now open the signle view controller in your storyboard. As we said, We will start with Size Class  (w Any h Any) to build layout runs on all screen sizes.

Now create a UIView as a container with light gray background. I added constrains to super view (Leading = 0, ToSpace = 0, equally width and equally height)

Screen Shot 2014-11-26 at 7.52.35 PM

Now open the preview for your storyboard:

Screen_Shot_2014-11-26_at_7_55_20_PM

After you open the preview, you can see your layout in multiple screen size and also in different orientations:

Screen_Shot_2014-11-26_at_8_01_34_PM

Now as you see the container is appearing nicely in different screen sizes.

We will add two UILabels with text (“Welcome“,”Nice to meet you!”) on the container

WelcomeLabel” will be centered horizontally in container and in 50 px top space.

“NiceTo.. “ will be centered horizontally and vertically

Screen Shot 2014-11-26 at 8.15.59 PM

Now lets do something with Size Classes. In iPhone portrait this will be the final layout but we will add some changes if it run on landscape. In landscape the 2 labels will be centered vertically, “Welcome“ label will be 50 px leading to container and finally and “Nice to…“ label will be 50 px trailling to container.

Lets do that by selecting the Size Class (w Any h Compact).

Then in Label 1 uninstall the constrains of center horizontally and top space 50 px :

Main_storyboard_ÔÇö_Edited_and_SearchViewController_m

Then click on + add new installation for current Size Class, then uncheck the Installed box.

Screen Shot 2014-11-26 at 8.51.31 PM Screen Shot 2014-11-26 at 8.33.24 PM

The same steps for the constrain “Top space = 50“.

Now install the new constrains to center vertically and add leading space 50 px:

Screen_Shot_2014-11-26_at_8_42_10_PM

Same steps will be applied for label 2.

Screen Shot 2014-11-26 at 8.48.42 PM

Now the results after this step will be:

In landscape, lets change the fonts of labels. To do this, select the label and in attributes inspector you will find + button next to Font, click on it and choose the current class:

Screen Shot 2014-11-26 at 8.51.12 PM Screen Shot 2014-11-26 at 8.51.31 PM

In label 1 change it to System Bold 25

In label 2 change it to System Italic 25

In preview you will find something like that:

Screen Shot 2014-11-26 at 8.57.49 PM

As you see if you switched to landscape mode, the labels positions and fonts will be changed.

Now we will add a new Size Class for make some changes for iPhone 6 plus landscape orientation.

We will change the width of container to add a new view beside it on the right. So this will learn us how to install view for specefic Size class and how to change the constrain constant.

Now add a new Size Class by clicking on bottom center and choose (w Regular h Compact).

If you open the preview and change orientation of iPhone 6 plus device (5.5 inch) to landscape, you will find the same effects that we made in landscape is applied to it.

Screen Shot 2014-11-26 at 9.07.06 PM

But now we need to minimize the width of container and add extra view. As we made in previous steps we will open the constrain of equally width in container and edit it for this class:

Main_storyboard Screen Shot 2014-11-26 at 9.10.27 PM

Beside the Constant click on + button, choose the current constrain and add in new constant value –250.

Now if you went to the preview you will see that:

Main_storyboard 2

Now lets add a new view specially for iPhone 6 plus landscape mode. Drag a UIView and add it on the right of container with constrains ( Trailing 0, Width 250, equally height, Top space 0)

Main_storyboard_ÔÇö_Edited

Now lets check iPhone 6 plus landscape in Preview:

Main_storyboard_ÔÇö_Edited 2

Please leave comments below.

BY : Hossam Ghareeb | CATEGORY : News |CATEGORY SLUG: news | Date : 8 July, 2015 | Tags : ,