image

為了保證您的應(yīng)用與用戶設(shè)備中安裝的其他應(yīng)用在視覺(jué)和行為上保持一致，我們 推薦 您遵循 Material Design 規(guī)范，因?yàn)橛脩魪囊粋€(gè)應(yīng)用中學(xué)習(xí)的操作模式可以無(wú)縫銜接地在另一個(gè)應(yīng)用中使用。

Android 用戶希望您的應(yīng)用在視覺(jué)和行為上與系統(tǒng)保持一致。您在設(shè)計(jì)視覺(jué)和導(dǎo)航模式時(shí)應(yīng)該遵循 Material Design 規(guī)范…

—— d.android.com/design

您可以使用 Material Design Components (MDC) 組件庫(kù)來(lái) 實(shí)現(xiàn) 這一目的。本文將列出使用 MDC 的優(yōu)勢(shì)，從而說(shuō)明我們推薦使用它的原因。

組件

image

MDC 提供了系統(tǒng)標(biāo)準(zhǔn)組件的 Material 版本，例如 Buttons、Toolbars、CheckBox 等等，使用這些組件能輕松實(shí)現(xiàn) Material 風(fēng)格。如果您使用了 MaterialComponents 主題，當(dāng)您 inflate 一個(gè) layout (通過(guò) MDC 的 View Inflater) 時(shí)，被實(shí)例化是 Material 組件而不是標(biāo)準(zhǔn)組件，因此您不需要對(duì)布局進(jìn)行重大的更新就能輕松實(shí)現(xiàn) Material 風(fēng)格。

<!-- Copyright 2019 Google LLC.
   SPDX-License-Identifier: Apache-2.0 -->

<!--  標(biāo)準(zhǔn)組件 Button 將會(huì)被替換為 MaterialButton -->
<Button ... />

<!-- 您甚至可以使用 MaterialButton 特定的屬性 -->
<Button ...
  app:icon="@drawable/foo"/>

<!--如果您想用具有向后兼容能力的 AppCompatButton 而不是 MaterialButton，您可以這樣做 -->
<androidx.appcompat.widget.AppCompatButton ... />

所有 Material 組件都繼承自對(duì)應(yīng)的 AppCompat 組件，因此它們享有相同的向后兼容能力和新版本的 bug 修復(fù)。

Material 組件在對(duì)應(yīng)的系統(tǒng)標(biāo)準(zhǔn)組件和 AppCompat 組件的基礎(chǔ)上拓展出更多樣式和功能，例如 MaterialButton 擁有以下多種樣式:

image

<!-- Copyright 2019 Google LLC.  
   SPDX-License-Identifier: Apache-2.0 -->

<!-- Contained button -->
<Button ... 
  style="?attr/materialButtonStyle"/>

<!-- Text button -->
<Button ... 
  style="?attr/borderlessButtonStyle"/>

<!-- Outlined button -->
<Button ... 
  style="?attr/materialButtonOutlinedStyle"/>

我最喜歡的功能之一是使用 MaterialTextView 替換 TextView，它 新增的功能 可以很方便地在 TextAppearance 中設(shè)置行高。

除了拓展現(xiàn)有組件的功能外，MDC 還提供了一系列全新的組件。您可能知道 Bottom Navigation、Bottom Sheet 和 Floating Action Button，但未必聽(tīng)說(shuō)過(guò) Chips、Date Picker 和 Time Picker。

image

MDC 提供的全部組件列單，請(qǐng)查閱 —— 組件。

Material 主題

image

Material 主題 可以更系統(tǒng)地 自定義 Material Design 樣式來(lái)體現(xiàn)您的產(chǎn)品品牌。Material 主題包括 顏色、字體樣式 和 形狀 屬性。對(duì)其進(jìn)行自定義將自動(dòng)應(yīng)用到您用于構(gòu)建應(yīng)用的組件上。

您可以將 Material 主題理解為創(chuàng)建設(shè)計(jì)系統(tǒng)的設(shè)計(jì)系統(tǒng) ??。您只需配置好顏色、字體樣式和形狀，即可得到一套基于您品牌的完整設(shè)計(jì)系統(tǒng)。

Nick Rout 在以下文章中分別深入地介紹了這三個(gè)子系統(tǒng):

• 打造 Material 顏色主題 | 實(shí)現(xiàn)篇
• 打造 Material 字體樣式主題｜實(shí)現(xiàn)篇
• 打造 Material 形狀主題 | 實(shí)現(xiàn)篇

深色主題

image

MDC 組件遵循 Material 的 深色主題背景規(guī)范 實(shí)現(xiàn)了深色主題。在深色主題下，許多組件都將調(diào)整它們的顏色，并且在陰影不可見(jiàn)的情況下添加了 elevation 疊加層以表現(xiàn)高度變化。

Chris Banes 在下面這篇文章中深入介紹了 MDC 的深色主題:

• 使用 Material Design 組件實(shí)現(xiàn)深色主題

Material 動(dòng)效 ??

image

Material Design 還針對(duì)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)制定了規(guī)范?，F(xiàn)在，MDC 不僅提供了 規(guī)范，還將這些模式實(shí)現(xiàn)為 Transition 以便您在應(yīng)用中使用。

Hunter Stich 在下面這篇文章中介紹了 Material Motion 庫(kù):

• 使用 Material Design 組件實(shí)現(xiàn) Material 動(dòng)效

使用 Compose

Jetpack Compose 是 Android 系統(tǒng)的下一代 UI 工具包，目前 已正式發(fā)布。它會(huì)提供 Material 風(fēng)格的組件和主題。盡早使用 MDC 將為未來(lái)遷移至 Jetpack Compose 做好準(zhǔn)備 — 它們使用了相同的概念、設(shè)計(jì)名詞和組件。您甚至可以使用類(lèi)似 MDC-Android Compose 主題適配器 的庫(kù)來(lái)簡(jiǎn)化遷移過(guò)程，該庫(kù)將 XML 實(shí)現(xiàn)的 MDC 主題轉(zhuǎn)換為 Compose 的 MaterialTheme。

推薦使用 Material

希望您已經(jīng)清楚我們推薦使用 Material Design Components 構(gòu)建 Android UI 的原因。我們 近期更新 了在 Android Studio 中通過(guò) File > New Project 菜單新建的模版，這些模版為您預(yù)設(shè)置了 Material 主題并使用了 MDC，因此您可以更容易的開(kāi)始使用 MDC。如果您還沒(méi)有遷移到 MDC，請(qǐng)查看我們的 遷移指南。