Dare to Be Square: Building Adaptive iOS Interfaces

Slide 1

Slide 1 text

Jay Thrash 360iDev min - October 2015 D a r e t o b e wAny hAny

Slide 2

Slide 2 text

Adaptive UI CLASSES S I Z E

Slide 3

Slide 3 text

Agenda

Slide 4

Slide 4 text

Agenda Prologue

Slide 5

Slide 5 text

Agenda Prologue Overview Implement

Slide 6

Slide 6 text

Prologue

Slide 7

Slide 7 text

Universal Apps

Slide 8

Slide 8 text

Auto Layout

Slide 9

Slide 9 text

Size Classes

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Goal Achieved

Slide 12

Slide 12 text

Destiny Fulﬁlled

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Overview

Slide 15

Slide 15 text

“..relative amount of display space for the height and for the width.” CLASSES S I Z E

Slide 16

Slide 16 text

Compact Any Regular “..relative amount of display space for the height and for the width.” CLASSES S I Z E

Slide 17

Slide 17 text

CLASSES S I Z E

Slide 18

Slide 18 text

Sizing Up iPad Regular Regular

Slide 19

Slide 19 text

Sizing Up iPad Regular Regular

Slide 20

Slide 20 text

Sizing Up iPhone Regular Compact

Slide 21

Slide 21 text

Sizing Up iPhone Compact Compact

Slide 22

Slide 22 text

Sizing Up iPhone 6 Plus Regular Compact

Slide 23

Slide 23 text

Sizing Up iPhone 6 Plus Regular Compact

Slide 24

Slide 24 text

Implement

Slide 25

Slide 25 text

Implement InterfaceBuilder

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Demo

Slide 29

Slide 29 text

Implement Programmatic

Slide 30

Slide 30 text

Programmatic UITraitCollection *traits = self.traitCollection; traits.horizontalSizeClass traits.verticalSizeClass // UIUserInterfaceSizeClassCompact or UIUserInterfaceSizeClassRegular traits.displayScale // 1.0 or 2.0 traits.userInterfaceIdiom // UIUserInterfaceIdiomPhone or UIUserInterfaceIdiomPad UITraitCollection

Slide 31

Slide 31 text

Programmatic - (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection withTransitionCoordinator: (id)coordinator - (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection - (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator: (id)coordinator Notifications & Events

Slide 32

Slide 32 text

Demo

Slide 33

Slide 33 text

Extra Credit Some things we didn’t cover • iPad vs. iPhone • Optional UI views • Customized layout transitions

Slide 34

Slide 34 text

@jaythrash [email protected] http:// /talks Contact Me @jaythrash jaythrash.com