Tip: Manually Adding iOS 6 Auto Layout Constraints
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:
view1.attribute = view2.attribute * multiplier + constant
Translating this to an API call looks like so:
[NSLayoutConstraint constraintWithItem:(UIView*)
attribute:(NSLayoutAttribute)
relatedBy:(NSLayoutRelation)
toItem:(UIView*)
attribute:(NSLayoutAttribute)
multiplier:(CGFloat)
constant:(CGFloat)]
Concretely, we want our tab labels to be centered in their respective tabs. Translating this into the formula, we have:
label.centerX = tab.centerX * 1.0 + 0
Or in terms of the API, we get:
[NSLayoutConstraint constraintWithItem:label
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:tab
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0]
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.
- (void)addEqualityConstraintOn:(NSLayoutAttribute)attribute forSubview:(UIView*)subview {
[self addCons0traint:[NSLayoutConstraint constraintWithItem:subview
attribute:attribute
relatedBy:NSLayoutRelationEqual
toItem:self
attribute:attribute
multiplier:1.0
constant:0.0]];
}
Using this category, creating a centering relationship between two views becomes much simpler:
[tab addEqualityConstraintOn:NSLayoutAttributeCenterX forSubview:label];
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:
UILabel* label = [UILabel new];
label.text = [tabNames objectAtIndex:i];
label.font = [UIFont boldSystemFontOfSize:10];
label.backgroundColor = [UIColor clearColor];
label.translatesAutoresizingMaskIntoConstraints = NO;
[tab addSubview:label];
[tab addEqualityConstraintOn:NSLayoutAttributeCenterX forSubview:label];
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:
[tab addEqualityConstraintOn:NSLayoutAttributeBottom forSubview:label];
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:
 |
Using iOS 6 for Programmers. Second Edition, developers learn by creating 15 complete, fully tested iPhone/iPad/iPod Touch Apps, and in the process study 8,000+ lines of program code, including code that reveals the power of Apple’s newest iOS 6 SDK. By the time you have finished this book, you’ll have hands-on experience with virtually every type of iOS app, from games to media, productivity to web services, social networking to route tracking. |
 |
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. |
Comments are closed.