Material Design 3 全新的進階版本UI庫

Material Design 3 全新的進階版本UI庫！


就在底前不久，Google在 I/O 大會上發布了[Material You](https://material.io/blog/announcing-material-you)，突出最新迭代的 Material Design 系統 Material Design 3 中最具錶現力的個性化功能。除了支持動態顏色，同時還更新了多個 Material 組件。

**准備好遷移到 Material Design 3 了嗎？讓我們開始吧！**

## 從 M2 遷移到 M3（MDC 1.4.0 到 MDC 1.5.0）

**將主題更新為 Material 3**

Material Design 3 具有擴展的顏色系統，可利用動態顏色等功能。

如果大家使用[ Material Theme Builder ](https://material.io/material-theme-builder)重新配置 palettes 的話，可以簡單地放入 Android XML 或 Compose 的主題代碼。否則，請替換 Theme.MaterialComponents.* 為 Theme.Material3.* 主題和 Widget.MaterialComponents.* 的部件樣式。

## 顏色和主題

Material You 中的主題擴展了其前身的顏色空間，添加了第三顏色和從主要顏色、次要顏色、第三顏色和錯誤顏色派生的許多插值顏色。

**完整版本：**
 Material 3 | MDC 1.4.0
:- | -:
android:backgroundColor | android:backgroundColor
colorPrimary| colorPrimary
colorOnPrimary | colorOnPrimary
colorPrimaryContainer| 
colorOnPrimaryContainer | 
colorPrimaryInverse | 
DEPRECATED | colorPrimaryVariant
colorSurface | colorPrimarySurface
colorOnSurface | colorOnPrimarySurface
colorSecondary | colorSecondary
colorOnSecondary | colorOnSecondary
colorSecondaryContainer | 
colorOnSecondaryContainer | 
DEPRECATED | colorSecondaryVariant
colorTertiary | 
colorOnTertiary | 
colorTertiaryContainer | 
colorOnTertiaryContainer | 
colorError | colorError
colorOnError | colorOnError
colorErrorContainer | 
colorOnErrorContainer | 
colorSurface | colorSurface
colorOnSurface | colorOnSurface
colorSurfaceVariant | 
colorOnSurfaceVariant | 
colorSurfaceInverse | 

這些新的色彩空間支持動態色彩錶達,使用 [ Material Theme Builder ](https://material.io/) 簡化了動態顏色的可視化並遷移到新顏色系統，可在 Web 和 Figma 上使用。當通過作圖工具生成時，這些中間顏色值只需提供一種顏色即可創建。


## How it works

當用戶在 Android 12 設備上更改壁紙時，系統會分析圖像已選擇顏色，並使用初 Primary 種子顏色通過算法選擇主要、次要、第三和錯誤顏色。同時，它應用了色彩理論和可訪問性規則。從這些顏色中，該算法創建從 0% 亮度（黑色）到 100%（白色）的色調調色板。通過工具創建的動態主題或自定義主題將使用這些色調調色板中的值來設置該顏色範圍的主題屬性。


例如，如果主顏色上顯示的 text/icon 的 On Primary color 是 100 色調，則 On Secondary、On Tertiary 和 On Error 都將為淺色主題各自顏色的 100 色調，也許是 20 色調對於黑暗的主題。

大家可以自由自定義任何這些值，但請注意對比度和可訪問性。

在 Android 12 設備上，Material You 將根據用戶的壁紙生成動態調色板。除了生成的調色板外，還會有幾個預先創建的方案。要選擇動態顏色，首先需要確保應用程序中沒有任何硬編碼顏色。相反，應用程序中的所有顏色都應作為主題屬性引用，這樣在啟用動態壁紙顏色支持時可以輕松交換它們。

## 整合動態色彩

Material 庫中的DynamicColors類利用 Activity Lifecycle Callbacks 來確定何時以及如何應用顏色疊加。使用提供的 API 調用，可以將動態顏色應用於子集或整個應用程序，除此之外還可以確定應在何時何地應用動態顏色。

為避免意外影響，需要確認應用程序代碼引用主題屬性不是任何硬編碼顏色（HEX 代碼或@color/）。

給定一個使用帶有 MDC 組件的 Material3 主題的應用程序，以下是啟用動態顏色所需的最少代碼 - onCreateApplication 類的方法中的一行。

```
import android.app.Application;
import com.google.android.material.color.DynamicColors;

public class MyApplication extends Application {
 @Override
 public void onCreate() {
   super.onCreate();
   // This is all you need.
   DynamicColors.applyToActivitiesIfAvailable(this);
 }
}
```

## 排版

在 Material3 之前，有 6 種標題變體、2 種字幕變體、2 種正文變體、按鈕、標題和上劃線樣式。


在 Material3 中，每個分類都有更規則且數量更少的變體，即小、中和大。


大多數 new TextAppearance 樣式直接映射到 pre-Material 3 之前的樣式。MDC-Android 中的屬性名稱使用類似的模式形成：textAppearance+ {Display, Headline, Title, Body, Label} + {Large, Medium, Small}

 New Property | Old Property
:- | -:
textAppearanceDisplayLarge | textAppearanceDisplay2
textAppearanceDisplayMedium| textAppearanceDisplay3
textAppearanceDisplaySmall | textAppearanceHeadline1
textAppearanceHeadlineLarge|textAppearanceHeadline2
textAppearanceHeadlineMedium | textAppearanceHeadline3
textAppearanceHeadlineSmall | textAppearanceHeadline4
textAppearanceTitleLarge | textAppearanceHeadline5
textAppearanceTitleSmall | textAppearanceSubhead1/Subtitle1
textAppearanceBodyLarge | textAppearanceSubhead2/Subtitle2
textAppearanceBodyMedium | textAppearanceBody1
textAppearanceBodyMedium | textAppearanceBody2
textAppearanceBodySmall | textAppearanceCaption
textAppearanceLabelLarge | textAppearanceButton
textAppearanceLabelMedium | textAppearanceOverline
textAppearanceLabelSmall | N/A

## 組件更新

### Top App Bar

Top App Bar已經被 Material You 刷新過以更好地與顏色對齊。在 Material You 之前，top app bar 使用陰影來區分 app bar 和 content。顏色現在是使用新創建的錶面色調的主要標高指標。


### Navigation Bar / Bottom Navigation View
Bottom Navigation View 進行了視覺刷新並獲得了一些新功能。目前， Bottom Navigation View 中的每個菜單項都由一個圖標和文本標簽組成。選擇目的地後，圖標和標簽都將被染成與非活動狀態不同的顏色。


在 Material Design 3 中，不活動的目的地由圖標的 OutLined 版本（如果可用）指示。活動目的地由一個填充在藥丸狀容器中的圖標錶示。

如果圖標的不同填充和 OutLined 變體不可用，就可能需要考慮其他提示來幫助指示活動狀態，例如僅在活動目的地上顯示目的地標簽。

### Floating Action Button
FloatingActionButton 經曆了一些重新設計。沒有明確主題或遺留 Widget.Design.FloatingActionButton 主題的 FAB 將在主題中繼承此新設計 Theme.Material3.*。

新的 FAB 的角半徑更小，現在類似於圓角矩形，而不是現有 FAB 的圓形。有預設樣式可以使用來自主色、輔助色或錶面顏色的色調來為 FAB 設置主題。要保留以前的浮動操作按鈕設計，請確保將 FAB 的樣式設置為@style/Widget.MaterialComponents.FloatingActionButton. 還有一個新的大型 FAB 變體。


### Button

Material Design 3 中的填充和輪廓按鈕具有完全圓角，包含在派生自 Theme.Material3.*.


### Chips
在 Material Design 2 中，芯片具有完全圓角，在 Material Design 3 中，它們發生了視覺變化，現在有 8 個 dp 角。它們在材料 3 中都有 8 個 dp 角。


### Badges
Bottom Navigation View 現在能够將關聯的 Badges 顯示為填充形狀或帶有標簽。通過將其重力設置為以下聲明的常量之一，可以將 Badges 錨定到圖標的四個角之一 Badge Drawable.BadgeGravity：

> TOP_START

> TOP_END

> BOTTOM_START

> BOTTOM_END

下面是一些代碼，展示了如何將 Badges 添加到 BottomNavigationView 菜單項：

```
Navigation View bn = //... items.

// Retrieve the first menu item and increment the badge label MenuItem menuItem = bn.getMenu().getItem(0);

int menuItemId = menuItem.getItemId(); 
Badge Drawable badgeDrawable = bn.getOrCreateBadge(menuItemId);
// If the first menu item is selected and the badge was hidden, 
// call Badge Drawable #setVisible to ensure the badge is visible. 
badge Drawable.setVisible(true);
badge Drawable.setNumber(badgeDrawable.getNumber() +1);
```

## 下一步是什麼？
大家看完上述文章想必已經了解了 MDC 1.4.0 和 1.5.0（Material Design 3）版本之間的主要區別。

所以還在等什麼，趕緊快來替換接入Material Design 3， 探索不一樣的UI體驗！

## ️/ 感謝支持 /
以上便是本次分享的全部內容，希望對你有所幫助^_^

喜歡的話別忘了 分享、點贊、收藏 三連哦~

歡迎關注公眾號 **程序員巴士**，來自字節、蝦皮、招銀的三端兄弟，分享編程經驗、技術幹貨與職業規劃，助你少走彎路進大廠。