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

In our first Auto Layout post, we built the skeleton of a UITabBar using Auto Layout. Going further, let’s see how to add centered labels to our tabs. Since we want the labels to be horizontally centered, we need to drop down from Visual Format Language to manually build the constraints.

Centering a View

The power of Auto Layout constraints shows through when you create them manually. Each constraint can be expressed like this:

Translating this to an API call looks like so:

Concretely, we want our tab labels to be centered in their respective tabs. Translating this into the formula, we have:

Or in terms of the API, we get:

That’s a lot of boilerplate to center a view in its parent!

To learn more about Auto Layout constraints take a look at Erica Sadun’s The iOS 6 Developer’s Cookbook, which contains all of the essential recipes you need to quickly start building successful iOS apps for iPhone, iPad, and iPod touch.

A helpful category

In the Create Flexible iOS 6 Layouts Using Auto Layout article, we introduced a simple UIView category for quickly defining constraints using the Visual Format Language. In that vein, let’s define another simple UIView category, this time to create a constraint that makes an attribute on two views equal.

Using this category, creating a centering relationship between two views becomes much simpler:

This category will work for any layout attribute: width, height, center, top, bottom, and so on.

Adding the labels

Actually creating the label for each tab is easy. Now that we have our equality constraints helper on UIView, it’s very straightforward to add the constraint as well:

This gets us our horizontally centered labels, but we’re still missing the vertical constraint. In the case of tab labels, you want them vertically aligned with the bottom of the tab, which can also be done with our helper:

Voila: nicely positioned tab labels that rotate gracefully.


Intrinsic Size

An astute reader may have noticed we haven’t specified constraints for the width or height of the labels! This would result in an ambiguous (and wrong) layout for a plain UIView, but our labels lay out perfectly. Some UIViews, and UILabel included, define intrinsicContentSize. This returns a width and height that is used in constraint satisfaction, freeing you to only constrain the location of that view.

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:

The iOS 6 Developer’s Cookbook: Core Recipes for Programmers, Fourth Edition by Erica Sadun brings all of the essential recipes you need to quickly start building successful iOS apps for iPhone, iPad, and iPod touch. Sadun has thoroughly revised this book to iOS 6, the latest version of Objective-C, and the latest Xcode development tools.
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, ios6, Manual, Visual Format Language,

Comments are closed.