iOS Development

@ScaledMetric on iOS 13

During WWDC we saw many improvements to SwiftUI. One that stood out at as particularly useful for making accessible apps was @ScaledMetric. This allows you to easily scale numeric values depending on the user’s dynamic type settings. This is fantastic for accessibility, however will only be available with iOS 14. Why wait?

I’ve implemented a version of ScaledMetric, called @ScaledMetricCustom which has all of the same functionality but works on iOS13 (and 14 too) 🎉 It is included in the gist linked below:

Also included is a new property wrapper called @ScaledFont that allows you to define a custom font that scales with dynamic type, also working on iOS 13.

Here’s an example of how you could use these (apologies for the Times New Roman – this is why we respect the user’s system font wherever possible 😂)

struct AccessibleView: View { @ScaledMetricCustom(relativeTo: .title) var someSize: CGFloat = 100 @ScaledFont(customFontName: "TimesNewRomanPS-BoldMT", size: 18, relativeTo: .body) var bodyFont var body: some View { VStack { Rectangle() .frame(width: someSize, height: someSize) Text("Hello world I am dynamically scaled!") .fixedSize(horizontal: false, vertical: true) .font(bodyFont) Spacer() } } } struct AccessibleView_Previews: PreviewProvider { static var previews: some View { NavigationView { ScrollView { VStack { AccessibleView() AccessibleView() .environment(\.sizeCategory, .extraExtraLarge) AccessibleView() .environment(\.sizeCategory, .accessibilityExtraLarge) AccessibleView() .environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge) } } .navigationBarTitle("Demo") } } }
Code language: Swift (swift)
A screenshot showing @ScaledMetricCustom and @ScaledFont in use
A screenshot showing @ScaledMetricCustom and @ScaledFont in use

Leave a Reply