本文為 Nick Rout 發(fā)布于 Medium 的文章譯文（Google 翻譯）
原文鏈接為 Setting up a Material Components theme for Android
本文僅作為個人學習記錄所用。如有涉及侵權，請相關人士盡快聯(lián)系譯文作者。

Android MDC 系列文章：

• 第一篇：【譯】為Android設置Material Components主題
• 第二篇：【譯】Android材質組件的動手實踐：Bottom App Bar
• 第三篇：【譯】Android材質組件的動手實踐：Bottom Navigation
• 第四篇：【譯】Android材質組件的動手實踐：Bottom Sheet
• 第五篇：【譯】Android材質組件的動手實踐：Buttons
• 第六篇：【譯】Android材質組件的動手實踐：Chips
• 第七篇：【譯】Android材質組件的動手實踐：Cards
• 第八篇：【譯】Android材質組件的動手實踐：Dialogs
• 第九篇：【譯】Android材質組件的動手實踐：Selection Controls

因此，您已經將Android應用程序遷移到AndroidX，并且在此過程中，還切換到了使用Android的Material Components而非Design Support Library。另外，也許您很幸運，需要從頭開始啟動應用程序并立即使用這些新庫。無論哪種情況，您現(xiàn)在都已將包含在應用程序中的核心窗口小部件歸入該com.google.android.material程序包，并附帶了各種新的主題/樣式屬性。

本文將僅介紹新的全局主題屬性和每個小部件樣式屬性。鑒于Theme.MaterialComponents主題擴展預先存在的Theme.AppCompat變種，它們繼承了所有的屬性（想colorAccent，colorControlNormal等），這將不包括在內。

讓我們開始！

初始設置???

這就像將單個Gradle依賴項添加到您的應用程序/模塊build.gradle文件一樣簡單：

implementation "com.google.android.material:material: $material_version"

Android的Material Components正在積極開發(fā)中。最初的1.0.0發(fā)行版只是現(xiàn)有com.android.support.design類到新com.google.android.material名稱空間的一部分。在此之后是獨立的功能發(fā)行版，在撰寫本文時，最新版本是1.2.0-alpha05。您可以在GitHub存儲庫上跟蹤新版本。

選擇“Material Components”主題??

與AppCompat主題一樣，“材質組件”主題包含一些基本變體供您選擇：

材質組件主題（從左到右）：Theme.MaterialComponents，Theme.MaterialComponents.NoActionBar，Theme.MaterialComponents.Light

材質組件主題（從左到右）：Theme.MaterialComponents.Light.DarkActionBar，Theme.MaterialComponents.Light.NoActionBar

每個變體的主要區(qū)別是淺色/深色調色板以及ActionBar每個主題Activity的中是否包含Window。存在DayNight這些變體以支持自動暗/亮主題。
注意1：如果您要遷移現(xiàn)有主題，但又不想一次獲得所有新屬性，請使用Theme.MaterialComponents.*.Bridge變體。
注意2：此處未顯示一些輔助變體，例如Theme.MaterialComponents.Dialog.*主題。
要在您的應用中開始使用這些主題之一，請在res/styles.xml文件中添加以下內容：

<style name="AppTheme" parent="Theme.MaterialComponents.*">
    <!-- Add attributes here -->
</style>

最后，您需要在清單中引用此內容：

<manifest
    ...>
    <application
        android:theme="@style/AppTheme">
        ...
    </application>
</manifest>

注意：您也可以申請一個android:theme每<activity>在你的清單。

一個簡單的游樂場屏幕??

是的，該開始做生意了。為了說明自定義Material Components屬性的效果，我們需要一個視覺輔助工具。我們將使用下面的游樂場屏幕，該屏幕使用Theme.MaterialComponents.Light基本主題，并且包含大多數(shù)“材料組件”小部件及其變體：

游樂場屏幕

Global theme attributes??

“The Material Components Themes”引入了可用于全局內樣式化元素的新屬性。這些可以分為三個主要子系統(tǒng)：color，typography和shape。

Color

Color 屬性主要包括primary，secondary，error，surface和background色，以及它們各自的輔助變體和“上”色。其中的一些已經從程序兼容性主題重復使用（例如colorPrimary，colorError和android:colorBackground）：

