Understanding Autolayout

Slide 1

Slide 1 text

PLANNING LAYOUT TOOL BOX CONCEPTS UNDERSTANDING AUTOLAYOUT SRI KADIMISETTY @sri

Slide 2

Slide 2 text

PLANNING LAYOUT TOOL BOX CONCEPTS

Slide 3

Slide 3 text

PLANNING LAYOUT TOOL BOX CONCEPTS

Slide 4

Slide 4 text

“Each view should know it’s size and position within it’s super view” Button

Slide 5

Slide 5 text

Layout Mechanisms MANUAL 081548078241222430869710810810 512409583414642032064766037894 201537013247343349501021753306 639736108154807824122243086971 081081051240958341464203206476 603789420153701324734334950102 175330663973610815480782412224 308697108108105124095834146420 320647660378942015370132473433 495010217533066397361081548078 241222430869710810810512409583 414642032064766037894201537013 247343349501021753306639736108 154807824122243086971081081051 240958341464203206476603789420 153701324734334950102175330663 973610815480782412224308697108 108105124095834146420320647660 378942015370132473433495010217 533066397361081548078241222430 869710810810512409583414642010 815480782412224308693086930869 308693086930869308693086912323

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

An incremental algorithm based on the dual simplex method that can solve systems of constraints efficiently. Cassowary

Slide 9

Slide 9 text

Constraint Programming You specify constraints as requirements or preferences The Solver updates constrained variables to values that satisfy your constraints.

Slide 10

Slide 10 text

Constraint Defines a relationship between two attributes. Button

Slide 11

Slide 11 text

Constraint Defines a relationship between two attributes. Button

Slide 12

Slide 12 text

Constraint Defines a relationship between two attributes. Button TOP TOP

Slide 13

Slide 13 text

Attributes Hi

Slide 14

Slide 14 text

Attributes Hi TOP BOTTOM LEFT RIGHT

Slide 15

Slide 15 text

Attributes Hi WIDTH HEIGHT

Slide 16

Slide 16 text

Attributes Hi CENTER X CENTER Y

Slide 17

Slide 17 text

Attributes Hi BASELINE

Slide 18

Slide 18 text

Attributes Hi BASELINE NSFargo

Slide 19

Slide 19 text

Attributes Hi LEADING TRAILING

Slide 20

Slide 20 text

Attributes

Slide 21

Slide 21 text

Attributes ابحرم

Slide 22

Slide 22 text

Attributes ابحرم TRAILING LEADING

Slide 23

Slide 23 text

Alignment Rectangles A Golden Button

Slide 24

Slide 24 text

Alignment Rectangles A Golden Button ALIGNMENT RECTANGLE

Slide 25

Slide 25 text

Alignment Rectangles A Golden Button ALIGNMENT RECTANGLE FRAME

Slide 26

Slide 26 text

o Alignment Rectangles

Slide 27

Slide 27 text

o Alignment Rectangles

Slide 28

Slide 28 text

o Alignment Rectangles

Slide 29

Slide 29 text

o Alignment Rectangles 34

Slide 30

Slide 30 text

o Alignment Rectangles 34

Slide 31

Slide 31 text

o Alignment Rectangles 34

Slide 32

Slide 32 text

Intrinsic Content Size The natural size of the view based on it’s intrinsic properties like the size of an image or the length of a label Your custom view can have an Intrinsic Content Size too. Small Button Slightly Longer Button

Slide 33

Slide 33 text

Rule of Four A view should have four constraints; two in each dimension. *conditions apply

Slide 34

Slide 34 text

Priority

Slide 35

Slide 35 text

Content Hugging Priority with which a view holds on to the edges of it’s super view. Tiny Button Tiny Button

Slide 36

Slide 36 text

Compression Resistance Priority with which a view resists being made smaller than its intrinsic size. Slightly Longer Button Sligh … utton

Slide 37

Slide 37 text

plz stop squeezing me i are not teddy bear

Slide 38

Slide 38 text

PLANNING LAYOUT TOOL BOX CONCEPTS

Slide 39

Slide 39 text

PLANNING LAYOUT TOOL BOX CONCEPTS

Slide 40

Slide 40 text

