Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Size Classes 
CocoaHeads Moscow
Size Classes 
• horizontalSizeClass 
• verticalSizeClass
// < iOS 8 
if (IS_PORTRAIT) { 
if (IS_iPHONE) { 
if (IS_iPHONE_5) { 
} else { 
} 
} else { // !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 ...
Size Classes 
• UITraitEnvironment 
• UITraitCollection 
• horizontalSizeClass = Compact 
• verticalSizeClass = Regular 
•...
Size Classes 
• UITraitEnvironment 
• UITraitCollection: 
• horizontalSizeClass = Compact 
• verticalSizeClass = Regular 
...
Trait Environment 
Наследуется от UIScreen вниз по иерархии 
• UIScreen 
• UIWindow 
• UIViewController 
• UIView 
• UIIma...
Horizontal Size Class 
Regular Compact 
Regular 
iPad 
• Portrait 
• Landscape 
iPhone 
• Portrait 
Compact 
iPhone 
• Lan...
Horizontal Size Class 
Regular Compact 
Regular 
iPad 
• Portrait 
• Landscape 
iPhone 
• Portrait 
Compact ??? 
iPhone 
•...
Trait Collections 
horizontalSizeClass 
verticalSizeClass 
userInterfaceldiom 
displayScale 
Regular 
Compact 
Phone 
(Uns...
Trait Collections 
horizontalSizeClass 
verticalSizeClass 
userInterfaceldiom 
displayScale 
Regular 
Compact 
Phone 
(Uns...
Trait Collections 
horizontalSizeClass 
verticalSizeClass 
userInterfaceldiom 
displayScale 
Regular 
Compact 
Phone 
(Uns...
Trait Collections 
horizontalSizeClass 
verticalSizeClass 
userInterfaceldiom 
displayScale 
Regular 
Compact 
Phone 
(Uns...
Adaptive 
func traitCollectionDidChange(previousTraitCollection) { 
}
Adaptive 
func traitCollectionDidChange(previousTraitCollection) { 
let currentTraits = self.traitCollection 
let newLayou...
Adaptive 
- (void)viewWillTransitionToSize:(CGSize)size 
withTransitionCoordinator: 
(id<UIViewControllerTransitionCoordin...
Adaptive 
- (void)viewWillTransitionToSize:(CGSize)size 
withTransitionCoordinator: 
(id<UIViewControllerTransitionCoordin...
UIImage
UIImage 
1× 2× 
Any 
Compact
UIImage 
horizontalSizeClass Regular 
verticalSizeClass Regular 
userInterfaceldiom Phone 
displayScale 2.0 
horizontalSiz...
UIImageAsset 
1× 2× 
Any 
Compact
UIImageAsset 
1× 2× 
Any 
Compact
Image Set 
wAny hAny 
wAny hCompact 
wCompact hAny 
wCompact hCompact
Обратная совместимость 
с iOS 7 и 6 
• Работает с ограничениями, 
но не конфликтует
iOS 8 iOS 7 iOS 6 
wAny hAny
iOS 8 iOS 7 iOS 6 
wC hC
Split View Controller 
Для айфона и айпада: 
• Один общий сториборд 
• UISplitViewController
Сводка 
• Trait Collections: Size Classes 
• Автоматический сет картинок для разных размеров 
• Один сториборд/XIB для айф...
Еще больше примеров 
• developer.apple.com 
• carpeaqua.com/2014/06/14/thinking-in-terms-of-ios- 
8-size-classes/ 
• www.s...
ya@m4rr.ru
Size Classes
Size Classes
Size Classes
Size Classes
Upcoming SlideShare
Loading in …5
×

Size Classes

4,168 views

Published on

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

Published in: Technology

Size Classes

  1. 1. Size Classes CocoaHeads Moscow
  2. 2. Size Classes • horizontalSizeClass • verticalSizeClass
  3. 3. // < iOS 8 if (IS_PORTRAIT) { if (IS_iPHONE) { if (IS_iPHONE_5) { } else { } } else { // !IS_iPHONE } } else { // !IS_PORTRAIT if (IS_iPHONE) { } else { } }
  4. 4. Regular height Regular width
  5. 5. Regular height Compact width
  6. 6. Compact height Compact width
  7. 7. Size Classes • horizontalSizeClass • verticalSizeClass
  8. 8. Size Classes • UITraitEnvironment • UITraitCollection • horizontalSizeClass • verticalSizeClass • userInterfaceIdiom • displayScale
  9. 9. Size Classes • UITraitEnvironment • UITraitCollection • horizontalSizeClass = Compact • verticalSizeClass = Regular • userInterfaceIdiom = Phone • displayScale = 2.0
  10. 10. Size Classes • UITraitEnvironment • UITraitCollection: • horizontalSizeClass = Compact • verticalSizeClass = Regular • userInterfaceIdiom = Phone • displayScale = 2.0
  11. 11. Trait Environment Наследуется от UIScreen вниз по иерархии • UIScreen • UIWindow • UIViewController • UIView • UIImageView
  12. 12. Horizontal Size Class Regular Compact Regular iPad • Portrait • Landscape iPhone • Portrait Compact iPhone • Landscape Vertical Size Class
  13. 13. Horizontal Size Class Regular Compact Regular iPad • Portrait • Landscape iPhone • Portrait Compact ??? iPhone • Landscape Vertical Size Class
  14. 14. Trait Collections horizontalSizeClass verticalSizeClass userInterfaceldiom displayScale Regular Compact Phone (Unspecified) Compact (Unspecified) Phone (Unspecified) + =
  15. 15. Trait Collections horizontalSizeClass verticalSizeClass userInterfaceldiom displayScale Regular Compact Phone (Unspecified) Compact (Unspecified) Phone (Unspecified) + = traitCollectionWithTraitsFromCollections:
  16. 16. Trait Collections horizontalSizeClass verticalSizeClass userInterfaceldiom displayScale Regular Compact Phone (Unspecified) Compact (Unspecified) Phone (Unspecified) Regular Compact Phone (Unspecified) + = traitCollectionWithTraitsFromCollections:
  17. 17. Trait Collections horizontalSizeClass verticalSizeClass userInterfaceldiom displayScale Regular Compact Phone (Unspecified) Compact (Unspecified) Phone (Unspecified) Regular Compact Phone (Unspecified) + = traitCollectionWithTraitsFromCollections:
  18. 18. Adaptive func traitCollectionDidChange(previousTraitCollection) { }
  19. 19. Adaptive func traitCollectionDidChange(previousTraitCollection) { let currentTraits = self.traitCollection let newLayout = currentTraits.horizontalSizeClass == UIUserInterfaceSizeClass.Compact ? self.squaresLayout : self.rectanglesLayout self.collectionView.setCollectionViewLayout( newLayout, animated: true) }
  20. 20. Adaptive - (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator: (id<UIViewControllerTransitionCoordinator>)coordinator { }
  21. 21. Adaptive - (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator: (id<UIViewControllerTransitionCoordinator>)coordinator { [coordinator animateAlongsideTransition: ^(id<UIViewControllerTransitionCoordinatorContext> context) { [self.collectionView.collectionViewLayout.numberOfColumns = [self columnsForSize:size]; } completion:nil]; }
  22. 22. UIImage
  23. 23. UIImage 1× 2× Any Compact
  24. 24. UIImage horizontalSizeClass Regular verticalSizeClass Regular userInterfaceldiom Phone displayScale 2.0 horizontalSizeClass Regular verticalSizeClass Compact userInterfaceldiom Phone displayScale 2.0
  25. 25. UIImageAsset 1× 2× Any Compact
  26. 26. UIImageAsset 1× 2× Any Compact
  27. 27. Image Set wAny hAny wAny hCompact wCompact hAny wCompact hCompact
  28. 28. Обратная совместимость с iOS 7 и 6 • Работает с ограничениями, но не конфликтует
  29. 29. iOS 8 iOS 7 iOS 6 wAny hAny
  30. 30. iOS 8 iOS 7 iOS 6 wC hC
  31. 31. Split View Controller Для айфона и айпада: • Один общий сториборд • UISplitViewController
  32. 32. Сводка • Trait Collections: Size Classes • Автоматический сет картинок для разных размеров • Один сториборд/XIB для айфона и айпада • Обратно совместимо с айос-6 и 7 • Предпросмотр для разных дивайсов, ориентаци и версий айос в интерфейс-билдере • Нужен Xcode 6 и автолейауты
  33. 33. Еще больше примеров • 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
  34. 34. ya@m4rr.ru

×