关于android:打造-Material-字体样式主题-实现篇

应用 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。

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

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

android:textAppearance=”?attr/textAppearanceBody1”

对于字体款式属性的应用，以及多种款式化计划同时应用时被利用的优先级程序，如需理解更多，请查阅 Nick Butcher 的文章 —— “ 如何实现文字外观 ”。

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

<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 上的可变字体🖍” 以理解更多信息。

TextAppearance 款式

TextAppearance 款式能够被当成是 Android 上的 Material Design 字体款式。对于自定义的款式，咱们举荐两种办法来帮您实现关注点拆散，并为利用中的字体款式主题值创立繁多的数据起源:

• 将所有 TextAppearance 款式寄存在同一个 res/values/type.xml 文件中
• 应用 MDC TextAppearance 作为父款式，并恪守雷同的命名规定

这些款式中可应用的属性和值与 TextView 反对的属性和值统一:

• fontFamily 定义字族，通常应用 @font/ 资源援用 XML 或可下载字体
• android:textSize 定义文本的大小，通常是一个 sp 尺寸
• android:textColor 定义文本的色彩
• android:letterSpacing 定义字符的间距
• android:textAllCaps 定义是否开启文本大写，是一个布尔值
• android:textFontWeight 定义字体的粗细，用于从字族中抉择最靠近的匹配项，然而只在 API 28 及以上的版本中可用。也能够应用 android:textStyle 来设置成果，例如 bold (粗体) 和 italic (斜体)

<!-- Copyright 2020 Google LLC.
   SPDX-License-Identifier: Apache-2.0 -->

<!-- In res/values/type.xml -->
<style name="TextAppearance.App.Headline6" parent="TextAppearance.MaterialComponents.Headline6">
    <item name="fontFamily">@font/roboto_mono</item>
    ...
</style>
<style name="TextAppearance.App.Body2" parent="TextAppearance.MaterialComponents.Body2">
    <item name="fontFamily">@font/roboto_mono</item>
    <item name="android:textSize">14sp</item>
    ...
</style>
<style name="TextAppearance.App.Button" parent="TextAppearance.MaterialComponents.Button">
    <item name="fontFamily">@font/roboto_mono</item>
    <item name="android:textAllCaps">false</item>
    ...
</style>

计算字符间距

字符间距在 Android 中应用的测量单位 (em) 与设计工具如 Sketch 应用的测量单位 (tracking) 不同。Material Design 排版指南 提供了一个绝对简略的方程式将 tracking 值转换为适合的 em 值:

(Sketch 中的 tracking 值 / 字体尺寸 sp) = 字符间距

<!-- Copyright 2020 Google LLC.
   SPDX-License-Identifier: Apache-2.0 -->

<!-- (0.25 tracking / 14sp font size) = 0.0178571429 em -->
<style name="TextAppearance.App.Body2" parent="TextAppearance.MaterialComponents.Body2">
    <item name="fontFamily">@font/roboto_mono</item>
    <item name="android:textSize">14sp</item>
+    <item name="android:letterSpacing">0.0178571429</item>
    ...
</style>

MaterialTextView 和行高

零碎版本的 TextView 在 API 28 中增加了 android:lineHeight 属性。MDC 通过 MaterialTextView 类为该属性提供了向下兼容能力。您不须要间接在布局中应用该类，因为 MaterialComponentsViewInflater 会主动将 <TextView> 替换为 MaterialTextView。

您能够在多种场景中应用 lineHeight:

• 作为一个 item 被蕴含于 TextAppearance 款式中 (应用 android:textAppearance="..." 利用该款式 )
• 作为一个 item 被蕴含于父款式为 Widget.MaterialComponents.TextView 的组件款式中 (应用 style="..." 利用该款式 )
• 间接利用于布局中的 <TextView>

△ 不同的行高值

注意事项

• 您不用覆写全副字体款式。然而请留神，默认的 MDC 款式应用零碎字体 (通常是 Roboto)。请确保查看了您的组件和 TextView 应用的是哪种字体款式。
• 尽管 TextAppearance 反对设置 android:textColor，但 MDC 偏差于在次要组件款式中申明该属性以保障遵循关注点拆散准则，例如:

<style name=”Widget.MaterialComponents.*”parent=”...”>
   ...
   <!-- Color -->
   <item name=”android:textColor”>?attr/colorOnSurface</item>
   <!-- Type -->
   <item name=”android:textAppearance”>
       ?attr/textAppearanceBody1
   </item>
</style>

额定的字体款式

如果您的设计零碎须要的字体款式在 Material 主题提供的 13 种款式外，庆幸的是在 Android 中实现起来绝对简略，您能够通过如下形式申明款式属性:

<!-- Copyright 2020 Google LLC.
   SPDX-License-Identifier: Apache-2.0 -->

<!-- In res/values/attrs.xml -->
<attr name="textAppearanceCustom" format="reference" />

<!-- In res/values/type.xml -->
<style name="TextAppearance.App.Custom" parent="TextAppearance.MaterialComponents.*">
    ...
</style>

<!-- In res/values/themes.xml -->
<style name="Theme.App" parent="Theme.MaterialComponents.*">
    ...
    <item name="textAppearanceCustom">@style/TextAppearance.App.Custom</item>
</style>

覆写利用主题中的字体款式

接下来，咱们来探讨如何通过覆写相应属性，将您抉择的字体款式增加到利用主题中。

首先，咱们建议您设置主题以便优雅地解决浅色和深色调色板，同时也能够缩小与根本主题的反复。如需理解更多此话题相干信息，请参阅 Chris Banes 撰写的 深色主题文章，以及他和 Nick Butcher 的演讲 —— “ 应用款式开发主题 ”。

设置实现后，在您利用的根本主题中覆写您想要扭转的字体款式属性:

<!-- Copyright 2020 Google LLC.
   SPDX-License-Identifier: Apache-2.0 -->

<!-- In res/values/themes.xml -->
<style name="Theme.App.Base" parent="Theme.MaterialComponents.*">
    ...
    <item name="textAppearanceHeadline6">
        @style/TextAppearance.App.Headline6
    </item>
    <item name="textAppearanceBody2">
        @style/TextAppearance.App.Body2
    </item>
    <item name="textAppearanceButton">
        @style/TextAppearance.App.Button
    </item>
    <!-- Using default values for textAppearanceSubtitle1, textAppearanceCaption, etc. -->
</style>

Material 组件会响应主题级的字体款式覆写:

△ Material 组件响应主题级的字体款式覆写

MDC 组件中的字体款式

您曾经晓得 MDC 组件会响应主题级的款式覆写。然而您如何晓得诸如某个按钮应用 textAppearanceButton 作为它文本标签的款式呢？让咱们来看看以下几种形式。

构建 Material 主题

构建 Material 主题 是一个可交互的 Android 我的项目，您能够通过它批改色彩、字体款式、形态的值来创立您本人的 Material 主题。它还蕴含了所有主题参数和组件的目录。您能够按如下步骤来确定哪些组件会响应主题字体款式属性的扭转:

• 克隆 该我的项目 并在 Android Studio 中运行它
• 调整 res/values/type.xml 和 res/values/themes.xml 文件中的值
• 从新运行利用并察看视觉变动

△ 构建 Material 主题中的字体款式变动

MDC 开发者文档

MDC 开发者文档已于最近更新。在本次更新中，咱们退出了属性表，涵盖了开发库中所应用的设计术语和属性默认值。例如上面是更新的 按钮文档 的 “Anatomy and key properties” (详解和要害属性) 局部。

△ MDC 按钮开发者文档中属性表蕴含了字体款式的默认值

源码

检索 MDC 源码能够说是最牢靠的形式。MDC 应用默认款式来实现 Material 主题，因而能够查看这些款式以及任何可款式化属性和 Java 文件。例如，查阅 MaterialButton 的 款式、属性 和 Java 文件。

△ MDC 按钮默认款式中应用的字体款式

自定义 View 中的字体款式

您的利用中兴许会引入您本人开发或现有库中的自定义组件。当它们与规范 MDC 组件独特应用时，有必要保障它们能响应 Material 主题变动。以下是为自定义组件反对款式主题化的注意事项。

在 <declare-styleable> 和默认款式中应用 MDC 属性

当自定义 View 应用了 <declare-styleable> 标签时将可被款式化。复用 MDC 中的 attr name 有利于放弃对立。应用 <declare-styleable> 标签的默认款式同样能够援用 MDC 主题款式的属性作为它们的值。

<!-- Copyright 2020 Google LLC.
   SPDX-License-Identifier: Apache-2.0 -->

<!-- In res/values/attrs.xml -->
<declare-styleable name="AppCustomView">
    <attr name="titleTextAppearance" />
    <attr name="subtitleTextAppearance" />
    ...
</declare-styleable>

<!-- In res/values/styles.xml -->
<style name="Widget.App.CustomView" parent="android:Widget">
    <item name="titleTextAppearance">?attr/textAppearanceHeadline6</item>
    <item name="subtitleTextAppearance">?attr/textAppearanceBody2</item>
    ...
</style>

下一步

咱们曾经在 Android 利用中实现了 MDC 字体款式主题。无关 Material 主题的其余课题，请浏览该系列其余文章。

• 打造 Material 色彩主题 | 实现篇
• 打造 Material 形态主题 | 实现篇
• 应用 Material Design 组件实现深色主题
• 应用 Material Design 组件实现 Material 动效
• 举荐开发者应用 Material Design 组件

咱们判若两人地期待您在 GitHub 上提交 错误报告 和 性能需要。另外请务必查看 Android 示例利用。

欢迎您与咱们 分享 您实现的字体款式主题。如果您遇到任何问题，请通过下方二维码向咱们提交反馈: