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