使用
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 主題中,這些屬性會對映到樣式上,例如:
計算字元間距
字元間距在 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=“。。。”
應用該樣式)
直接應用於佈局中的
△ 不同的行高值
注意事項
您不必覆寫全部字型樣式。但是請注意,預設的 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 ——>
覆寫應用主題中的字型樣式
接下來,我們來討論如何透過覆寫相應屬性,將您選擇的字型樣式新增到應用主題中。
首先,我們建議您設定主題以便優雅地處理淺色和深色調色盤,同時也可以減少與基本主題的重複。如需瞭解更多此話題相關資訊,請參閱
Chris Banes
撰寫的
深色主題文章
,以及他和
Nick Butcher
的演講 —— “
使用樣式開發主題
”。
設定完成後,在您應用的基本主題中覆寫您想要改變的字型樣式屬性:
<!—— Copyright 2020 Google LLC。 SPDX-License-Identifier: Apache-2。0 ——><!—— In res/values/themes。xml ——>
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 主題變化。以下是為自定義元件支援樣式主題化的注意事項。
在
和預設樣式中使用 MDC 屬性
當自定義 View 使用了
標籤時將可被樣式化。複用 MDC 中的 attr name 有利於保持統一。使用
標籤的預設樣式同樣可以引用 MDC 主題樣式的屬性作為它們的值。
<!—— Copyright 2020 Google LLC。 SPDX-License-Identifier: Apache-2。0 ——><!—— In res/values/attrs。xml ——>
下一步
我們已經在 Android 應用中實現了 MDC 字型樣式主題。有關 Material 主題的其他課題,請閱讀該系列其他文章。
打造 Material 顏色主題 | 實現篇
打造 Material 形狀主題 | 實現篇
使用 Material Design 元件實現深色主題
使用 Material Design 元件實現 Material 動效
推薦開發者使用 Material Design 元件
我們一如既往地期待您在 GitHub 上提交
錯誤報告
和
功能需求
。另外請務必檢視 Android
示例應用
。
歡迎您與我們
分享
您實現的字型樣式主題。如果您遇到任何問題,請透過下方二維碼向我們提交反饋: