Material Design 3 全新的進階版本UI庫！
就在前不久，Google在 I/O 大會上發布了Material You，突出最新迭代的 Material Design 系統 Material Design 3 中最具表現力的個性化功能。除了支持動態顏色，同時還更新了多個 Material 組件。
準備好遷移到 Material Design 3 了嗎?讓我們開始吧!
從 M2 遷移到 M3(MDC 1.4.0 到 MDC 1.5.0)
將 Theme 更新為 Material 3
Material Design 3 具有擴展的顏色系統，可利用動態顏色等功能。
如果大家使用 Material Theme Builder 重新配置 palettes 的話，可以簡單地放入 Android XML 或 Compose 的主題代碼。否則，請替換 Theme.MaterialComponents.* 為 Theme.Material3.* 主題和 Widget.MaterialComponents.* 的部件樣式。
顏色和主題
Material You 中的主題擴展了其前身的顏色空間，添加了第三顏色和從主要顏色、次要顏色、第三顏色和錯誤顏色派生的許多插值顏色。
完整版本：
這些新的色彩空間支持動態色彩表達,使用 Material Theme Builder 簡化了動態顏色的可視化并遷移到新顏色系統，可在 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}
組件更新
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體驗!
