Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. Agenda • Stages I went through learning auto layout •

    Case Study • Stuff I want to learn next
  2. 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.”
  3. 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
  4. 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
  5. 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.
  6. 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!
  7. 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.”
  8. If you can’t rely on the ScrollView • Intrinsic Sizes

    of objects • Hard-coded values • Views outside the scrollview
  9. Scroll View 0 pt space to superview in all directions

    These constraints set scrollview frame only!
  10. Layout Bands • Fixed Height • Explicit top/bottom space constraints

    to scroll view. • Width same as outer view width • Leading/trailing constraints to scroll view
  11. 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
  12. UITextField • Align Baseline to text field • Fixed trailing

    space to text field • >= “aqua” leading space to superview • left-align text UILabel
  13. 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
  14. UITextField • Really Long Labels???? • Weaken the left-align constraint

    for the text field, allowing the width to shrink.
  15. Things to Learn Next • multipliers!! • …together with constants!!

    • Custom container views that implement -intrinsicContentSize • alignmentRects