Using size classes in Xcode 6

In the beginning, building iOS UI was fairly easy in comparison to Android. However, designing for Apple mobile devices is getting more complicated every year because of new devices. iPhone 6 and 6 Plus increases the number of devices that have to be supported, thus there has to be a tool to simplify the UI building process. Size classes in Xcode 6 is such a tool. Let’s have a quick overview of its usage!

To enable size classes in the interface builder, mark “Use size classes” under the File inspector:

size_classes_tut

 

Now let’s take a look at our storyboard – it’s different. It has a bit strange size and we see a new button below the view – “wAny hAny”.

Screen Shot 2014-09-17 at 10.58.06

By clicking on “wAny hAny” we see an overlay that lets us choose another size class:

Screen Shot 2014-09-17 at 11.04.11

A size class is a convenient new technology that forces developers to stop thinking in terms of specific devices (e.g iPhone 4, iPhone 5, iPad) and instead use a more generalised approach. Designing for size classes saves development time and makes supporting future devices with potentially new sizes easier. 

Each ViewController has its own UITraitCollection object that defines two size classes (horizontalSizeClass and verticalSizeClass). Possible values for each size class include UIUserInterfaceSizeClassUnspecified (any size), UIUserInterfaceSizeClassCompact and UIUserInterfaceSizeClassRegular. Based on the device size and orientation, the appropriate interface will be chosen. 

The grid in the size classes popup lets us easily change a size class that we want to design for. In addition, the Xcode helps us by telling, what devices or orientations are indicated by what size class. For example, compact width + compact height will be used for 3.5, 4 and 4.7 inch iPhones in landscape orientation. iPhone 6 Plus is not included, because it has a regular width, not compact.

Screen Shot 2014-09-17 at 11.18.07

To include also portrait orientation, use any height together with compact width.

Screen Shot 2014-09-17 at 11.18.21

iPads have regular width and regular height.

Screen Shot 2014-09-17 at 11.18.32

Let’s design a simple view for any width and any height.

Screen Shot 2014-09-17 at 11.37.05

It will have two views and two labels. The blue view represents a side menu that should be static in iPads and landscape iPhone, but disappear in portrait iPhone. There is also a red view on the right side with two colourful labels that should be visible in both iPad and iPhone and fit into the screen. The corresponding autolayout constraints are added to make the blue view appear on the left side, be the same height as the superview and 209 px wide. For the red view and colourful labels there are constraints that define their position next to the blue view and until the end of the superview. Their height is also fixed. So, what is the result?

iOS Simulator Screen Shot 17 Sep 2014 11.35.33

In iPad everything is working fine in both portrait and landscape, but for iPhone we have to make some changes:

iOS Simulator Screen Shot 17 Sep 2014 11.36.15

iOS Simulator Screen Shot 17 Sep 2014 11.36.17

The blue view should be hidden in iPhone portrait, also not all content views are visible in iPhone landscape.

To begin with, let’s fix iPhone in portrait, so compact width and regular height should be chosen to also include iPhone 6 Plus. 

Screen Shot 2014-09-17 at 11.50.35

The interface builder will also change to represent the selected size class. 

Screen Shot 2014-09-17 at 11.50.45

In order to remove the view for the selected size class, select the Attributes Inspector. The most bottom section looks like this:

Screen Shot 2014-09-17 at 11.56.01

By clicking on “+” a new popup will appear that lets to select any size class and suggests a currently selected one:

Screen Shot 2014-09-17 at 11.56.55

By selecting the current size class (compact width and regular height) we can change settings for different size classes. For example, by unchecking the “Installed” checkmark for compact width and regular height (wC hR), the view will disappear from the iPhone portrait layout.

Screen Shot 2014-09-17 at 11.57.02

However, layout constraints are now broken, because they relied on the blue view. Therefore, we need to modify the layout constraints, but only for the current size class. Select the breaking constraint (leading space to the blue view).

Screen Shot 2014-09-17 at 12.07.02

Constraint settings have also an option to add a specific size class and install/uninstall the constraint.

Screen Shot 2014-09-17 at 12.07.36

By uninstalling the constraint for compact width and regular height, the constraint will be turned off for the selected size class.

Screen Shot 2014-09-17 at 12.08.00

In order to finish fixing the layout, an additional constraint that defines space to the superview is needed. The new constraint will be automatically installed only for the selected size constraint.

Screen Shot 2014-09-17 at 12.09.32

The same process is made for labels. The result looks as expected on iPhone portrait:

iOS Simulator Screen Shot 17 Sep 2014 12.22.02

To fix heights in iPhone landscape, the same procedure should be done – select any width + compact height size class.

Screen Shot 2014-09-17 at 12.24.50

Select the height constraint for the red view and click “+” near the constant value. It will allow to add another constant for the selected size class. 

Screen Shot 2014-09-17 at 12.29.58

Thus, it’s not needed to remove the height constraint and create a new one, because only the constant value has to be changed.

It seems that all fixes are now done and the layout looks as expected on all devices.

iPhone 5:

iOS Simulator Screen Shot 17 Sep 2014 12.34.17

iPhone landscape:

iOS Simulator Screen Shot 17 Sep 2014 12.36.05

iPhone 6 plus:

iOS Simulator Screen Shot 17 Sep 2014 12.36.23

iPad:

iOS Simulator Screen Shot 17 Sep 2014 12.37.06

By using size classes different complex layouts can be defined. There will be no more questions like how to create totally different layouts for landscape and portrait. Moreover, iPhone and iPad layouts don’t have to be separated any more. Size classes are similar to layout folders in Android (according to width, e.g layout-sw600dp, or with -land suffix), but much more intuitive and easy to use. Apple has again shown that they care about developers and their time.

4 Comments
  1. Marco Almeida
  2. Sebastian
  3. prajwal
  4. Abhinav sharma

Leave a Reply

Your email address will not be published. Required fields are marked *


*