Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Auto Layout part 1

1,872 views

Published on

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

Published in: Software
  • Be the first to comment

Auto Layout part 1

  1. 1. Auto Layout I Liyao Chen @ KKBOX
  2. 2. Outlines • What is Auto Layout • UIScrollView • Self-sizing UITableViewCell • Animation
  3. 3. What is Auto Layout?
  4. 4. Frame layout ? Auto Layout ? (why) What is Auto Layout?
  5. 5. • Content size (localization, font size …etc) • Adaptive app size Auto Layout ? What is Auto Layout?
  6. 6. Layout What is Auto Layout? UI (Constraints) Auto Layout Engine Layout
  7. 7. What is Auto Layout? iOS team 700 Frame Layout Zonble - 500 - 200 - 100
  8. 8. What is Auto Layout? iOS team 700 Auto Layout Zonble - 200 200 - 100 50 - 100
  9. 9. NSLayoutConstraint @interface NSLayoutConstraint : NSObject @property UILayoutPriority priority; //1-1000 @property CGFloat constant; @end
  10. 10. Demo • Auto Layout frame layout NSLayoutConstraint
  11. 11. Practice 1 NSLayoutConstraint
  12. 12. Practice 2 NSLayoutConstraint
  13. 13. Intrinsic Content Size / Layout
  14. 14. Intrinsic Content Size
  15. 15. Intrinsic Content Size
  16. 16. Intrinsic Content Size • Content Hugging • • Content Compression Resistance •
  17. 17. Intrinsic Content Size
  18. 18. Demo • Label Intrinsic Content Size
  19. 19. Demo • Label Intrinsic Content Size
  20. 20. Practice 3 Intrinsic Content Size
  21. 21. Lifecycle
  22. 22. UIScrollView
  23. 23. self-sizing cell self.tableView.estimatedRowHeight = 78; self.tableView.rowHeight = UITableViewAutomaticDimension;
  24. 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. 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. 26. - UI Content size (localization) - Layout code - - code - - - IB Constraint
  27. 27. QnA • Q. Interface build xml PR ? • A. Frame Layout UI code
  28. 28. Reference • sample code - https://github.com/gliyao/ LCAutolayoutExample
  29. 29. Thanks for listening
  30. 30. We are hiring! @ KKBOX

×