size classes

38
Size Classes CocoaHeads Moscow

Upload: marat-s

Post on 18-Jun-2015

1.988 views

Category:

Technology


3 download

DESCRIPTION

Слайды презентации с моего доклада на CocoaHeads Moscow, где я рассказывал про новую концепцию Size Classes, представленную Эплом на WWDC-2014. Это совершенно новый способ построения адаптивных интерфейсов для айос-дивайсов. Немного коснулся интересных тонкостей о том, как их использовать в приложениях на айос-8, и как их бекпортить на айос-6.

TRANSCRIPT

Page 1: Size Classes

Size ClassesCocoaHeads Moscow

Page 2: Size Classes

Size Classes

• horizontalSizeClass

• verticalSizeClass

Page 3: Size Classes

// < iOS 8

if (IS_PORTRAIT) {

if (IS_iPHONE) {

if (IS_iPHONE_5) {

} else {

}

} else { // !IS_iPHONE

}

} else { // !IS_PORTRAIT

if (IS_iPHONE) {

} else {

}

}

Page 4: Size Classes

Regular height

Regular width

Page 5: Size Classes

Regular height

Compact width

Page 6: Size Classes

Compact height

Compact width

Page 7: Size Classes

Size Classes

• horizontalSizeClass

• verticalSizeClass

Page 8: Size Classes

Size Classes• UITraitEnvironment

• UITraitCollection

• horizontalSizeClass

• verticalSizeClass

• userInterfaceIdiom

• displayScale

Page 9: Size Classes

Size Classes• UITraitEnvironment

• UITraitCollection

• horizontalSizeClass = Compact

• verticalSizeClass = Regular

• userInterfaceIdiom = Phone

• displayScale = 2.0

Page 10: Size Classes

Size Classes• UITraitEnvironment

• UITraitCollection:

• horizontalSizeClass = Compact

• verticalSizeClass = Regular

• userInterfaceIdiom = Phone

• displayScale = 2.0

Page 11: Size Classes
Page 12: Size Classes

Trait EnvironmentНаследуется от UIScreen вниз по иерархии

• UIScreen

• UIWindow

• UIViewController

• UIView

• UIImageView

Page 13: Size Classes

Regular Compact

RegulariPad• Portrait • Landscape

iPhone• Portrait

Compact iPhone• Landscape

Horizontal Size ClassVe

rtica

l Siz

e C

lass

Page 14: Size Classes

Regular Compact

RegulariPad• Portrait • Landscape

iPhone• Portrait

Compact ??? iPhone• Landscape

Horizontal Size ClassVe

rtica

l Siz

e C

lass

Page 15: Size Classes

Trait Collections

horizontalSizeClass

verticalSizeClass

userInterfaceldiom

displayScale

Regular

Compact

Phone

(Unspecified)

Compact

(Unspecified)

Phone

(Unspecified)

+ =

Page 16: Size Classes

Trait Collections

horizontalSizeClass

verticalSizeClass

userInterfaceldiom

displayScale

Regular

Compact

Phone

(Unspecified)

Compact

(Unspecified)

Phone

(Unspecified)

+ =

traitCollectionWithTraitsFromCollections:

Page 17: Size Classes

Trait Collections

horizontalSizeClass

verticalSizeClass

userInterfaceldiom

displayScale

Regular

Compact

Phone

(Unspecified)

Compact

(Unspecified)

Phone

(Unspecified)

Regular

Compact

Phone

(Unspecified)

+ =

traitCollectionWithTraitsFromCollections:

Page 18: Size Classes

Trait Collections

horizontalSizeClass

verticalSizeClass

userInterfaceldiom

displayScale

Regular

Compact

Phone

(Unspecified)

Compact

(Unspecified)

Phone

(Unspecified)

Regular

Compact

Phone

(Unspecified)

+ =

traitCollectionWithTraitsFromCollections:

Page 19: Size Classes
Page 20: Size Classes

Adaptivefunc traitCollectionDidChange(previousTraitCollection) {

}

Page 21: Size Classes

Adaptivefunc traitCollectionDidChange(previousTraitCollection) {

let currentTraits = self.traitCollection

let newLayout = currentTraits.horizontalSizeClass == UIUserInterfaceSizeClass.Compact

? self.squaresLayout

: self.rectanglesLayout

self.collectionView.setCollectionViewLayout( newLayout, animated: true)

}

Page 22: Size Classes

Adaptive

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator: (id<UIViewControllerTransitionCoordinator>)coordinator {

}

Page 23: Size Classes

Adaptive

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator: (id<UIViewControllerTransitionCoordinator>)coordinator {

[coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {

[self.collectionView.collectionViewLayout.numberOfColumns = [self columnsForSize:size];

} completion:nil];

}

Page 24: Size Classes

UIImage

Page 25: Size Classes

UIImage1× 2×

Any

Compact

Page 26: Size Classes

UIImagehorizontalSizeClass Regular

verticalSizeClass Regular

userInterfaceldiom Phone

displayScale 2.0

horizontalSizeClass Regular

verticalSizeClass Compact

userInterfaceldiom Phone

displayScale 2.0

Page 27: Size Classes

UIImageAsset1× 2×

Any

Compact

Page 28: Size Classes

UIImageAsset1× 2×

Any

Compact

Page 29: Size Classes

Image SetwAny hAny

wAny hCompact

wCompact hAny

wCompact hCompact

Page 30: Size Classes
Page 31: Size Classes

Обратная совместимость с iOS 7 и 6

• Работает с ограничениями,но не конфликтует

Page 32: Size Classes

iOS 7iOS 8 iOS 6

wAny hAny

Page 33: Size Classes

iOS 7iOS 8 iOS 6

wC hC

Page 34: Size Classes

Split View Controller

Для айфона и айпада:

• Один общий сториборд

• UISplitViewController

Page 35: Size Classes
Page 36: Size Classes

Сводка• Trait Collections: Size Classes

• Автоматический сет картинок для разных размеров

• Один сториборд/XIB для айфона и айпада

• Обратно совместимо с айос-6 и 7

• Предпросмотр для разных дивайсов, ориентаци и версий айос в интерфейс-билдере

• Нужен Xcode 6 и автолейауты

Page 37: Size Classes

Еще больше примеров• developer.apple.com

• carpeaqua.com/2014/06/14/thinking-in-terms-of-ios-8-size-classes/

• www.shinobicontrols.com/blog/posts/2014/07/28/ios8-day-by-day-day-7-adaptive-layout-and-uitraitcollection

• asciiwwdc.com