Oursky Limited
August 11, 2014
180

# Introduction to Auto Layout

Introduction to Auto Layout

August 11, 2014

## Transcript

4. ### 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

6. ### CE Level Math… y = 7x + 3 y =

-8x - 4 How to solve x and y?
7. ### 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
8. ### So… Auto Layout is just to solve a large number

of linear equations Cassowary constraint solver http:/ /www.cs.washington.edu/ research/constraints/cassowary/
9. ### Why Auto Layout? One day, designer Frank makes a brilliant

design All spacings are 20pt width
10. ### 成日打code的人, a.k.a. Code guy, Rocky says, “it is easy” (20,

40), (130, 244) (170, 40), (130, 244) (20, 304), (280, 244)
11. ### after rotation… the programmer says, “update the frames after rotation…”

(20, 40), (238, 130) (311, 40), (238, 130) (20, 166), (528, 134)
12. ### 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

14. ### CE Level Math Revisit… y = 7x + 3 y

= 7x + 7 No Solutions
15. ### CE Level Math Revisit… y = 7x + 3 2y

= 14x + 6 Infinite Many Solutions
16. ### So What? In Auto Layout More than one solution ambiguities

No solutions unsatisfiable
17. ### 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?
18. ### Quiz Is this layout satisfiable? button1.width = 2 * button2.width

button2.width = 3 * button1.width

20. ### 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

22. ### Intrinsic Content Size Some views know their size UIImageVIew same

as the image UILabel same as size of the text
23. ### Alignment Rect UIImage *image = [[UIImage imageNamed:@"Shadowed.png"] imageWithAlignmentRectInsets:UIEdgeInsetsMake(0, 0, 20,

20)]; UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

25. ### view1.attribute1 = multiplier * view2.attribute2 + constant Auto Layout’s true

colors = equal >= greater than or equal <= less than or equal
26. ### Auto Layout’s true colors… x - 4y <= -3 3x

+ 5y <= 25 x >= 1 Linear Programming

28. ### 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
29. ### Not verbose … button1.right = button2.left - 12 button2.left =

button1.right + 12 Need to think carefully which one is on the left
30. ### Visual Format Language [button1]-[button2] NSDictionary *viewsDictionary = ! NSDictionaryOfVariableBindings(self.button1, self.button2);

! NSArray *constraints = ! [NSLayoutConstraint constraintsWithVisualFormat: @"[button1]-[button2]" ! options:0 metrics:nil views:viewsDictionary];
31. ### 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
32. ### Localization An attribute is one of left, right, top, bottom,

leading, trailing, width, height, centerX, centerY, and baseline.

34. ### R Y D A E Zero Spacing Constraint Center Vertically

Constraint Horizontal Vertically Constraint
35. ### Useful usage Possible Solution: 1. WebView 2. Attributed String !

Problem: Note name has to be center horizontally

39. ### Reference Apple Developer Library - Auto Layout Guide https:/ /developer.apple.com/

library/ios/documentation/ userexperience/conceptual/ AutolayoutPG/Introduction/ Introduction.html