size classes

Post on 18-Jun-2015

1.988 Views

Category:

Technology

3 Downloads

Preview:

Click to see full reader

DESCRIPTION

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

TRANSCRIPT

Size ClassesCocoaHeads Moscow

Size Classes

• horizontalSizeClass

• verticalSizeClass

// < iOS 8

if (IS_PORTRAIT) {

if (IS_iPHONE) {

if (IS_iPHONE_5) {

} else {

}

} else { // !IS_iPHONE

}

} else { // !IS_PORTRAIT

if (IS_iPHONE) {

} else {

}

}

Regular height

Regular width

Regular height

Compact width

Compact height

Compact width

Size Classes

• horizontalSizeClass

• verticalSizeClass

Size Classes• UITraitEnvironment

• UITraitCollection

• horizontalSizeClass

• verticalSizeClass

• userInterfaceIdiom

• displayScale

Size Classes• UITraitEnvironment

• UITraitCollection

• horizontalSizeClass = Compact

• verticalSizeClass = Regular

• userInterfaceIdiom = Phone

• displayScale = 2.0

Size Classes• UITraitEnvironment

• UITraitCollection:

• horizontalSizeClass = Compact

• verticalSizeClass = Regular

• userInterfaceIdiom = Phone

• displayScale = 2.0

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

• UIScreen

• UIWindow

• UIViewController

• UIView

• UIImageView

Regular Compact

RegulariPad• Portrait • Landscape

iPhone• Portrait

Compact iPhone• Landscape

Horizontal Size ClassVe

rtica

l Siz

e C

lass

Regular Compact

RegulariPad• Portrait • Landscape

iPhone• Portrait

Compact ??? iPhone• Landscape

Horizontal Size ClassVe

rtica

l Siz

e C

lass

Trait Collections

horizontalSizeClass

verticalSizeClass

userInterfaceldiom

displayScale

Regular

Compact

Phone

(Unspecified)

Compact

(Unspecified)

Phone

(Unspecified)

+ =

Trait Collections

horizontalSizeClass

verticalSizeClass

userInterfaceldiom

displayScale

Regular

Compact

Phone

(Unspecified)

Compact

(Unspecified)

Phone

(Unspecified)

+ =

traitCollectionWithTraitsFromCollections:

Trait Collections

horizontalSizeClass

verticalSizeClass

userInterfaceldiom

displayScale

Regular

Compact

Phone

(Unspecified)

Compact

(Unspecified)

Phone

(Unspecified)

Regular

Compact

Phone

(Unspecified)

+ =

traitCollectionWithTraitsFromCollections:

Trait Collections

horizontalSizeClass

verticalSizeClass

userInterfaceldiom

displayScale

Regular

Compact

Phone

(Unspecified)

Compact

(Unspecified)

Phone

(Unspecified)

Regular

Compact

Phone

(Unspecified)

+ =

traitCollectionWithTraitsFromCollections:

Adaptivefunc traitCollectionDidChange(previousTraitCollection) {

}

Adaptivefunc traitCollectionDidChange(previousTraitCollection) {

let currentTraits = self.traitCollection

let newLayout = currentTraits.horizontalSizeClass == UIUserInterfaceSizeClass.Compact

? self.squaresLayout

: self.rectanglesLayout

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

}

Adaptive

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

}

Adaptive

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

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

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

} completion:nil];

}

UIImage

UIImage1× 2×

Any

Compact

UIImagehorizontalSizeClass Regular

verticalSizeClass Regular

userInterfaceldiom Phone

displayScale 2.0

horizontalSizeClass Regular

verticalSizeClass Compact

userInterfaceldiom Phone

displayScale 2.0

UIImageAsset1× 2×

Any

Compact

UIImageAsset1× 2×

Any

Compact

Image SetwAny hAny

wAny hCompact

wCompact hAny

wCompact hCompact

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

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

iOS 7iOS 8 iOS 6

wAny hAny

iOS 7iOS 8 iOS 6

wC hC

Split View Controller

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

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

• UISplitViewController

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

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

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

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

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

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

Еще больше примеров• 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

ya@m4rr.ru

top related