Auto Layout Bootcamp

Auto Layout on iOS isn't new, but until just recently you could still get away with not using it. With the introduction of the iPhone 6 and 6+ we're past the age of springs and struts being enough.

By embracing Auto Layout you can design interfaces that are much less prone to breaking when new devices sizes come out, while also avoiding the all-to-common math errors with frame-based layout.

Transcript

1. AUTO LAYOUT BOOTCAMP CocoaShops Curtis Herbert Amit Rao Kotaro Fujita @parrots @amitmrao @wild37
2. IN THE BEGINNING Frames, Springs & Struts
3. 0,0 320,480 70, 150 200 250 320, 0 0, 480
7. [view1 setFrame:CGRectMake(0, 150, 100, 100)]; [view2 setFrame:CGRectMake(0, 160, 100, 100)];
8. [view1 setFrame:CGRectMake(0, 150, 100, 100)]; [view2 setFrame:CGRectMake(0, CGRectGetMaxY(view1.frame) + 10, 100, 100)];
10. 2011 2012
11. 2013 ( ) Xcode 5
12. 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
13. WHY AUTO LAYOUT? Declarative Relational Expressive
14. WHAT MAKES A VALID STATE? X and Y for point of origin width and height
15. USING AUTO LAYOUT IN INTERFACE BUILDER
16. CREATING CONSTRAINTS Demo / Follow along
17. CREATING CONSTRAINTS Control-drag from view-to-view • within the scene • on the left
18. CREATING CONSTRAINTS Editor menu w/ view selected
19. CREATING CONSTRAINTS Bottom right tools
20. EDITING CONSTRAINTS IN IB Demo / Follow along
21. EDITING CONSTRAINTS Edit on the view
22. EDITING CONSTRAINTS In the hierarchy
23. WHEN IB HATES YOU Demo / Follow along
24. FIXING AUTO LAYOUT COMPLAINTS
25. FIXING AUTO LAYOUT COMPLAINTS Bottom right tools
26. 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) ( "<NSLayoutConstraint:0x7faeb358e200 H:|-(0)-[UIImageView:0x7faeb35834b0] (Names: '|':UIView:0x7faeb35832c0 )>", "<NSLayoutConstraint:0x7faeb358e390 UILabel:0x7faeb358a1e0'Welcome to'.leading == UIView:0x7faeb35832c0.leadingMargin + 46>", "<NSLayoutConstraint:0x7faeb358e4d0 UIImageView:0x7faeb3585ab0.leading == UILabel:0x7faeb358a1e0'Welcome to'.leading + 28>", "<NSLayoutConstraint:0x7faeb358e520 UIImageView:0x7faeb3585ab0.leading == UIImageView:0x7faeb35834b0.leading + 90>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x7faeb358e390 UILabel:0x7faeb358a1e0'Welcome to'.leading == UIView:0x7faeb35832c0.leadingMargin + 46> BE AWARE: RUNTIME CONSOLE ERRORS
27. PROTIP Very rarely do you want to “Add missing constraints” Don’t let the system do magic for you, know thy constraints.
28. PROTIP Watch out for those decimal constants.
29. PROTIP Use “Update Frames” on all views only when all views have constraints.
30. DIGGING IN DEEPER
31. CONSTRAINT TYPES Demo / Follow along
32. CONSTRAINT PROPERTIES Demo / Follow along
33. PUZZLE BREAK
36. INTRINSIC CONTENT SIZE Demo / Follow along
37. - (CGSize)intrinsicContentSize { ... } IN-CODE
38. TEMPORARY SIZING
39. TEMPORARY SIZING
40. LETS GET DANGEROUS
41. SCROLLVIEWS () Demo / Follow along
42. 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
43. CONSTRAINT PRIORITIES Demo / Follow along
44. UILayoutPriorityRequired = 1000, // Required UILayoutPriorityDefaultHigh = 750, // Compression resistance UILayoutPriorityDefaultLow = 250, // Compression hugging UILayoutPriorityFittingSizeLevel = 50, // System layout fitting size SOME DEFAULTS
45. COMPRESSION / HUGGING Demo / Follow along
46. Hugging: higher = don’t want to grow. Compression: higher = fights clipping/shrinking. JUST REMEMBER
47. JUST REMEMBER Only affects items with an intrinsic content size. Won’t affect items with constraints for width and height.
48. ANIMATING CONSTRAINTS Demo / Follow along
49. self.myConstraint.constant = 15.0; [containerView setNeedsUpdateConstraints]; //key step 1 [UIView animateWithDuration:0.25f animations:^{ [containerView layoutIfNeeded]; //key step 2 }]; ANIMATING CONSTRAINTS
50. PROTIP Animating and want to affect entire screen? IBOutlet Animating and don’t want to affect anything else? Core Animation Transforms
51. CONSTRAINTS IN CODE Demo / Follow along
52. [NSLayoutConstraint constraintWithItem:viewA attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:viewB attribute:NSLayoutAttributeWidth multiplier:0.0 constant:0.0]; CONSTRAINTWITHITEM
53. 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
54. 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
55. USE A COCOA POD! [view1 mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(superview).with.insets(padding); }]; https://github.com/Masonry/Masonry
56. USE A COCOA POD! view1.snp_makeConstraints { make in make.edges.equalTo(superview).with.insets(padding) } https://github.com/Masonry/Snap
57. OVERRIDING AUTOLAYOUT Demo / Follow along
58. JUST REMEMBER layoutSubviews: UIView subclass viewDidLayoutSubviews: UIViewController subclass
59. PROTIP This technique should be used sparingly
61. TAKEAWAYS Define intent, don’t flail
62. TAKEAWAYS Less constraints the better
63. RESOURCES http://revealapp.com