iOS Programming Dynamic Type 1

iOS Programming Dynamic Type 1 

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.

Dynamic Type 是从iOS7引入的技术来帮助实现这个目标通过提供专门设计的text styles 为了优化清晰度。

The Dynamic Type system is centered around text styles.

Dynamic Type系统是以text style系统为中心的。

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.

当字体请求一个给定的文本类型，系统就会使用用户喜欢的text size 与相关的text style 返回一个恰当的配置好的字体。

1 Using Preferred Fonts 使用偏好字体

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.

你得到一个指定的text style 的UIFont，并实现那个font到一些东西，比如说UILabel到一些事情上。

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.

 

@property (weak, nonatomic) IBOutlet UILabel *nameLabel;

@property (weak, nonatomic) IBOutlet UILabel *serialNumberLabel;

@property (weak, nonatomic) IBOutlet UILabel *valueLabel;

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.

现在每个label都有一个outlet，添加一个方法为每个label 设置字体来使用perfered 字体格式。

- (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

在能看到之前调用这个方法在viewWillAppear的末尾。

[self updateFonts];

 

The preferredFontForTextStyle: method will return a preconfigured font that is customized for the user's preferences.

preferredFontForTextStyle返回一个预先定义好的字体适应用户的preferences.

 

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

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.

由于viewWillAppear并没有被调用当application 从后台返回，你的界面没有被更新。

2 Responding to User Changes 响应用户的改变

When the user changes the preferred text size, a notification gets posted that the application's objects can register to listen for.

当用户改变了preferred text size ,一个通知被传递，应用对象可以注册来监听这件事。

This is the UIContentSizeCategoryDidChangeNotification, and this is a great time to update the user interface.

这个通知就是UIContentSizeCategoryDidChangeNotification，这个时候是更新用户界面的好时机。

In BNRDetailViewController.m, register for this notification in initForNewItem: and remove the class as an observer in dealloc.

// Make sure this is NOT in the if (isNew ) { } block of code

NSNotificationCenter *defaultCenter = [NSNotificationCenter defaultCenter];

[defaultCenter addObserver:self selector:@selector(updateFonts)

name:UIContentSizeCategoryDidChangeNotification

object:nil];

 

 

- (void)dealloc

{
NSNotificationCenter *defaultCenter = [NSNotificationCenter

defaultCenter];

[defaultCenter removeObserver:self]; }

 

3 Updating Auto Layout

What you need to do is utilize the intrinsicContentSize of the labels to allow them to resize themselves to exactly the size they need to be.

你需要做的就是利用label的intrinsicContentSize允许他们根据确切的大小来调整他们自己。

Open BNRDetailViewController.xib. In the canvas, select each of the four labels, one by one, and remove their explicit width and height constraints.

4 Content Hugging and Compression Resistance Priorities revisited

every view has a preferred size, which is its intrinsicContentSize.

每个view 都有衣蛾首选尺寸，就是它的intrisicContentSize.

This gives each view an implied width and height constraint.

这个每个view 一个隐含的宽和高限制。

For a view to grow smaller than its intrinsicContentSize in a given dimension, there has to be a constraint with a higher priority than that view's Content Compression Resistance Priority.

Let's inspect the layout of the Name label and corresponding text field in the horizontal direction.

检查Name label的layout和对应的在水平方向上的text field。

影响这些views的限制是

nameLabel.leading = superview.leading + 8 

nameField.leading = nameLabel.trailing + 8 

nameField.trailing = superview.trailing - 8

This gives us a visual format string that looks like:

H:|-8-[nameLabel]-8-[nameField]-8-|

Notice that there are no constraints directly impacting the widths of the views. Because of this, both views want to be at the width of their intrinsicContentSize. One or both of the labels will have to stretch in order to satisfy the existing constraints.

注意到对于views的宽度都没有具体的限制。就是因为这个，这两个view 都想是他们instrinsicContentSize的宽度。一个或两个labels需要延长以满足限制。

So which view will get stretched? Since both views want to be wider than their intrinsicContentSize, the view with the lower Content Hugging Priority will stretch.

所以那个拥有lower content hugging priority 的view将会延长。

If you compare the UILabel and the UITextField, you will see that the label has a Content Hugging Priority of 251 whereas the text field's is 250. Since the label wants to "hug" more, the label will be the width of its intrinsicContentSize and the text field will stretch enough to satisfy the equations.

如果你比较UILable 和UITextField，你会看到label有一个content Hugging priority of 251，而text field 是250.因为label 更想hug ，label将会是intrinsicContentSize的宽度，而text field 将会延长来满足等式关系。

Remember that the goal is to have all of the text fields aligned.

目标是让所有的text field 对其

The way that you will accomplish this is by having the three top labels be the same width.

方法是你通过让三个label有相同的宽度。

Select the Name, Serial, and Value labels together and open the Pin menu. Select Equal Widths and from the Update Frames drop-down choose All Frames in Container. Finally, click Add 2 Constraints.