Using Dynamic Types in iOS 7

iOS 7 introduced the supporting of Dynamic Types. This means the user can specify the preferred text size in the Settings app of the device. From now on applications are expected to adjust text to the preferred size. Instead of setting the font size explicitly in your code, you can make use of the preferred font for a given text syle. In this tutorial we will create some labels with some text, which will respond to the preferred text size.

Update: Jan 15, 2015. The rewritten version in Swift for iOS 8.1 and Xcode 6.1 is available here.

Open Xcode and create a new Single View Application. For product name, use iOS7DynamicTypeTutorial and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices.

First we will create are Labels. Go to the Storyboard and drag 6 labels to the main view and center them horizontally. Give each label an unique text. The storyboard should look like this.

When the size of the font is altered the labels needs to resize too, so we will make use of auto layout. Starting at the top, select the headline label and press the pin button at the bottom right(the second of the four middle buttons). Pin the label to the top, left and right of the superview and select "Add 3 Constraints".

Select the constraint at the left side of the button and in the attribute inspector change the Horizontal Space Constraint from Equal to Less Than or Equal.

This will allow our label to resize if the text size will grow, while keeping the label centered. Repeat this for the constraint at the right side of the button.

Next, we will need to center-align the Subheadline button with the Headline button. Ctrl and drag from the Subheadline button to the Headline button, hold down shift  and select both "Center X" and "Vertical Spacing". This will keep this button centered and fixed beneath the above button. Repeat this for the remaining buttons to finish the auto layout.

We will need to alter our labels so ww will have to create outlets. Open the assistant editor and open ViewController.m. Ctrl and drag from the Headline label to the @interface section of ViewController.m and create the following outlet.

Repeat this for the remaining labels. The @interface section should look like this.

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UILabel *headlineLabel;
@property (weak, nonatomic) IBOutlet UILabel *subheadlineLabel;
@property (weak, nonatomic) IBOutlet UILabel *bodyLabel;
@property (weak, nonatomic) IBOutlet UILabel *footnoteLabel;
@property (weak, nonatomic) IBOutlet UILabel *caption1Label;
@property (weak, nonatomic) IBOutlet UILabel *caption2Label;


We will create a helper method to change our preffered fonts for our labels. Add the updateFonts method

- (void)updateFonts
self.headlineLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];
self.subheadlineLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline];
self.bodyLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
self.footnoteLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleFootnote];
self.caption1Label.font = [UIFont preferredFontForTextStyle:UIFontTextStyleCaption1];
self.caption2Label.font = [UIFont preferredFontForTextStyle:UIFontTextStyleCaption2];

These are the six preset styles. When the view appears we will call this helper method. Implement the viewDidAppear method.

- (void)viewDidAppear:(BOOL)animated
[super viewDidAppear:animated];
[self updateFonts];

Build and Run, the labels are styled according to the preffered font. There is a slight problem with this code. When you change the dynamic type size in the General Settings the application will not respond to the changes yet. Let's fix this. To respond to the changed text size, we need to listen to the UIContentSizeCategoryDidChangeNotification. Add the following lines at the end of viewDidLoad

[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(didChangeTextSize:) name:UIContentSizeCategoryDidChangeNotification object:nil];

When the text is changed the didChangeTextSize method is called.

- (void)didChangeTextSize:(NSNotification *)notification
[self updateFonts];

We will simply call our updateFonts method again after each change. Build and Run, press the home button and In Settings -> General -> Text Size, change the slider to the smallest text size.

Go back to the application and you will see the text size has shrunk.

Now go back to the settings and drag the slider all the way to the right, go back to the application and you will see the text size has increased.

You can download the source code of the iOS7DynamicTypeTutorial at the ioscreator repository on github.