Mysteries of Auto Layout, Part 1

Transcription

1 App Frameworks #WWDC15 Mysteries of Auto Layout, Part 1 Session 218 Jason Yao Interface Builder Engineer Kasia Wawer ios Keyboards Engineer 2015 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2 Auto Layout

3 Auto Layout

4 Getting Started with Auto Layout? See previous WWDC sessions on

5 Outline Part 1 Morning Maintainable Layouts Changing Constraints View Sizing Self-Sizing Table View Cells Priorities Alignment Part 2 Afternoon The Layout Cycle Legacy Layout Constraint Creation Constraining Negative Space Unsatisfiable Constraints Resolving Ambiguity

6 Outline Part 1 Morning Maintainable Layouts Changing Constraints View Sizing Self-Sizing Table View Cells Priorities Alignment Part 2 Afternoon The Layout Cycle Legacy Layout Constraint Creation Constraining Negative Space Unsatisfiable Constraints Resolving Ambiguity

7 Maintainable Layouts Mystery #1

8 Constraints Spacing and alignment Mysteries of Auto Layout

9 Constraints Spacing and alignment Mysteries of Auto Layout Mysteries of Auto Layout

10

11 Many Constraints

12 Stack View UIStackView (ios 9) and NSStackView (OS X 10.9) stackstacktest Build stackstacktest: Succeeded Today at 3:05

13 Stack View

14 Stack View Built with Auto Layout

15 Stack View Built with Auto Layout Manages constraints

16 Stack View Built with Auto Layout Manages constraints Horizontal or vertical

17 Stack View Alignment

18 Stack View Alignment

19 Stack View Distribution

20

21 Demo Stack View in Interface Builder

22 Animate // ios 9 UIView.animateWithDuration(1.0) { () -> Void in self.subviewtohide.hidden =!self.subviewtohide.hidden }

23 Animate // ios 9 UIView.animateWithDuration(1.0) { () -> Void in self.subviewtohide.hidden =!self.subviewtohide.hidden }

24 Animate // ios 9 UIView.animateWithDuration(1.0) { self.subviewtohide.hidden =!self.subviewtohide.hidden } // OS X NSAnimationContext.runAnimationGroup({ context in context.duration = 1.0 self.subviewtohide.animator().hidden =!self.subviewtohide.hidden }, completionhandler: nil)

25 API // ios 9 class UIStackView { var axis:uilayoutconstraintaxis var distribution:uistackviewdistribution var alignment:uistackviewalignment var spacing:cgfloat func addarrangedsubview(view: UIView) var arrangedsubviews:[uiview] } // OS X class NSStackView { var orientation:nsuserinterfaceorientation var distribution:nsstackviewdistribution var alignment:nslayoutattribute var spacing:cgfloat func addarrangedsubview(view: NSView) var arrangedsubviews:[nsview] }

26 API // ios 9 class UIStackView { var axis:uilayoutconstraintaxis var distribution:uistackviewdistribution var alignment:uistackviewalignment var spacing:cgfloat func addarrangedsubview(view: UIView) var arrangedsubviews:[uiview] } // OS X class NSStackView { var orientation:nsuserinterfaceorientation var distribution:nsstackviewdistribution var alignment:nslayoutattribute var spacing:cgfloat func addarrangedsubview(view: NSView) var arrangedsubviews:[nsview] }

27 Stack View in Interface Builder

28 Stack View in Interface Builder Easy to build

29 Stack View in Interface Builder Easy to build Easy to maintain

30 Stack View in Interface Builder Easy to build Easy to maintain Composable Stack Views

31 Stack View in Interface Builder Easy to build Easy to maintain Composable Stack Views Lightweight

32 Before and After Before, many constraints

33 Before and After After, four constraints with Stack View

34 Start with Stack View, use constraints as needed

35 Feeding the Layout Engine Mysteries of Auto Layout, part 1 Kasia Wawer ios Keyboards Engineer

