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
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