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

Creating Adaptable Layouts

Creating Adaptable Layouts

360iDev 2017 talk on using trait collections, auto layout, and other tools to create layouts layouts that adapt to different screen sizes.

Brandon Titus

August 15, 2017
Tweet

Other Decks in Programming

Transcript

  1. Review override func overrideTraitCollection(…) -> UITraitCollection? { if childViewController is

    DetailViewController { return UITraitCollection(traitsFrom: [traitCollection, UITraitCollection(horizontalSizeClass: .compact)]) } else { return traitCollection } }
  2. Review override func adaptivePresentationStyle(for traitCollection: UITraitCollection) -> UIModalPresentationStyle { if

    traitCollection.horizontalSizeClass == .compact { return .overFullScreen } else { return .custom } } if (transitionContext.presentationStyle == .overFullScreen) { endFrame = containerView.bounds } else { endFrame = CGRect(x: (containerView.bounds.width - containerWidth) / 2, y: topSpacing, width: containerWidth, height: containerView.bounds.height - topSpacing) }
  3. Review override var frameOfPresentedViewInContainerView: CGRect { if traitCollection.horizontalSizeClass == .compact

    { return containerView!.bounds } else { return CGRect(x: (containerView!.bounds.width - containerWidth) / 2, y: topSpacing, width: containerWidth, height: containerView!.bounds.height - topSpacing) } } endFrame = transitionContext.finalFrame(for: presentedViewController as! UIViewController)
  4. Accessibility if traitCollection.preferredContentSizeCategory.isAccessibilityCategory { // Change layout to fit extremely

    large text } else { // Use normal layout } if traitCollection.preferredContentSizeCategory > .extraLarge { // Change layout to fit extremely large text } else { // Use normal layout }
  5. Accessibility let font = UIFont(name: "MyFont", size: 12)! let fontMetrics

    = UIFontMetrics(forTextStyle: .body) let newFont = fontMetrics.scaledFont(for: font)
  6. Resources • WWDC17 Size Classes and Core Components
 developer.apple.com/wwdc17/812 •

    WWDC17 Design for Everyone
 developer.apple.com/videos/play/wwdc2017/806 • WWDC17 Auto Layout Techniques in Interface Builder
 developer.apple.com/wwdc17/412 • objc.io Playground-Driver Development at Kickstarter
 talk.objc.io/episodes/S01E51-playground-driven- development-at-kickstarter