36 Getting from Constraints to Layout Views Constraints in IB Constraints in VFL Explicit constraints

37 Getting from Constraints to Layout Views Constraints in IB??? Constraints in VFL Explicit constraints

38 Getting from Constraints to Layout Views Constraints in IB Constraints in VFL??? Your Layout Explicit constraints

39 Getting from Constraints to Layout Views Constraints in IB Constraints in VFL??? Your Layout? Explicit constraints

40 Getting from Constraints to Layout???

41 Getting from Constraints to Layout???

42 Changing Constraints Mystery #2

43 Activate and Deactivate

44 Activate and Deactivate Constraints find their own container

45 Activate and Deactivate Constraints find their own container Adds constraints efficiently

46 Activate and Deactivate Constraints find their own container Adds constraints efficiently Do not need to own all views

47 Activate and Deactivate

48 Activate and Deactivate Add and remove

49 Activate and Deactivate Activate and deactivate

50 Things to Keep in Mind

51 Things to Keep in Mind Never deactivate self.view.constraints

52 Things to Keep in Mind Never deactivate self.view.constraints Not all of those constraints belong to you

53 Things to Keep in Mind Never deactivate self.view.constraints Not all of those constraints belong to you Weird things will happen

54 Things to Keep in Mind Never deactivate self.view.constraints Not all of those constraints belong to you Weird things will happen Just don t do it!

55 Things to Keep in Mind Never deactivate self.view.constraints Not all of those constraints belong to you Weird things will happen Just don t do it! Keep references to constraints that change

56 Demo Changing constraints

57 Changing Constraints

58 Changing Constraints Never deactivate self.view.constraints

59 Changing Constraints Never deactivate self.view.constraints Keep references to constraints

60 Changing Constraints Never deactivate self.view.constraints Keep references to constraints Animate changing constraints with view animation

61 Building the Layout Views Constraints in IB Constraints in VFL Layout Engine Explicit constraints

62 View Sizing Mystery #3

63 View Size Intrinsic content size Content size Label text Content size

64 View Size Intrinsic content size Certain views have an intrinsiccontentsize For instance labels and image views Content size Label text Content size

65 View Size Intrinsic content size Certain views have an intrinsiccontentsize For instance labels and image views Size derived from non-constraint internals Content size Label text Content size

66 View Size Intrinsic content size Certain views have an intrinsiccontentsize For instance labels and image views Size derived from non-constraint internals Content size Label text System makes the size constraints Content size

67 View Size Intrinsic content size Certain views have an intrinsiccontentsize For instance labels and image views Size derived from non-constraint internals Content size Label text System makes the size constraints Layout size is not guaranteed Content size

68 View Size Defining a particular view size

69 View Size Defining a particular view size Use constraints first

70 View Size Defining a particular view size Use constraints first Override intrinsiccontentsize for specific reasons

71 View Size Defining a particular view size Use constraints first Override intrinsiccontentsize for specific reasons If size information does not come from constraints

72 View Size Defining a particular view size Use constraints first Override intrinsiccontentsize for specific reasons If size information does not come from constraints If view has custom drawing (sometimes)

73 View Size Defining a particular view size Use constraints first Override intrinsiccontentsize for specific reasons If size information does not come from constraints If view has custom drawing (sometimes) You will be responsible for invalidating

74 View Size Defining a particular view size Use constraints first Override intrinsiccontentsize for specific reasons If size information does not come from constraints If view has custom drawing (sometimes) You will be responsible for invalidating Size can change with size class changes

75 Example

76 Example widthconstraint = NSLayoutConstraint(item: imageview, attribute:.width, relatedby:.equal, toitem: self.view, attribute:.width, multiplier: 0.75, constant: 0.0) Width Proportion

77 Example widthconstraint = NSLayoutConstraint(item: imageview, attribute:.width, relatedby:.equal, toitem: self.view, attribute:.width, multiplier: 0.75, constant: 0.0) Width Proportion

