Auto Layout Bootcamp

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.

9b54e5324785eb939bcc8f15c724baf9?s=128

Curtis Herbert

March 14, 2015
Tweet

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

  4. None
  5. None
  6. None
  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)];
  9. None
  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

  34. None
  35. None
  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

  60. None
  61. TAKEAWAYS Define intent, don’t flail

  62. TAKEAWAYS Less constraints the better

  63. RESOURCES http://revealapp.com