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

Android MDC 系列文章：

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

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

本文將僅介紹新的全局主題屬性和每個小部件樣式屬性土童。鑒于Theme.MaterialComponents主題擴(kuò)展預(yù)先存在的Theme.AppCompat變種，它們繼承了所有的屬性（想colorAccent工坊，colorControlNormal等）献汗，這將不包括在內(nèi)。

讓我們開始王污！

初始設(shè)置???

這就像將單個Gradle依賴項添加到您的應(yīng)用程序/模塊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主題一樣就谜，“材質(zhì)組件”主題包含一些基本變體供您選擇：

材質(zhì)組件主題（從左到右）：Theme.MaterialComponents，Theme.MaterialComponents.NoActionBar啊易，Theme.MaterialComponents.Light

材質(zhì)組件主題（從左到右）：Theme.MaterialComponents.Light.DarkActionBar吁伺，Theme.MaterialComponents.Light.NoActionBar

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

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

最后，您需要在清單中引用此內(nèi)容：

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

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

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

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

游樂場屏幕

Global theme attributes??

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

Color

Color 屬性主要包括primary简烘，secondary苔严，error，surface和background色孤澎，以及它們各自的輔助變體和“上”色届氢。其中的一些已經(jīng)從程序兼容性主題重復(fù)使用（例如colorPrimary，colorError和android:colorBackground）：

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

可以將這些顏色添加到您的應(yīng)用主題中壤靶，如下所示：

<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：當(dāng)前不支持十六進(jìn)制顏色代碼*android:colorBackground*，因此為什么要使用顏色資源惊搏。

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

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

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

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噪奄，全大寫

“材料組件”小部件將按照“材料”準(zhǔn)則使用這些樣式死姚。

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

<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并將自定義字體應(yīng)用于應(yīng)用程序中的每個小部件和文本樣式姑尺。肯定有一段時間蝠猬，在Android上并非如此輕松切蟋！

但是卢厂，如果您希望自定義“材料組件”文本外觀樣式中的一種钠怯，則可以這樣進(jìn)行：

<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>

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

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

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

Shape

Shape 屬性是指應(yīng)用程序中每個表面和小部件的一般形式啰劲。當(dāng)您認(rèn)為這些組件的寬度/高度可以變化并且可以升高/升高/輪廓化時损搬，這可以減少到定制的一個方面……角落起惕。

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

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

“材料組件”小部件將按照“材料”準(zhǔn)則使用這些樣式爬迟。

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

<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>

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

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

Widget styles and attributes ??

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

Buttons

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

自定義這些樣式的關(guān)鍵屬性如下：

• backgroundTint：色調(diào)顏色應(yīng)用于按鈕背景克蚂。對于文本按鈕和colorPrimary所有其他變體闺鲸，默認(rèn)啟用的顏色是透明的。
• iconTint：色調(diào)顏色應(yīng)用于可選的按鈕圖標(biāo)埃叭。默認(rèn)啟用的顏色是colorPrimary用于文本按鈕和colorOnPrimary所有其他變體的顏色摸恍。
• rippleColor：按鈕觸摸波紋的顏色。默認(rèn)顏色是colorOnPrimary凸起/未凸起按鈕和colorPrimary輪廓/文本按鈕的顏色。
• strokeColor：按鈕背景周圍的筆觸顏色立镶。默認(rèn)顏色是colorOnSurface輪廓按鈕的顏色壁袄，其他顏色是透明的。
• strokeWidth：按鈕背景周圍的筆觸寬度媚媒。概述按鈕的默認(rèn)值為1dp嗜逻，其他所有變量的默認(rèn)值為0dp。
• shapeAppearance：按鈕背景的形狀外觀缭召。默認(rèn)值為shapeAppearanceSmallComponent栈顷。

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

<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>

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

自定義按鈕小部件樣式

Text Fields

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

定制Widget.MaterialComponents.TextInputLayout.*樣式的關(guān)鍵屬性如下：

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

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

< 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*是一個使用與默認(rèn)值相同的alpha值的痴奏。*res/color*``*<selector>*``*colorSecondary**boxBackgroundColor*``*<selector>*

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

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

Cards

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

• cardBackgroundColor：卡片背景的顏色读拆。默認(rèn)顏色是colorSurface擅憔。
• cardElevation：卡的高度。默認(rèn)值為1dp檐晕。
• shapeAppearance：卡片背景的形狀外觀暑诸。默認(rèn)值為shapeAppearanceMediumComponent。

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

<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>

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

自定義卡片小部件樣式

Bottom Navigation

“Material Bottom Navigation”包括兩個從基本Widget.MaterialComponents.BottomNavigationView樣式繼承的主要變體个榕，帶有一個可選的樣式后綴：表面（默認(rèn)啦逆，無后綴）和彩色（*.Colored）。底部導(dǎo)航標(biāo)簽將textAppearanceCaption主題屬性用于其排版樣式笛洛。

自定義這些樣式的關(guān)鍵屬性如下：

• backgroundTint：底部導(dǎo)航背景的顏色夏志。默認(rèn)顏色colorSurface用于表面底部導(dǎo)航和colorPrimary彩色底部導(dǎo)航。
• itemTextColor/ itemIconTint：底部導(dǎo)航項目圖標(biāo)和標(biāo)簽的顏色苛让。對于表面底部導(dǎo)航和彩色底部導(dǎo)航沟蔑，默認(rèn)顏色為colorOnSurface/ colorPrimary（選定）colorOnPrimary。
• itemHorizontalTranslationEnabled：用于設(shè)置在選擇底部導(dǎo)航項時是否應(yīng)顯示翻譯動畫的標(biāo)志狱杰。默認(rèn)值為false瘦材。

基本的底部導(dǎo)航樣式（由BottomNavigationViewwidget類使用）可以像下面這樣自定義和全局應(yīng)用：

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

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

自定義的底部導(dǎo)航小部件樣式

這當(dāng)然不是詳盡無遺的。有關(guān)所有組件及其屬性的更全面列表仿畸，請參見Android Docs的材料組件食棕。

Build a Material Theme

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

The “Build a Material Theme” sample app

更多資源??

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

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

在Twitter上找到我@ricknout