Introduction to Adaptive Layout

Slides from RWDevCon 2015. They might not make the most sense, since the talk is of a tutorial format

Transcript

1. Introducing 104: Adaptive Layout Introduction
2. In the beginning there was…
3. In the beginning there was…
4. In the beginning there was…
5. In the beginning there was…
6. In the beginning there was…
7. In the beginning there was… 2 2 2 2 2 + + + + = 10 layouts
8. In the past…
9. this doesn’t scale!
10. Adaptive Layout introducing…
11. Adaptive Layout Abstracts layout away from device specifics Introducing concept of size classes Available in iOS 8 Fully supported in Xcode and IB
12. Session Overview Introduction to Size Classes Demo of installable constraints & views Lab to learn adaptive fonts and images Challenge to bring it all together
13. Introducing 104: Adaptive Layout Size Classes
14. “amount of space available for content”
15. Size Classes HORIZONTAL VERTICAL
16. Size Classes HORIZONTAL VERTICAL compact regular
17. 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
18. Approach to Adaptive Layout 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
19. Introducing 104: Adaptive Layout Demo
20. Introducing 104: Adaptive Layout Conclusion
21. Adaptive Layout Universal storyboards FTW Get a long way without code Size class overrides are conceptually equivalent to subclassing
22. Where to go from here? All backed with UITraitCollection in code - with additions to UIViewController Adaptive layout is just one part of adaptive UI in iOS8
23. Where to go from here? Tutorials on raywenderlich.com Chapters in iOS 8 by tutorials WWDC videos from Apple
24. Don’t be scared of Auto Layout
25. Learn by doing Don’t be scared of Auto Layout
26. Learn by doing Don’t be scared of Auto Layout Thanks @iwantmyrealname shinobicontrols.com/giveaway