打造 Material 字体样式主题 | 实现篇

2022-03-09 15:15:21 浏览数 (1)

使用 Material 主题 (Theming) 自定义 Material 组件,目的是让组件观感与品牌保持一致。Material 主题包括 颜色、字体 和 形状 参数,您可以对这些参数进行调整来获得近乎无限的组件变体,同时保持其核心结构和易用性。

自版本 1.1.0 开始,您可以在 Android 中使用 Material 组件 (Material Design Components, MDC) 库 来实现 Material 主题。如果您要从设计支持库 (Design Support Library) 或 MDC 1.0.0 迁移至新版 MDC,请参阅我们提供的迁移指南—— 迁移至 Android Material 组件。

本文将重点讨论如何实现字体样式主题。

字体样式属性

Material Design 提供 13 种适用于应用中所有文字的 "样式 (styles)",每一种样式都有一个设计术语 (例如 "Body 1") 以及对应的字体样式属性,您可以在应用主题中覆写这些属性 (例如 textAppearanceBody1)。每一种样式的属性都有默认的 "基准" 值 (文字尺寸、字符间距、大小写等)。

△ 具有基准值的 MDC 字体样式属性

Material 组件使用这些字体样式属性来为组件的文本元素设置样式,这些组件通常继承自 TextView 或组合了一个或多个 TextView。

△ 一个按钮中使用的字体样式属性 (红色)

字体样式属性在布局和组件样式中的应用如下:

代码语言:javascript复制
android:textAppearance=”?attr/textAppearanceBody1”

关于字体样式属性的使用,以及多种样式化方案同时使用时被应用的优先级顺序,如需了解更多,请查阅 Nick Butcher 的文章 —— "如何实现文字外观"。

在 MDC 主题中,这些属性会映射到样式上,例如:

代码语言:javascript复制
<style name=”Theme.MaterialComponents.*” parent="...">
   ...
   <item name=”textAppearanceBody1”>
       @style/TextAppearance.MaterialComponents.Body1
   </item>
<style />

您也许在 AppCompat 或平台中已经接触过 TextAppearance 样式,我们将在本文的 字体样式资源 部分进行详细介绍。其对应的属性是 MDC 的新增内容,使您能够根据不同主题变换不同文字样式。

选择字体样式

厘清应该选择使用何种字体样式以及其中的属性值也许是设计师的责任,也许它们源自您的品牌。然而,了解每一种样式的作用及其使用场景是非常有用的:

  • textAppearanceHeadline* 样式应用于标题
  • textAppearanceSubtitle* 样式应用于副标题
  • textAppearanceBody* 样式应用于多行文本正文
  • textAppearanceButton 样式应用于按钮,但是同样也适用于其他组件的部分内容,例如 Tab 和弹窗中的操作
  • textAppearanceCaption 样式应用于小号文本,例如输入框的提示和错误信息
  • textAppearanceOverline 样式也应用于小号文本,但是它具有大写英文字母和更大的字符间距,因此更适合于小标题和 Label,例如日期选择器的标题

字体样式工具

Material Design 提供了一个实用工具,它可以预览字型缩放,集成了 Google Font,并且可以导出代码。请查阅 Material Design 字体样式指南 中的 "字型缩放生成器"。

△ Google Font (左) 和字型缩放生成器 (右)

字体样式资源

字体样式资源由字体和 TextAppearance 样式组成。让我们来看看 Android 中可用的资源以及声明样式时的注意事项。

XML 和可下载字体

字体存放于 res/font 目录下,通过 @font/ 符号引用。您可以使用本地的 XML 字体 或者 可下载字体。Android Studio 内置了向导以帮助您开始使用可下载字体,包括配置必要的证书和清单元数据。请查阅由 Rod Sheeter 撰写的 "助力 Android 开发者实现更好的排版指南" 来了解关于字体预加载更详细的指南和进一步的优化。

我们通常推荐使用可下载字体,因为它们会借助共享字体提供程序的缓存来减小应用包体积。但是,可下载字体目前仅可使用 Google Font 上的字体。如果您的应用需要使用已购买的字体或专用字体,请使用 XML 字体。

同样值得注意的是,从 API 26 开始,Android 支持使用可变字体。请查阅 Rebecca Franks 的文章 —— "Android O 上的可变字体

0 人点赞