Size Classes Tutorial in iOS8 and Xcode 6

A size class is a new technology in iOS8 to allow you to customize your app for a given device class, based on its orientation and screen size. Before iOS8, the developer had to use multiple Storyboards and orientation checks in code to use different UI layout per device/orientation. In this tutorial we will take a look at adapting Size Classes in Xcode 6.

Open Xcode and create a new Single View Application. For product name, use iOS8SwiftShadowButtonTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure Universal is selected in Devices.

Go to the Storyboard, notice the View Controller is square by default. This is because by default the size class is Any width and Any height. First add a button to any corner and give them a name of "top-left,top-right, bottom-left and bottom-right". Also change the background of the ViewController to Cyan. The Storyboard should look like this.

Build and Run the project for the iPhone 5s simulator. Notice the two right buttons seems to have "fallen off" the layout. This is because The layout was designed with the Size class for Any-width and Any-height. Next, let's pin the buttons to the corners. Select the top-left button and Ctrl+ drag from the button to the left side of the View Controller and select "Leading Space to Container Margin". This will pin the Button to the left.

Next, Ctrl + drag from the Button to the top of the View Controller and select "Top Space to Top Layout Guide". This will pin the Button to the top.

Add the following constraints for the other Buttons:

  • top-right button -> Trailing Space to Container Margin, Top Space to Top Layout Guide
  • bottom-left button -> Leading Space to Container Margin, Bottom Space to Bottom Layout Guide
  • bottom-right button -> Trailing Space to Container Margin, Bottom Space to Bottom Layout Guide

Build and Run the project for the iPhone 5s simulator. Notice the buttons are now Layed out correctly in the corners of the screen.

It is also possible to Build an interface just for a specific Size class. The following table gives an overview of the available Size Classes.

Vertical Size ClassHorizontal Size Class
iPad Portrait Regular Regular
iPad Landscape Regular Regular
iPhone Portrait Regular Compact
iPhone Landscape Compact Compact

In Interface Builder Select the Compact Width and Compact Height Size Class.

This Size Class is used for all iPhones in landscape orientatation (except iPhone 6 plus). So, if we alter our User Interface it should only be visible in this Size Class. Add a Button to the top-center of the View Controller and give it a name of "top-centre". Add the following constraints to the button by Ctrl + dragging from the Button to the top.

  • Top Space to Top Layout Guide
  • Center Horizontally in Container

These constraints wil pin the button to the top and center of the View Controller. Build and Run the Project for an iPhone 5s, The top-center button is visible in landscape mode.

Change the orientation to portrait mode. The button is not visible in this layout, because this orientation is part of an other Size Class.

It is not very time-efficient to constantly building/running for a different device/orientation so it is also possible to view the results right in Xcode 6. While still in the Storyboard select the Assistant Editor. Select Preview -> Main.storyboard(Preview)

In the lower-left corner of the preview click the "+" button. Here the devices can be added to the preview.

Choose for example iPhone 4-inch and 3-5-inch. The previews are displayed side by side. The orientation can  also be changed per device. As you can see the top-center is only displayed on the iphone-landscape preview.