Creating an interface that appeals to everyone can be daunting. Some people prefer more compact interfaces so they can see more information at a time. Others might want to be able to easily see information at a glance, or perhaps they have poor eyesight. These people have different needs, and good developers strive to make apps that meet those needs.
Dynamic Type is a technology introduced in iOS 7 that helps realize this goal by providing specifically designed text styles that are optimized for legibility. Perhaps more importantly, users can select one of seven different preferred text sizes from within Apple’s Settings application, and apps that support Dynamic Type will have their fonts scaled appropriately. In this chapter, you will update Homepwner to support Dynamic Type. Figure 20.1 shows the application rendered at the smallest and largest user selectable Dynamic Type sizes.
The Dynamic Type system is centered around text styles. When a font is requested for a given text style, the system will use the user’s preferred text size in association with the text style to return an appropriately configured font. Figure 20.2 shows the six different text styles.
Implementing Dynamic Type is straightforward. At its most basic level, you get a UIFont for a specific text style and then apply that font to something that displays text, such as a UILabel. Let’s start by updating BNRDetailViewController.
You are going to need to update some attributes of the labels programmatically soon, so add outlets to each of the labels to the class extension in BNRDetailViewController.m.
@interface BNRDetailViewController () @property (nonatomic, strong) UIPopoverController *imagePickerPopover; @property (weak, nonatomic) IBOutlet UITextField *nameField; @property (weak, nonatomic) IBOutlet UITextField *serialNumberField; @property (weak, nonatomic) IBOutlet UITextField *valueField; @property (weak, nonatomic) IBOutlet UILabel *dateLabel; @property (weak, nonatomic) IBOutlet UIImageView *imageView; @property (weak, nonatomic) IBOutlet UIToolbar *toolbar; @property (weak, nonatomic) IBOutlet UIBarButtonItem *cameraButton; @property (weak, nonatomic) IBOutlet UILabel *nameLabel; @property (weak, nonatomic) IBOutlet UILabel *serialNumberLabel; @property (weak, nonatomic) IBOutlet UILabel *valueLabel; @end
Now that there is an outlet to each of the labels, add a method that sets the font for each to use the preferred Body style.
- (void)updateFonts
{
UIFont *font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
self.nameLabel.font = font;
self.serialNumberLabel.font = font;
self.valueLabel.font = font;
self.dateLabel.font = font;
self.nameField.font = font;
self.serialNumberField.font = font;
self.valueField.font = font;
}
Now call this method at the end of viewWillAppear: to update the labels before they are visible.
self.imageView.image = imageToDisplay; [self updateFonts]; }
The preferredFontForTextStyle: method will return a preconfigured font that is customized for the user’s preferences. Build and run the application, and you will notice that the interface looks largely the same.
Now let’s change the preferred font size. Press the Home button (or use Home from the Hardware menu), and open Apple’s Settings application. Under General, select Text Size, and then drag the slider all the way to the left to set the font size to the smallest value (Figure 20.3).
Now, go back into Homepwner. If you return to the BNRDetailViewController, you will notice that the interface has not changed at all! Why is this? Since viewWillAppear: is not called when the application returns from the background, your interface is not getting updated. Luckily, you can be informed when the user changes the preferred font size.