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

iOSDevUK: I 💖StackViews

sammyd
September 09, 2015

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.

sammyd

September 09, 2015
Tweet

More Decks by sammyd

Other Decks in Programming

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