Size Classes

Size Classes Tutorial

After Apple came up with iPhone 6 and iPhone 6 plus. Apple had to discover a new tool that will help developers to easily design apps that can fit easily to all iOS devices. You can make 2 storyboards one for iPhone and another for iPad, but what about iPhone 6 plus ? This device is huge and we can put deal with it in different ways than old devices specially in landscape mode.

Xcode 6 and iOS 8 came with new awesome features. In Xcode 6, there is 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). 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.

Example of changes in layout based on screen size:

iPhone 6 plus vs iPhone 5s landscape mode

An advice:


 

When you are going to use Size classes, try to design your view controllers abstractly or in general usign 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. Checkmark “Use Size Classes“.

Enable size classes

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 use. 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.

 

Choosing Size classes

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 iPhones (Portrait and Landscape).

The final look in different screen sizes will be like this:

final_look

 

Now open the single 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)

Size classes

Now open the preview for your storyboard:

Open preview

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

 

Size classes orientations

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.

Size classes

 

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 trailing 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 :

Size classes

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

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:

preview size classes

 

Same steps will be applied for label 2.
Now the results after this step will be:

Screen Shot 2014-11-26 at 8.48.42 PM

 

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

 

  • Milan Manwar

    very impressive..!! This is the only tutorial that gave me right direction to think towards size classes. thank you very much HG..!!!!!

  • Chanchal Raj

    Thanks a lot, very precise and clear.