Session 228 - Best Practices for Mastering Auto Layout

Transcript

1. These are confidential sessions—please refrain from streaming, blogging, or taking pictures for OS X and iOS Session 228 Peter Ammon AppKit Engineer Best Practices for Mastering Auto Layout
3. Make your layouts simpler to write simpler to modify easier to understand
4. Auto Layout
5. Auto Layout
6. Auto Layout
7. Auto Layout Identical APIs!
8. Auto Layout Identical APIs!
9. Auto Layout
10. Auto Layout “View”
11. Auto Layout “View” NSView UIView
12. NSLayoutConstraint
13. •One new class—NSLayoutConstraint NSLayoutConstraint
14. •One new class—NSLayoutConstraint •Constraints express geometric properties of views NSLayoutConstraint
15. •One new class—NSLayoutConstraint •Constraints express geometric properties of views NSLayoutConstraint foo foo.width = 120
16. •One new class—NSLayoutConstraint •Constraints express geometric properties of views •Constraints also express geometric relationships between views NSLayoutConstraint foo foo.width = 120
17. •One new class—NSLayoutConstraint •Constraints express geometric properties of views •Constraints also express geometric relationships between views NSLayoutConstraint foo foo.width = 120 foo foo.width = bar.width bar
18. •One new class—NSLayoutConstraint •Constraints express geometric properties of views •Constraints also express geometric relationships between views NSLayoutConstraint foo foo.width = 120 foo foo.width = bar.width bar •Relationships have a coefficient and a constant
19. •One new class—NSLayoutConstraint •Constraints express geometric properties of views •Constraints also express geometric relationships between views NSLayoutConstraint foo foo.width = 120 foo foo.width = bar.width bar •Relationships have a coefficient and a constant foo.width = bar.width * 2 - 20
20. NSLayoutConstraint
21. NSLayoutConstraint •Constraints can be equalities or inequalities
22. NSLayoutConstraint •Constraints can be equalities or inequalities foo foo.width >= 120
23. NSLayoutConstraint •Constraints can be equalities or inequalities foo foo.width >= 120 •Constraints have priorities
24. NSLayoutConstraint •Constraints can be equalities or inequalities foo foo.width >= 120 •Constraints have priorities foo foo.width = 120 with priority 500 foo.width = 75 with priority 1000
25. NSLayoutConstraint •Constraints can be created three ways ▪ Interface Builder ▪ Visual format language ▪ Base API •Prefer this order
26. Auto Layout •Thinking in constraints ▪ Transitioning to constraints •Debugging constraint-based layouts ▪ Ambiguity ▪ Unsatisfiability ▪ Reading log messages •Unleashing the power of constraints ▪ Animation ▪ Writing a custom control ▪ Internationalization
27. Auto Layout •Thinking in constraints ▪ Transitioning to constraints •Debugging constraint-based layouts ▪ Ambiguity ▪ Unsatisfiability ▪ Reading log messages •Unleashing the power of constraints ▪ Animation ▪ Writing a custom control ▪ Internationalization
28. Thinking in Constraints •Auto Layout can be used like springs and struts •But you get the most benefits from a shift in thinking •Let your layouts becomes declarative
29. Thinking in Constraints
30. Thinking in Constraints Q W E R T Y
31. Thinking in Constraints Q W E R T Y padding
32. Thinking in Constraints Q W E R T Y padding containerWidth
33. Thinking in Constraints Q W E R T Y Springs and Struts padding containerWidth
34. Thinking in Constraints Q W E R T Y Springs and Struts padding keyWidth = containerWidth / keyCount - padding * (keyCount + 1) / keyCount containerWidth
35. Thinking in Constraints Q W E R T Y Springs and Struts padding keyOffset = padding + keyIndex * (keyWidth + padding) keyWidth = containerWidth / keyCount - padding * (keyCount + 1) / keyCount containerWidth
36. Springs and Struts Thinking in Constraints Q W E R T Y Relationships
37. Thinking in Constraints Auto Layout Q W E R T Y Relationships
38. Thinking in Constraints Auto Layout Q W E R T Y Relationships
39. Thinking in Constraints Auto Layout Q W E R T Y Q.width = container.width / keyCount - padding * (keyCount + 1) / keyCount Relationships
40. Thinking in Constraints Auto Layout Q W E R T Y Q.width = container.width / keyCount - padding * (keyCount + 1) / keyCount Relationships
41. Thinking in Constraints Auto Layout Q W E R T Y Q.width = container.width / keyCount - padding * (keyCount + 1) / keyCount Q.minX = container.minX + padding W.minX = Q.maxX + padding E.minX = W.maxX + padding... Relationships
42. Thinking in Constraints Auto Layout Q W E R T Y Q.width = container.width / keyCount - padding * (keyCount + 1) / keyCount Q.minX = container.minX + padding W.minX = Q.maxX + padding E.minX = W.maxX + padding... Relationships
43. Thinking in Constraints Q W E R T Y Auto Layout Q.minX = container.minX + padding W.minX = Q.maxX + padding E.minX = W.maxX + padding...
44. Thinking in Constraints Q W E R T Y Auto Layout Q.minX = container.minX + padding W.minX = Q.maxX + padding E.minX = W.maxX + padding... =
45. Thinking in Constraints Q W E R T Y Auto Layout Q.minX = container.minX + padding W.minX = Q.maxX + padding E.minX = W.maxX + padding... = Q.width = W.width W.width = E.width ...
46. Thinking in Constraints Q W E R T Y Auto Layout Q.minX = container.minX + padding W.minX = Q.maxX + padding E.minX = W.maxX + padding... = Q.width = W.width W.width = E.width ...
47. Thinking in Constraints Q W E R T Y Auto Layout Q.minX = container.minX + padding W.minX = Q.maxX + padding E.minX = W.maxX + padding... = Q.width = W.width W.width = E.width ... container.maxX = Y.maxX + padding
48. Demo
49. •Layout becomes distributed •Decompose sophisticated layouts into components •Each component contributes the constraints it cares about •Layout becomes “owned” Thinking in Constraints
50. •Layout becomes distributed •Decompose sophisticated layouts into components •Each component contributes the constraints it cares about •Layout becomes “owned” Thinking in Constraints Q
51. •Layout becomes distributed •Decompose sophisticated layouts into components •Each component contributes the constraints it cares about •Layout becomes “owned” Thinking in Constraints Q I’m square!
52. •Layout becomes distributed •Decompose sophisticated layouts into components •Each component contributes the constraints it cares about •Layout becomes “owned” Thinking in Constraints Q I’m square!
53. •Layout becomes distributed •Decompose sophisticated layouts into components •Each component contributes the constraints it cares about •Layout becomes “owned” Thinking in Constraints Q I’m square! Be centered vertically in me! Be the same height as me!
54. Auto Layout •Thinking in constraints ▪ Transitioning to constraints •Debugging constraint-based layouts ▪ Ambiguity ▪ Unsatisfiability ▪ Reading log messages •Unleashing the power of constraints ▪ Animation ▪ Writing a custom control ▪ Internationalization
55. 1. Plan your attack •A partial conversion lets you use Auto Layout just where you need it ▪ Some compatibility issues to be aware of •A full conversion will pay major dividends Migrating from Springs and Struts
56. 2. Turn on Auto Layout in your nibs Migrating from Springs and Struts
57. 2. Turn on Auto Layout in your nibs Migrating from Springs and Struts
58. 2. Turn on Auto Layout in your nibs Migrating from Springs and Struts
59. 2. Turn on Auto Layout in your nibs Migrating from Springs and Struts
60. 2. Turn on Auto Layout in your nibs •Create the constraints you want in IB •IB will create constraints that reflect your existing layout •Add to or modify them Migrating from Springs and Struts
61. 3. Turn off autoresizing mask translation for every view you create programmatically [view setTranslatesAutoresizingMaskIntoConstraints:NO] •If you forget, you’ll get unsatisfiable constraint warnings quickly Migrating from Springs and Struts
62. 4. Look for places where you perform layout Migrating from Springs and Struts
63. 4. Look for places where you perform layout - (void)layoutSubviews {… Migrating from Springs and Struts
64. 4. Look for places where you perform layout - (void)layoutSubviews {… Migrating from Springs and Struts [view setFrame:rect] [view setFrameSize:size] [view setFrameOrigin:point]
65. 4. Look for places where you perform layout - (void)layoutSubviews {… Migrating from Springs and Struts [view setFrame:rect] [view setFrameSize:size] [view setFrameOrigin:point] They all have to go!
66. 4. Look for places where you perform layout - (void)layoutSubviews {… Migrating from Springs and Struts [view setFrame:rect] [view setFrameSize:size] [view setFrameOrigin:point] They all have to go! (But what do I replace them with?)
67. Migrating from Springs and Struts
68. Migrating from Springs and Struts •Stop and think ▪ Don’t try to merely replicate what the existing code is doing ▪ Think about the underlying layout
69. Migrating from Springs and Struts •Stop and think ▪ Don’t try to merely replicate what the existing code is doing ▪ Think about the underlying layout •Try replacing it with nothing! ▪ Are you working around a limitation of springs and struts? ▪ Does the code implement a relationship?
70. Migrating from Springs and Struts •Stop and think ▪ Don’t try to merely replicate what the existing code is doing ▪ Think about the underlying layout •Try replacing it with nothing! ▪ Are you working around a limitation of springs and struts? ▪ Does the code implement a relationship? •Otherwise, add some constraints
71. Migrating from Springs and Struts
72. Migrating from Springs and Struts •Think about which component should own each constraint
73. Migrating from Springs and Struts •Think about which component should own each constraint •Consider centralizing it in updateConstraints
74. 5. Test it Migrating from Springs and Struts
75. 5. Test it •Verify the layout is correct •Fix issues you may have Migrating from Springs and Struts
76. 5. Test it •Verify the layout is correct •Fix issues you may have Migrating from Springs and Struts •Wait, what?
77. Auto Layout •Thinking in constraints ▪ Transitioning to constraints •Debugging constraint-based layouts ▪ Ambiguity ▪ Unsatisfiability ▪ Reading log messages •Unleashing the power of constraints ▪ Animation ▪ Writing a custom control ▪ Internationalization
78. •Constraints that provide insufficient information ▪ Ambiguity •Constraints that provide conflicting information ▪ Unsatisfiability •Constraints that are satisfied in unexpected ways What Can Go Wrong?
79. •Interface Builder prevents unsatisfiable or ambiguous constraints •Rely on Interface Builder as much as possible •You can reference constraints with outlets What Can Go Wrong?
80. Auto Layout •Thinking in constraints ▪ Transitioning to constraints •Debugging constraint-based layouts ▪ Ambiguity ▪ Unsatisfiability ▪ Reading log messages •Unleashing the power of constraints ▪ Animation ▪ Writing a custom control ▪ Internationalization
81. Ambiguity Q W E R T Y
82. •Ambiguity means multiple layouts satisfy all constraints equally well Ambiguity Q W E R T Y
83. •Ambiguity means multiple layouts satisfy all constraints equally well Ambiguity Q W E R T Y
84. •Ambiguity means multiple layouts satisfy all constraints equally well Q W E R T Y Ambiguity
85. Ambiguity •Ambiguity means multiple layouts satisfy all constraints equally well
86. Ambiguity •Ambiguity means multiple layouts satisfy all constraints equally well •A common symptom is that your views will cycle between those layouts
87. Ambiguity •Ambiguity means multiple layouts satisfy all constraints equally well •A common symptom is that your views will cycle between those layouts •Views “jump” or disappear entirely (jump to zero size)
88. Ambiguity
89. •Usually it means you need more constraints Ambiguity
90. •Usually it means you need more constraints •Each view needs four properties (two in each dimension) ▪ MinX, Width, MinY, Height ▪ MinX, MaxX, CenterY, MaxY ▪ CenterX, Width, Baseline, Height ▪ etc. Ambiguity
91. •Usually it means you need more constraints •Each view needs four properties (two in each dimension) ▪ MinX, Width, MinY, Height ▪ MinX, MaxX, CenterY, MaxY ▪ CenterX, Width, Baseline, Height ▪ etc. •Inequalities by themselves are usually not enough ▪ view.width ≥ 20 – is it 20? 200? 2 billion? ▪ Inequalities don’t care how much larger or smaller you are ▪ But equalities care Ambiguity
92. Ambiguity
93. •Rarely, ambiguity means you need to adjust priorities Ambiguity
94. •Rarely, ambiguity means you need to adjust priorities Ambiguity [view(24@500) [view(>=30@500)]
95. •Rarely, ambiguity means you need to adjust priorities Ambiguity •It can’t satisfy both •They have equal priorities •Ambiguity! [view(24@500) [view(>=30@500)]
96. •Rarely, ambiguity means you need to adjust priorities Ambiguity [view(24@500) [view(>=30@525)]
97. •Rarely, ambiguity means you need to adjust priorities Ambiguity •It still can’t satisfy both [view(24@500) [view(>=30@525)]
98. •Rarely, ambiguity means you need to adjust priorities Ambiguity •It still can’t satisfy both •The inequality has a higher priority, so it will be satisfied first [view(24@500) [view(>=30@525)]
99. •Rarely, ambiguity means you need to adjust priorities Ambiguity •It still can’t satisfy both •The inequality has a higher priority, so it will be satisfied first •The equality will be satisfied as closely as possible [view(24@500) [view(>=30@525)]
100. •Rarely, ambiguity means you need to adjust priorities Ambiguity •It still can’t satisfy both •The inequality has a higher priority, so it will be satisfied first •The equality will be satisfied as closely as possible •No ambiguity! [view(24@500) [view(>=30@525)]
101. •Rarely, ambiguity means you need to adjust priorities Ambiguity •It still can’t satisfy both •The inequality has a higher priority, so it will be satisfied first •The equality will be satisfied as closely as possible •No ambiguity! •view.width = 30 [view(24@500) [view(>=30@525)]
102. •Is my layout ambiguous? [view hasAmbiguousLayout] •What is ambiguous about it? [view exerciseAmbiguityInLayout] [window visualizeConstraints: @[] ] Ambiguity
103. Auto Layout •Thinking in constraints ▪ Transitioning to constraints •Debugging constraint-based layouts ▪ Ambiguity ▪ Unsatisfiability ▪ Reading log messages •Unleashing the power of constraints ▪ Animation ▪ Writing a custom control ▪ Internationalization
104. Unsatisfiability
105. •Unsatisfiability means no layout can satisfy all required constraints Unsatisfiability
106. •Unsatisfiability means no layout can satisfy all required constraints •Only required constraints can contribute to unsatisfiability ▪ Constraints are required by default! Unsatisfiability
107. •Unsatisfiability means no layout can satisfy all required constraints •Only required constraints can contribute to unsatisfiability ▪ Constraints are required by default! •Sizes are implicitly required to be at least zero Unsatisfiability
108. •Unsatisfiability is immediately reported •Ambiguity can be temporarily tolerated •Remove constraints as soon as they might become invalid •Create valid constraints again in updateConstraints Unsatisfiability
109. Help, I Don’t See Anything!
110. Help, I Don’t See Anything! •Where are your views? ▪ Check their -frame
111. Help, I Don’t See Anything! •Where are your views? ▪ Check their -frame •What constraints are making them that size? ▪ Output [view constraintsAffectingLayoutForOrientation/Axis: NSLayoutConstraintOrientationHorizontal/Vertical]
112. Help, I Don’t See Anything! •Where are your views? ▪ Check their -frame •What constraints are making them that size? ▪ Output [view constraintsAffectingLayoutForOrientation/Axis: NSLayoutConstraintOrientationHorizontal/Vertical] 0 or 1
113. Help, I Don’t See Anything! •Where are your views? ▪ Check their -frame •What constraints are making them that size? ▪ Output [view constraintsAffectingLayoutForOrientation/Axis: NSLayoutConstraintOrientationHorizontal/Vertical] •Is the layout ambiguous? ▪ Call [view hasAmbiguousLayout] ▪ Call [view exerciseAmbiguityInLayout] 0 or 1
114. Help, I Don’t See Anything! •Some layouts are only satisfiable at 0 size!
115. Help, I Don’t See Anything! •Some layouts are only satisfiable at 0 size! foo.width = bar.width * 2 bar.width = foo.width * 3
116. Help, I Don’t See Anything! •Some layouts are only satisfiable at 0 size! foo.width = bar.width * 2 bar.width = foo.width * 3 foo.width = bar.width = 0
117. Demo
118. Auto Layout •Thinking in constraints ▪ Transitioning to constraints •Debugging constraint-based layouts ▪ Ambiguity ▪ Unsatisfiability ▪ Reading log messages •Unleashing the power of constraints ▪ Animation ▪ Writing a custom control ▪ Internationalization
119. Anatomy of an Unsatisfiability Log
120. Anatomy of an Unsatisfiability Log Unable to simultaneously satisfy constraints: ( "<NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 )>", "<NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )> Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger.
121. Unable to simultaneously satisfy constraints: ( "<NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 )>", "<NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )> Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger. Anatomy of an Unsatisfiability Log
122. Unable to simultaneously satisfy constraints: ( "<NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 )>", "<NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )> Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger. Anatomy of an Unsatisfiability Log
123. Anatomy of an Unsatisfiability Log Unable to simultaneously satisfy constraints: ( "<NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 )>", "<NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )> Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger.
124. Anatomy of an Unsatisfiability Log Unable to simultaneously satisfy constraints: ( "<NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 )>", "<NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )> Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger.
125. Anatomy of an Unsatisfiability Log Unable to simultaneously satisfy constraints: ( "<NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 )>", "<NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )> Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger.
126. Anatomy of an Unsatisfiability Log Unable to simultaneously satisfy constraints: ( "<NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 )>", "<NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )> Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger.
127. Anatomy of an Unsatisfiability Log Unable to simultaneously satisfy constraints: ( "<NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 )>", "<NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )> Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger.
128. Anatomy of an Unsatisfiability Log Unable to simultaneously satisfy constraints: ( "<NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 )>", "<NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x10441ce70 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX + 170 (Names: LetterView-'H':0x10423c390 )> Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger.
129. Anatomy of an Unsatisfiability Log "<NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile: 0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 )>",
130. Anatomy of an Unsatisfiability Log NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 )
131. NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log
132. NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log Constraint’s address
133. NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log
134. NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log Map from identifier to view
135. NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log Map from identifier to view •View identifiers make logs easier to read
136. NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log Map from identifier to view •View identifiers make logs easier to read
137. NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log Map from identifier to view •View identifiers make logs easier to read
138. NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log
139. NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log View’s identifier
140. NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log View’s identifier Attribute
141. NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log View’s identifier Attribute Relation
142. NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log View’s identifier Attribute Relation Other View
143. NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log View’s identifier Attribute Relation Other View Constant
144. NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log View’s identifier Attribute Relation Other View Constant “The letter view’s center should be 11 points to the left of the pile’s center”
145. Anatomy of an Unsatisfiability Log
146. Anatomy of an Unsatisfiability Log •Logs use the visual format syntax when possible
147. Anatomy of an Unsatisfiability Log •Logs use the visual format syntax when possible H:[NSView:0x102b5b3a0(250)]
148. Anatomy of an Unsatisfiability Log •Logs use the visual format syntax when possible H:[NSView:0x102b5b3a0(250)] “The view’s width is 250”
149. Anatomy of an Unsatisfiability Log •Logs use the visual format syntax when possible H:[NSView:0x102b5b3a0(250)] H:[NSView:0x10480cd00]-(>=50)-[NSView:0x10481e9a0]> “The view’s width is 250”
150. Anatomy of an Unsatisfiability Log •Logs use the visual format syntax when possible H:[NSView:0x102b5b3a0(250)] H:[NSView:0x10480cd00]-(>=50)-[NSView:0x10481e9a0]> “The view’s width is 250” “This view is at least 50 points to the right of that view”
151. Anatomy of an Unsatisfiability Log
152. Anatomy of an Unsatisfiability Log <NSAutoresizingMaskLayoutConstraint:0x10590a360 h=-&- v=&-- V:[NSView:0x102e2af20(50)]>
153. Anatomy of an Unsatisfiability Log <NSAutoresizingMaskLayoutConstraint:0x10590a360 h=-&- v=&-- V:[NSView:0x102e2af20(50)]> • translatesAutoresizingMaskIntoConstraints is on for this view
154. Anatomy of an Unsatisfiability Log <NSAutoresizingMaskLayoutConstraint:0x10590a360 h=-&- v=&-- V:[NSView:0x102e2af20(50)]> • translatesAutoresizingMaskIntoConstraints is on for this view •That produces more than one constraint Autoresizing Mask
155. Anatomy of an Unsatisfiability Log <NSAutoresizingMaskLayoutConstraint:0x10590a360 h=-&- v=&-- V:[NSView:0x102e2af20(50)]> • translatesAutoresizingMaskIntoConstraints is on for this view •That produces more than one constraint Autoresizing Mask
156. Anatomy of an Unsatisfiability Log <NSAutoresizingMaskLayoutConstraint:0x10590a360 h=-&- v=&-- V:[NSView:0x102e2af20(50)]> • translatesAutoresizingMaskIntoConstraints is on for this view •That produces more than one constraint Autoresizing Mask “This view’s height is 50.”
157. <NSAutoresizingMaskLayoutConstraint:0x103b25030 h=-&- v=&-- H:|-(200)-[NSView:0x103b25090] (Names: '|':FlippedView:0x102e163f0 )>
158. <NSAutoresizingMaskLayoutConstraint:0x103b25030 h=-&- v=&-- H:|-(200)-[NSView:0x103b25090] (Names: '|':FlippedView:0x102e163f0 )> Autoresizing constraint
159. <NSAutoresizingMaskLayoutConstraint:0x103b25030 h=-&- v=&-- H:|-(200)-[NSView:0x103b25090] (Names: '|':FlippedView:0x102e163f0 )> Autoresizing constraint Autoresizing mask
160. <NSAutoresizingMaskLayoutConstraint:0x103b25030 h=-&- v=&-- H:|-(200)-[NSView:0x103b25090] (Names: '|':FlippedView:0x102e163f0 )>
161. <NSAutoresizingMaskLayoutConstraint:0x103b25030 h=-&- v=&-- H:|-(200)-[NSView:0x103b25090] (Names: '|':FlippedView:0x102e163f0 )> Horizontal
162. <NSAutoresizingMaskLayoutConstraint:0x103b25030 h=-&- v=&-- H:|-(200)-[NSView:0x103b25090] (Names: '|':FlippedView:0x102e163f0 )> Horizontal 200 points between
163. <NSAutoresizingMaskLayoutConstraint:0x103b25030 h=-&- v=&-- H:|-(200)-[NSView:0x103b25090] (Names: '|':FlippedView:0x102e163f0 )> Horizontal 200 points between this view’s left edge
164. <NSAutoresizingMaskLayoutConstraint:0x103b25030 h=-&- v=&-- H:|-(200)-[NSView:0x103b25090] (Names: '|':FlippedView:0x102e163f0 )> Horizontal 200 points between this view’s left edge Superview
165. <NSAutoresizingMaskLayoutConstraint:0x103b25030 h=-&- v=&-- H:|-(200)-[NSView:0x103b25090] (Names: '|':FlippedView:0x102e163f0 )>
166. <NSAutoresizingMaskLayoutConstraint:0x103b25030 h=-&- v=&-- H:|-(200)-[NSView:0x103b25090] (Names: '|':FlippedView:0x102e163f0 )> Superview’s description
167. <NSAutoresizingMaskLayoutConstraint:0x103b25030 h=-&- v=&-- H:|-(200)-[NSView:0x103b25090] (Names: '|':FlippedView:0x102e163f0 )>
168. <NSAutoresizingMaskLayoutConstraint:0x103b25030 h=-&- v=&-- H:|-(200)-[NSView:0x103b25090] (Names: '|':FlippedView:0x102e163f0 )> “This view’s left edge is 200 points from that of its superview, which is a FlippedView”
169. Auto Layout •Thinking in constraints ▪ Transitioning to constraints •Debugging constraint-based layouts ▪ Ambiguity ▪ Unsatisfiability ▪ Reading log messages •Unleashing the power of constraints ▪ Animation ▪ Writing a custom control ▪ Internationalization
170. Auto Layout •Thinking in constraints ▪ Transitioning to constraints •Debugging constraint based-layouts ▪ Ambiguity ▪ Unsatisfiability ▪ Reading log messages •Unleashing the power of constraints ▪ Animation ▪ Writing a custom control ▪ Internationalization
171. Animation
172. Animation •How do you animate layout changes?
173. Animation •How do you animate layout changes? •Apply the new layout and let CoreAnimation handle animation ▪ Very fast ▪ May transiently appear to violate constraints
174. Animation •How do you animate layout changes? •Apply the new layout and let CoreAnimation handle animation ▪ Very fast ▪ May transiently appear to violate constraints •Animate constraints directly ▪ Pretty fast ▪ Produces a correct layout at every frame
175. Animation
176. Animation
177. Animation ≥20 ≥20 100@250
178. Animation ≥20 ≥20 100@250
179. Animation ≥20 ≥20 100@250
180. Animation ≥20 ≥20 100@250 Auto Layout
181. Animation ≥20 ≥20 100@250 Auto Layout CoreAnimation
182. Animation with CoreAnimation
183. Animation with CoreAnimation •Adjust your constraints •Within an animation block, call [view layoutIfNeeded] on iOS [view layoutSubtreeIfNeeded] on OS X
184. Animation with CoreAnimation •NSView [NSAnimationContext runAnimationGroup:^(NSAnimationContext *context) { [context setDuration:0.5]; [context setAllowsImplicitAnimation:YES]; [view layoutSubtreeIfNeeded]; } completionHandler:nil] •UIView [UIView animateWithDuration:0.5 animations:^{ [view layoutIfNeeded]; }]
185. Animation with NSLayoutConstraint
186. Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end
187. Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end •The constant may be modified after creation
188. Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end •The constant may be modified after creation •Permits efficient relayouts
189. Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end •The constant may be modified after creation •Permits efficient relayouts •Use an NSTimer
190. Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end •The constant may be modified after creation •Permits efficient relayouts •Use an NSTimer constraint.constant += 10
191. Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end •The constant may be modified after creation •Permits efficient relayouts •Use an NSTimer •Use the animator proxy constraint.constant += 10
192. Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end •The constant may be modified after creation •Permits efficient relayouts •Use an NSTimer •Use the animator proxy constraint.constant += 10 constraint.animator.constant = 10
193. Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end •The constant may be modified after creation •Permits efficient relayouts •Use an NSTimer •Use the animator proxy constraint.constant += 10 constraint.animator.constant = 10 OS X only
194. Demo
195. Auto Layout •Thinking in constraints ▪ Transitioning to constraints •Debugging constraint-based layouts ▪ Ambiguity ▪ Unsatisfiability ▪ Reading log messages •Unleashing the power of constraints ▪ Animation ▪ Writing a custom control ▪ Internationalization
196. Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect
197. Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Push Me
198. Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Push Me Push Me Push Me Push Me
199. Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Push Me Push Me Push Me ? ? ? Push Me
200. Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Push Me Frame Alignment Rect
201. Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect
202. Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Edit
203. Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Edit
204. Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Edit 4
205. Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Edit 4
206. Alignment Rects
207. Alignment Rects •You can convert between alignment rects and frames @implementation (NS,UI)View - (CGRect)alignmentRectForFrame:(CGRect)frame - (CGRect)frameForAlignmentRect:(CGRect)alignmentRect
208. Intrinsic Content Size
209. Intrinsic Content Size •Many views are equally happy at any size •Some views have a preferred size sizeToFit sizeThatFits: •In Auto Layout, this is the intrinsicContentSize
210. Intrinsic Content Size •Many views are equally happy at any size •Some views have a preferred size sizeToFit sizeThatFits: •In Auto Layout, this is the intrinsicContentSize Push Me
211. Intrinsic Content Size •Many views are equally happy at any size •Some views have a preferred size sizeToFit sizeThatFits: •In Auto Layout, this is the intrinsicContentSize Push Me
212. Intrinsic Content Size •Many views are equally happy at any size •Some views have a preferred size sizeToFit sizeThatFits: •In Auto Layout, this is the intrinsicContentSize Push Me ?
213. Intrinsic Content Size •An intrinsic content size generates two constraints per dimension Push Me 120 25 H:[button(>=120] H:[button(<=120] V:[button(>=25)] V:[button(<=25)]
214. Intrinsic Content Size •An intrinsic content size generates two constraints per dimension Push Me 120 25 H:[button(>=120] H:[button(<=120] V:[button(>=25)] V:[button(<=25)] Compression Resistance
215. Intrinsic Content Size •An intrinsic content size generates two constraints per dimension Push Me 120 25 H:[button(>=120] H:[button(<=120] V:[button(>=25)] V:[button(<=25)] Compression Resistance Content Hugging
216. Intrinsic Content Size •An intrinsic content size generates two constraints per dimension Push Me 120 25 H:[button(>=120] H:[button(<=120] V:[button(>=25)] V:[button(<=25)] •This is sufficient to unambiguously size the view! Compression Resistance Content Hugging
217. Intrinsic Content Size •Why two constraints? •Because they can have different priorities!
218. Intrinsic Content Size •Why two constraints? •Because they can have different priorities! This is a label
219. Intrinsic Content Size •Why two constraints? •Because they can have different priorities! This is a label This is a label
220. Intrinsic Content Size •Why two constraints? •Because they can have different priorities! This is a label This is… This is a label
221. Intrinsic Content Size •Why two constraints? •Because they can have different priorities! This is a label This is… This is a label •Low content hugging priority, high compression resistance priority
222. Intrinsic Content Size •Why two constraints? •Because they can have different priorities! •High content hugging priority, high compression resistance priority Push Me Push Me Pus…
223. Intrinsic Content Size •Intrinsic content size is not settable •The constraint priorities are settable
224. Intrinsic Content Size •Intrinsic content size is not settable •The constraint priorities are settable
225. Intrinsic Content Size •Intrinsic content size is not settable •The constraint priorities are settable
226. Intrinsic Content Size •Intrinsic content size is not settable •The constraint priorities are settable @implementation NSView - (void)setContentHuggingPriority:(NSLayoutPriority)priority forOrientation:(NSLayoutConstraintOrientation)orientation; - (void)setContentCompressionResistancePriority:(NSLayoutPriority)priority forOrientation:(NSLayoutConstraintOrientation)orientation; @end
227. Intrinsic Content Size •Intrinsic content size is not settable •The constraint priorities are settable @implementation UIView - (void)setContentHuggingPriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis; - (void)setContentCompressionResistancePriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis; @end
228. Intrinsic Content Size Short Label
229. Intrinsic Content Size Short Label Longer L…
230. Intrinsic Content Size •The view calls [self invalidateIntrinsicContentSize] whenever its content changes •Auto Layout reestablishes the sizing constraints •If you implement a custom control, call this whenever your intrinsicContentSize might change Short Label Longer L…
231. Intrinsic Content Size •The view calls [self invalidateIntrinsicContentSize] whenever its content changes •Auto Layout reestablishes the sizing constraints •If you implement a custom control, call this whenever your intrinsicContentSize might change Short Label Longer L… Longer Longer Label
232. Intrinsic Content Size
233. Intrinsic Content Size intrinsicContentSize as a better sizeToFit
234. Intrinsic Content Size intrinsicContentSize as a better sizeToFit •sizeToFit must preserve binary compatibility •It may be wrong for the current artwork •intrinsicContentSize can change •Use intrinsicContentSize as a better sizeToFit
235. Intrinsic Content Size intrinsicContentSize as a better sizeToFit •sizeToFit must preserve binary compatibility •It may be wrong for the current artwork •intrinsicContentSize can change •Use intrinsicContentSize as a better sizeToFit NSRect alignmentRect = (NSRect){NSZeroPoint, [control intrinsicContentSize]}; [control setFrameSize: [control frameForAlignmentRect:alignmentRect].size];
236. Override intrinsicContentSize Writing a Custom Control
237. Override intrinsicContentSize Writing a Custom Control •Do ▪ Measure text or images ▪ Hard-code values
238. Override intrinsicContentSize Writing a Custom Control •Do ▪ Measure text or images ▪ Hard-code values •Do not ▪ Inspect your position, size, or constraints ▪ Call super and “tweak” its value ▪ Use it as a substitute for explicit constraints
239. Indicate your alignment rect Writing a Custom Control
240. Indicate your alignment rect Writing a Custom Control •Do ▪ Consider using the default implementation ▪ Override - (NS/UIEdgeInsets)alignmentRectInsets;
241. Indicate your alignment rect Writing a Custom Control •Do ▪ Consider using the default implementation ▪ Override - (NS/UIEdgeInsets)alignmentRectInsets; •Do not ▪ Inspect your position, size, or constraints ▪ Call super and “tweak” its value ▪ Use it as a substitute for explicit constraints
242. Overriding layout / layoutSubviews
243. Overriding layout / layoutSubviews -layout sets the receiver’s frame to the values determined by the constraints NSView
244. Overriding layout / layoutSubviews -layout sets the receiver’s frame to the values determined by the constraints NSView -layoutSubviews sets the receiver’s center and bounds to the values determined by the constraints UIView
245. Overriding layout / layoutSubviews •Afterwards, the constraints and frames agree •Override it to do custom layout as long as you maintain that invariant -layout sets the receiver’s frame to the values determined by the constraints NSView -layoutSubviews sets the receiver’s center and bounds to the values determined by the constraints UIView
246. Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy
247. Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy
248. Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy
249. Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy
250. Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy
251. Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy
252. Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy
253. Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy •Override -layout / -layoutSubviews •Call super •Inspect the resulting view positions and sizes •Adjust subviews and constraints •Call super again •Repeat!
254. Demo
255. Auto Layout •Thinking in constraints ▪ Transitioning to constraints •Debugging constraint-based layouts ▪ Ambiguity ▪ Unsatisfiability ▪ Reading log messages •Unleashing the power of constraints ▪ Animation ▪ Writing a custom control ▪ Internationalization
256. Internationalization
257. Internationalization •Auto Layout makes internationalization easier ▪ Controls size according to their content ▪ The same constraints still work across different localizations
258. Internationalization •Auto Layout makes internationalization easier ▪ Controls size according to their content ▪ The same constraints still work across different localizations Save Cancel
259. Internationalization •Auto Layout makes internationalization easier ▪ Controls size according to their content ▪ The same constraints still work across different localizations Sichern Abbrechen
260. Internationalization •One nib can now service multiple localizations •Control content is translated with a strings file at runtime •You can fall back to separate nibs when necessary Sichern Abbrechen
261. Internationalization •Right-to-left support is built in •The leading and trailing edges flip under right-to-left localizations Sichern Abbrechen
262. !"# ء%&'إ Internationalization •Right-to-left support is built in •The leading and trailing edges flip under right-to-left localizations Sichern Abbrechen
263. Demo
264. Summary •Auto Layout allows for powerful layout with less (or no) code •Think declaratively •Be wary of ambiguity and unsatisfiability •The log messages are there to help •Judicious overriding lets your custom views integrate with Auto Layout •Localize with a single nib and multiple strings files
265. More Information Paul Marcos Frameworks Evangelist pmarcos@apple.com Documentation Cocoa Auto Layout Guide http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AutolayoutPG/ Apple Developer Forums http://devforums.apple.com
266. Related Sessions Auto Layout by Example Mission Thursday 11:30AM
267. Labs Auto Layout Lab App Services Lab B Thursday 2:00PM