78 Example widthconstraint = NSLayoutConstraint(item: imageview, attribute:.width, relatedby:.equal, toitem: self.view, attribute:.width, multiplier: 0.75, constant: 0.0) Height Proportion heightconstraint = NSLayoutConstraint(item: imageview, attribute:.height, relatedby:.equal, toitem: imageview, attribute:.width, multiplier: 1.5, constant: 0.0)

79 Example widthconstraint = NSLayoutConstraint(item: imageview, attribute:.width, relatedby:.equal, toitem: self.view, attribute:.width, multiplier: 0.75, constant: 0.0) Height Proportion heightconstraint = NSLayoutConstraint(item: imageview, attribute:.height, relatedby:.equal, toitem: imageview, attribute:.width, multiplier: 1.5, constant: 0.0)

80 Self-Sizing Table View Cells Mystery #4

81 Self-Sizing Table View Cells

82 Self-Sizing Table View Cells Self-sizing needs size from constraints

83 Self-Sizing Table View Cells Self-sizing needs size from constraints Width is defined with table view cells

84 Self-Sizing Table View Cells Self-sizing needs size from constraints Width is defined with table view cells Constraints must determine height

85 Self-Sizing Table View Cells Self-sizing needs size from constraints Width is defined with table view cells Constraints must determine height Take advantage of proportions

86 Self-Sizing Table View Cells Self-sizing needs size from constraints Width is defined with table view cells Constraints must determine height Take advantage of proportions

87 Self-Sizing Table View Cells Self-sizing needs size from constraints Width is defined with table view cells Constraints must determine height Take advantage of proportions

88 Self-Sizing Table View Cells Self-sizing needs size from constraints Width is defined with table view cells Constraints must determine height Take advantage of proportions

89 Demo Self-sizing Table View Cells

90 View Sizing

91 View Sizing Certain views have an intrinsiccontentsize

92 View Sizing Certain views have an intrinsiccontentsize Constraints should define size when possible

93 View Sizing Certain views have an intrinsiccontentsize Constraints should define size when possible For self-sizing views, define size fully in constraints

94 Building the Layout Views Constraints in IB Constraints in VFL Layout Engine Explicit constraints

95 Building the Layout Sizing constraints Views Constraints in IB Constraints in VFL Layout Engine Explicit constraints

96 Building the Layout Sizing constraints Views Constraints in IB Constraints in VFL Layout Engine Explicit constraints intrinsiccontentsize

97 Priorities Mystery #5

98 Ambiguity Why does it happen?

99 Ambiguity Why does it happen? More than one layout solution

100 Ambiguity Why does it happen? More than one layout solution Not enough constraints

101 Ambiguity Why does it happen? More than one layout solution Not enough constraints

102 Ambiguity Why does it happen? More than one layout solution Not enough constraints

103 Ambiguity Why does it happen? More than one layout solution Not enough constraints Equal, non-required priorities

104 Ambiguity Why does it happen? More than one layout solution Not enough constraints Equal, non-required priorities The engine makes a choice

105 Constraint Priorities

106 Constraint Priorities Priorities go from

107 Constraint Priorities Priorities go from Required is 1000 DefaultHigh is 750 DefaultLow is 250

108 Constraint Priorities Priorities go from Required is -[image]- -[image]-[caption(==image@751)]- " DefaultHigh is 750 DefaultLow is 250

109 Constraint Priorities Priorities go from Required is -[image]- -[image]-[caption(==image@751)]- " DefaultHigh is 750 DefaultLow is 250

110 Constraint Priorities Priorities go from Required is -[image]- -[image]-[caption(==image@751)]- " DefaultHigh is 750 DefaultLow is 250 widthconstraint.priority = UILayoutPriorityDefaultHigh + 10;

