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

CocoaConf San Jose :: I ๐Ÿ’– Stack Views

Ddd6d3bac7772fa67fc5e312a18bdaec?s=47 sammyd
November 07, 2015

CocoaConf San Jose :: I ๐Ÿ’– Stackย Views

Stack views are great. I love them. You should too.

Slides for my talk on stack views at CocoaConf San Jose, November 2015

Ddd6d3bac7772fa67fc5e312a18bdaec?s=128

sammyd

November 07, 2015
Tweet

Transcript

  1. I Stack Views โ€ฆand you should too tiny.cc/stack-sj

  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 ๏ฌzzle a fo shizzle my

    nizzle Its fo rizzle Phasellus interdum ๏ฌzzle tellus. Ut semper adipiscing lorem.
  36. alignment first baseline last baseline Aliquizzle boofron ๏ฌzzle a fo

    shizzle my nizzle Its fo rizzle Phasellus interdum ๏ฌzzle tellus. Ut semper adipiscing lorem. Aliquizzle boofron ๏ฌzzle a fo shizzle my nizzle Its fo rizzle Phasellus interdum ๏ฌzzle 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/CocoaConfSJ-StackViews