Introduction to Auto Layout

Slide 1

Slide 1 text

Introduction to Auto Layout Edwin Kwok

Slide 2

Slide 2 text

J.Tune Auto Layout

Slide 3

Slide 3 text

What are gone in Xcode 5?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

What is auto layout? a system that lets you lay out your app’s user interface by creating a mathematical description of the relationships between the elements define these relationships in terms of constraints either on individual elements, or between sets of elements

Slide 6

Slide 6 text

Constraints Auto Layout System Layout

Slide 7

Slide 7 text

CE Level Math… y = 7x + 3 y = -8x - 4 How to solve x and y?

Slide 8

Slide 8 text

What’s Constraint view1.attribute1 = multiplier * view2.attribute2 + constant An attribute is one of left, right, top, bottom, leading, trailing, width, height, centerX, centerY, and baseline. e.g. the left edge of the button should be 20 points from the left edge of its containing view button.left = 1 * container.left + 20 y = m x + c

Slide 9

Slide 9 text

So… Auto Layout is just to solve a large number of linear equations Cassowary constraint solver http:/ /www.cs.washington.edu/ research/constraints/cassowary/

Slide 10

Slide 10 text

Why Auto Layout? One day, designer Frank makes a brilliant design All spacings are 20pt width

Slide 11

Slide 11 text

成日打code的人, a.k.a. Code guy, Rocky says, “it is easy” (20, 40), (130, 244) (170, 40), (130, 244) (20, 304), (280, 244)

Slide 12

Slide 12 text

after rotation… the programmer says, “update the frames after rotation…” (20, 40), (238, 130) (311, 40), (238, 130) (20, 166), (528, 134)

Slide 13

Slide 13 text

Why is that? (20, 40), (130, 244) (20, 40), (238, 130) Width: 130 * (568 - 20) / (320 - 20) = 237.5 Height: 244 * (320 - 40) / (568 - 40) = 129.4

Slide 14

Slide 14 text

Auto Layout Demo

Slide 15

Slide 15 text

CE Level Math Revisit… y = 7x + 3 y = 7x + 7 No Solutions

Slide 16

Slide 16 text

CE Level Math Revisit… y = 7x + 3 2y = 14x + 6 Infinite Many Solutions

Slide 17

Slide 17 text

So What? In Auto Layout More than one solution ambiguities No solutions unsatisfiable

Slide 18

Slide 18 text

Quiz A label is constrained with 8-point offsets from its superview’s left and right edges. It is 22 points high. Is this label’s layout ambiguous?

Slide 19

Slide 19 text

Quiz Is this layout satisfiable? button1.width = 2 * button2.width button2.width = 3 * button1.width

Slide 20

Slide 20 text

Problem is … They all are solution ambiguous!!!!

Slide 21

Slide 21 text

Key Concept… Correctly using auto layout requires you to change thinking Don’t go calculating frames Define how elements are related Describe the layout in a declarative way

Slide 22

Slide 22 text

Top Layout Guide Top Layout Guide (0,0)

Slide 23

Slide 23 text

Intrinsic Content Size Some views know their size UIImageVIew same as the image UILabel same as size of the text

Slide 24

Slide 24 text

Alignment Rect UIImage *image = [[UIImage imageNamed:@"Shadowed.png"] imageWithAlignmentRectInsets:UIEdgeInsetsMake(0, 0, 20, 20)]; UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

Slide 25

Slide 25 text

Alignment Rect

Slide 26

Slide 26 text

view1.attribute1 = multiplier * view2.attribute2 + constant Auto Layout’s true colors = equal >= greater than or equal <= less than or equal

Slide 27

Slide 27 text

Auto Layout’s true colors… x - 4y <= -3 3x + 5y <= 25 x >= 1 Linear Programming

Slide 28

Slide 28 text

Methods of adding constraints Interface Builder NSLayoutConstraint Visual Format Language

Slide 29

Slide 29 text

NSConstraintLayout [NSLayoutConstraint constraintWithItem:self.button1 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.button2 attribute:NSLayoutAttributeLeft multiplier:1.0 constant:-12.0]; view1.attribute1 = multiplier * view2.attribute2 + constant

Slide 30

Slide 30 text

Not verbose … button1.right = button2.left - 12 button2.left = button1.right + 12 Need to think carefully which one is on the left

Slide 31

Slide 31 text

Visual Format Language [button1]-[button2] NSDictionary *viewsDictionary = ! NSDictionaryOfVariableBindings(self.button1, self.button2); ! NSArray *constraints = ! [NSLayoutConstraint constraintsWithVisualFormat: @"[button1]-[button2]" ! options:0 metrics:nil views:viewsDictionary];

Slide 32

Slide 32 text

Migration Do I need to update all views to auto layout system in one shot? No Will I miss anything after using auto layout? No, auto layout is more powerful system than struts and springs

Slide 33

Slide 33 text

Localization An attribute is one of left, right, top, bottom, leading, trailing, width, height, centerX, centerY, and baseline.

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Useful usage

Slide 36

Slide 36 text

R Y D A E Zero Spacing Constraint Center Vertically Constraint Horizontal Vertically Constraint

Slide 37

Slide 37 text

Useful usage Possible Solution: 1. WebView 2. Attributed String ! Problem: Note name has to be center horizontally

Slide 38

Slide 38 text

Auto Layout Solution

Slide 39

Slide 39 text

Not Mentioned… Priority Content Resistance Content Hugging Animation Layout Debugging

Slide 40

Slide 40 text

Q & A

Slide 41

Slide 41 text

Reference Apple Developer Library - Auto Layout Guide https:/ /developer.apple.com/ library/ios/documentation/ userexperience/conceptual/ AutolayoutPG/Introduction/ Introduction.html