Adaptive Layout – Part 2: Working with Interface Builder

The principals and goals of the adaptive layout in mobile design and the responsive layout in Web design are very similar. Their main purpose is to create user interfaces that readjust automatically to the screen size so the content is presented in the optimal conditions for the user.

The tools and techniques for creating adaptive user interfaces have been progressively improved since iOS6 and the introduction of Auto Layout. Xcode 6, specifically its Interface Builder feature, and the UIKit classes presented in the previous blog post are quite powerful in terms of building adaptive interfaces. Even though many developers still prefer, for different reasons, to create view layouts in code, I think it’s worth the effort to understand how the tools available in Interface Builder can be used to design adaptive user interfaces. If I want to create layout that isn’t excessively complex or if I build a prototype, I find that using the storyboards and Interface Builder is more efficient and faster than writing the code that generates the same layout.

Universal storyboards

In Xcode 5 and earlier it was necessary to create a storyboard for each screen size family: a storyboard for the iPhone/iPod Touch screens and another storyboard for the iPad. With the introduction of the iPhone 6 and the iPhone 6+, creating and maintaining an increasingly number of storyboards would have become quite painful.

Fortunately, Xcode 6 introduced the universal storyboards: the same storyboard can be used to define the layout for all devices and screen sizes. The layout adjustments specific to each size and orientation are made in this unique storyboard.

Each scene in the storyboard, generally corresponding to the canvas of a view controller, starts with a default size of Any width and Any height. There is no real size class for the Any dimension; the goal is to initially define the layout for a generic trait collection and then make the adjustments for each specific screen size and orientation supported by the application. The default layout is applied to the trait collections that don’t modify or replace the default constraints.

To make adjustments for a specific trait collection, change the size classes combination from the scene editor toolbar. When a specific trait collection is selected, the toolbar color becomes blue:

change trait collection in scene editor

When the storyboard contains multiple scenes and it becomes hard to visualize how they are organized, the zoom feature comes in handy: right click on the storyboard and select the zoom level.

Another very useful feature of the new storyboard editor is the Preview screen where the layout changes made in the scene editor are displayed in real time for the selected screen sizes. To open the preview screen, first display select the storyboard in the project file tree, then show the Assistant Editor from the Xcode View menu, and in the Assistant Editor, display the Preview from the top bar menu, as shown in the next screenshot:

display the storyboard screen preview

Finally, select the standard screen sizes that you want to visualize by clicking on the + button at the bottom left of the Preview screen. Also notice that the orientation can be changed for any screen in the preview pane by clicking on its bottom bar.

Layout creation

If the layout is not too complex (there is a relatively small number of views to place on the screen and their position and size don’t require complex calculations that can only be done in code), it can be easily created in Interface Builder using Auto Layout constraints.

I always start by placing the subviews on the generic size screen (Any x Any) and then I add the Auto Layout constraints. There are several ways to create constraints in Interface Builder:

  • Ctrl + drag from a view to its superview, to itself or to a sibling view directly in the scene editor
  • Ctrl + drag as explained above, but in the Document outline
  • Select one or multiple subviews and use the Pin and Align menus from the scene editor bottom bar to create constraints, as shown in the next screenshot.

The constraints are accessible either from the Document outline (for all the views contained by the scene), or from the Size inspector (only the constraints installed on the selected view):

create and view Auto Layout constraints

Because I drag and drop the subviews inside the scene, they are not sized and placed precisely as I want them to be. To finish the constraint creation task, I manually adjust the constant value and the relative landmarks (margins or layout guides) in the Size inspector after selecting a specific constraint:

update Auto Layout constraints

Installed and uninstalled constraints

Each layout has its own set of constraints and, depending on the screen size and its current orientation, only the constraints defined for that specific combination of width and height size classes are applied at runtime.

The following example show how to define in Interface Builder the constraints for two different combinations of size classes. In the general case (Any x Any size class combination) the photo is anchored to the top of the screen and its caption is displayed below, while in the specific case of the Regular width size class (iPad and iPhone 6+ in landscape orientation), the caption is displayed at the right of the photo.

Start by creating the constraints for the generic vertical layout in the Any x Any size class combination. The photo (UIImageView) is pined to the top layout guide and the caption (UILabel) is placed 20 points below. Both elements are horizontally centered on the screen.

constraints for the generic layout

Change the size class combination in the storyboard editor to Regular x Any, then select in the Document outline the horizontally centered constraints and vertical spacing constraint between the caption and the photo. In the Size inspector, click on the + button to specify the behavior of the selected constraints for the Regular x Any size class combination, then uncheck the Installed box. Notice how the constraints are disabled in the Document outline:

unistalled constraints

The layout for this specific size class combination is now invalid, because there aren’t enough constraints to determine the frames of the views from the scene.
Create the next constraints to fully define the layout, then set their constant values to 0 and use the Resolve Auto Layout issues tool to update the ambiguous frames for all the views:

  • pin the photo to the left margin
  • pin the caption to the right margin
  • vertically centre the photo and the caption

Notice the new constraints are only installed for the current size class configuration:

constraints for the new size class combination

Finally, in the Preview screen, select the 4” and the iPad screens to visualize the vertical and horizontal layouts.

At runtime, both installed and uninstalled constraints are created by the Auto Layout engine, but the uninstalled constraints are disabled (inactive) until the size class configuration they are specified for is available. When the size classes change, Auto Layout switches from one set of constraints to another.

Placeholder constraints

Placeholder constraints are temporarily used by Interface Builder to figure out the frames of the views that are laid out on the storyboard. They are created in development mode to replace the constraints that can only be determined at runtime; their main purpose is to avoid the Auto Layout issues that can appear during the development because some constraints are missing, and to prevent the Auto Layout system from automatically generating constraints at runtime to fix these issues.

In the previous example, the UIImageView was assigned an image directly in Interface Builder. Because the image has a fixed size, Auto Layout is able to fully determine the frame of the UIImageView based on its content size and doesn’t show any issue. But if the image is removed from the UIImageView, Auto Layout issues appear in Interface Builder:

constraints for the new size class combination

To prevent these issues, width and height placeholder constraints can be created on the UIImageView:

constraints for the new size class combination

The placeholder constraints are removed at runtime, so they have to be replaced by other constraints (dynamically created by code or inferred from the views content, like the intrinsic size).

Conclusion

This article is an overview of the Interface Builder features related to the adaptive user interface design. It builds upon the knowledge from the first article in the series by showing the tools and explaining several obscure aspects like the uninstalled and placeholder Auto Layout constraints.

 

Catalin Rosioru

 

One thought on “Adaptive Layout – Part 2: Working with Interface Builder

Comments are closed.