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:
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”.
By clicking on “wAny hAny” we see an overlay that lets us choose another size class:
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.
To include also portrait orientation, use any height together with compact width.
iPads have regular width and regular height.
Let’s design a simple view for any width and any height.
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?
In iPad everything is working fine in both portrait and landscape, but for iPhone we have to make some changes:
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.
The interface builder will also change to represent the selected size class.
In order to remove the view for the selected size class, select the Attributes Inspector. The most bottom section looks like this:
By clicking on “+” a new popup will appear that lets to select any size class and suggests a currently selected one:
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.
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).
Constraint settings have also an option to add a specific size class and install/uninstall the constraint.
By uninstalling the constraint for compact width and regular height, the constraint will be turned off for the selected size class.
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.
The same process is made for labels. The result looks as expected on iPhone portrait:
To fix heights in iPhone landscape, the same procedure should be done – select any width + compact height size class.
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.
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 6 plus:
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.