Fun With Auto Layout

Presentation for Ottawa Cocoaheads 12 June, 2014

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