Upload
liyao-chen
View
1.773
Download
1
Embed Size (px)
Citation preview
Auto Layout I
Liyao Chen @ KKBOX
Outlines
• What is Auto Layout
• UIScrollView
• Self-sizing UITableViewCell
• Animation
What is Auto Layout?
Frame layout ?
Auto Layout ? (why)
What is Auto Layout?
• Content size (localization, font size …etc)
• Adaptive app size
Auto Layout ?What is Auto Layout?
Layout
What is Auto Layout?
UI (Constraints) Auto Layout Engine Layout
What is Auto Layout?
iOS team 700
Frame Layout Zonble - 500
- 200
- 100
What is Auto Layout?
iOS team 700
Auto Layout
Zonble - 200 200
- 100 50
- 100
NSLayoutConstraint@interface NSLayoutConstraint : NSObject @property UILayoutPriority priority; //1-1000 @property CGFloat constant; @end
Demo• Auto Layout frame layout
NSLayoutConstraint
Practice 1NSLayoutConstraint
Practice 2NSLayoutConstraint
Intrinsic Content Size
/ Layout
Intrinsic Content Size
Intrinsic Content Size
Intrinsic Content Size
• Content Hugging
•
• Content Compression Resistance
•
Intrinsic Content Size
Demo• Label
Intrinsic Content Size
Demo• Label
Intrinsic Content Size
Practice 3Intrinsic Content Size
Lifecycle
UIScrollView
self-sizing cellself.tableView.estimatedRowHeight = 78; self.tableView.rowHeight = UITableViewAutomaticDimension;
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]];
Visual Format LanguageNSArray *constraintsV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-84-[redBox(==200)]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redBox)];
@“H:|-[redBox]-|" @"V:|-84-[redBox(==200)]-|"
- UI Content size (localization) - Layout code - - code - - - IB Constraint
QnA
• Q. Interface build xml PR ?
• A. Frame Layout UI code
Reference
• sample code - https://github.com/gliyao/LCAutolayoutExample
Thanks for listening
We are hiring!
@ KKBOX