Dynamic Type and View Layout

👓🌳

Let’s make this

Replicating Apple’s Dynamic Type just like in Apple stock apps.

Download Project

Apple enables user to change the font size of there app and Apple app set a good example in there app such as Music and Contact. You can play around with the setting by going in Setting > Accessibility > Larger Text then flip the switch and drag the bar to maximum. When you go back to Apple Music app, the layout will change.

before and after

We begin by creating a new project. In storyboard we put a nested stackView. Outside stackView contains imageView and a stackView with all the lables. Put constraints accordingly.

We also constraint imageView with aspect ratio and width.

Connect outside stackView to its viewController.

Then we add the following code

• We add a override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) to detect when font size changes.
• We check whether user is using accessibility font scale and change our stackView accordingly.

You can use Xcode’s Accessibility Inspector to control Font size on your simulator.

This post is inspired by UseYourLoaf’s blog