111 Constraint Priorities Priorities go from Required is -[image]- -[image]-[caption(==image@751)]- " DefaultHigh is 750 DefaultLow is 250 Highest priority wins widthconstraint.priority = UILayoutPriorityDefaultHigh + 10;

112 Constraint Priorities Priorities go from Required is -[image]- -[image]-[caption(==image@751)]- " DefaultHigh is 750 DefaultLow is 250 Highest priority wins System uses some priorities Set around, not equal to widthconstraint.priority = UILayoutPriorityDefaultHigh + 10;

113 Content Priorities

114 Content Priorities How a view handles its content

115 Content Priorities How a view handles its content By default, these are not set as required Do not set as required Can cause unsatisfiable constraints

116 Content Priorities How a view handles its content By default, these are not set as required Do not set as required Can cause unsatisfiable constraints Equal priorities can cause ambiguity

117 Content Priorities How a view handles its content By default, these are not set as required Do not set as required Can cause unsatisfiable constraints Equal priorities can cause ambiguity answer send answer Types Content hugging

118 Content Priorities How a view handles its content By default, these are not set as required Content hugging priorities Do not set as required Can cause unsatisfiable constraints Equal priorities can cause ambiguity answer send answer Types Content hugging

119 Content Priorities How a view handles its content By default, these are not set as required Content hugging priorities Do not set as required Can cause unsatisfiable constraints Equal priorities can cause ambiguity answer send answer Types Content hugging

120 Content Priorities How a view handles its content By default, these are not set as required Content hugging priorities Do not set as required Can cause unsatisfiable constraints Equal priorities can cause ambiguity answer send answer Types Content hugging

121 Content Priorities How a view handles its content By default, these are not set as required Content hugging priorities Do not set as required Can cause unsatisfiable constraints Equal priorities can cause ambiguity answer send answer Types Content hugging

122 Content Priorities How a view handles its content By default, these are not set as required Content hugging priorities Do not set as required Can cause unsatisfiable constraints Equal priorities can cause ambiguity answer send answer Types Content hugging

123 Content Priorities How a view handles its content By default, these are not set as required Content hugging priorities Do not set as required Can cause unsatisfiable constraints Equal priorities can cause ambiguity answer send answer Types Content hugging

124 Content Priorities How a view handles its content By default, these are not set as required Content hugging priorities Do not set as required Can cause unsatisfiable constraints Equal priorities can cause ambiguity answer send answer Types Content hugging

125 Content Priorities How a view handles its content By default, these are not set as required Content hugging priorities Do not set as required Can cause unsatisfiable constraints Equal priorities can cause ambiguity answer send answer Types Content hugging

126 Content Priorities How a view handles its content By default, these are not set as required Do not set as required Can cause unsatisfiable constraints Equal priorities can cause ambiguity Types Content hugging Compression resistance

127 Content Priorities How a view handles its content Compression resistance priorities By default, these are not set as required Do not set as required Can cause unsatisfiable constraints Equal priorities can cause ambiguity red Types Content hugging Compression resistance

128 Content Priorities How a view handles its content Compression resistance priorities By default, these are not set as required Do not set as required Can cause unsatisfiable constraints Equal priorities can cause ambiguity czerw Types Content hugging Compression resistance

129 Content Priorities How a view handles its content Compression resistance priorities By default, these are not set as required Do not set as required Can cause unsatisfiable constraints Equal priorities can cause ambiguity czerwony Types Content hugging Compression resistance

130 Priorities

131 Priorities Can help keep constraints from unsatisfiability

132 Priorities Can help keep constraints from unsatisfiability But look out for competing priorities!

133 Priorities Can help keep constraints from unsatisfiability But look out for competing priorities! Results are more consistent

134 Priorities Can help keep constraints from unsatisfiability But look out for competing priorities! Results are more consistent Use content priorities to get to the right layout

135 Priorities Can help keep constraints from unsatisfiability But look out for competing priorities! Results are more consistent Use content priorities to get to the right layout Hugging priorities hug content

