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.

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