动态字体 Dynamic type

引子

今天看了一篇关于 Autolayout 的使用技巧介绍文章《高级 iOS 开发工程师应该掌握的自动布局技术》。其中里面谈到使用一种 Xcode 自带的界面层级检测工具 Accessibility Inspector,同时这个工具也可以用来实时动态改变支持了Dynamic type的 label 所显示的字体大小,这其中当然有一些限制啦 O(∩_∩)O,容我一一道来~。

一、Xcode 自带的界面层级检测工具 Accessibility Inspector 真容

这就是Accessibility Inspector的操作界面啦
Accessibility Inspector

以下启动该工具的步骤:

点击顶部导航条Xcode->Open Develop Tool->Accessibility Inspector
启动Accessibility Inspector

二、动态字体 Dynamic type 是什么?

Dynamic type 动态类型字体 早在 iOS 7 时候就已经被引入,作为为一种便捷开发方式而将字体的细节(如:字体类型,大小,重量及字距)抽象成一系列的预设定字体样式类别叫做文本风格(text styles)。

其中 iOS 7 的 Text Styles 包括:

  • UIFontTextStyleHeadline
  • UIFontTextStyleSubheadline
  • UIFontTextStyleBody
  • UIFontTextStyleFootnote
  • UIFontTextStyleCaption1
  • UIFontTextStyleCaption2

iOS 9 之后,苹果又添加了4中新的 Text Styles:

  • UIFontTextStyleCallout
  • UIFontTextStyleTitle1
  • UIFontTextStyleTitle2
  • UIFontTextStyleTitle3
    而如果你在 Xcode 8 上的话,选中一个 Lable 的 Attributed Inspector -> font,即可看到所有的先在支持的Text Styles:
步骤一
步骤二

所有 Text Styles 对应的样式如下图:


在 iOS 9 下 Text Styles 对应的样式

苹果设计的这些Text Styles 都有特定的使用场景。其中最常用的是UIFontTextStyleBody正文样式,苹果原生的应用内所有显示正文的地方都选用该Text Style,如在 mail app 正文文本和 TabelViewCell 的主文本显示等。

通过代码创建自定 textstyle 的字体,可以使用+preferredFontForTextStyle:类方法,如下:

UIFont *myFont = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];

三、为什么使用动态字体 Dynamic type

使用Dynamic type的优势是,会根据系统的字体大小偏好设定而自动更新对应的字体大小值(当然ios9或之前这些都是需要手动去处理的,蛋疼的过程就不详细描述啦<( ̄3 ̄)> !)

Dynamic type 允许用户自定义文本大小从而满足app的需要。不过仅有采用Dynamic Type的app才能响应文本的改变,可能只有一小部分第三方应用使用了该功能。在 iPhone 的短信消息中,如果用户喜欢大一点的字体,通过在设置中进行设置后,我们将看到消息界面会有所变化,字体变大了,消息气泡和输入文本也变大了。日历和其他一些地方也具备类似的功能。
情况如下图:

  1. 按照系统设定的默认大小
    image.png
  2. 当选择大字体值时
    image.png

    是不是一个很棒棒的功能呢?那问题来了,在 iPhone 中怎样选择这些字体大小呢?
    步骤是:

iPhone的设置->通用->辅助功能->更大字体

界面设置图
不同设置值效果对比

四、怎么使用动态字体 Dynamic type

1. iOS 10 之前:

这个以后再分写一篇吧,其实如下这篇文字描述得挺详细了,可以用于实战参考。
iOS 7 Tutorial Series: Dynamic Type

大概流程:
1.注册一个DynamicType的消息通知:UIContentSizeCategoryDidChangeNotification

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

2.当系统字体大小改变时,在接收通知的实现方法里处理嵌入到视图了的labels, text fields 和 text views等控件字体大小的适配工作(又是一个蛋疼的搬砖工作(>_<))。如

self.textLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
//这里调用setNeedsLayout做一个需要重新布局的标记,在下一个draw周期(60Hz)自动重绘
[self.view setNeedsLayout];

3.最后在layoutSubview或者viewDidLayoutSubview里面更新textLabel的frame

2. iOS 10或以上:
  1. 通过代码设置的话就两步即可:
    // 1. 设置字体大小
    self.demoLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
    // 2. 允许调整
    self.demoLabel.adjustsFontForContentSizeCategory = YES;
    
  2. 这个属性adjustsFontForContentSizeCategory的设置在 Xcode 8.3 开始即可在 xib 或 sb 中设置,对应的位置是:

    也就是说,结合上述在 xib 中可选对应 text Style 方式,可这正一行代码都不用写就可以支持 Dynamic Type了。ヽ(✿゚▽゚)ノ好耶~

了解以上操作后,回到正题 Accessibility Inspector 有什么用?

五、Accessibility Inspector 的使用。

支持了 Dynamic Type之后,Accessibility Inspector 的使用“终于”派上用场了,那就是,在另外一个界面动态设置字体,实际就是方便测试而已,免得在 App 与 设置界面间来回切换。。。

是不是感觉被坑了~哈哈。其实,Accessibility Inspector 更有用的功能能应该是可以查看界面布局的层级关系,可惜的是它只会通过过 text 的样式进行描述,所以如果需要查看界面布局层级关系等信息,都是通过 Reveal 和 Xcode 自带的 View UI Hierarchy

运行程序后,在 Xcode 上又有两个入地方可以进入View UI Hierarchy

点击上层按钮后弹出的对话框,选择 View UI Hierarchy


如下是 iOS 10 Demo 演示 Dynamic type

  1. 支持了 Dynamic Type


    image.png
  2. 启动 Accessibility Inspector ,点击顶部导航条Xcode->Open Develop Tool->Accessibility Inspector->target切换至模拟器->选择设置标签,就可以看到修改字体大小的滑块了。这个时候滑动滑块就能看到我们的 label 字体在实时地改变。如果我们连接了 iPhone ,我们也可以将target切换至我们的 iPhone 。


    image.png
  3. 移动滑块后实时效果


    Dynamictype.gif
Ref:

Developing for iOS 9: Supporting Dynamic Type and Responding to User Changes

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • 动态字体是iOS7才被引入到iPhone上的,我们可以在手机的设置-通用-字体大小里面设置手机显示的字体大小,设置...
    ShenYj阅读 3,140评论 0 3
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,212评论 7 249
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,943评论 4 60
  • 有人说过,从来哭着闹着要走的人,都不是真正会离开的人。她们只是想通过这种强烈的表达方式,掩饰需要你主动挽留的态度。...
    54谭小姐阅读 296评论 0 1
  • 不管我和谁说起我和他的故事,都会认为这故事里的男女主角一定是两情相悦的。可惜这故事的女主角是我这样的丑小鸭,所以,...
    诗晴话驿阅读 1,015评论 2 3