136 Priorities Can help keep constraints from unsatisfiability But look out for competing priorities! Results are more consistent Use content priorities to get to the right layout Hugging priorities hug content Compression resistance resists squishing

137 Building the Layout Sizing constraints Views Constraints in IB Constraints in VFL Layout Engine Explicit constraints intrinsiccontentsize

138 Building the Layout Sizing constraints Constraint priorities Views Constraints in IB Constraints in VFL Layout Engine Explicit constraints intrinsiccontentsize

139 Building the Layout Constraint priorities Content priorities Sizing constraints Views Constraints in IB Constraints in VFL Layout Engine Explicit constraints intrinsiccontentsize

140 Alignment Mystery #6

141 Aligning Baselines

142 Aligning Baselines Use firstbaseline and lastbaseline

143 Aligning Baselines Use firstbaseline and lastbaseline Aligns text better than top or bottom

144 Aligning Baselines Use firstbaseline and lastbaseline Aligns text better than top or bottom Better control over changing views

145 Aligning Baselines Use firstbaseline and lastbaseline Aligns text better than top or bottom Better control over changing views Label aligned to button by bottom Button

146 Aligning Baselines Use firstbaseline and lastbaseline Aligns text better than top or bottom Better control over changing views Label aligned to button by bottom Add second line of text and a third while we re at it Button

147 Aligning Baselines Use firstbaseline and lastbaseline Aligns text better than top or bottom Better control over changing views Label aligned to button by bottom Add second line of text and a third while we re at it Button

148 Aligning Baselines Use firstbaseline and lastbaseline Aligns text better than top or bottom Better control over changing views Label aligned to button by bottom Add second line of text and a third while we re at it Button

149 Aligning Baselines Use firstbaseline and lastbaseline Aligns text better than top or bottom Better control over changing views Label aligned to button by bottom Add second line of text and a third while we re at it Button

150 Aligning Baselines Use firstbaseline and lastbaseline Aligns text better than top or bottom Better control over changing views Label aligned to button by bottom Button Add second line of text and a third while we re at it

151 Leading and Trailing One of the best photos I took on the trip. I love how the water looks like mist! Rate: Add comment

152 Leading and Trailing Use leading/trailing instead of left/right Helps with prep for localization One of the best photos I took on the trip. I love how the water looks like mist! Rate: Add comment

153 Leading and Trailing Tied to left and right Use leading/trailing instead of left/right Helps with prep for localization یکی از بهترین عکس.هایی که در سفر گرفتم حالت آب را که شبیه مه!است خیلی دوست دارم پیشنهاد دهید :امتیاز

154 Leading and Trailing Tied Tied to leading to left and right trailing Use leading/trailing instead of left/right Helps with prep for localization یکی از یکی از بهترین بهترین عکس عکس هایی که.هاییدر که در سفر سفر گرفتم. گرفتم حالت آب حالت را که آب را که شبیه مه شبیه مه!استاست خیلی خیلی دوست دوست دارم دارم! امتیاز: پیشنهاد دهید

155 Alignment Rects Tap to choose character

156 Alignment Rects Usually (not always) same as frame Tap to choose character

157 Alignment Rects Usually (not always) same as frame Includes the critical content only Tap to choose character

158 Alignment Rects Usually (not always) same as frame Includes the critical content only Does not change when view is transformed Tap to choose character

159 Alignment Rects Usually (not always) same as frame Includes the critical content only Does not change when view is transformed Tap to choose character

160 Alignment Rects Usually (not always) same as frame Includes the critical content only Does not change when view is transformed Override alignmentrectinsets if needed Tap to choose character

161 Alignment Rects Usually (not always) same as frame Includes the critical content only Does not change when view is transformed Override alignmentrectinsets if needed Find out the calculated rects Tap to choose character