r Group Not all sub views need to be laid out together. Group conservatively.

Slide 41

Slide 41 text

r Order Choose one view as the “leader” and base it’s sibling’s constraints off it.

Slide 42

Slide 42 text

r Order Choose one view as the “leader” and base it’s sibling’s constraints off it. 1

Slide 43

Slide 43 text

r Order Choose one view as the “leader” and base it’s sibling’s constraints off it. 1 2

Slide 44

Slide 44 text

r Order Choose one view as the “leader” and base it’s sibling’s constraints off it. 1 2 3

Slide 45

Slide 45 text

Button

Slide 46

Slide 46 text

Button

Slide 47

Slide 47 text

Button

Slide 48

Slide 48 text

Button

Slide 49

Slide 49 text

Button

Slide 50

Slide 50 text

Button

Slide 51

Slide 51 text

Button

Slide 52

Slide 52 text

Button

Slide 53

Slide 53 text

Button

Slide 54

Slide 54 text

PLANNING LAYOUT TOOL BOX CONCEPTS

Slide 55

Slide 55 text

PLANNING LAYOUT TOOL BOX CONCEPTS

Slide 56

Slide 56 text

Passes LAYOUT DISPLAY

Slide 57

Slide 57 text

Passes MEASUREMENT LAYOUT DISPLAY

Slide 58

Slide 58 text

Enable Autolayout Explicitly enable on all views

Slide 59

Slide 59 text

Enable Autolayout Explicitly enable on all views

Slide 60

Slide 60 text

The Usual Suspects AMBIGUITY NOT ENABLED CONFLICTS LIMITATIONS

Slide 61

Slide 61 text

Add / Remove Constraints Add constraints to the closest common ancestor 1 2 3

Slide 62

Slide 62 text

Animation Update constraint and ask for the layout pass. [UIView animateWithDuration: 1 animations: ^{ }]; aView.frame = updatedFrame; [UIView animateWithDuration: 1 animations: ^{ }]; // Update constraints here [aView layoutIfNeeded]; [aView layoutIfNeeded];

Slide 63

Slide 63 text

Priority Levels UILayoutPriorityRequired = 1000, UILayoutPriorityDefaultHigh = 750, UILayoutPriorityDefaultLow = 250, UILayoutPriorityFittingSizeLevel = 50 enum { };

Slide 64

Slide 64 text

PLANNING LAYOUT TOOL BOX CONCEPTS

Slide 65

Slide 65 text

PLANNING LAYOUT TOOL BOX CONCEPTS

Slide 66

Slide 66 text

Constraints * multipler + constant = WIDTH superview’s WIDTH childView’s

Slide 67

Slide 67 text

NSLayoutConstraint [superview addConstraints:@[ [NSLayoutConstraint constraintWithItem: attribute: relatedBy: toItem: attribute: multiplier: constant: ]; multipler constant = childView superView WIDTH WIDTH

Slide 68

Slide 68 text

NSLayoutConstraint [superview addConstraints:@[ [NSLayoutConstraint constraintWithItem: childView attribute: NSLayoutAttributeWidth relatedBy: NSLayoutRelationEqual toItem: superview attribute: NSLayoutAttributeWidth multiplier: 1.0 constant: 0 ];

Slide 69

Slide 69 text

Visual Format Language NSLayoutConstraint UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10); [superview addConstraints:@[ [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:padding.top], / Masonry [self.childView makeConstraints:^(MASConstraintMaker *make) { }]; make.width.equalTo(superView) [self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: options:0 metrics:nil views:@{} ]]; @“V:|-(20)—[childView]”

Slide 70

Slide 70 text

3 “Debug and ﬁx Autolayout issues” WORD TO THE WISE

Slide 71

Slide 71 text

2 “Update constants instead of the whole constraint” WORD TO THE WISE

Slide 72

Slide 72 text

1 “IB is not necessarily the best tool for specifying constraints” WORD TO THE WISE

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

PLANNING LAYOUT TOOL BOX CONCEPTS

Slide 75

Slide 75 text

PLANNING LAYOUT TOOL BOX CONCEPTS SRI KADIMISETTY @sri What about Autolayout still seems unclear?