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.

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