Understanding Autolayout

Slides accompanying a talk for NSFargo on Sep 16, '14

Some Image Attributions
- Trowel designed by Blake Kimmel from the thenounproject.com
- Tools designed by Kenton Quatman from the thenounproject.com

Transcript

1. PLANNING LAYOUT TOOL BOX CONCEPTS UNDERSTANDING AUTOLAYOUT SRI KADIMISETTY @sri
2. PLANNING LAYOUT TOOL BOX CONCEPTS
3. PLANNING LAYOUT TOOL BOX CONCEPTS
4. “Each view should know it’s size and position within it’s super view” Button
5. 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
6. 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 AUTO RESIZING MASKS
7. 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 AUTOLAYOUT AUTO RESIZING MASKS
8. An incremental algorithm based on the dual simplex method that can solve systems of constraints efficiently. Cassowary
9. Constraint Programming You specify constraints as requirements or preferences The Solver updates constrained variables to values that satisfy your constraints.
10. Constraint Defines a relationship between two attributes. Button
11. Constraint Defines a relationship between two attributes. Button
12. Constraint Defines a relationship between two attributes. Button TOP TOP
13. Attributes Hi
14. Attributes Hi TOP BOTTOM LEFT RIGHT
15. Attributes Hi WIDTH HEIGHT
16. Attributes Hi CENTER X CENTER Y
17. Attributes Hi BASELINE
18. Attributes Hi BASELINE NSFargo
19. Attributes Hi LEADING TRAILING
20. Attributes
21. Attributes ابحرم
22. Attributes ابحرم TRAILING LEADING
23. Alignment Rectangles A Golden Button
24. Alignment Rectangles A Golden Button ALIGNMENT RECTANGLE
25. Alignment Rectangles A Golden Button ALIGNMENT RECTANGLE FRAME
26. o Alignment Rectangles
27. o Alignment Rectangles
28. o Alignment Rectangles
29. o Alignment Rectangles 34
30. o Alignment Rectangles 34
31. o Alignment Rectangles 34
32. 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
33. Rule of Four A view should have four constraints; two in each dimension. *conditions apply
34. Priority
35. Content Hugging Priority with which a view holds on to the edges of it’s super view. Tiny Button Tiny Button
36. Compression Resistance Priority with which a view resists being made smaller than its intrinsic size. Slightly Longer Button Sligh … utton
37. plz stop squeezing me i are not teddy bear
38. PLANNING LAYOUT TOOL BOX CONCEPTS
39. PLANNING LAYOUT TOOL BOX CONCEPTS
40. r Group Not all sub views need to be laid out together. Group conservatively.
41. r Order Choose one view as the “leader” and base it’s sibling’s constraints off it.
42. r Order Choose one view as the “leader” and base it’s sibling’s constraints off it. 1
43. r Order Choose one view as the “leader” and base it’s sibling’s constraints off it. 1 2
44. r Order Choose one view as the “leader” and base it’s sibling’s constraints off it. 1 2 3
45. Button
46. Button
47. Button
48. Button
49. Button
50. Button
51. Button
52. Button
53. Button
54. PLANNING LAYOUT TOOL BOX CONCEPTS
55. PLANNING LAYOUT TOOL BOX CONCEPTS
56. Passes LAYOUT DISPLAY
57. Passes MEASUREMENT LAYOUT DISPLAY
58. Enable Autolayout Explicitly enable on all views
59. Enable Autolayout Explicitly enable on all views
60. The Usual Suspects AMBIGUITY NOT ENABLED CONFLICTS LIMITATIONS
61. Add / Remove Constraints Add constraints to the closest common ancestor 1 2 3
62. 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];
63. Priority Levels UILayoutPriorityRequired = 1000, UILayoutPriorityDefaultHigh = 750, UILayoutPriorityDefaultLow = 250, UILayoutPriorityFittingSizeLevel = 50 enum { };
64. PLANNING LAYOUT TOOL BOX CONCEPTS
65. PLANNING LAYOUT TOOL BOX CONCEPTS
66. Constraints * multipler + constant = WIDTH superview’s WIDTH childView’s
67. NSLayoutConstraint [superview addConstraints:@[ [NSLayoutConstraint constraintWithItem: attribute: relatedBy: toItem: attribute: multiplier: constant: ]; multipler constant = childView superView WIDTH WIDTH
68. NSLayoutConstraint [superview addConstraints:@[ [NSLayoutConstraint constraintWithItem: childView attribute: NSLayoutAttributeWidth relatedBy: NSLayoutRelationEqual toItem: superview attribute: NSLayoutAttributeWidth multiplier: 1.0 constant: 0 ];
69. 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]”
70. 3 “Debug and fix Autolayout issues” WORD TO THE WISE
71. 2 “Update constants instead of the whole constraint” WORD TO THE WISE
72. 1 “IB is not necessarily the best tool for specifying constraints” WORD TO THE WISE
74. PLANNING LAYOUT TOOL BOX CONCEPTS
75. PLANNING LAYOUT TOOL BOX CONCEPTS SRI KADIMISETTY @sri What about Autolayout still seems unclear?