This presentation is about adaptive layout in iOS development. It describes the new layout system for iOS8, which dynamically adapts UI to varying screen sizes. Advantages and limitations of this layout are described in details. Presentation by Yuriy Berdnikov (Team Lead, GlobalLogic, Lviv), delivered at GlobalLogic Lviv Mobile TechTalk, November 13, 2014. More details - http://www.globallogic.com.ua/press-releases/lviv-mobile-2014-coverage

1. iOS Adaptive user
interfaces

2. Agenda
• What is Adaptive layout ?
• Why Adaptive Layout ?
• Limitation

3. A step back…

5. Before iOS 8
• iPhone
• 320 x 480 pt (@1x.png, @2x png)
• 320 x 568 pt (@2x.png)
• iPad
• 768 x 1024 pt (@1x~ipad.png, @2x~ipad)

7. After iOS 8
• iPhone
• 320 x 480 pt (@1x.png, @2x png)
• 320 x 568 pt (@2x.png)
• 375 x 667 pt (@2x.png)
• 414 x 736 pt (@3x.png)
• iPad
• 768 x 1024 pt (@1x~ipad.png, @2x~ipad)

9. What is
Adaptive Layout?

10. What is Adaptive Layout?
• New default layout system for iOS 8
• Dynamically adapts UI to varying screen sizes
• Coupled with Auto-Layout
• Size Classes

11. How enable ?

12. Abstract representation of
screen

13. Size Classes
• Regular and Compact
• Describe layout in terms of Horizontal and
Vertical size
• Replaces UIInterfaceOrientation and
UIInterfaceIdiom

16. Traits and TraitCollections
• Horizontal and vertical size class are identified as traits
• UITraitCollection Structure:
• Horizontal size class - Regular / Compact
• Vertical size class - Regular / Compact
• User interface idiom - iPhone / iPad / iPod Touch
• Display scale - 1.0 / 2.0
• Can be accessed to determine current size class (self.traitCollection)
!

17. Showing and Presenting
View Controllers
• Adaptively shows/presents view controllers appropriately based on
containing view controller/parent trait environment
• Examples:
• Navigation Controller
• SplitViewController
• Popovers
• Child view controllers do not need to be aware of their parent view controller to show or
present another view controller
• Use [self showViewController:animated:] instead of [self.navigationController
pushViewController:animated:]
• Use [self presentViewController:animated:] for popovers and action sheets

18. Why adaptive layout ?

19. Advantages
• Reduces amount of code

21. Advantages
• Reduces amount of code
• Layout on Storyboard

23. Advantages
• Reduces amount of code
• Layout on Storyboard
• Automatic rotation handling (in most cases)
• Universal Storyboard
• Allows to support wide range of screens

25. Assets library
• Allows separate versions of an image
to be used per size class

26. Limitations

27. Not Size Classes aware
• Most UI objects properties
• label color, button text, collection view layout
attributes
• Properties of constraints
• priority
• multiplier

28. Warnings
• Check what Class is selected
• Xcode 5 will reset all Size Classes customization
• Commit Storyboard often

29. Q & A

30. Links
• Gene Whitaker - Adaptive Layout http://www.bombingbrain.com/
demo/cocoaheads/AdaptiveLayout.pdf
• WWDC 2014 Session Videos:
• 216 - Building Adaptive Apps with UIKit
• 228 - A Look Inside Presentation Controllers
• 411 - What’s New in Interface Builder
• Adaptive User Interfaces http://developer.apple.com/design/
adaptivity/