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

Dynamic Type

Dynamic Type

Curtis just spent the last two weeks updating his app Slopes to support Dynamic Type. You might have heard of UIFontMetrics, or you might not have. But you probably didn’t sweat the pixels to make sure you top and bottom margins were baseline-height appropriate ;). He’ll share how he went about adapting to various sizes within dynamic type, and tricks to better mimic the behavior of built-in UI classes (like TableViews).

Curtis Herbert

March 14, 2019
Tweet

More Decks by Curtis Herbert

Other Decks in Technology

Transcript

  1. One of the many things you know you should do,

    but haven’t gotten to yet. • Dynamic Type • Localization • Voiceover
  2. iOS 7: Classes of fonts (“Body”, “Header”, etc) iOS 9:

    More classes (“Callout”, “Title 1”, “Title 2”)
  3. viewDidLoad() { … let metrics = UIFontMetrics.init(forTextStyle: UIFont.TextStyle.callout) label.font =

    metrics.scaledFont(for: label.font) label. adjustsFontForContentSizeCategory = true Automagic - Custom Font in IB
  4. if UIApplication.shared.preferredContentSizeCategory >= .accessibilityMedium { return 2.5 } else if

    UIApplication.shared.preferredContentSizeCategory >= .extraLarge { return 1.2 } else if UIApplication.shared.preferredContentSizeCategory >= .extraExtraLarge { return 1.8 } return 1.0 Not Just for Fonts
  5. class SlopesApplication: UIApplication { @objc dynamic override var preferredContentSizeCategory: UIContentSizeCategory

    { get { if super.preferredContentSizeCategory >= .accessibilityMedium { return UIContentSizeCategory.extraExtraExtraLarge } return super.preferredContentSizeCategory } } } Limit Size via UIApplication
  6. func autoSize() { let bodyFontMetrics = UIFontMetrics(forTextStyle: .body) for label

    in manualResizeBodyLabels ?? [] { label.font = bodyFontMetrics.scaledFont(for: label.font) label.adjustsFontForContentSizeCategory = true } let footnoteFontMetrics = UIFontMetrics(forTextStyle: .footnote) for label in manualResizeFootnoteLabels ?? [] { label.font = footnoteFontMetrics.scaledFont(for: label.font) label.adjustsFontForContentSizeCategory = true } …