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

iOSDevUK: I 💖StackViews

Ddd6d3bac7772fa67fc5e312a18bdaec?s=47 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.

Ddd6d3bac7772fa67fc5e312a18bdaec?s=128

sammyd

September 09, 2015
Tweet

Transcript

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

  2. i am sam @iwantmyrealname

  3. raywenderlich.com

  4. take a moment to imagine

  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
  6. None
  7. Pin to Top Pin to Leading Pin to Trailing Pin

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

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

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

    Trailing Pin to Bottom Centre Align Centre Align Vertical Spacing Vertical Spacing
  11. nine constraints

  12. nine constraints imagine a world where

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

  14. UIStackView introducing

  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
  16. background CC3 © Mark Duncan

  17. background CC3 © Mark Duncan

  18. background CC3 © Mark Duncan Spacing

  19. background CC3 © Mark Duncan Spacing Centre Aligned

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

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

    Top Pin to Leading Pin to Trailing Pin to Bottom
  22. Stack Views configuring

  23. axis

  24. axis vertical

  25. axis vertical horizontal

  26. spacing

  27. spacing

  28. alignment

  29. alignment leading

  30. alignment leading centre

  31. alignment leading centre trailing

  32. alignment top

  33. alignment top centre

  34. alignment top centre bottom

  35. alignment first baseline Aliquizzle boofron fizzle a fo shizzle my

    nizzle Its fo rizzle Phasellus interdum fizzle tellus. Ut semper adipiscing lorem.
  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.
  37. alignment fill

  38. distribution

  39. distribution

  40. distribution

  41. distribution fill

  42. distribution fill proportionally

  43. distribution fill equally

  44. distribution equal spacing

  45. distribution equal centering

  46. Demo time for a

  47. Nesting feeling at home with

  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
  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
  50. background CC3 from wikimedia icons CC3 from flaticon.com Get this

    look! £76.50
  51. background CC3 from wikimedia icons CC3 from flaticon.com

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

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

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

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

  56. Demo time for a

  57. Animation make like disney and do some

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

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

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

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

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

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

    }
  64. Demo time for a

  65. Code IB scares me, show me some

  66. UIStackView class UIStackView : UIView { ... var axis: UILayoutConstraintAxis

    var distribution: UIStackViewDistribution var alignment: UIStackViewAlignment var spacing: CGFloat var baselineRelativeArrangement: Bool var layoutMarginsRelativeArrangement: Bool }
  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) ... }
  68. Subviews addSubview addArrangedSubview Add to View Hierarchy ✔ ✔ Add

    to Arranged Views ✘ ✔ removeFromSuperview removeArrangedSubview Remove from View Hierarchy ✔ ✘ Remove from Arranged Views ✔ ✔
  69. Demo time for a

  70. Remember some things to

  71. Auto Layout get to know 1

  72. understand 2AL Priorities

  73. be like a bird and 3 Nest

  74. bin off 4 iOS 7 & 8

  75. stack once you you won’t go back

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