auto layout part 1

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