Adaptive UI

Presented by Sam Davies at GOTO Copenhagen 2015

Transcript

1. Adaptive UI Sam Davies @iwantmyrealname
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
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