打造 Material 字型樣式主題 | 實現篇

打造 Material 字型樣式主題 | 實現篇

使用

Material 主題

(Theming) 自定義

Material 元件

,目的是讓元件觀感與品牌保持一致。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)。每一種樣式的屬性都有預設的 “基準” 值 (文字尺寸、字元間距、大小寫等)。

打造 Material 字型樣式主題 | 實現篇

△ 具有基準值的 MDC 字型樣式屬性

Material 元件使用這些字型樣式屬性來為元件的文字元素設定樣式,這些元件通常繼承自 TextView 或組合了一個或多個 TextView。

打造 Material 字型樣式主題 | 實現篇

△ 一個按鈕中使用的字型樣式屬性 (紅色)

字型樣式屬性在佈局和元件樣式中的應用如下:

android:textAppearance=”?attr/textAppearanceBody1”

關於字型樣式屬性的使用,以及多種樣式化方案同時使用時被應用的優先順序順序,如需瞭解更多,請查閱

Nick Butcher

的文章 —— “

如何實現文字外觀

”。

在 MDC 主題中,這些屬性會對映到樣式上,例如:

計算字元間距

字元間距在 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 ——>

MaterialTextView 和行高

系統版本的 TextView 在 API 28 中添加了

android:lineHeight

屬性。MDC 透過

MaterialTextView

類為該屬性提供了向下相容能力。您不需要直接在佈局中使用該類,因為

MaterialComponentsViewInflater

會自動將

替換為

MaterialTextView

您可以在多種場景中使用

lineHeight

作為一個 item 被包含於

TextAppearance

樣式中 (使用

android:textAppearance=“。。。”

應用該樣式)

作為一個 item 被包含於父樣式為

Widget。MaterialComponents。TextView

的元件樣式中 (使用

style=“。。。”

應用該樣式)

直接應用於佈局中的

打造 Material 字型樣式主題 | 實現篇

△ 不同的行高值

注意事項

您不必覆寫全部字型樣式。但是請注意,預設的 MDC 樣式使用系統字型 (通常是 Roboto)。請確保檢查了您的元件和

TextView

使用的是哪種字型樣式。

雖然

TextAppearance

支援設定

android:textColor

,但 MDC 偏向於在主要元件樣式中宣告該屬性以保證遵循關注點分離原則,例如:

額外的字型樣式

如果您的設計系統需要的字型樣式在 Material 主題提供的 13 種樣式外,慶幸的是在 Android 中實現起來相對簡單,您可以透過如下方式宣告樣式屬性:

<!—— Copyright 2020 Google LLC。 SPDX-License-Identifier: Apache-2。0 ——><!—— In res/values/attrs。xml ——><!—— In res/values/type。xml ——><!—— In res/values/themes。xml ——>

覆寫應用主題中的字型樣式

接下來,我們來討論如何透過覆寫相應屬性,將您選擇的字型樣式新增到應用主題中。

首先,我們建議您設定主題以便優雅地處理淺色和深色調色盤,同時也可以減少與基本主題的重複。如需瞭解更多此話題相關資訊,請參閱

Chris Banes

撰寫的

深色主題文章

,以及他和

Nick Butcher

的演講 —— “

使用樣式開發主題

”。

設定完成後,在您應用的基本主題中覆寫您想要改變的字型樣式屬性:

<!—— Copyright 2020 Google LLC。 SPDX-License-Identifier: Apache-2。0 ——><!—— In res/values/themes。xml ——>

Material 元件會響應主題級的字型樣式覆寫:

打造 Material 字型樣式主題 | 實現篇

△ Material 元件響應主題級的字型樣式覆寫

MDC 元件中的字型樣式

您已經知道 MDC 元件會響應主題級的樣式覆寫。但是您如何知道諸如某個按鈕使用 textAppearanceButton 作為它文字標籤的樣式呢?讓我們來看看以下幾種方式。

構建 Material 主題

構建 Material 主題

是一個可互動的 Android 專案,您可以透過它修改顏色、字型樣式、形狀的值來建立您自己的 Material 主題。它還包含了所有主題引數和元件的目錄。您可以按如下步驟來確定哪些元件會響應主題字型樣式屬性的改變:

克隆

該專案

並在 Android Studio 中執行它

調整

res/values/type.xml

res/values/themes.xml

檔案中的值

重新執行應用並觀察視覺變化

打造 Material 字型樣式主題 | 實現篇

△ 構建 Material 主題中的字型樣式變化

MDC 開發者文件

MDC 開發者文件已於最近更新。在本次更新中,我們加入了屬性表,涵蓋了開發庫中所使用的設計術語和屬性預設值。例如下面是更新的

按鈕文件

的 “Anatomy and key properties” (詳解和關鍵屬性) 部分。

打造 Material 字型樣式主題 | 實現篇

△ MDC 按鈕開發者文件中屬性表包含了字型樣式的預設值

原始碼

檢索 MDC 原始碼可以說是最可靠的方式。MDC 使用預設樣式來實現 Material 主題,因此可以檢視這些樣式以及任何可樣式化屬性和 Java 檔案。例如,查閱 MaterialButton 的

樣式

屬性

Java 檔案

打造 Material 字型樣式主題 | 實現篇

△ MDC 按鈕預設樣式中使用的字型樣式

自定義 View 中的字型樣式

您的應用中也許會引入您自己開發或現有庫中的自定義元件。當它們與標準 MDC 元件共同使用時,有必要保證它們能響應 Material 主題變化。以下是為自定義元件支援樣式主題化的注意事項。

和預設樣式中使用 MDC 屬性

當自定義 View 使用了

標籤時將可被樣式化。複用 MDC 中的 attr name 有利於保持統一。使用

標籤的預設樣式同樣可以引用 MDC 主題樣式的屬性作為它們的值。

<!—— Copyright 2020 Google LLC。 SPDX-License-Identifier: Apache-2。0 ——><!—— In res/values/attrs。xml ——> 。。。<!—— In res/values/styles。xml ——>

下一步

我們已經在 Android 應用中實現了 MDC 字型樣式主題。有關 Material 主題的其他課題,請閱讀該系列其他文章。

打造 Material 顏色主題 | 實現篇

打造 Material 形狀主題 | 實現篇

使用 Material Design 元件實現深色主題

使用 Material Design 元件實現 Material 動效

推薦開發者使用 Material Design 元件

我們一如既往地期待您在 GitHub 上提交

錯誤報告

功能需求

。另外請務必檢視 Android

示例應用

歡迎您與我們

分享

您實現的字型樣式主題。如果您遇到任何問題,請透過下方二維碼向我們提交反饋:

打造 Material 字型樣式主題 | 實現篇