Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dare to Be Square: Building Adaptive iOS Interfaces

83231ffaec4a72ef96d26526872961ac?s=47 Jay Thrash
October 06, 2015

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.

83231ffaec4a72ef96d26526872961ac?s=128

Jay Thrash

October 06, 2015
Tweet

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

  10. None
  11. Goal Achieved

  12. Destiny Fulfilled

  13. None
  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

  26. None
  27. None
  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