example2-portrait

Posted on by & filed under Content - Highlights and Reviews, Mobile Development.

Anybody who has built flexible layouts on iOS knows that it can be a hassle. Although it performs better than flexible systems like HTML and CSS, UIKit’s layout methods have traditionally been primitive. This was passable in the era of the iPhone, but with the introduction of the iPad and the iPhone 5, and considering rotation, your app may now support up to six screen sizes. On top of that, localization further burdens any layout you may define. Thankfully, iOS 6 introduces Auto Layout: a system for creating highly flexible layouts with less code.

A World of Constraints

Layout engines are driven by constraints. You describe what rules you want a view to follow; for example that its bottom edge stay locked to the bottom of its superview. The layout engine will then determine a layout that satisfies these constraints. Abstractly, we have constraints like this:

If you build your views in Interface Builder, you can specify many of these constraints there. If you have a highly flexible layout, however, you’ll likely need to drop into code. To facilitate this, Auto Layout provides a method for specifying layout constraints using, effectively, ASCII art. This is called Visual Format Language.

To illustrate how to build Auto Layouts this way, we’ll reconstruct the basic layout of an iOS tab bar with a variable number of tabs.

Visual Format strings

Each string of Visual Format Language defines one or more constraints in a particular direction: horizontally (the default) or vertically. In terms of horizontal layout, a tab bar simply fills the width of the screen. The format string for this looks like so:

The square brackets delineate a named view, “tabBar” in this case. The pipe character on either side means that the edge of the view will pin to the edge of its superview – in our case, the window. Looking at the format string left to right gives a good sense of what the layout is supposed to describe.

On iOS, a UITabBar is 49 pixels tall, and anchors to the bottom of the screen. The format specifier for this looks like so:

The “V:” identifies this as vertical ASCII art, top to bottom. To visualize this, you might tilt your head 90 degrees to the left. Again we see the square brackets identifying our view, but in the vertical dimension we have an explicit size for the view: 49 pixels. Finally, we have a pipe character only at the end, which says the view will be anchored to the bottom of the screen.

A quick helper

To apply a format string to a view, the code looks like this:

To cut down on boilerplate, we’re going to add in a simple category on UIView that adds this method:

After adding that, we can add constraints quite succinctly:

Lowering the bar

Putting that all together, the code for laying the tab bar down and sizing it properly is quite simple.

Although this could have been specified with old-school Autoresizing masks, the Auto Layout example is at least as elegant. Notice that nowhere here do we need to set the frame of a view! Everything is implied by the constraints. Even better, everything rotates nicely.

 

Installing tabs

Now that we’ve seen something that Autoresizing masks could have handled, let’s crank up the difficulty. We want to add a configurable number of tabs to the bar, with a space between each tab, and have them all of equal width.

For the leftmost tab, the format string is very simple. We want to pin it to the left edge of its parent, the tab bar.

For all the other tabs, we want to define them as being spaced out from their neighbour, but also the same width as their neighbour.

The “-” symbol describes the UIKit standard amount of spacing, or 10 points. This is almost enough to fully describe our tab bar, except that the layout is ambiguous. The system knows we want all the tabs to be the same width, but we haven’t given it enough information to determine how wide that should be.

Intuitively, we want them to be wide enough that they fill the full width of the bar. The first tab should be pinned to the left edge, and the last tab should be pinned to the right. As such, the last tab’s constraints specifier gets a pipe on the end:

This is enough to faithfully lay out our tabs in the widths we want. With all the focus on horizontal layout, we need to also remember vertical constraints. In this case it’s very simple: we want the tabs to be as tall as the tab bar.

Putting it together

All we need to do now is create these views, add them to the appropriate superviews, and add the right constraint for each. Together with the tab bar creation, the final viewDidLoad method looks like this:

When we load up our app, we see the classic tab bar layout, anchored to the bottom. Even better, when we rotate the view, we get a smooth animation and properly stretched tab views. And still: we haven’t called setFrame once!

 

Conclusion

Auto Layout can require more thought than the old autoresizing, but it results in a much more expressive way to define layouts. Most developers are months away from being able to require iOS 6, but once you do, you should dig in to Auto Layout and ditch that fragile setFrame code once and for all.

Safari Books Online has the content you need

Below are some iOS books to help you develop apps for Apple’s popular platform, or you can check out all of the iOS books and training videos available from Safari Books Online. You can browse the content in preview mode or you can gain access to more information with a free trial or subscription to Safari Books Online.

Check out these iOS books available from Safari Books Online:

iOS 5 Essentials will help you learn how to build simple, yet powerful iOS 5 applications incorporating iCloud Storage, Twitter, Core Image and Newsstand integration.
Building iOS 5 Games: Develop and Design offers real world iOS 5 examples and actual games the reader can code and play and is aimed at people who understand programming concepts but are new to iOS game development.
iOS 5 Programming Cookbook contains more than 100 new iOS 5 recipes covering iCloud, Automatic Reference Counting, storyboarding, graphics, animations, Grand Central Dispatch, threads, timers, audio and video and many other iOS 5 tools and techniques.
Assuming only a minimal working knowledge of Objective-C, and written in a friendly, easy-to-follow style, Beginning iOS 5 Development offers a complete soup-to-nuts course in iPhone, iPad, and iPod touch programming.

Start your FREE 10-day trial to Safari Books Online

About the Author

Allen Pike is a co-founder of Steamclock Software, where he and his team build wonderful apps for iOS and the web. Besides building software, he designs, teaches, and writes.

Tags: Auto Layout, Interface Builder, iOS 6, layout engines, Tabs, Visual Format Language,

Comments are closed.