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
Tweet

More Decks by Chuck Shnider

Other Decks in Programming

Transcript

  1. Fun With Auto Layout
    C. Shnider
    @cshnider

    View Slide

  2. Agenda
    • Stages I went through learning auto layout
    • Case Study
    • Stuff I want to learn next

    View Slide

  3. not really a tutorial…

    View Slide

  4. My first auto layout app

    View Slide

  5. View Slide

  6. iOS6
    Xcode 4.x + Interface Builder

    View Slide

  7. View Slide

  8. Stage One
    Flail around until you get
    something working!

    View Slide

  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.”

    View Slide

  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

    View Slide

  11. View Slide

  12. Stage Two
    Outside-In Layouts

    View Slide

  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

    View Slide

  14. Stage Three
    Inside-Out / Outside-In
    Layouts

    View Slide

  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.

    View Slide

  16. View Slide

  17. Case Study

    View Slide

  18. LightSpeed Cloud for iPad


    Login Screen

    View Slide

  19. not a design discussion per se

    View Slide

  20. The layout is an interesting
    problem all its own

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. “Like Game Center for iPad”

    View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. UIScrollView
    Auto Layout
    Rotation
    Keyboard Avoidance

    View Slide

  29. Sample Project

    View Slide

  30. View Slide

  31. View Slide

  32. Almost no code

    View Slide

  33. One constraint with 

    non-default priority

    View Slide

  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!

    View Slide

  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.”

    View Slide

  36. If you can’t rely on the ScrollView
    • Intrinsic Sizes of objects
    • Hard-coded values
    • Views outside the scrollview

    View Slide

  37. Outer View
    size determined by
    the OS
    !
    adjusts for portrait
    and landscape

    View Slide

  38. Image View
    0 pt space to
    superview in all
    directions

    View Slide

  39. Scroll View
    0 pt space to
    superview in all
    directions
    These constraints
    set scrollview frame
    only!

    View Slide

  40. ScrollView contentSize

    View Slide

  41. Layout Bands
    scrollView’s contentSize
    completely determined by the
    layout band constraints.

    View Slide

  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

    View Slide

  43. “hang” other content on the
    outside of the scrollView

    View Slide

  44. Extra Views
    It’s safe to tie these to
    the edges of the
    scrollView

    View Slide

  45. Layout of Text Elements

    View Slide

  46. Layout Band
    try and encode much of the
    smarts in just one of the bands

    View Slide

  47. UITextField

    View Slide

  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

    View Slide

  49. UITextField
    • Align Baseline to text field
    • Fixed trailing space to text field
    • >= “aqua” leading space to superview
    • left-align text
    UILabel

    View Slide

  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

    View Slide

  51. UITextField
    • Really Long Labels????
    • Weaken the left-align constraint for the
    text field, allowing the width to shrink.

    View Slide

  52. Demo

    View Slide

  53. Things to Learn Next
    • multipliers!!
    • …together with constants!!
    • Custom container views that implement -intrinsicContentSize
    • alignmentRects

    View Slide

  54. Thank You!
    https://github.com/chucks/layoutui

    View Slide