Dare to Be Square: Building Adaptive iOS Interfaces

Originally presented at 360iDev min in Greenville, SC on October 6, 2015.

With the plethora of iOS devices on the market, building interfaces which can adapt to all their various display sizes, orientations, and multitasking layouts may feel like an insurmountable task. Thankfully, the wizards behind UIKit have been making steady improvements over the past two years to provide us with the necessary tools and APIs to bring this goal within our reach.

In this presentation, we’ll find out how to take advantage of the latest Xcode and view controller advancements to effectively use auto layout, size classes, and trait collections to build great adaptive user interfaces.

Transcript

1. Jay Thrash 360iDev min - October 2015 D a r e t o b e wAny hAny
2. Adaptive UI CLASSES S I Z E
3. Agenda
4. Agenda Prologue
5. Agenda Prologue Overview Implement
6. Prologue
7. Universal Apps
8. Auto Layout
9. Size Classes
11. Goal Achieved
12. Destiny Fulfilled
14. Overview
15. “..relative amount of display space for the height and for the width.” CLASSES S I Z E
16. Compact Any Regular “..relative amount of display space for the height and for the width.” CLASSES S I Z E
17. CLASSES S I Z E
18. Sizing Up iPad Regular Regular
19. Sizing Up iPad Regular Regular
20. Sizing Up iPhone Regular Compact
21. Sizing Up iPhone Compact Compact
22. Sizing Up iPhone 6 Plus Regular Compact
23. Sizing Up iPhone 6 Plus Regular Compact
24. Implement
25. Implement InterfaceBuilder
28. Demo
29. Implement Programmatic
30. Programmatic UITraitCollection *traits = self.traitCollection; traits.horizontalSizeClass traits.verticalSizeClass // UIUserInterfaceSizeClassCompact or UIUserInterfaceSizeClassRegular traits.displayScale // 1.0 or 2.0 traits.userInterfaceIdiom // UIUserInterfaceIdiomPhone or UIUserInterfaceIdiomPad UITraitCollection
31. Programmatic - (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection withTransitionCoordinator: (id<UIViewControllerTransitionCoordinator>)coordinator - (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection - (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator: (id<UIViewControllerTransitionCoordinator>)coordinator Notifications & Events
32. Demo
33. Extra Credit Some things we didn’t cover • iPad vs. iPhone • Optional UI views • Customized layout transitions
34. @jaythrash jay@jaythrash.com http:// /talks Contact Me @jaythrash jaythrash.com