Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive iOS Collection Views

499 views

Published on

Size classes are one powerful abstraction that can be used to make iOS apps responsive.
With the introduction of split view mode on iPad they become the right tool to make our design scale as the app window changes at runtime.
This talk will focus how to build an universal app with collection views that can change their layout and support split view gracefully.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Responsive iOS Collection Views

  1. 1. Responsive iOS Collection Views 09 / 06 / 2016 Andrea Bizzotto
  2. 2. Responsive iOS Collection Views 09 / 06 / 2016 Andrea Bizzotto (oh, and size classes…)
  3. 3. Responsive?
  4. 4. Year 2010
  5. 5. Year 2010
  6. 6. Year 2010 if UI_USER_INTERFACE_IDIOM() == .Pad { // iPad layout code here } else { // iPhone layout code here } CGSizeMake(1024, 768) UIScreen.mainScreen().bounds.size // What about interface orientation?
  7. 7. if UI_USER_INTERFACE_IDIOM() == .Pad { // iPad layout code here } else { // iPhone layout code here } CGSizeMake(1024, 768) UIScreen.mainScreen().bounds.size // What about interface orientation? Year 2010
  8. 8. if UI_USER_INTERFACE_IDIOM() == .Pad { // iPad layout code here } else { // iPhone layout code here } CGSizeMake(1024, 768) UIScreen.mainScreen().bounds.size // What about interface orientation? Year 2010
  9. 9. if UI_USER_INTERFACE_IDIOM() == .Pad { // iPad layout code here } else { // iPhone layout code here } CGSizeMake(1024, 768) UIScreen.mainScreen().bounds.size // What about interface orientation? Year 2010 😱
  10. 10. Year 2012
  11. 11. Year 2012 NSLayoutConstraint Springs & Strouts Auto- Layout UIView.frame Input Output
  12. 12. Year 2014
  13. 13. Year 2014 Size Classes
  14. 14. Auto-Layout (iOS 6) Split Views (iOS 9) Size Classes (iOS 8) Stack Views (iOS 9)
  15. 15. Apple wants you Auto-Layout (iOS 6) Split Views (iOS 9) Size Classes (iOS 8) Stack Views (iOS 9)
  16. 16. NSLayoutConstraint Before Size Classes
  17. 17. NSLayoutConstraint Any
  18. 18. AnyCompact Regular x3
  19. 19. Any Compact Regular x3
  20. 20. Any Compact Regular
  21. 21. What about the code?
  22. 22. if UI_USER_INTERFACE_IDIOM() == .Pad { // iPad layout code here } else { // iPhone layout code here }
  23. 23. if UI_USER_INTERFACE_IDIOM() == .Pad { // iPad layout code here } else { // iPhone layout code here } Bad
  24. 24. if UI_USER_INTERFACE_IDIOM() == .Pad { // iPad layout code here } else { // iPhone layout code here } Bad
  25. 25. if UI_USER_INTERFACE_IDIOM() == .Pad { // iPad layout code here } else { // iPhone layout code here } // in your view controller: let traitCollection: UITraitCollection = self.traitCollection switch traitCollection.horizontalSizeClass { case .Regular: // do this case .Compact: // do that case .Unspecified: // look this up: https://dayone.me/uJGzoW } switch traitCollection.verticalSizeClass { // same thing } // What about interface orientation? Bad Good
  26. 26. UI_USER_INTERFACE_IDIOM() UITraitCollection Changes Never at runtime
 (interface rotation,
 split view updates) Scope Everywhere
 (it’s a macro) UIViewController func traitCollectionDidChange(previousTraitCollection: UITraitCollection?)
  27. 27. Responsive Collection Views • Case Study: the iOS Photos app • Compact layout and Regular layout are quite different
  28. 28. Demo Time
  29. 29. Summary • Universal apps: think ahead (even if PO tells you MVP is iPhone or iPad only) • Bonus: teach responsive layouts to designers • Don’t: UI_USER_INTERFACE_IDIOM() • Do: Size Classes & UITraitCollections • You will get split view support for free • Your app will work on new screen sizes • Do your layouts in IB, only resort to code you can’t do it in IB • If you can: use Stack Views • WWDC…. (Personal opinion)
  30. 30. Summary • Universal apps: think ahead (even if PO tells you MVP is iPhone or iPad only) • Bonus: teach responsive layouts to designers • Don’t: UI_USER_INTERFACE_IDIOM() • Do: Size Classes & UITraitCollections • You will get split view support for free • Your app will work on new screen sizes • Do your layouts in IB, only resort to code you can’t do it in IB • If you can: use Stack Views • WWDC…. (Personal opinion)
  31. 31. Summary • Universal apps: think ahead (even if PO tells you MVP is iPhone or iPad only) • Bonus: teach responsive layouts to designers • Don’t: UI_USER_INTERFACE_IDIOM() • Do: Size Classes & UITraitCollections • You will get split view support for free • Your app will work on new screen sizes • Do your layouts in IB, only resort to code you can’t do it in IB • If you can: use Stack Views • WWDC…. (Personal opinion)
  32. 32. Summary • Universal apps: think ahead (even if PO tells you MVP is iPhone or iPad only) • Bonus: teach responsive layouts to designers • Don’t: UI_USER_INTERFACE_IDIOM() • Do: Size Classes & UITraitCollections • You will get split view support for free • Your app will work on new screen sizes • Do your layouts in IB, only resort to code you can’t do it in IB • If you can: use Stack Views • WWDC…. (Personal opinion)
  33. 33. Summary • Universal apps: think ahead (even if PO tells you MVP is iPhone or iPad only) • Bonus: teach responsive layouts to designers • Don’t: UI_USER_INTERFACE_IDIOM() • Do: Size Classes & UITraitCollections • You will get split view support for free • Your app will work on new screen sizes • Do your layouts in IB, only resort to code you can’t do it in IB • If you can: use Stack Views • WWDC…. (Personal opinion)
  34. 34. Summary • Universal apps: think ahead (even if PO tells you MVP is iPhone or iPad only) • Bonus: teach responsive layouts to designers • Don’t: UI_USER_INTERFACE_IDIOM() • Do: Size Classes & UITraitCollections • You will get split view support for free 💪 👏 😃 • Your app will work on new screen sizes • Do your layouts in IB, only resort to code you can’t do it in IB • If you can: use Stack Views • WWDC…. (Personal opinion)
  35. 35. Summary • Universal apps: think ahead (even if PO tells you MVP is iPhone or iPad only) • Bonus: teach responsive layouts to designers • Don’t: UI_USER_INTERFACE_IDIOM() • Do: Size Classes & UITraitCollections • You will get split view support for free 💪 👏 😃 • Your app will work on new screen sizes • Do your layouts in IB, only resort to code you can’t do it in IB • If you can: use Stack Views • WWDC…. (Personal opinion)
  36. 36. Summary • Universal apps: think ahead (even if PO tells you MVP is iPhone or iPad only) • Bonus: teach responsive layouts to designers • Don’t: UI_USER_INTERFACE_IDIOM() • Do: Size Classes & UITraitCollections • You will get split view support for free 💪 👏 😃 • Your app will work on new screen sizes • Do your layouts in IB, only resort to code you can’t do it in IB • If you can: use Stack Views • WWDC…. (Personal opinion)
  37. 37. Summary • Universal apps: think ahead (even if PO tells you MVP is iPhone or iPad only) • Bonus: teach responsive layouts to designers • Don’t: UI_USER_INTERFACE_IDIOM() • Do: Size Classes & UITraitCollections • You will get split view support for free 💪 👏 😃 • Your app will work on new screen sizes • Do your layouts in IB, only resort to code you can’t do it in IB • If you can: use Stack Views • WWDC…. (Personal opinion)
  38. 38. Summary • Universal apps: think ahead (even if PO tells you MVP is iPhone or iPad only) • Bonus: teach responsive layouts to designers • Don’t: UI_USER_INTERFACE_IDIOM() • Do: Size Classes & UITraitCollections • You will get split view support for free 💪 👏 😃 • Your app will work on new screen sizes • Do your layouts in IB, only resort to code you can’t do it in IB • If you can: use Stack Views • WWDC…. (Personal opinion)
  39. 39. Thank You https://github.com/bizz84/ResponsiveCollectionViews Twitter: @biz84 blog: http://bizz84.github.io/

×