SlideShare une entreprise Scribd logo
1  sur  38
Télécharger pour lire hors ligne
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 { // !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
Horizontal Size Class 
Regular Compact 
Regular 
iPad 
• Portrait 
• Landscape 
iPhone 
• Portrait 
Compact 
iPhone 
• Landscape 
Vertical Size Class
Horizontal Size Class 
Regular Compact 
Regular 
iPad 
• Portrait 
• Landscape 
iPhone 
• Portrait 
Compact ??? 
iPhone 
• Landscape 
Vertical Size Class
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:
Adaptive 
func traitCollectionDidChange(previousTraitCollection) { 
}
Adaptive 
func 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
UIImage 
1× 2× 
Any 
Compact
UIImage 
horizontalSizeClass Regular 
verticalSizeClass Regular 
userInterfaceldiom Phone 
displayScale 2.0 
horizontalSizeClass Regular 
verticalSizeClass Compact 
userInterfaceldiom Phone 
displayScale 2.0
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 для айфона и айпада 
• Обратно совместимо с айос-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

Contenu connexe

Similaire à Size Classes

Unit 2 LayoutTutorial.pptx
Unit 2 LayoutTutorial.pptxUnit 2 LayoutTutorial.pptx
Unit 2 LayoutTutorial.pptxABHIKKUMARDE
 
Adaptive UI - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
Adaptive UI  - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ - Adaptive UI  - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
Adaptive UI - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ - Yuji Hato
 
What's New in Android
What's New in AndroidWhat's New in Android
What's New in AndroidRobert Cooper
 
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and SmartphonesDesign Patterns for Tablets and Smartphones
Design Patterns for Tablets and SmartphonesMichael Galpin
 
Introducing collection views - Mark Pospesel
Introducing collection views - Mark PospeselIntroducing collection views - Mark Pospesel
Introducing collection views - Mark PospeselJigar Maheshwari
 
Adopting F# at SBTech
Adopting F# at SBTechAdopting F# at SBTech
Adopting F# at SBTechAntya Dev
 
Enhancing UI/UX using Java animations
Enhancing UI/UX using Java animationsEnhancing UI/UX using Java animations
Enhancing UI/UX using Java animationsNaman Dwivedi
 
Optimize CollectionView Scrolling
Optimize CollectionView ScrollingOptimize CollectionView Scrolling
Optimize CollectionView ScrollingAndrea Prearo
 
JS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-NativeJS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-NativeJSFestUA
 
Manual Layout Revisited
Manual Layout RevisitedManual Layout Revisited
Manual Layout Revisitedgillygize
 
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientBin Shao
 
iOS for C# Developers - DevConnections Talk
iOS for C# Developers - DevConnections TalkiOS for C# Developers - DevConnections Talk
iOS for C# Developers - DevConnections TalkMiguel de Icaza
 
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011Johan Nilsson
 
Building Modern Apps using Android Architecture Components
Building Modern Apps using Android Architecture ComponentsBuilding Modern Apps using Android Architecture Components
Building Modern Apps using Android Architecture ComponentsHassan Abid
 
Android Wear Essentials
Android Wear EssentialsAndroid Wear Essentials
Android Wear EssentialsNilhcem
 
Model View Intent on Android
Model View Intent on AndroidModel View Intent on Android
Model View Intent on AndroidCody Engel
 
Unique features of windows 8
Unique features of windows 8Unique features of windows 8
Unique features of windows 8FITC
 
Android Custom views
Android Custom views   Android Custom views
Android Custom views Matej Vukosav
 
Oracle MAF real life OOW.pptx
Oracle MAF real life OOW.pptxOracle MAF real life OOW.pptx
Oracle MAF real life OOW.pptxLuc Bors
 
Android development for iOS developers
Android development for iOS developersAndroid development for iOS developers
Android development for iOS developersDarryl Bayliss
 

Similaire à Size Classes (20)

Unit 2 LayoutTutorial.pptx
Unit 2 LayoutTutorial.pptxUnit 2 LayoutTutorial.pptx
Unit 2 LayoutTutorial.pptx
 
Adaptive UI - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
Adaptive UI  - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ - Adaptive UI  - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
Adaptive UI - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -
 
What's New in Android
What's New in AndroidWhat's New in Android
What's New in Android
 
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and SmartphonesDesign Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
 
Introducing collection views - Mark Pospesel
Introducing collection views - Mark PospeselIntroducing collection views - Mark Pospesel
Introducing collection views - Mark Pospesel
 
Adopting F# at SBTech
Adopting F# at SBTechAdopting F# at SBTech
Adopting F# at SBTech
 
Enhancing UI/UX using Java animations
Enhancing UI/UX using Java animationsEnhancing UI/UX using Java animations
Enhancing UI/UX using Java animations
 
Optimize CollectionView Scrolling
Optimize CollectionView ScrollingOptimize CollectionView Scrolling
Optimize CollectionView Scrolling
 
JS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-NativeJS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-Native
 
Manual Layout Revisited
Manual Layout RevisitedManual Layout Revisited
Manual Layout Revisited
 
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
 
iOS for C# Developers - DevConnections Talk
iOS for C# Developers - DevConnections TalkiOS for C# Developers - DevConnections Talk
iOS for C# Developers - DevConnections Talk
 
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
 
Building Modern Apps using Android Architecture Components
Building Modern Apps using Android Architecture ComponentsBuilding Modern Apps using Android Architecture Components
Building Modern Apps using Android Architecture Components
 
Android Wear Essentials
Android Wear EssentialsAndroid Wear Essentials
Android Wear Essentials
 
Model View Intent on Android
Model View Intent on AndroidModel View Intent on Android
Model View Intent on Android
 
Unique features of windows 8
Unique features of windows 8Unique features of windows 8
Unique features of windows 8
 
Android Custom views
Android Custom views   Android Custom views
Android Custom views
 
Oracle MAF real life OOW.pptx
Oracle MAF real life OOW.pptxOracle MAF real life OOW.pptx
Oracle MAF real life OOW.pptx
 
Android development for iOS developers
Android development for iOS developersAndroid development for iOS developers
Android development for iOS developers
 

Dernier

Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi
 

Dernier (20)

Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 

Size Classes