Hands On with Adaptive Layout

Ddd6d3bac7772fa67fc5e312a18bdaec?s=47 sammyd
March 27, 2015

Hands On with Adaptive Layout

Adaptive Layout is an important part of iOS 8, leveraging Auto Layout to adapt the same design to the plethora of form-factors available in the iOS world. This talk runs through the basics of working with adaptive layout, although the most important part is a demo, which is not in the slides. Good luck.

Ddd6d3bac7772fa67fc5e312a18bdaec?s=128

sammyd

March 27, 2015
Tweet

Transcript

  1. Hands On with Adaptive Layout github.com/sammyd/ HandsOnAdaptiveLayout

  2. hi, i’m sam @iwantmyrealname

  3. shinobicontrols.com/ ios8cocoa

  4. shinobicontrols

  5. shinobicontrols

  6. in the beginning

  7. in the beginning

  8. in the beginning

  9. in the beginning

  10. in the beginning

  11. in the beginning

  12. in the beginning 2 2 2 2 2 = 10

    + + + +
  13. in the past

  14. in the past if UIDevice.currentDevice().userInterfaceIdiom == .Pad { if UIDevice.currentDevice().orientation

    == .LandscapeLeft || UIDevice.currentDevice().orientation == .LandscapeRight { doSomething() } else { doSomethingElse() } } else { if UIDevice.currentDevice().orientation == .LandscapeLeft || UIDevice.currentDevice().orientation == .LandscapeRight { yetAnotherAlternative() } else { theFourthWay() } }
  15. this doesn’t scale

  16. adaptive layout introducing….

  17. adaptive layout • Abstracts layout away from device specifics •

    Introduces size classes • Available in iOS 8 • Fully supported in Xcode and IB
  18. today • Intro to Size Classes • Demo of installable

    constraints & views in IB • Adaptive fonts and images • Adaptive Layout in code
  19. “amount of space available for content”

  20. size classes HORIZONTAL VERTICAL

  21. size classes HORIZONTAL VERTICAL compact regular

  22. size classes Horizontal Vertical iPad Portrait Regular Regular iPad Landscape

    Regular Regular iPhone Portrait Compact Regular iPhone Landscape Compact Compact iPhone 6 Plus Landscape Regular Compact
  23. approach 1. Build base layout 2. Choose size class override

    3. Uninstall irrelevant constraints 4. Add new constraints specific to size class 5. Rinse and repeat
  24. demo

  25. installable constraints

  26. installable constraints

  27. installable views

  28. adaptive fonts

  29. adaptive imagery

  30. code

  31. UIUserInterfaceSizeClass enum UIUserInterfaceSizeClass : Int { case Unspecified case Compact

    case Regular }
  32. UITraitCollection class UITraitCollection : NSObject,... { var userInterfaceIdiom: UIUserInterfaceIdiom {

    get } var displayScale: CGFloat { get } var horizontalSizeClass: UIUserInterfaceSizeClass { get } var verticalSizeClass: UIUserInterfaceSizeClass { get } ... }
  33. UITraitEnvironment /*! Trait environments expose a trait collection that describes

    their environment. */ protocol UITraitEnvironment : NSObjectProtocol { var traitCollection: UITraitCollection { get } ... }
  34. UITraitEnvironment /*! Trait environments expose a trait collection that describes

    their environment. */ protocol UITraitEnvironment : NSObjectProtocol { var traitCollection: UITraitCollection { get } ... } UIScreen UIWindow UIPresentationController UIView UIViewController
  35. handling change protocol UITraitEnvironment : NSObjectProtocol { ... /*! To

    be overridden as needed to provide custom behavior when the environment's traits change. */ func traitCollectionDidChange( previousTraitCollection: UITraitCollection?) } UIScreen UIWindow UIPresentationController UIView UIViewController
  36. handling change protocol UIContentContainer : NSObjectProtocol { func viewWillTransitionToSize(size: CGSize,

    withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) func willTransitionToTraitCollection(newCollection: UITraitCollection, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) } UIScreen UIWindow UIPresentationController UIView UIViewController
  37. overriding func setOverrideTraitCollection(collection: UITraitCollection?, forChildViewController childViewController: UIViewController) func overrideTraitCollectionForChildViewController( childViewController:

    UIViewController) -> UITraitCollection! UIScreen UIWindow UIPresentationController UIView UIViewController
  38. where next?

  39. where next? • Adaptive View Controller Hierarchies • Adaptive Presentation

    • WWDC Videos • Ray Wenderlich blog posts / book
  40. takeaways • Universal storyboards FTW • Can go far without

    code • Size classes conceptually equivalent to subclassing
  41. don’t be afraid of Auto Layout

  42. learn by doing

  43. learn by doing thanks @iwantmyrealname github.com/sammyd speakerdeck.com/sammyd