Slide 1

Slide 1 text

Introducing 104: Adaptive Layout Introduction

Slide 2

Slide 2 text

In the beginning there was…

Slide 3

Slide 3 text

In the beginning there was…

Slide 4

Slide 4 text

In the beginning there was…

Slide 5

Slide 5 text

In the beginning there was…

Slide 6

Slide 6 text

In the beginning there was…

Slide 7

Slide 7 text

In the beginning there was… 2 2 2 2 2 + + + + = 10 layouts

Slide 8

Slide 8 text

In the past…

Slide 9

Slide 9 text

this doesn’t scale!

Slide 10

Slide 10 text

Adaptive Layout introducing…

Slide 11

Slide 11 text

Adaptive Layout Abstracts layout away from device specifics Introducing concept of size classes Available in iOS 8 Fully supported in Xcode and IB

Slide 12

Slide 12 text

Session Overview Introduction to Size Classes Demo of installable constraints & views Lab to learn adaptive fonts and images Challenge to bring it all together

Slide 13

Slide 13 text

Introducing 104: Adaptive Layout Size Classes

Slide 14

Slide 14 text

“amount of space available for content”

Slide 15

Slide 15 text

Size Classes HORIZONTAL VERTICAL

Slide 16

Slide 16 text

Size Classes HORIZONTAL VERTICAL compact regular

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Introducing 104: Adaptive Layout Demo

Slide 20

Slide 20 text

Introducing 104: Adaptive Layout Conclusion

Slide 21

Slide 21 text

Adaptive Layout Universal storyboards FTW Get a long way without code Size class overrides are conceptually equivalent to subclassing

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Where to go from here? Tutorials on raywenderlich.com Chapters in iOS 8 by tutorials WWDC videos from Apple

Slide 24

Slide 24 text

Don’t be scared of Auto Layout

Slide 25

Slide 25 text

Learn by doing Don’t be scared of Auto Layout

Slide 26

Slide 26 text

Learn by doing Don’t be scared of Auto Layout Thanks @iwantmyrealname shinobicontrols.com/giveaway