$30 off During Our Annual Pro Sale. View Details »

Fun With Auto Layout

Fun With Auto Layout

Presentation for Ottawa Cocoaheads 12 June, 2014

Chuck Shnider

June 12, 2014

More Decks by Chuck Shnider

Other Decks in Programming


  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

  5. None
  6. iOS6 Xcode 4.x + Interface Builder

  7. None
  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
  11. None
  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.
  16. None
  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

  21. None
  22. None
  23. None
  24. “Like Game Center for iPad”

  25. None
  26. None
  27. None
  28. UIScrollView Auto Layout Rotation Keyboard Avoidance

  29. Sample Project

  30. None
  31. None
  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

  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