• colorPrimary：您的應用的主要品牌顏色，主要用于主題
• colorPrimaryVariant：您的主要品牌顏色的較淺/較暗變體，在主題中很少使用
• colorOnPrimary：用于顯示在原色上方的元素的顏色（例如，文本和圖標，根據(jù)可訪問性，通常為白色或半透明的黑色）
• colorSecondary：您應用程式的次要品牌色彩，主要用于強調某些需要突出的小部件
• colorSecondaryVariant：您的次要品牌顏色的較淺/較深變體，在主題中很少使用
• colorOnSecondary：用于顯示在輔助顏色頂部的元素的顏色
• colorError：用于錯誤的顏色（通常為紅色陰影）
• colorOnError：用于顯示在錯誤顏色頂部的元素的顏色
• colorSurface：用于表面的顏色（即材料“紙張”）
• colorOnSurface：用于顯示在表面顏色頂部的元素的顏色
• android:colorBackground：所有其他屏幕內容后面的顏色
• colorOnBackground：用于顯示在背景色上方的元素的顏色

可以將這些顏色添加到您的應用主題中，如下所示：

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    <item name="colorPrimary">#212121</item>
    <item name="colorPrimaryVariant">#000000</item>
    <item name="colorOnPrimary">#FFFFFF</item>
    <item name="colorSecondary">#2962FF</item>
    <item name="colorSecondaryVariant">#0039CB</item>
    <item name="colorOnSecondary">#FFFFFF</item>
    <item name="colorError">#F44336</item>
    <item name="colorOnError">#FFFFFF</item>
    <item name="colorSurface">#FFFFFF</item>
    <item name="colorOnSurface">#212121</item>
    <item name="android:colorBackground">@color/background</item>
    <item name="colorOnBackground">#212121</item>
</style>
<color name="background">#FAFAFA</color>

注意1：當前不支持十六進制顏色代碼*android:colorBackground*，因此為什么要使用顏色資源。

注意2：主題系統(tǒng)欄的使用*android:statusBarColor*和*android:navigationBarColor*屬性。

結果可以在我們的操場屏幕上看到：

快速預覽原色/副色外觀的一種好方法是使用“ 材質顏色工具”。

Typography

Type 屬性在文字字體，重量，大小，大小寫和字母間距方面都符合Material Type System。這些屬性引用實現(xiàn)（并以其命名）各種類型比例的樣式：TextAppearance.MaterialComponents.*

• textAppearanceHeadline1：輕，96sp
• textAppearanceHeadline2：輕，60sp
• textAppearanceHeadline3：常規(guī)的48sp
• textAppearanceHeadline4：常規(guī)的34sp
• textAppearanceHeadline5：常規(guī)，24sp
• textAppearanceHeadline6：中20sp
• textAppearanceSubtitle1：常規(guī)16sp
• textAppearanceSubtitle2：中14sp
• textAppearanceBody1：常規(guī)16sp
• textAppearanceBody2：常規(guī)，14sp
• <mark class="rf rg nf" style="box-sizing: inherit; cursor: pointer; background-color: rgb(255, 240, 182); color: currentcolor;">textAppearanceCaption</mark>：常規(guī)，12sp
• textAppearanceButton：常規(guī)，14sp，全大寫
• textAppearanceOverline：常規(guī)，12sp，全大寫

“材料組件”小部件將按照“材料”準則使用這些樣式。

您通常希望為每種樣式保留默認的粗細，大小，大小寫和字母間距。但是，自定義字體確實可以使您的應用脫穎而出。一個人可能會認為這需要覆蓋這些屬性中的每一個。幸運的是，可以通過將以下屬性添加到您的應用程序主題中，以更簡潔的方式完成此操作：

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    ...
    <item name="fontFamily">@font/roboto_mono</item>
    <item name="android:fontFamily">@font/roboto_mono</item>
</style>

這些屬性引用您添加到文件夾中的XML字體或可下載字體，res/font并將自定義字體應用于應用程序中的每個小部件和文本樣式。肯定有一段時間，在Android上并非如此輕松！

但是，如果您希望自定義“材料組件”文本外觀樣式中的一種，則可以這樣進行：

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    ...
    <item name="textAppearanceButton">@style/AppTextAppearance.Button</item>
</style>
<style name="AppTextAppearance.Button" parent="TextAppearance.MaterialComponents.Button">
    ...
    <item name="android:textAllCaps">false</item>
</style>

結果可以在我們的操場屏幕上觀察到：

具有自定義全局類型屬性的游樂場屏幕

最后，如果您正在尋找免費使用的自定義字體（也可以與“可下載的字體”很好地兼容），則Google字體是一個不錯的起點。

Shape

