What is Auto Layout - How it works? - Why we need it? - Intrinsic Content Size - Content Compression Resistance - Content Hugging - UIScrollView with Auto Layout - Self-sizing UITableViewCell - Animation with Auto Layout

1. Auto Layout I
Liyao Chen @ KKBOX

2. Outlines
• What is Auto Layout
• UIScrollView
• Self-sizing UITableViewCell
• Animation

3. What is Auto Layout?

4. Frame layout ?
Auto Layout ? (why)
What is Auto Layout?

5. • Content size (localization, font size …etc)
• Adaptive app size
Auto Layout ?
What is Auto Layout?

6. Layout
What is Auto Layout?
UI (Constraints)
Auto Layout Engine Layout

7. What is Auto Layout?
iOS team 700
Frame Layout
Zonble - 500
- 200
- 100

8. What is Auto Layout?
iOS team 700
Auto Layout
Zonble - 200 200
- 100 50
- 100

9. NSLayoutConstraint
@interface NSLayoutConstraint : NSObject
@property UILayoutPriority priority; //1-1000
@property CGFloat constant;
@end

10. Demo
• Auto Layout frame layout
NSLayoutConstraint

11. Practice 1
NSLayoutConstraint

12. Practice 2
NSLayoutConstraint

13. Intrinsic Content Size
/ Layout

14. Intrinsic Content Size

15. Intrinsic Content Size

16. Intrinsic Content Size
• Content Hugging
•
• Content Compression Resistance
•

17. Intrinsic Content Size

18. Demo
• Label
Intrinsic Content Size

19. Demo
• Label
Intrinsic Content Size

20. Practice 3
Intrinsic Content Size

21. Lifecycle

22. UIScrollView

23. self-sizing cell
self.tableView.estimatedRowHeight = 78;
self.tableView.rowHeight = UITableViewAutomaticDimension;

24. Constraints with code
UILabel *label = [[UILabel alloc] init];
label.translatesAutoresizingMaskIntoConstraints = NO;
label.font = self.font;
label.numberOfLines = 0;
self.label = label;
NSLayoutConstraint *top = [NSLayoutConstraint constraintWithItem:self
attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:label
attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
NSLayoutConstraint *left = [NSLayoutConstraint constraintWithItem:self
attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:label
attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0];
NSLayoutConstraint *right = [NSLayoutConstraint constraintWithItem:self
attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:label
attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];
NSLayoutConstraint *equalWidth = [NSLayoutConstraint constraintWithItem:self
attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:label
attribute:NSLayoutAttributeWidth multiplier:1.0f constant:0];
[self addSubview:label]; // subview constraints
[self addConstraints:@[top, left, right, equalWidth]];

25. Visual Format Language
NSArray *constraintsV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-84-[redBox(==200)]-|"
options:0
metrics:nil
views:NSDictionaryOfVariableBindings(redBox)];
@“H:|-[redBox]-|"
@"V:|-84-[redBox(==200)]-|"

26. - UI Content size (localization)
- Layout code
- - code
- -
- IB Constraint

27. QnA
• Q. Interface build xml
PR ?
• A. Frame Layout UI code

28. Reference
• sample code - https://github.com/gliyao/
LCAutolayoutExample

29. Thanks for listening

30. We are hiring!
@ KKBOX