iOSDevUK: I 💖StackViews

Imagine a world where you get to use the Auto Layout that you know and love, but with less fighting with stabby constraints. Well, with the introduction of iOS 9, that world has arrived in the form of stack views.

We'll get hands-on in this talk - covering the basics of stack views in IB, best practices for approaching layouts, animation and code. If you want to follow along be sure to have Xcode 7 up and running. Or sit back, and enjoy watching somebody else battling with IB for once.

Transcript

1. I Stack
   Views
   …and you should too
   tiny.cc/stacked
   

   View Slide

2. i am
   sam
   @iwantmyrealname
   

   View Slide

3. raywenderlich.com
   

   View Slide

4. take a moment to
   imagine
   

   View Slide

5. Lorem mofo dolizzle bow wow wow
   check it out, consectetuer adipiscing
   mofo. Shut the shizzle up sapien velit,
   shut the shizzle up volutpizzle, black
   tellivizzle, gravida vizzle, you son of a
   bizzle. Pellentesque dizzle tortor. Sed
   erizzle. Its fo rizzle bow wow wow crunk
   dapibizzle da bomb tempizzle tempor.
   Mauris shizznit nibh et crazy. Shiz in fo
   shizzle my nizzle. Pellentesque sure
   rhoncizzle nisi.
   Fashionista
   

   View Slide

6. View Slide

7. Pin to Top
   Pin to Leading
   Pin to Trailing
   Pin to Bottom
   

   View Slide

8. Pin to Top
   Pin to Leading
   Pin to Trailing
   Pin to Bottom
   Vertical Spacing
   Vertical Spacing
   

   View Slide

9. Pin to Top
   Pin to Leading
   Pin to Trailing
   Pin to Bottom
   Centre Align
   Centre Align
   Vertical Spacing
   Vertical Spacing
   

   View Slide

10. Equal Width
    Pin to Top
    Pin to Leading
    Pin to Trailing
    Pin to Bottom
    Centre Align
    Centre Align
    Vertical Spacing
    Vertical Spacing
    

    View Slide

11. nine constraints
    

    View Slide

12. nine constraints
    imagine a world where
    

    View Slide

13. nine constraints
    imagine a world where
    is seven too many
    

    View Slide

14. UIStackView
    introducing
    

    View Slide

15. Lorem mofo dolizzle bow wow wow
    check it out, consectetuer adipiscing
    mofo. Shut the shizzle up sapien velit,
    shut the shizzle up volutpizzle, black
    tellivizzle, gravida vizzle, you son of a
    bizzle. Pellentesque dizzle tortor. Sed
    erizzle. Its fo rizzle bow wow wow crunk
    dapibizzle da bomb tempizzle tempor.
    Mauris shizznit nibh et crazy. Shiz in fo
    shizzle my nizzle. Pellentesque sure
    rhoncizzle nisi.
    Fashionista
    background CC3 © Mark Duncan
    

    View Slide

16. background CC3 © Mark Duncan
    

    View Slide

17. background CC3 © Mark Duncan
    

    View Slide

18. background CC3 © Mark Duncan
    Spacing
    

    View Slide

19. background CC3 © Mark Duncan
    Spacing
    Centre Aligned
    

    View Slide

20. background CC3 © Mark Duncan
    Spacing
    Centre Aligned
    Pin to Top
    Pin to Leading
    

    View Slide

21. background CC3 © Mark Duncan
    Spacing
    Centre Aligned
    Pin to Top
    Pin to Leading
    Pin to Trailing
    Pin to Bottom
    

    View Slide

22. Stack Views
    configuring
    

    View Slide

23. axis
    

    View Slide

24. axis
    vertical
    

    View Slide

25. axis
    vertical horizontal
    

    View Slide

26. spacing
    

    View Slide

27. spacing
    

    View Slide

28. alignment
    

    View Slide

29. alignment
    leading
    

    View Slide

30. alignment
    leading centre
    

    View Slide

31. alignment
    leading centre trailing
    

    View Slide

32. alignment
    top
    

    View Slide

33. alignment
    top
    centre
    

    View Slide

34. alignment
    top
    centre
    bottom
    

    View Slide

35. alignment
    first baseline Aliquizzle boofron fizzle
    a fo shizzle my nizzle
    Its fo
    rizzle
    Phasellus interdum
    fizzle tellus. Ut semper
    adipiscing lorem.
    

    View Slide

36. alignment
    first baseline
    last baseline
    Aliquizzle boofron fizzle
    a fo shizzle my nizzle
    Its fo
    rizzle
    Phasellus interdum
    fizzle tellus. Ut semper
    adipiscing lorem.
    Aliquizzle boofron fizzle
    a fo shizzle my nizzle
    Its fo
    rizzle
    Phasellus interdum
    fizzle tellus. Ut semper
    adipiscing lorem.
    

    View Slide

37. alignment
    fill
    

    View Slide

38. distribution
    

    View Slide

39. distribution
    

    View Slide

40. distribution
    

    View Slide

