【譯】為Android設(shè)置Material Components主題

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

Android MDC 系列文章：

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

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

讓我們開始！

初始設(shè)置???

這就像將單個(gè)Gradle依賴項(xiàng)添加到您的應(yīng)用程序/模塊build.gradle文件一樣簡(jiǎn)單：

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名稱空間的一部分。在此之后是獨(dú)立的功能發(fā)行版，在撰寫本文時(shí)，最新版本是1.2.0-alpha05。您可以在GitHub存儲(chǔ)庫(kù)上跟蹤新版本。

選擇“Material Components”主題??

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

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

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

每個(gè)變體的主要區(qū)別是淺色/深色調(diào)色板以及ActionBar每個(gè)主題Activity的中是否包含Window。存在DayNight這些變體以支持自動(dòng)暗/亮主題。
注意1：如果您要遷移現(xiàn)有主題，但又不想一次獲得所有新屬性，請(qǐng)使用Theme.MaterialComponents.*.Bridge變體。
注意2：此處未顯示一些輔助變體，例如Theme.MaterialComponents.Dialog.*主題。
要在您的應(yīng)用中開始使用這些主題之一，請(qǐng)?jiān)?code>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>

注意：您也可以申請(qǐng)一個(gè)android:theme每<activity>在你的清單。

一個(gè)簡(jiǎn)單的游樂場(chǎng)屏幕??

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

游樂場(chǎng)屏幕

Global theme attributes??

“The Material Components Themes”引入了可用于全局內(nèi)樣式化元素的新屬性。這些可以分為三個(gè)主要子系統(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)用程式的次要品牌色彩，主要用于強(qiáng)調(diào)某些需要突出的小部件
  • colorSecondaryVariant：您的次要品牌顏色的較淺/較深變體，在主題中很少使用
  • colorOnSecondary：用于顯示在輔助顏色頂部的元素的顏色
  • colorError：用于錯(cuò)誤的顏色（通常為紅色陰影）
  • colorOnError：用于顯示在錯(cuò)誤顏色頂部的元素的顏色
  • 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é)果可以在我們的操場(chǎng)屏幕上看到：

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

Typography

Type 屬性在文字字體，重量，大小，大小寫和字母間距方面都符合Material Type System。這些屬性引用實(shí)現(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ì)，大小，大小寫和字母間距。但是，自定義字體確實(shí)可以使您的應(yīng)用脫穎而出。一個(gè)人可能會(huì)認(rèn)為這需要覆蓋這些屬性中的每一個(gè)。幸運(yùn)的是，可以通過將以下屬性添加到您的應(yīng)用程序主題中，以更簡(jiǎn)潔的方式完成此操作：

<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)用程序中的每個(gè)小部件和文本樣式?？隙ㄓ幸欢螘r(shí)間，在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é)果可以在我們的操場(chǎng)屏幕上觀察到：

具有自定義全局類型屬性的游樂場(chǎng)屏幕

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

Shape

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

材料零件的角落可以是部分圓（默認(rèn)）或切斷 cornerFamily，并有一個(gè)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é)果可以在我們的操場(chǎng)屏幕上看到：

具有全局形狀屬性的游樂場(chǎng)屏幕已定制

Widget styles and attributes ??

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

Buttons

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

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

  • backgroundTint：色調(diào)顏色應(yīng)用于按鈕背景。對(duì)于文本按鈕和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é)果可以在我們的操場(chǎng)屏幕上看到：

自定義按鈕小部件樣式

Text Fields

Material Text Fields 包括兩個(gè)主要變體。由于移植了預(yù)先存在的AppCompat TextInputLayout和TextInputEditText類，因此實(shí)際上有兩種基本樣式：Widget.MaterialComponents.TextInputLayout.*和Widget.MaterialComponents.TextInputEditText.*。這些變體具有樣式后綴，并包括實(shí)心框（默認(rèn)*.FilledBox）和輪廓框（*.OutlinedBox）。所有文本字段變體均使用標(biāo)準(zhǔn)的文本外觀作為輸入，并將textAppearanceCaption主題屬性用作“輔助”文本（標(biāo)簽，錯(cuò)誤，計(jì)數(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*是一個(gè)使用與默認(rèn)值相同的alpha值的。*res/color*``*<selector>*``*colorSecondary**boxBackgroundColor*``*<selector>*

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

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

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é)果可以在我們的操場(chǎng)屏幕上看到：

自定義卡片小部件樣式

Bottom Navigation

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

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

  • backgroundTint：底部導(dǎo)航背景的顏色。默認(rèn)顏色colorSurface用于表面底部導(dǎo)航和colorPrimary彩色底部導(dǎo)航。
  • itemTextColor/ itemIconTint：底部導(dǎo)航項(xiàng)目圖標(biāo)和標(biāo)簽的顏色。對(duì)于表面底部導(dǎo)航和彩色底部導(dǎo)航，默認(rèn)顏色為colorOnSurface/ colorPrimary（選定）colorOnPrimary。
  • itemHorizontalTranslationEnabled：用于設(shè)置在選擇底部導(dǎo)航項(xiàng)時(shí)是否應(yīng)顯示翻譯動(dò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é)果可以在我們的操場(chǎng)屏幕上看到：

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

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

Build a Material Theme

適用于Android的Material Components庫(kù)包含一個(gè)模塊，可讓您輕松自定義現(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)您對(duì)所選的值滿意時(shí)，可以將文件拖放到新的/現(xiàn)有的Android Studio項(xiàng)目中。在Glitch上也可以使用網(wǎng)絡(luò)版本。

The “Build a Material Theme” sample app

更多資源??

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

在Twitter上找到我@ricknout

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.落筆緣由 本文主要是對(duì)Android主題和樣式的研究，本文主要是以摘抄官方文檔（地址在參考文章中給出）的內(nèi)容，...
    lgy_gg閱讀 4,052評(píng)論 0贊 1
  • 樣式和主題（Styles and Themes） 一個(gè)樣式(Style）是一個(gè)包含了指定樣子和格式的作用于視圖控件...
    張?jiān)骑wVir閱讀 2,935評(píng)論 0贊 51
  • Theming your Angular Material app 將您的Angular Material應(yīng)用程序...
    王義杰閱讀 2,461評(píng)論 0贊 0
  • 1.1 問題 你要讓自己的應(yīng)用程序在所有用戶可能運(yùn)行的Android版本上創(chuàng)建一致的外觀和體驗(yàn)，同時(shí)減少維護(hù)這些自...
    Jennyni1122閱讀 801評(píng)論 0贊 1
  • 我生來(lái)便不會(huì)與人聊天。 不知道該如何開始一個(gè)話題，更不知道該如何繼續(xù)一個(gè)話題。 我總覺得我說出的話語(yǔ)有些不合時(shí)宜，...
    日目閱讀 260評(píng)論 2贊 1

友情鏈接更多精彩內(nèi)容