auto layout part 1
TRANSCRIPT
![Page 1: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/1.jpg)
Auto Layout I
Liyao Chen @ KKBOX
![Page 2: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/2.jpg)
Outlines
• What is Auto Layout
• UIScrollView
• Self-sizing UITableViewCell
• Animation
![Page 3: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/3.jpg)
What is Auto Layout?
![Page 4: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/4.jpg)
Frame layout ?
Auto Layout ? (why)
What is Auto Layout?
![Page 5: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/5.jpg)
• Content size (localization, font size …etc)
• Adaptive app size
Auto Layout ?What is Auto Layout?
![Page 6: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/6.jpg)
Layout
What is Auto Layout?
UI (Constraints) Auto Layout Engine Layout
![Page 7: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/7.jpg)
What is Auto Layout?
iOS team 700
Frame Layout Zonble - 500
- 200
- 100
![Page 8: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/8.jpg)
What is Auto Layout?
iOS team 700
Auto Layout
Zonble - 200 200
- 100 50
- 100
![Page 9: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/9.jpg)
NSLayoutConstraint@interface NSLayoutConstraint : NSObject @property UILayoutPriority priority; //1-1000 @property CGFloat constant; @end
![Page 10: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/10.jpg)
Demo• Auto Layout frame layout
NSLayoutConstraint
![Page 11: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/11.jpg)
Practice 1NSLayoutConstraint
![Page 12: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/12.jpg)
Practice 2NSLayoutConstraint
![Page 13: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/13.jpg)
Intrinsic Content Size
/ Layout
![Page 14: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/14.jpg)
Intrinsic Content Size
![Page 15: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/15.jpg)
Intrinsic Content Size
![Page 16: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/16.jpg)
Intrinsic Content Size
• Content Hugging
•
• Content Compression Resistance
•
![Page 17: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/17.jpg)
Intrinsic Content Size
![Page 18: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/18.jpg)
Demo• Label
Intrinsic Content Size
![Page 19: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/19.jpg)
Demo• Label
Intrinsic Content Size
![Page 20: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/20.jpg)
Practice 3Intrinsic Content Size
![Page 21: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/21.jpg)
Lifecycle
![Page 22: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/22.jpg)
UIScrollView
![Page 23: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/23.jpg)
self-sizing cellself.tableView.estimatedRowHeight = 78; self.tableView.rowHeight = UITableViewAutomaticDimension;
![Page 24: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/24.jpg)
Constraints with codeUILabel *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]];
![Page 25: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/25.jpg)
Visual Format LanguageNSArray *constraintsV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-84-[redBox(==200)]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redBox)];
@“H:|-[redBox]-|" @"V:|-84-[redBox(==200)]-|"
![Page 26: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/26.jpg)
- UI Content size (localization) - Layout code - - code - - - IB Constraint
![Page 27: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/27.jpg)
QnA
• Q. Interface build xml PR ?
• A. Frame Layout UI code
![Page 28: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/28.jpg)
Reference
• sample code - https://github.com/gliyao/LCAutolayoutExample
![Page 29: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/29.jpg)
Thanks for listening
![Page 30: Auto Layout part 1](https://reader034.vdocument.in/reader034/viewer/2022050914/58ed190a1a28abeb098b4607/html5/thumbnails/30.jpg)
We are hiring!
@ KKBOX