41. distribution
    fill
    

    View Slide

42. distribution
    fill proportionally
    

    View Slide

43. distribution
    fill equally
    

    View Slide

44. distribution
    equal spacing
    

    View Slide

45. distribution
    equal centering
    

    View Slide

46. Demo
    time for a
    

    View Slide

47. Nesting
    feeling at home with
    

    View Slide

48. Lorem mofo dolizzle bow wow wow
    check it out, consectetuer adipiscing
    mofo. Shut the shizzle up sapien velit,
    shut the shizzle up volutpizzle, black
    tellivizzle, gravida vizzle, you son of a
    bizzle. Pellentesque dizzle tortor. Sed
    erizzle. Its fo rizzle bow wow wow crunk
    dapibizzle da bomb tempizzle tempor.
    Mauris shizznit nibh et crazy. Shiz in fo
    shizzle my nizzle. Pellentesque sure
    rhoncizzle nisi.
    Fashionista
    background CC3 from wikimedia
    

    View Slide

49. Lorem mofo dolizzle bow wow wow
    check it out, consectetuer adipiscing
    mofo. Shut the shizzle up sapien velit,
    shut the shizzle up volutpizzle, black
    tellivizzle, gravida vizzle, you son of a
    bizzle. Pellentesque dizzle tortor. Sed
    erizzle. Its fo rizzle bow wow wow crunk
    dapibizzle da bomb tempizzle tempor.
    Mauris shizznit nibh et crazy.
    Phasellus interdum fizzle tellus. Ut
    semper adipiscing lorem. Donec non
    est. Pimpin' sapizzle nizzle, ultricizzle
    nizzle, accumsizzle vel, fermentizzle
    quizzle, izzle.
    Fashionista
    Get this look!
    £76.50
    background CC3 from wikimedia
    icons CC3 from flaticon.com
    

    View Slide

50. background CC3 from wikimedia
    icons CC3 from flaticon.com
    Get this look!
    £76.50
    

    View Slide

51. background CC3 from wikimedia
    icons CC3 from flaticon.com
    

    View Slide

52. background CC3 from wikimedia
    icons CC3 from flaticon.com
    

    View Slide

53. background CC3 from wikimedia
    icons CC3 from flaticon.com
    

    View Slide

54. background CC3 from wikimedia
    icons CC3 from flaticon.com
    

    View Slide

55. background CC3 from wikimedia
    icons CC3 from flaticon.com
    

    View Slide

56. Demo
    time for a
    

    View Slide

57. Animation
    make like disney and do some
    

    View Slide

58. It’s all in the UIView
    UIView.animateWithDuration(duration) {
    // Stick it in here
    }
    

    View Slide

59. It’s all in the UIView
    UIView.animateWithDuration(duration) {
    }
    axis
    

    View Slide

60. It’s all in the UIView
    UIView.animateWithDuration(duration) {
    }
    spacing
    

    View Slide

61. It’s all in the UIView
    UIView.animateWithDuration(duration) {
    }
    alignment
    

    View Slide

62. It’s all in the UIView
    UIView.animateWithDuration(duration) {
    }
    distribution
    

    View Slide

63. It’s all in the UIView
    UIView.animateWithDuration(duration) {
    oneOfTheSubviews.hidden = true
    }
    

    View Slide

64. Demo
    time for a
    

    View Slide

65. Code
    IB scares me, show me some
    

    View Slide

66. UIStackView
    class UIStackView : UIView {
    ...
    var axis: UILayoutConstraintAxis
    var distribution: UIStackViewDistribution
    var alignment: UIStackViewAlignment
    var spacing: CGFloat
    var baselineRelativeArrangement: Bool
    var layoutMarginsRelativeArrangement: Bool
    }
    

    View Slide

67. UIStackView
    class UIStackView : UIView {
    init(arrangedSubviews views: [UIView])
    var arrangedSubviews: [UIView] { get }
    func addArrangedSubview(view: UIView)
    func removeArrangedSubview(view: UIView)
    func insertArrangedSubview(view: UIView,
    atIndex stackIndex: Int)
    ...
    }
    

    View Slide

68. Subviews
    addSubview addArrangedSubview
    Add to View Hierarchy
    ✔ ✔
    Add to Arranged Views
    ✘ ✔
    removeFromSuperview removeArrangedSubview
    Remove from View
    Hierarchy
    ✔ ✘
    Remove from Arranged
    Views
    ✔ ✔
    

    View Slide

69. Demo
    time for a
    

    View Slide

70. Remember
    some things to
    

    View Slide

71. Auto Layout
    get to know
    1
    

    View Slide

72. understand
    2AL Priorities
    

    View Slide

73. be like a bird and
    3 Nest
    

    View Slide

74. bin off
    4 iOS 7 & 8
    

    View Slide

75. stack
    once you
    you won’t go back
    

    View Slide

76. stack
    once you
    you won’t go back
    @iwantmyrealname iwantmyreal.name
    github.com/sammyd/iOSDevUK-StackViews
    

    View Slide