Although the row heights adjust based on the preferred text size, the cell content is not adjusting. You will add Dynamic Type support to BNRItemCell shortly. First, pay attention to how the cell subviews adjust appropriately based on the cell height. Because of your thoughtful use of Auto Layout when creating BNRItemCell, the interface adjusts elegantly (Figure 20.5). The imageView stays vertically centered in the cell and pinned to the left, nameLabel is pinned to the top, serialNumberLabel is pinned to the bottom, and valueLabel stays centered and pinned to the right.
This worked great while the text was a fixed size, but when you update the class to use Dynamic Type you will need to make some changes. Let’s begin by implementing the Dynamic Type code to update the labels, which will closely follow what you did with BNRDetailViewController and BNRItemsViewController.
Open BNRItemCell.m and make the following changes:
- (void)updateInterfaceForDynamicTypeSize
{
UIFont *font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
self.nameLabel.font = font;
self.serialNumberLabel.font = font;
self.valueLabel.font = font;
}
- (void)awakeFromNib
{
[self updateInterfaceForDynamicTypeSize];
NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];
[nc addObserver:self
selector:@selector(updateInterfaceForDynamicTypeSize)
name:UIContentSizeCategoryDidChangeNotification
object:nil];
}
- (void)dealloc
{
NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];
[nc removeObserver:self];
}
The only new piece of information here is the awakeFromNib method. This is called on an object after it has been unarchived from a NIB file, and is a great place to do any additional UI work that cannot be done within the XIB file. You can do any additional configuration for the cell that cannot be done within the XIB file within this method. Build and run the application, and the text will update to reflect the user’s preferred text size.
Now there are a few Auto Layout issues that you need to resolve.
Initially, you pinned the height of nameLabel and serialNumberLabel. This does not work well now that your text sizes can dynamically change.
In BNRItemCell.xib, delete the two height constraints from those two labels. If you have any misplaced views now, open the Resolve Auto Layout Issues menu and select Update All Frames in Homepwner Item Cell. Build and run the application and the label heights will be based on the preferred text size.
The interface is looking fantastic now, but wouldn’t it be great if the size of imageView reflected the preferred font size? It makes sense that the image should scale with the text size. Let’s do this.
To update the position or size of a view, either in absolute terms or relative to another view, you should update the constraints on that view. This is very important! If you modify the frame (or bounds), instead of the constraints, the next time the view needs to be laid out, it will be laid out based on the constraints that it has. In other words, the changes made to the frame will not persist.
In order to change the width and height of the image view, the constants on the respective constraints will need to be updated at run time. To do this, you will need to create an outlet to both the vertical and horizontal constraints. Constraints are objects (NSLayoutConstraint), so just like you can create outlets to views, the same can be done with constraints.
In BNRItemCell.m, create and connect the outlet for these two constraints to the class extension. When you are done, the class extension should look like this:
@interface BNRItemCell () @property (nonatomic, weak) IBOutlet NSLayoutConstraint *imageViewHeightConstraint; @property (nonatomic, weak) IBOutlet NSLayoutConstraint *imageViewWidthConstraint; @end
With outlets to the size constraints of imageView created, you can now adjust imageView’s size programmatically. In BNRItemCell.m, modify updateInterfaceForDynamicTypeSize to get the currently selected preferred text size, and use that to adjust the size of imageView.
- (void)updateInterfaceForDynamicTypeSize
{
UIFont *font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
self.nameLabel.font = font;
self.serialNumberLabel.font = font;
self.valueLabel.font = font;
static NSDictionary *imageSizeDictionary;
if (!imageSizeDictionary) {
imageSizeDictionary = @{ UIContentSizeCategoryExtraSmall : @40,
UIContentSizeCategorySmall : @40,
UIContentSizeCategoryMedium : @40,
UIContentSizeCategoryLarge : @40,
UIContentSizeCategoryExtraLarge : @45,
UIContentSizeCategoryExtraExtraLarge : @55,
UIContentSizeCategoryExtraExtraExtraLarge : @65 };
}
NSString *userSize =
[[UIApplication sharedApplication] preferredContentSizeCategory];
NSNumber *imageSize = imageSizeDictionary[userSize];
self.imageViewHeightConstraint.constant = imageSize.floatValue;
self.imageViewWidthConstraint.constant = imageSize.floatValue;
}
Build and run the application, and play with the Dynamic Type text sizes. The imageView adjusts its size appropriately. Also notice that because you pinned the leading edge of nameLabel and serialNumberLabel to the trailing edge of the imageView, the interface scales very well as the preferred text size changes. Had those two labels been pinned to their superview’s leading edge instead, the imageView would have overlapped the labels.
The interface is great, but let’s make one final change.
Currently, you are updating both the width and height constraints for the imageView. This is not a problem, but you can do better. Instead of updating both constraints, you will add one additional constraint to imageView that will constrain the imageView’s width and height to be equal.
You cannot create this constraint in Interface Builder, so return to BNRItemCell.m and create this constraint programmatically in awakeFromNib.
- (void)awakeFromNib
{
[self updateInterfaceForDynamicTypeSize];
NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];
[nc addObserver:self
selector:@selector(updateInterfaceForDynamicTypeSize)
name:UIContentSizeCategoryDidChangeNotification
object:nil];
NSLayoutConstraint *constraint =
[NSLayoutConstraint constraintWithItem:self.thumbnailView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:self.thumbnailView
attribute:NSLayoutAttributeWidth
multiplier:1
constant:0];
[self.thumbnailView addConstraint:constraint];
}
Now, remove the imageViewWidthConstraint property and corresponding code.
@interface BNRItemCell () @property (nonatomic, weak) IBOutlet NSLayoutConstraint *imageViewHeightConstraint;@property (nonatomic, weak) IBOutlet NSLayoutConstraint *imageViewWidthConstraint;@end @implementation - (void)updateInterfaceForDynamicTypeSize { // Other code here NSNumber *imageSize = imageSizeDictionary[userSize]; self.imageViewHeightConstraint.constant = imageSize.floatValue; self.imageViewWidthConstraint.constant = imageSize.floatValue;}
Open BNRItemCell.xib and make sure that the outlet for imageViewWidthConstraint is removed, since the outlet no longer exists.
There is one final change that must be made. There are now two constraints affecting the width of the imageView: the programmatic constraint you just created and the explicit width constraint in the XIB file. This will create unsatisfiable (conflicting) constraints if the two constraints do not agree on a size.
To fix this, you could delete the explicit width constraint from the imageView. This will work, but Interface Builder might warn about misplaced views or an ambiguous layout. Instead, you can make the width constraint a placeholder constraint. Placeholder constraints, as the name implies, are only temporary and are removed at build time, so they will not exist when the application is running.
In BNRItemCell.xib, select the width constraint on the imageView, and open the attributes inspector. Check the Placeholder box that says Remove at build time (Figure 20.6). Build and run the application, and everything will work just as it did before. Homepwner now scales appropriately with the user’s preferred text size.
