Adaptive UI

1fa9cb8c7997c8c4d3d251fb5e41f749?s=47 Realm
October 05, 2015

Adaptive UI

Presented by Sam Davies at GOTO Copenhagen 2015

1fa9cb8c7997c8c4d3d251fb5e41f749?s=128

Realm

October 05, 2015
Tweet

Transcript

  1. Adaptive UI Sam Davies @iwantmyrealname

  2. None
  3. i’m sam @iwantmyrealname

  4. TC[YGPFGTNKEJEQO

  5. +PVJGDGIKPPKPIVJGTGYCU

  6. +PVJGDGIKPPKPIVJGTGYCU

  7. +PVJGDGIKPPKPIVJGTGYCU

  8. +PVJGDGIKPPKPIVJGTGYCU

  9. +PVJGDGIKPPKPIVJGTGYCU

  10. +PVJGDGIKPPKPIVJGTGYCU

  11. +PVJGDGIKPPKPIVJGTGYCU

  12. 12 different form factors

  13. KPFC[UIQPGD[

  14. this doesn’t scale

  15. Adaptive Layout +PVTQFWEKPI

  16. • Abstracts layout away from device specifics • Introducing concept

    of size classes • Available in iOS 8 • Fully supported in Xcode and IB Adaptive Layout
  17. "amount of space available for content"

  18. Size Classes

  19. Size Classes

  20. Size Classes Horizontal Vertical iPad Portrait Regular Regular iPad Landscape

    Regular Regular iPhone Portrait Compact Regular iPhone Landscape Compact Compact iPhone 6[s] Plus Landscape Regular Compact
  21. Multitasking

  22. 1. Build base layout 2. Choose size class override 3.

    Uninstall irrelevant constraints 4. Add new constraints specific to size class 5. Rinse and repeat Adopting Adaptive Layout
  23. Demo!

  24. • Constraint installation • Constraint constant • Font • View

    installation What’s Adaptive?
  25. Trait Collections public class UITraitCollection : NSObject, NSCopying, NSSecureCoding, NSCoding

    { ... public var userInterfaceIdiom: UIUserInterfaceIdiom { get } public var displayScale: CGFloat { get } public var horizontalSizeClass: UIUserInterfaceSizeClass { get } public var verticalSizeClass: UIUserInterfaceSizeClass { get } @available(iOS 9.0, *) public var forceTouchCapability: UIForceTouchCapability { get } }
  26. Trait Environments public protocol UITraitEnvironment : NSObjectProtocol { public var

    traitCollection: UITraitCollection { get } public func traitCollectionDidChange(previousTraitCollection: UITraitCollection?) } • UIScreen • UIWindow • UIPresentationController • UIViewController • UIView
  27. Overriding Size Classes extension UIViewController { public func setOverrideTraitCollection(collection: UITraitCollection?,

    forChildViewController childViewController: UIViewController) public func overrideTraitCollectionForChildViewController( childViewController: UIViewController) -> UITraitCollection? }
  28. UIContentContainer public protocol UIContentContainer : NSObjectProtocol { ... public func

    viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) public func willTransitionToTraitCollection( newCollection: UITraitCollection, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) }
  29. Rotation Deprecation extension UIViewController { @available(iOS, introduced=2.0, deprecated=8.0) public var

    interfaceOrientation: UIInterfaceOrientation { get } @available(iOS, introduced=2.0, deprecated=8.0, message="Implement viewWillTransitionToSize:withTransitionCoordinator: instead") public func willRotateToInterfaceOrientation( toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval) @available(iOS, introduced=2.0, deprecated=8.0) public func didRotateFromInterfaceOrientation( fromInterfaceOrientation: UIInterfaceOrientation) @available(iOS, introduced=3.0, deprecated=8.0, message="Implement viewWillTransitionToSize:withTransitionCoordinator: instead") public func willAnimateRotationToInterfaceOrientation( toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval) }
  30. Rotation override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) { super.viewWillTransitionToSize(size,

    withTransitionCoordinator: coordinator) let image = imageForAspectRatio(size.width / size.height) coordinator.animateAlongsideTransition({ context in // Create a transition and match the context's duration let transition = CATransition() transition.duration = context.transitionDuration() // Make it fade transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut) transition.type = kCATransitionFade self.backgroundImageView.layer.addAnimation(transition, forKey: "Fade") // Set the new image self.backgroundImageView.image = image }, completion: nil) }
  31. Stack Views

  32. None
  33. Pin to Top Pin to Leading Pin to Trailing Pin

    to Bottom
  34. Pin to Top Pin to Leading Pin to Trailing Pin

    to Bottom Vertical Spacing Vertical Spacing
  35. Pin to Top Pin to Leading Pin to Trailing Pin

    to Bottom Centre Align Centre Align Vertical Spacing Vertical Spacing
  36. Equal Width Pin to Top Pin to Leading Pin to

    Trailing Pin to Bottom Centre Align Centre Align Vertical Spacing Vertical Spacing
  37. background CC3 © Mark Duncan

  38. background CC3 © Mark Duncan

  39. background CC3 © Mark Duncan Spacing

  40. background CC3 © Mark Duncan Spacing Centre Aligned

  41. background CC3 © Mark Duncan Spacing Centre Aligned Pin to

    Top Pin to Leading
  42. background CC3 © Mark Duncan Spacing Centre Aligned Pin to

    Top Pin to Leading Pin to Trailing Pin to Bottom
  43. Demo!

  44. Some tips for adaptivity

  45. Auto Layout IGVVQMPQY 1

  46. Broad Strokes WUGCFCRVKXG NC[QWVHQT 2

  47. Base Layout UVCTVYKVJ 3 CPFVJGP Override

  48. Stack Views NKHGKUGCUKGTYKVJ 4

  49. Now’s the time to get adaptive @iwantmyrealname github.com/sammyd/AdaptiveUI-GOTOConf

  50. None