Shape 屬性是指應用程序中每個表面和小部件的一般形式。當您認為這些組件的寬度/高度可以變化并且可以升高/升高/輪廓化時，這可以減少到定制的一個方面……角落。

材料零件的角落可以是部分圓（默認）或切斷 cornerFamily，并有一個cornerSize自定義大小。可以將處理應用于所有角落或子集。形狀主題屬性參考ShapeAppearance.MaterialComponents.*樣式：

• shapeAppearanceSmallComponent：用于小零件，例如按鈕和芯片
• shapeAppearanceMediumComponent：適用于中等組件，例如卡
• shapeAppearanceLargeComponent：適用于大型組件，例如底板

“材料組件”小部件將按照“材料”準則使用這些樣式。

如果您希望自定義“Material Components”形狀外觀樣式，則可以這樣進行：

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    ...
    <item name="shapeAppearanceSmallComponent">@style/AppShapeAppearance.SmallComponent</item>
    <item name="shapeAppearanceMediumComponent">@style/AppShapeAppearance.MediumComponent</item>
</style>
<style name="AppShapeAppearance.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">8dp</item>
</style>
<style name="AppShapeAppearance.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">8dp</item>
</style>

結果可以在我們的操場屏幕上看到：

具有全局形狀屬性的游樂場屏幕已定制

Widget styles and attributes ??

盡管全局主題滿足了我們的大部分需求，但有時我們還是希望自定義各個小部件的屬性。我們將探討通用小部件的樣式（和相關屬性），以及如何在您的“材料組件”主題中引用這些樣式。

Buttons

Material Buttons 包括四個主要變體，這些變體均從基本Widget.MaterialComponents.Button樣式繼承，每個變體都帶有可選的樣式后綴：凸起（默認，無后綴），未升高（*.UnelevatedButton），輪廓（*.OutlinedButton）和文本（*.TextButton）。所有按鈕變體均使用textAppearanceButton主題屬性作為其印刷樣式。

自定義這些樣式的關鍵屬性如下：

• backgroundTint：色調顏色應用于按鈕背景。對于文本按鈕和colorPrimary所有其他變體，默認啟用的顏色是透明的。
• iconTint：色調顏色應用于可選的按鈕圖標。默認啟用的顏色是colorPrimary用于文本按鈕和colorOnPrimary所有其他變體的顏色。
• rippleColor：按鈕觸摸波紋的顏色。默認顏色是colorOnPrimary凸起/未凸起按鈕和colorPrimary輪廓/文本按鈕的顏色。
• strokeColor：按鈕背景周圍的筆觸顏色。默認顏色是colorOnSurface輪廓按鈕的顏色，其他顏色是透明的。
• strokeWidth：按鈕背景周圍的筆觸寬度。概述按鈕的默認值為1dp，其他所有變量的默認值為0dp。
• shapeAppearance：按鈕背景的形狀外觀。默認值為shapeAppearanceSmallComponent。

基本按鈕樣式（由MaterialButtonwidget類使用）可以自定義并全局應用，如下所示：

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    ...
    <item name="materialButtonStyle">@style/AppButton</item>
</style>
<style name="AppButton" parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">?attr/colorSecondary</item>
</style>

結果可以在我們的操場屏幕上看到：

自定義按鈕小部件樣式

Text Fields

Material Text Fields 包括兩個主要變體。由于移植了預先存在的AppCompat TextInputLayout和TextInputEditText類，因此實際上有兩種基本樣式：Widget.MaterialComponents.TextInputLayout.*和Widget.MaterialComponents.TextInputEditText.*。這些變體具有樣式后綴，并包括實心框（默認*.FilledBox）和輪廓框（*.OutlinedBox）。所有文本字段變體均使用標準的文本外觀作為輸入，并將textAppearanceCaption主題屬性用作“輔助”文本（標簽，錯誤，計數(shù)器等）。

定制Widget.MaterialComponents.TextInputLayout.*樣式的關鍵屬性如下：

• boxBackgroundMode：框背景，其可以是所述的模式filled，outline或none。
• boxBackgroundColor：文本字段背景的顏色。默認啟用的顏色colorOnSurface用于填充框文本字段，透明用于輪廓框文本字段。
• boxStrokeColor：文本字段背景周圍的筆觸顏色。colorOnSurface輪廓框文本字段的默認顏色為（默認狀態(tài)），填充框文本字段的默認顏色為忽略。
• hintTextColor/ errorTextColor/ counterTextColor：各種顏色不同的“幫手”文本子組件。
• shapeAppearance：文本字段背景的形狀外觀。默認值為shapeAppearanceSmallComponent。

