Day 130

Scale custom UI with UIFontMetrics

25 Sep 2022

For other UI elements that could also benefit from being scaled when using Dynamic Type, you can use UIFontMetrics's scaledValue(for:). Some good examples are progress bar components, which tend to be quite slim.

https://developer.apple.com/documentation/uikit/uifontmetrics/scaledvalue(for:)

Two examples of the Netflix app, one with the default text size and another one with the largest accessibility text size. The progress bar for the first one is very thin. The second one is noticeably thicker. One way of doing this would be by setting the anchor constraint of the bar to a value returned by the scaledValue function, passing the default, in this case, 2.0, called from the default UIFontMetrics.

Some of you have asked me how you can support what I do. This would really help, and would be hugely appreciated:

  • Find these posts useful? Share them at work, on social media, or with anyone that might find them interesting. Let's spread the word!

  • Check out any of my apps or games: Xarra!, RetroRapid!, or Mestre!.

    • A download and a review go a long way. They're free by default. On the App Store, ratings and reviews really help more people discover them.

    • Finding any of them useful? If so, and if you can afford it, purchasing lifetime access to all features or subscribing lets me buy the coffee that keeps me caffeinated. Caffeine keeps me going to maintain the apps, bring in new features that I hope you'll love, and keep writing.

You may also find interesting...

One of my favourite Dynamic Type tricks is to use Stack Views and flip the axis from horizontal to vertical given a certain content-size-category threshold. So effortless and it works so well in so many scenarios.

I wish the adjustsFontForContentSizeCategory was true by default. Instead, you need to configure it that way so elements adjust their font size as the content size category (dynamic type) changes when a preferred font is used for a given style.

The fastest way for testing Dynamic Type while developing, and to quickly see how your app's UI flows, is by using the "option + cmd + plus/minus" to increase/decrease the text size in your simulator.


Content © Daniel Devesa Derksen-Staats on Accessibility up to 11! is licensed under CC BY 4.0. License details