Introduction to Auto Layout

Introduction to Auto Layout

Transcript

1. Introduction to Auto Layout Edwin Kwok
2. J.Tune Auto Layout
3. What are gone in Xcode 5?
5. 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. Constraints Auto Layout System Layout
7. CE Level Math… y = 7x + 3 y = -8x - 4 How to solve x and y?
8. 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
9. So… Auto Layout is just to solve a large number of linear equations Cassowary constraint solver http:/ /www.cs.washington.edu/ research/constraints/cassowary/
10. Why Auto Layout? One day, designer Frank makes a brilliant design All spacings are 20pt width
11. 成日打code的人, a.k.a. Code guy, Rocky says, “it is easy” (20, 40), (130, 244) (170, 40), (130, 244) (20, 304), (280, 244)
12. after rotation… the programmer says, “update the frames after rotation…” (20, 40), (238, 130) (311, 40), (238, 130) (20, 166), (528, 134)
13. 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. Auto Layout Demo
15. CE Level Math Revisit… y = 7x + 3 y = 7x + 7 No Solutions
16. CE Level Math Revisit… y = 7x + 3 2y = 14x + 6 Infinite Many Solutions
17. So What? In Auto Layout More than one solution ambiguities No solutions unsatisfiable
18. 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?
19. Quiz Is this layout satisfiable? button1.width = 2 * button2.width button2.width = 3 * button1.width
20. Problem is … They all are solution ambiguous!!!!
21. 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. Top Layout Guide Top Layout Guide (0,0)
23. Intrinsic Content Size Some views know their size UIImageVIew same as the image UILabel same as size of the text
24. Alignment Rect UIImage *image = [[UIImage imageNamed:@"Shadowed.png"] imageWithAlignmentRectInsets:UIEdgeInsetsMake(0, 0, 20, 20)]; UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
25. Alignment Rect
26. view1.attribute1 = multiplier * view2.attribute2 + constant Auto Layout’s true colors = equal >= greater than or equal <= less than or equal
27. Auto Layout’s true colors… x - 4y <= -3 3x + 5y <= 25 x >= 1 Linear Programming
28. Methods of adding constraints Interface Builder NSLayoutConstraint Visual Format Language
29. 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
30. Not verbose … button1.right = button2.left - 12 button2.left = button1.right + 12 Need to think carefully which one is on the left
31. Visual Format Language [button1]-[button2] NSDictionary *viewsDictionary = ! NSDictionaryOfVariableBindings(self.button1, self.button2); ! NSArray *constraints = ! [NSLayoutConstraint constraintsWithVisualFormat: @"[button1]-[button2]" ! options:0 metrics:nil views:viewsDictionary];
32. 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
33. Localization An attribute is one of left, right, top, bottom, leading, trailing, width, height, centerX, centerY, and baseline.
35. Useful usage
36. R Y D A E Zero Spacing Constraint Center Vertically Constraint Horizontal Vertically Constraint
37. Useful usage Possible Solution: 1. WebView 2. Attributed String ! Problem: Note name has to be center horizontally
38. Auto Layout Solution
39. Not Mentioned… Priority Content Resistance Content Hugging Animation Layout Debugging
40. Q & A
41. Reference Apple Developer Library - Auto Layout Guide https:/ /developer.apple.com/ library/ios/documentation/ userexperience/conceptual/ AutolayoutPG/Introduction/ Introduction.html