基本文本字段樣式（由TextInputLayout小部件類使用）可以像下面這樣自定義和全局應用：

< style name =“ AppTheme” parent =“ Theme.MaterialComponents.Light” > 
    ... 
    < item name =“ textInputStyle” > @ style / AppTextField </ item > 
</ style > 
< style name =“ AppTextField” parent =“ Widget.MaterialComponents.TextInputLayout.FilledBox“>
     < item name =” boxBackgroundColor“ > @ color / text_field_background </ item > 
< / style >

注意：*text_field_background*是一個使用與默認值相同的alpha值的。*res/color*``*<selector>*``*colorSecondary**boxBackgroundColor*``*<selector>*

結果可以在我們的操場屏幕上看到：

自定義文本字段小部件樣式

Cards

Material Cards 被認為是“表面”，并使用了Widget.MaterialComponents.CardView樣式。用于自定義它們的關鍵屬性如下：

• cardBackgroundColor：卡片背景的顏色。默認顏色是colorSurface。
• cardElevation：卡的高度。默認值為1dp。
• shapeAppearance：卡片背景的形狀外觀。默認值為shapeAppearanceMediumComponent。

基本卡樣式（由MaterialCardView小部件類使用）可以自定義并全局應用，如下所示：

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    ...
    <item name="materialCardViewStyle">@style/AppCard</item>
</style>
<style name="AppCard" parent="Widget.MaterialComponents.CardView">
    <item name="cardElevation">8dp</item>
</style>

結果可以在我們的操場屏幕上看到：

自定義卡片小部件樣式

Bottom Navigation

“Material Bottom Navigation”包括兩個從基本Widget.MaterialComponents.BottomNavigationView樣式繼承的主要變體，帶有一個可選的樣式后綴：表面（默認，無后綴）和彩色（*.Colored）。底部導航標簽將textAppearanceCaption主題屬性用于其排版樣式。

自定義這些樣式的關鍵屬性如下：

• backgroundTint：底部導航背景的顏色。默認顏色colorSurface用于表面底部導航和colorPrimary彩色底部導航。
• itemTextColor/ itemIconTint：底部導航項目圖標和標簽的顏色。對于表面底部導航和彩色底部導航，默認顏色為colorOnSurface/ colorPrimary（選定）colorOnPrimary。
• itemHorizontalTranslationEnabled：用于設置在選擇底部導航項時是否應顯示翻譯動畫的標志。默認值為false。

基本的底部導航樣式（由BottomNavigationViewwidget類使用）可以像下面這樣自定義和全局應用：

< style name =“ AppTheme” parent =“ Theme.MaterialComponents.Light” > 
    ... 
    < item name =“ bottomNavigationStyle” > @ style / AppBottomNavigation </ item > 
</ style > 
< style name =“ AppBottomNavigation” parent =“ Widget.MaterialComponents.BottomNavigation.Colored“ />

結果可以在我們的操場屏幕上看到：

自定義的底部導航小部件樣式

這當然不是詳盡無遺的。有關所有組件及其屬性的更全面列表，請參見Android Docs的材料組件。

Build a Material Theme

適用于Android的Material Components庫包含一個模塊，可讓您輕松自定義現(xiàn)有的Material Theme。它為您提供了一套XML文件（color.xml/ night/color.xml，type.xml和shape.xml），它包括所有必要的基準主題的屬性這篇文章中提到。可以在相應的示例應用程序中調整和預覽這些值。當您對所選的值滿意時，可以將文件拖放到新的/現(xiàn)有的Android Studio項目中。在Glitch上也可以使用網絡版本。

The “Build a Material Theme” sample app

更多資源??

• 本文中使用的Playground應用程序的源代碼可以在GitHub上找到
• “The Components of Material Design” -Cameron Ketcham和Gautham Sajith在2018年Android開發(fā)峰會上的精彩演講，介紹了材料設計的簡要歷史以及如何在Android上使用材料組件
• “使用Material Tools＆Components設計和構建真正的Android應用程序” -我在Droidcon Kenya和DevFest South Africa 2018上的演講，涵蓋了我如何使用Material Theme Editor草圖插件，Material Gallery設計和構建 Rugby Ranker的過程，當然，Android的材質組件
• 材料設計規(guī)范實驗室

希望本文能為您使用Android的Material Components提供一些深入了解您的應用的主題。如果您有任何疑問，想法或建議，那么我很樂意收到您的來信！

在Twitter上找到我@ricknout