Fun With Auto Layout

Presentation for Ottawa Cocoaheads 12 June, 2014

Transcript

1. Fun With Auto Layout C. Shnider @cshnider
2. Agenda • Stages I went through learning auto layout • Case Study • Stuff I want to learn next
3. not really a tutorial…
4. My first auto layout app
6. iOS6 Xcode 4.x + Interface Builder
8. Stage One Flail around until you get something working!
9. Flailing… • Over-specified Layouts • Mess around randomly with priorities • Lots of inequality constraints • “I don’t know why I need this, but it makes the debugger spew go away.”
10. Flailing… • Pixels end up in the correct place, but… • Layouts hard to maintain • Layouts hard to animate easily • Layouts do not describe higher-order relationships between views
12. Stage Two Outside-In Layouts
13. More Optimal Than Before • Can cope cleanly with changes in size of outer view • Rotation on iOS or window resize on Mac • Layout captures higher-order relationships between views • Less random crap • Maybe still rely too much on fixed width/height constraints
14. Stage Three Inside-Out / Outside-In Layouts
15. Yet More Optimal Than Before • Can cope cleanly with changes to elements within the view • Localization • User-generated content • Dynamic Type • Design Changes and other maintenance • Things shouldn’t bump into each other or clip unnecessarily.
17. Case Study
18. LightSpeed Cloud for iPad
 
 Login Screen
19. not a design discussion per se
20. The layout is an interesting problem all its own
24. “Like Game Center for iPad”
28. UIScrollView Auto Layout Rotation Keyboard Avoidance
29. Sample Project
32. Almost no code
33. One constraint with 
 non-default priority
34. UIScrollView and Auto Layout • Apple TechNote 2154 • Two Approaches • HYBRID Make a subview with springs + struts, set contentSize to the size of that subview, and use auto layout only within the subview. • PURE Use Layout Constraints for everything!
35. UIScrollView and Auto Layout “Use constraints to lay out the subviews within the scroll view, being sure that the constraints tie to all four edges of the scroll view and do not rely on the scroll view to get their size.”
36. If you can’t rely on the ScrollView • Intrinsic Sizes of objects • Hard-coded values • Views outside the scrollview
37. Outer View size determined by the OS ! adjusts for portrait and landscape
38. Image View 0 pt space to superview in all directions
39. Scroll View 0 pt space to superview in all directions These constraints set scrollview frame only!
40. ScrollView contentSize
41. Layout Bands scrollView’s contentSize completely determined by the layout band constraints.
42. Layout Bands • Fixed Height • Explicit top/bottom space constraints to scroll view. • Width same as outer view width • Leading/trailing constraints to scroll view
43. “hang” other content on the outside of the scrollView
44. Extra Views It’s safe to tie these to the edges of the scrollView
45. Layout of Text Elements
46. Layout Band try and encode much of the smarts in just one of the bands
47. UITextField
48. UITextField • Center Vertically in Layout Band • Fixed trailing space to superview • Leading edge tied to horizontal center of layout band (with offset) • looks decent landscape and portrait
49. UITextField • Align Baseline to text field • Fixed trailing space to text field • >= “aqua” leading space to superview • left-align text UILabel
50. UITextField • Text Field - same width and leading- align • Labels - same width and leading-align • allows labels to expand and still line-up UILabel UITextField UILabel
51. UITextField • Really Long Labels???? • Weaken the left-align constraint for the text field, allowing the width to shrink.
52. Demo
53. Things to Learn Next • multipliers!! • …together with constants!! • Custom container views that implement -intrinsicContentSize • alignmentRects
54. Thank You! https://github.com/chucks/layoutui