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.