使用adaptive fonts让文字大小适配UI

460 阅读3分钟

除了可以使用adaptive layout让UI适配不同分辨率之外,我们还可以使用adaptive fonts让字体适配不同的UI,或者针对特定的屏幕定制字体。我们通过这段视频来了解一下。

首先,为了演示,我们在Doraemon右边放了一个info按钮,点它可以切换到一个显示Doraemon详细信息的界面。大家可以点这里下载start project模板。

image

接下来,我们在UIView里,添加两个UILabel,把字体颜色设置为白色,内容居中对齐。上面的Label设置成“Height (cm):“,字体“Helvetica Neue”,52 point,下面的Label设置成“129.3”,字体“Helvetica Neue”,110 point。这是Doraemon的身高”;

image

然后,给这两个UILabel添加一些约束:

  • 上面的Label添加容器内水平居中以及距容器顶端5 point约束;
  • 下面的Label添加容器内水平居中以及距容器底端5 point约束;

image

image

image

之后,在Preview里,我们就可以看到它们在竖屏上显示正常,但是横屏上,却“出界”了。解决这个问题的方式有两种,我们分别来看一下它们。

image


Adaptive font登场

首先,我们要先让两个“出界”的UILabel回到蓝色的UIView内部。在size selector中选中“Compact Height”把storyboard切换到横屏模式:

image

  • 选中"Height (cm):",按住Ctrl,把它拖拽到蓝色的UIView上,选择“Equal width”;

image

  • 对下面的UILabel做同样的操作;
  • 选中About Dora View Controller,点“Resolve auto layout issues”,选择“Update Frames”;

image

“当按住Ctrl拖拽UILabel时,一定要拖拽到它外围的UIView上。不要不小心拖动到另一个UILabel上。”

特别提示

这样,我们就可以看到这两个UILabel就和横屏下的UIView等宽了,但是这时,UILabel的内容却被截断了。

image

如果我们希望让UILabel自动根据UI的大小进行适配,选中两个UILabel,打开Attribute inspector,在Autoshrink中,选择“Minimum Font Scale”,就可以在Interface builder中看到它们自动根据UIView的大小进行了调整。

image

然后,由于我们调整了UILabel的大小,之前设置的约束会提示我们UILabel偏移了一些位置。选中About Dora View Controller,点“Resolve auto layout issues”,选择“Update Frames”更新一下UI,就可以看到这两个Label,在横屏上,都正常显示了。

image

如果我们希望针对不同的UI尺寸手动指定字体大小,我们不能像适配UI一样,把storyboard适配到Compact height,然后修改字体的大小。因为字体的修改是全局的,我们在Compact height中调整字体,在“w Any h Any”模式下同样会生效。

“我们可以在横屏storyboard中调整字体大小,然后在竖屏的Preview可以看到字体大小会随之改变。”

特别提示

选中其中一个UILabel,在attribute inspector中,可以看到Font左边有一个“+”号,点击它,就会发现一个和size selector类似的9宫格选项,因为我们要为横屏模式定制字体,因此,选择“Any width -> Compact height”。

image

这样,我们就多了一个字体选项,我们把Compact height模式下129.3这个UILabel的大小,设置为95,就可以看到横屏模式下的字体被修改了。这时,我们按Command + R重新编译执行,就可以在App中看到字体的适配了。

image