Apple Developer - Making Apps Adaptive...IPHONE 4S IPAD PRO 12.9” IPHONE SE IPHONE 6S IPHONE 6S+...

© 2016 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

Part 1

App Frameworks #WWDC16

Session 222

Making Apps Adaptive

Kevin Cathey Interface Builder EngineerBrent Shank Interface Builder Engineer

TakeawayThe system is going to do most of the work so you don’t have to.

1,000,000,000

Dynamic Type

Dynamic Type

Dynamic Type

Layout Direction

Dynamic Type

Dynamic Type

Layout Direction

Display Gamut

Interface Style

Combinations

300+

TakeawayThe system is going to do most of the work so you don’t have to.

most

PART 1

Aa

PART 1 PART 2

Aa

PART 1 PART 2

{}Aa

PART 1

Aa

What traits are

Aa

What traits are

Size classes

Aa

What traits are

Size classes

How traits work

Aa

Traits

horizontalSizeClass[

[horizontalSizeClass = Compact][

[horizontalSizeClass = Compact,

verticalSizeClass = Regular,

displayGamut = P3]

Trait Examples

Trait Examples

Size Classes

Trait Examples

Size Classes Dynamic Type

TT

Trait Examples


TTLayout Direction

Trait Examples

LAYOUT Size Classes Dynamic Type

TTLayout Direction

Trait Examples

LAYOUT

APPEARANCE


TTLayout Direction

Trait Examples

LAYOUT

APPEARANCE


TTLayout Direction

Display Gamut

Trait Examples

LAYOUT

APPEARANCE


TTLayout Direction

Interface StyleDisplay Gamut

Trait Examples

LAYOUT

APPEARANCE CAPABILITIES


TTLayout Direction

Interface StyleDisplay Gamut

Trait Examples

LAYOUT



TTLayout Direction

3D TouchInterface StyleDisplay Gamut

Trait Examples

LAYOUT



TTLayout Direction

3D TouchInterface StyleDisplay Gamut

UITraitCollection

Trait Examples

Size Classes

Size Classes

IPHONE 4S

IPAD PRO 12.9”

IPHONE SE

IPHONE 6S

IPHONE 6S+

IPAD PRO 9.7”

480

576

667

736

1024

1336

320 414375 768 1024 1336

12.9” LANDSCAPE

9.7” LANDSCAPE

6S+ LANDSCAPE

6S LANDSCAPE

SE4S LANDSCAPE

9.7” SLIDE OVERPORTRAIT

9.7” SPLIT VIEW2/3 PORTRAIT

9.7” SPLIT VIEW1/2 LANDSCAPE


12.9” SLIDEOVER PORTRAIT




IPHONE 4S

IPAD PRO 12.9”

IPHONE SE

IPHONE 6S

IPHONE 6S+

IPAD PRO 9.7”

480

576

667

736

1024

1336

320 414375 768 1024 1336

12.9” LANDSCAPE

9.7” LANDSCAPE

6S+ LANDSCAPE

6S LANDSCAPE

SE4S LANDSCAPE








12.9” SPLIT VIEW2/3 LANDSCAPEScreen Size

IPHONE 4S

IPAD PRO 12.9”

IPHONE SE

IPHONE 6S

IPHONE 6S+

IPAD PRO 9.7”

480

576

667

736

1024

1336

320 414375 768 1024 1336

12.9” LANDSCAPE

9.7” LANDSCAPE

6S+ LANDSCAPE

6S LANDSCAPE

SE4S LANDSCAPE








12.9” SPLIT VIEW2/3 LANDSCAPEScreen Size Orientation

IPHONE 4S

IPAD PRO 12.9”

IPHONE SE

IPHONE 6S

IPHONE 6S+

IPAD PRO 9.7”

480

576

667

736

1024

1336

320 414375 768 1024 1336

12.9” LANDSCAPE

9.7” LANDSCAPE

6S+ LANDSCAPE

6S LANDSCAPE

SE4S LANDSCAPE








12.9” SPLIT VIEW2/3 LANDSCAPEScreen Size Orientation Adaptation

TakeawayBase layout on available space, not device, orientation, or adaptation

Reacting to Available Space


Coarse Changes


Coarse Changes Fine Changes

“All problems in computer science can be solved by another level of indirection”

David Wheeler

TakeawaySize classes express experience

The Specifics of Size Classes


horizontalSizeClass

verticalSizeClass


horizontalSizeClass

verticalSizeClass

Compact Regular


horizontalSizeClass

verticalSizeClass

wC hC wR hC

wC hR wR hR

Compact Regular

Compact

Regular


horizontalSizeClass

verticalSizeClass

wC hC wR hC

wR hR

Compact Regular

Compact

Regular


horizontalSizeClass

verticalSizeClass

wC hC wR hC

Compact Regular

Compact

Regular


horizontalSizeClass

verticalSizeClass

wR hC

Compact Regular

Compact

Regular


horizontalSizeClass

verticalSizeClass

Compact Regular

Compact

Regular

How Does This Help Me?


Only think about four combinations


Only think about four combinations• But most commonly just two


Only think about four combinations• But most commonly just two• Width is most common



System decides what combination applies



System decides what combination applies• Size class can change dynamically



System decides what combination applies• Size class can change dynamically• If you use size classes, system can do the work for you

View Controller structureDynamic Size Class Changes

PresentationsDynamic Size Class Changes

Fine Grain Changes

Fine Grain Changes

Use Auto Layout to specify changes within a size class

Fine Grain Changes

Use Auto Layout to specify changes within a size class

Making Apps Adaptive, Part 2 Presidio Friday 9:00AM

Medium grain changes?

What traits are

Size classes

Aa

What traits are

Size classes

How traits work

Aa

UITraitEnvironmentPropagating Changes


Screen


Screen

TC


Screen Window

TC


Screen Window View Controller

TC


Screen Window View Controller View

TC

• ••-


Screen Window View Controller View

traitCollectionDidChange(:)

TC

View Controller View

• ••-


Screen Window


TC

Traits can change during propagationPropagating Changes

Screen

TC TC


Screen Window Split View Controller

TCTC


Screen Window Split View Controller

Master View Controller

Detail ViewController

-

•

TC

TC

override func traitCollectionDidChange(_ previousTraits: UITraitCollection?) {

super.traitCollectionDidChange(previousTraits)

if previousTraits?.horizontalSizeClass != traitCollection.horizontalSizeClass {

switch traitCollection.horizontalSizeClass {

case .compact:

setupConstraintsForCompactEnvironment()

case .unspecified: fallthrough

case .regular:

setupConstraintsForRegularEnvironment()

}

}

}


Called for each UITraitEnvironment


Called for each UITraitEnvironmentOverride and check for specific trait changes


Called for each UITraitEnvironmentOverride and check for specific trait changesSome systems react to traitCollectionDidChange(:) for you


Called for each UITraitEnvironmentOverride and check for specific trait changesSome systems react to traitCollectionDidChange(:) for you• Interface Builder


Called for each UITraitEnvironmentOverride and check for specific trait changesSome systems react to traitCollectionDidChange(:) for you• Interface Builder• Asset catalog


Called for each UITraitEnvironmentOverride and check for specific trait changesSome systems react to traitCollectionDidChange(:) for you• Interface Builder• Asset catalog• UIAppearance

Takeaways

Takeaways

Traits describe environment

Takeaways

Traits describe environment• Layout, appearance, capabilities

Takeaways


Override traitCollectionDidChange: to react to trait changes

Takeaways


Override traitCollectionDidChange: to react to trait changesSize classes describe experience

Takeaways


Override traitCollectionDidChange: to react to trait changesSize classes describe experienceSystem is going to do most of the work for you

Demo

Brent Shank

Building adaptive apps in Interface BuilderRecap

Summary

PART 1

Summary

Traits describe environmentOverride traitCollectionDidChange: to react to trait changesSize classes describe experience

PART 1

Aa

Summary

Traits describe environmentOverride traitCollectionDidChange: to react to trait changesSize classes describe experienceInterface Builder lets you customize on size class and preview on specific configurations

PART 1

Aa

Aa

PART 1

The system is going to do most of the work so you don’t have to.

Aa

PART 1

Aa

PART 1

Aa

PART 1 PART 2

{}Aa

PART 1 PART 2

Related Sessions

Making Apps Adaptive, Part 2 Presidio Friday 9:00AM

What’s New In Auto Layout Presidio Friday 3:00PM

Labs

Interface Builder and Auto Layout Lab Developer ToolsLab B Thursday 3:00PM

Interface Builder and Auto Layout Lab Developer ToolsLab C Friday 9:00AM

Apple Developer - Making Apps Adaptive...IPHONE 4S IPAD PRO 12.9” IPHONE SE IPHONE 6S IPHONE 6S+...

Documents

Transcript of Apple Developer - Making Apps Adaptive...IPHONE 4S IPAD PRO 12.9” IPHONE SE IPHONE 6S IPHONE 6S+...