$30 off During Our Annual Pro Sale. View Details »

Hands On with Adaptive Layout

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.

sammyd

March 27, 2015
Tweet

More Decks by sammyd

Other Decks in Programming

Transcript

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

    View Slide

  2. hi,
    i’m
    sam
    @iwantmyrealname

    View Slide

  3. shinobicontrols.com/
    ios8cocoa

    View Slide

  4. shinobicontrols

    View Slide

  5. shinobicontrols

    View Slide

  6. in the beginning

    View Slide

  7. in the beginning

    View Slide

  8. in the beginning

    View Slide

  9. in the beginning

    View Slide

  10. in the beginning

    View Slide

  11. in the beginning

    View Slide

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

    View Slide

  13. in the past

    View Slide

  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()
    }
    }

    View Slide

  15. this doesn’t scale

    View Slide

  16. adaptive layout
    introducing….

    View Slide

  17. adaptive layout
    • Abstracts layout away from device specifics
    • Introduces size classes
    • Available in iOS 8
    • Fully supported in Xcode and IB

    View Slide

  18. today
    • Intro to Size Classes
    • Demo of installable constraints & views in IB
    • Adaptive fonts and images
    • Adaptive Layout in code

    View Slide

  19. “amount of space
    available for content”

    View Slide

  20. size classes
    HORIZONTAL
    VERTICAL

    View Slide

  21. size classes
    HORIZONTAL
    VERTICAL
    compact
    regular

    View Slide

  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

    View Slide

  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

    View Slide

  24. demo

    View Slide

  25. installable constraints

    View Slide

  26. installable constraints

    View Slide

  27. installable views

    View Slide

  28. adaptive fonts

    View Slide

  29. adaptive imagery

    View Slide

  30. code

    View Slide

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

    View Slide

  32. UITraitCollection
    class UITraitCollection : NSObject,... {
    var userInterfaceIdiom: UIUserInterfaceIdiom { get }
    var displayScale: CGFloat { get }
    var horizontalSizeClass: UIUserInterfaceSizeClass { get }
    var verticalSizeClass: UIUserInterfaceSizeClass { get }
    ...
    }

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  37. overriding
    func setOverrideTraitCollection(collection:
    UITraitCollection?,
    forChildViewController childViewController:
    UIViewController)
    func overrideTraitCollectionForChildViewController(
    childViewController: UIViewController) ->
    UITraitCollection!
    UIScreen UIWindow UIPresentationController UIView
    UIViewController

    View Slide

  38. where next?

    View Slide

  39. where next?
    • Adaptive View Controller Hierarchies
    • Adaptive Presentation
    • WWDC Videos
    • Ray Wenderlich blog posts / book

    View Slide

  40. takeaways
    • Universal storyboards FTW
    • Can go far without code
    • Size classes conceptually equivalent to subclassing

    View Slide

  41. don’t be afraid of
    Auto Layout

    View Slide

  42. learn by doing

    View Slide

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

    View Slide