162 Alignment Rects Usually (not always) same as frame Includes the critical content only Does not change when view is transformed Override alignmentrectinsets if needed Find out the calculated rects Use Show Alignment Rectangles in Debug menu

163 Alignment Rects Usually (not always) same as frame Includes the critical content only Does not change when view is transformed Override alignmentrectinsets if needed Find out the calculated rects Use Show Alignment Rectangles in Debug menu

164 Alignment Rects Usually (not always) same as frame Includes the critical content only Does not change when view is transformed Override alignmentrectinsets if needed Find out the calculated rects Use Show Alignment Rectangles in Debug menu Get using alignmentrectforframe:

165 Alignment Rects Usually (not always) same as frame Includes the critical content only Does not change when view is transformed Override alignmentrectinsets if needed Find out the calculated rects Use Show Alignment Rectangles in Debug menu Get using alignmentrectforframe: More in Part 2

166 Alignment

167 Alignment First and last baseline for better aligned text

168 Alignment First and last baseline for better aligned text Leading and trailing instead of left and right

169 Alignment First and last baseline for better aligned text Leading and trailing instead of left and right Override alignmentrectinsets to adjust alignment rects

170 Building the Layout Constraint priorities Content priorities Sizing constraints Views Constraints in IB Constraints in VFL Layout Engine Explicit constraints intrinsiccontentsize

171 Building the Layout Constraint priorities Content priorities Sizing constraints Views Constraints in IB Constraints in VFL Explicit constraints Layout Engine Horizontal alignment Vertical alignment Baseline alignment intrinsiccontentsize

172 Building the Layout Constraint priorities Content priorities Sizing constraints Views Alignment rect insets Constraints in IB Constraints in VFL Explicit constraints Layout Engine Horizontal alignment Vertical alignment Baseline alignment intrinsiccontentsize

173 Building the Layout Layout Engine

174 Building the Layout Layout Engine

175 Building the Layout Layout Engine Alignment The Engine rects

176 Building the Layout Layout Engine Alignment The Engine rects Your Layout

177 Building the Layout Your Layout

178 Summary

179 Summary Stack Views help build easily maintainable layouts

180 Summary Stack Views help build easily maintainable layouts Use activate and deactivate for constraints

181 Summary Stack Views help build easily maintainable layouts Use activate and deactivate for constraints Determine size through constraints

182 Summary Stack Views help build easily maintainable layouts Use activate and deactivate for constraints Determine size through constraints Override intrinsiccontentsize judiciously

183 Summary Stack Views help build easily maintainable layouts Use activate and deactivate for constraints Determine size through constraints Override intrinsiccontentsize judiciously Use priorities to properly solve your layout

184 Summary Stack Views help build easily maintainable layouts Use activate and deactivate for constraints Determine size through constraints Override intrinsiccontentsize judiciously Use priorities to properly solve your layout Alignment goes beyond top, bottom, and center

185 Summary Stack Views help build easily maintainable layouts Use activate and deactivate for constraints Determine size through constraints Override intrinsiccontentsize judiciously Use priorities to properly solve your layout Alignment goes beyond top, bottom, and center Keep localization in mind

186 More Information Documentation and Videos Swift Language Documentation Sample Code AstroLayout prerelease/ios/samplecode/astrolayout Technical Support Apple Developer Forums General Inquiries Paul Marcos, App Frameworks Evangelist

187 Related Sessions Mysteries of Auto Layout, Part 2 Presidio Thursday 1:30PM What s New in Cocoa Presidio Tuesday 1:30PM What s New in UIKit Dynamics and Visual Effects Mission Friday 10:00AM Cocoa Touch Best Practices Presidio Friday 1:30PM What s New in Internationalization Pacific Heights Friday 9:00AM New UIKit Support for International User Interfaces Nob Hill Thursday 2:30PM

188 Labs Interface Builder and Auto Layout Lab Developer Tools Lab C Thursday 2:30PM

189