AUTO LAYOUT BOOTCAMP CocoaShops Curtis Herbert Amit Rao Kotaro Fujita @parrots @amitmrao @wild37 

IN THE BEGINNING Frames, Springs & Struts 

0,0 320,480 70, 150 200 250 320, 0 0, 480 

No content

No content

No content

[view1 setFrame:CGRectMake(0, 150, 100, 100)]; [view2 setFrame:CGRectMake(0, 160, 100, 100)]; 

[view1 setFrame:CGRectMake(0, 150, 100, 100)]; [view2 setFrame:CGRectMake(0, CGRectGetMaxY(view1.frame) + 10, 100, 100)]; 

No content

2011 2012 

2013 ( ) Xcode 5 

WHAT IS AUTO LAYOUT? • Series of rules, or constraints, you set up • Based on the rules system lays out interface, responds to changes • Rules must yield a valid state, can’t be ambiguous 

WHY AUTO LAYOUT? Declarative Relational Expressive 

WHAT MAKES A VALID STATE? X and Y for point of origin width and height 

USING AUTO LAYOUT IN INTERFACE BUILDER 

CREATING CONSTRAINTS Demo / Follow along 

CREATING CONSTRAINTS Control-drag from view-to-view • within the scene • on the left 

CREATING CONSTRAINTS Editor menu w/ view selected 

CREATING CONSTRAINTS Bottom right tools 

EDITING CONSTRAINTS IN IB Demo / Follow along 

EDITING CONSTRAINTS Edit on the view 

EDITING CONSTRAINTS In the hierarchy 

WHEN IB HATES YOU Demo / Follow along 

FIXING AUTO LAYOUT COMPLAINTS 

FIXING AUTO LAYOUT COMPLAINTS Bottom right tools 

Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) ( "", "", "", "" ) Will attempt to recover by breaking constraint BE AWARE: RUNTIME CONSOLE ERRORS 

PROTIP Very rarely do you want to “Add missing constraints” Don’t let the system do magic for you, know thy constraints. 

PROTIP Watch out for those decimal constants. 

PROTIP Use “Update Frames” on all views only when all views have constraints. 

DIGGING IN DEEPER 

CONSTRAINT TYPES Demo / Follow along 

CONSTRAINT PROPERTIES Demo / Follow along 

PUZZLE BREAK 

No content

No content

INTRINSIC CONTENT SIZE Demo / Follow along 

- (CGSize)intrinsicContentSize { ... } IN-CODE 

TEMPORARY SIZING 

TEMPORARY SIZING 

LETS GET DANGEROUS 

SCROLLVIEWS () Demo / Follow along 

JUST REMEMBER Need to be able to connect the dots, so to speak, to get a defined content block from top-to-bottom and left-to-right 

CONSTRAINT PRIORITIES Demo / Follow along 

UILayoutPriorityRequired = 1000, // Required UILayoutPriorityDefaultHigh = 750, // Compression resistance UILayoutPriorityDefaultLow = 250, // Compression hugging UILayoutPriorityFittingSizeLevel = 50, // System layout fitting size SOME DEFAULTS 

COMPRESSION / HUGGING Demo / Follow along 

Hugging: higher = don’t want to grow. Compression: higher = fights clipping/shrinking. JUST REMEMBER 

JUST REMEMBER Only affects items with an intrinsic content size. Won’t affect items with constraints for width and height. 

ANIMATING CONSTRAINTS Demo / Follow along 

self.myConstraint.constant = 15.0; [containerView setNeedsUpdateConstraints]; //key step 1 [UIView animateWithDuration:0.25f animations:^{ [containerView layoutIfNeeded]; //key step 2 }]; ANIMATING CONSTRAINTS 

PROTIP Animating and want to affect entire screen? IBOutlet Animating and don’t want to affect anything else? Core Animation Transforms 

CONSTRAINTS IN CODE Demo / Follow along 

[NSLayoutConstraint constraintWithItem:viewA attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:viewB attribute:NSLayoutAttributeWidth multiplier:0.0 constant:0.0]; CONSTRAINTWITHITEM 

UIView *superview = self; UIView *view1 = [[UIView alloc] init]; view1.translatesAutoresizingMaskIntoConstraints = NO; view1.backgroundColor = [UIColor greenColor]; [superview addSubview:view1]; UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10); [superview addConstraints:@[ //view1 constraints [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:padding.top], [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeLeft multiplier:1.0 constant:padding.left], [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-padding.bottom], [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeRight multiplier:1 constant:-padding.right], ]]; MESSY FAST 

NSDictionary *views = NSDictionaryOfVariableBindings(one, two, three); [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@“H:|-[one(two)]-[two(three)]- [three]-|" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:nil views:views]]; VISUAL FORMAT LANGUAGE 

USE A COCOA POD! [view1 mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(superview).with.insets(padding); }]; https://github.com/Masonry/Masonry 

USE A COCOA POD! view1.snp_makeConstraints { make in make.edges.equalTo(superview).with.insets(padding) } https://github.com/Masonry/Snap 

OVERRIDING AUTOLAYOUT Demo / Follow along 

JUST REMEMBER layoutSubviews: UIView subclass viewDidLayoutSubviews: UIViewController subclass 

PROTIP This technique should be used sparingly 

No content

TAKEAWAYS Define intent, don’t flail 

TAKEAWAYS Less constraints the better 

RESOURCES http://revealapp.com