Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Philly CocoaHeads

March 14, 2015
Tweet

More Decks by Philly CocoaHeads

Other Decks in Technology

Transcript

  1. 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
  2. WHAT MAKES A VALID STATE? X and Y for point

    of origin width and height
  3. 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
  4. PROTIP Very rarely do you want to “Add missing constraints”

    Don’t let the system do magic for you, know thy constraints.
  5. 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
  6. UILayoutPriorityRequired = 1000, // Required UILayoutPriorityDefaultHigh = 750, // Compression

    resistance UILayoutPriorityDefaultLow = 250, // Compression hugging UILayoutPriorityFittingSizeLevel = 50, // System layout fitting size SOME DEFAULTS
  7. Hugging: higher = don’t want to grow. Compression: higher =

    fights clipping/shrinking. JUST REMEMBER
  8. JUST REMEMBER Only affects items with an intrinsic content size.

    Won’t affect items with constraints for width and height.
  9. self.myConstraint.constant = 15.0; [containerView setNeedsUpdateConstraints]; //key step 1 [UIView animateWithDuration:0.25f

    animations:^{ [containerView layoutIfNeeded]; //key step 2 }]; ANIMATING CONSTRAINTS
  10. PROTIP Animating and want to affect entire screen? IBOutlet Animating

    and don’t want to affect anything else? Core Animation Transforms
  11. 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