Auto Layout

Auto Layout

These slides are from a presentation on Auto Layout that I did for CocoaHeads Belgium in Nov. 2014, together with Tom Adriaenssen. You can find Tom's slides at https://speakerdeck.com/inferis/practical-autolayout.

Cdaee8530af3550f5f3172805754be65?s=128

Steven Vandeweghe

November 27, 2014
Tweet

Transcript

  1. Auto Layout CocoaHeads Belgium Nov 2014

  2. Steven Vandeweghe @bluecrowbar

  3. Topics • The basics • Animation • Auto Layout in

    UIScrollView • Auto Layout in UITableViewCell • Examples
  4. The Basics

  5. Constraints • Describe relations between views using • Code •

    Visual Format Language • Interface Builder
  6. The Basics: Code • Create an NSLayoutConstraint • Add it

    to the superview
  7. NSLayoutConstraint + (instancetype)constraintWithItem:(id)view1
 attribute:(NSLayoutAttribute)attr1
 relatedBy:(NSLayoutRelation)relation
 toItem:(id)view2
 attribute:(NSLayoutAttribute)attr2
 multiplier:(CGFloat)multiplier
 constant:(CGFloat)c -

    (void)addConstraint:(NSLayoutConstraint *)constraint Attributes: left, right, top, bottom, leading, trailing, width, height, centerX, centerY, baseline Relations: Equal, LessThanOrEqual, GreaterThanOrEqual
  8. Visual Format Language @“|-5-[view1(100)]-10-[view2(>=200)]-5-|” Example

  9. Visual Format Language NSDictionary *views = NSDictionaryOfVariableBindings(view1, view2); NSArray *constraints

    = [NSLayoutConstraint constraintsWithVisualFormat: @"H:|-5-[view1(100)]-10-[view2(>=200)]-5-|" options:0 metrics:0 views:views]; [self.view addConstraints:constraints];
  10. Visual Format Language |[view] |-[view] |-50-[view] |-50@750-[view] |-metric-[view] H:|[view] V:|[view]

    [view(100.0)] [view(>=100.0)] [view(metric)] [view(view2)]
  11. Interface Builder

  12. Interface Builder

  13. Interface Builder

  14. Interface Builder

  15. Extra Features • Priority • Content Hugging Priority • Content

    Compression Resistance Priority
  16. Priority (conflict) Conflicting layout Conflicting layout H:200 V:150 AR:1:1 H:200

    H:100
  17. Priority (ambiguity) Ambiguous layout |-20@1000-[view1(60@500)]-20@1000-[view2(60@500)]-20@1000-|

  18. Content Hugging horizontal spacing = 20@1000 horizontal content hugging priority

    = 251 horizontal spacing = 20@500 horizontal content hugging priority = 251 horizontal spacing = 20@200 horizontal content hugging priority = 251
  19. Compression Resistance horizontal spacing = 20@1000 horizontal content hugging priority

    = 251 horizontal compression resistance = 750 left label compression resistance = 1000
  20. Animation

  21. Animation • Constraint changes can be animated • store constraint

    in ivar • set IBOutlet
  22. Animation [self.view layoutIfNeeded]; [UIView animateWithDuration:1.0 animations:^{ self.constraint.constant = 250.0; [self.view

    layoutIfNeeded]; }];
  23. UIScrollView

  24. UIScrollView Step 1: Pin to superview

  25. UIScrollView Step 2: Set contentSize

  26. UIScrollView Step 2: add enough constraints to let the scrollView

    figure out its contentSize
  27. UITableViewCell

  28. UITableViewCell Use constraints like in any other view.

  29. iOS 7 heightForRowAtIndexPath: dummyCell.titleLabel.text = @“text goes here”; [dummyCell.contentView setNeedsLayout];

    [dummyCell.contentView layoutIfNeeded]; height = [self.dummyCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height; return ceil(height) + 1;
  30. iOS 7 MyCustomCell - (void)layoutSubviews { [super layoutSubviews]; [self.contentView layoutIfNeeded];

    self.titleLabel.preferredMaxLayoutWidth = self.titleLabel.frame.size.width; }
  31. iOS 8 heightForRowAtIndexPath: return UITableViewAutomaticDimension; If auto layout is detected:

    will call systemLayoutSizeFittingSize: If no auto layout is detected: will sizeThatFits: estimatedRowHeight needs to be known