如何應用Material Design 3和Material You

Material You 是下一代 Material Design 的發展方向，也是一種全新的設計愿景: 方便您打造個性化的樣式設計、滿足各種需求并自適應各種屏幕;Jetpack Compose 是用于構建原生 Android 界面的新款現代工具包，可以幫助您更快地構建更出色的應用。

您可能對現有的 Compose Material 庫十分了解，它基于 Material Design 2 規范，其中包括了 Material 主題、Material 組件和深色主題等功能。新的 Compose Material 3 Jetpack 庫現已發布 Alpha 版，它基于 Material Design 3 規范，包括了更新后的主題、組件以及動態配色這類 Material You 個性化功能，旨在與新的 Android 12 視覺樣式和系統界面相得益彰。接下來，我們將使用 Jetchat 來說明如何應用 Material Design 3 和 Material You。

Jetchat 是一款使用 Jetpack Compose 構建的示例聊天應用，目前使用 Material Design 2 中的主題和組件。我們將在 Jetchat 中，應用由我們的設計人員提供的 Compose Material 3 庫的更新，其中包括更廣泛的色調顏色、對組件的最新更新，甚至包括動態配色以使應用更加個性化，從而使其更加美觀。

在開始前，我們首先要將 Material 3 的依賴項添加到模塊的 build.gradle 文件中:

implementation'androidx.compose.material31.0.0-alpha01'

我們先來看看 MaterialTheme?，F有的 MaterialTheme 可組合項是 Material Design 2 的實現，它通過調整顏色、排版和形狀系統，可以在整個應用內實現對 Material 2 組件進行主題設置。我們為 Material Design 3 引入了新版本的 MaterialTheme，可以通過調整配色方案和排版系統對 Material 3 組件的主題進行設置，而更新 Shape 的功能也會在不久之后加入。

import androidx.compose.material3.MaterialTheme @Composablefun MaterialTheme (    colorScheme: ColorScheme,    typography: Typography,    // 更新 Shape 的功能即將到來    content: @Composable () -> Unit)

首先，我們看一下配色方案。Material Design 3 將顏色細分到特定名稱的顏色槽中。比如 Material 3 組件使用的 Primary、Background 和 Error，這些顏色槽共同形成一種配色方案。部分顏色槽來自 Material Design 2，同時也引入了一些新的顏色槽以擴充整體調色板。這些顏色槽都包含了美觀的全新默認基準顏色，在淺色和深色主題上都可以應用。

上面這些顏色取自一組色調調色板，例如，我們來看一下 Primary 顏色槽。該顏色槽使用的顏色值來自 Primary 色調調色板中的不同色調，并根據淺色和深色主題選擇相應的色調，以滿足無障礙功能要求。

Compose 使用新的 ColorScheme 類對此進行建模，其參數以 Material Design 3 配色方案中的顏色槽命名。您可以使用 lightColorScheme 函數創建具有淺色基準值的 ColorScheme 實例;也可以使用自定義顏色覆蓋默認值，或者使用 darkColorScheme 設置深色默認基準值;您還可以使用 isSystemInDarkTheme 工具函數，根據系統設置在淺色和深色配色方案之間切換。

val AppLightColorScheme = lightColorScheme (    primary = Color(...),    // secondary、tertiary 等等    // 具有淺色基準值的 ColorScheme 實例) val AppDarkColorScheme = darkColorScheme(    // primary、secondary、tertiary 等等    // 具有深色基準值的 ColorScheme 實例） val dark = isSystemInDarkTheme()val colorScheme = if (dark) AppDarkColorScheme else AppLightColorScheme// 將 colorScheme 作為參數傳遞給 MaterialTheme。MaterialTheme (    colorScheme = colorScheme,    // 字型) {    // 應用內容}

接下來，我們來看看 Jetchat 的配色方案。Jetchat 的配色方案由 MaterialTheme Builder 工具生成，我們使用 Jetchat 品牌顏色中的藍色和黃色作為 Primary 顏色、Secondary 顏色和 Tertiary 顏色的來源，生成了非常適合 Jetchat 的 Material 3 配色方案，其中涵蓋了用于淺色和深色主題的顏色。Jetchat 所使用的品牌顏色取自 MaterialTheme Builder 工具生成的一組自定義色調調色板，下圖中顯示了 Primary 顏色，即藍色的色調調色板，以及配色方案中匹配的 Primary 顏色槽。

要實現 Jetchat 配色方案，首先使用 Color 類聲明這些顏色。MaterialTheme Builder 工具還可以為您導出生成的代碼。接下來，便可以使用相應的顏色值聲明 Jetchat 淺色和深色配色方案。

// 來自名為'Blue'的色調調色盤的 Primary 顏色val Blue10 = Color (0xFF000965)val Blue20 = Color (0xFF00159E)val Blue30 = Color (0xFF0023DA)val Blue40 = Color (0xFF1E40FF)val Blue80 = Color (0xFFBBC3FF)valBlue90=Color(0xFFDDE0FF) val JetchatLightColorScheme = lightColorScheme (    primary = Blue40,    onPrimary = Color.White,    primaryContainer = Blue90,    onPrimaryContainer = Blue10,    // secondary、tertiary、surface 等等) val JetchatDarkColorScheme = darkColorScheme (    primary = Blue80,    onPrimary = Blue20,    primaryContainer = Blue30,    onPrimaryContainer = Blue90,    // secondary、tertiary、surface 等等)

我們為 Jetchat 主題創建了一個新的可組合函數，該函數接收一個用于判斷深色主題的參數和一個應用內容參數，從而使我們可以在 Jetchat 的淺色和深色配色方案之間切換。接下來，我們將 colorScheme 值和 content 傳遞給內部的 MaterialTheme 可組合項，這使我們能夠封裝 Jetchat 內容并為應用提供主題。

@Composablefun JetchatTheme (    dark: Boolean = isSystemInDarkTheme(),    content: @Composable () -> Unit) {    val colorScheme = if (dark) JetchatDarkColorScheme else JetchatLightColorScheme    MaterialTheme (        colorScheme = colorScheme,        content = content,    )}

@Composablefun Message(...) {    val avatarBorderColor = if (isUserMe) {MaterialTheme.colorScheme.primary    } else {        MaterialTheme.colorScheme.tertiary    }    ...}

動態配色

接下來，讓我們來了解什么是動態配色。動態配色是 Material You 的重要部分，即用算法從用戶的壁紙中提取自定義顏色并應用于應用和系統界面，您可將此作為起點來生成完整的淺色和深色配色方案。

動態配色可在 Android 12 及更高版本中使用，要在 Compose 中實現動態 ColorScheme，需要首先檢查 Build.VERSION.SDK。如果動態配色可用，我們便可以設置動態 ColorScheme;如果不可用，則可以回退到像以前一樣使用 lightColorScheme 或 darkColorScheme:

val dynamic = Build.VERSION.SOK_INT >= Build.VERSION_CODES.Sval colorScheme = if (dynamic) {    val context = LocalContext.current//使用dynamicLightColorScheme函數創建具有淺色動態值的ColorScheme實例    // 或使用 dynamicDarkColorScheme 創建具有深色動態值的實例//傳入Context以便從Android系統獲取動態配色資源    if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context)} else {    // 使用 lightColorScheme 或者 darkColorScheme}

目前，Jetchat 一直在使用品牌的藍色配色方案，但我們希望增加對基于壁紙的動態配色方案的支持，以配合用戶的個性化調整。在本例中，色調調色板基于壁紙中的顏色生成，而動態配色方案則派生自這些色調調色板，其中包括用于淺色和深色主題的顏色。

為了在 Jetchat 中實現這一點，我們首先更新 JetchatTheme 為動態配色添加一個新參數，然后使用該動態配色參數設置動態 ColorScheme，或者在不可用時回退到品牌的藍色配色方案。與前面一樣將 colorScheme 值和 content 傳遞給內部的 MaterialTheme 可組合項。

@Composablefun JetchatTheme (    dark: Boolean = isSystemInDarkTheme (),    dynamic: Boolean = Build. VERSION.SDK_INT >= Build.VERSION_CODES.S,    content: @Composable () -> Unit) {    // ColorScheme 配置以及 MaterialTheme    val colorScheme = if (dynamic) {        val context = LocalContext.current        if (dark) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)    } else {        if (dark) JetchatDarkColor Scheme else Jetchat Light Color Scheme    }     MaterialTheme(        colorScheme = colorScheme,         content = content,    )}

現在，在 Android 12 及更高版本上，Jetchat 界面可根據用戶壁紙自動調整配色，無論是淺色主題還是深色主題都可提供適合品牌的美觀體驗。

排版

現在我們已經了解了配色方案，接下來讓我們來看看排版。Material Design 3 有了新的字體規格，包括了由 Material Design 2 適配而來的文本樣式。樣式的命名和分組簡化為顯示、大標題、標題、正文和標簽;每個分組都有大號、中號和小號字體。

Compose 使用新的 Typography 類對字體規格進行建模，其參數以 Material Design 3 字體規格中的樣式命名。我們可以使用 Roboto 基準值創建一個 Typography 實例，用自定義文本樣式覆蓋默認值，最后將 Typography 作為參數傳遞給 MaterialTheme。

import androidx.compose.material3.Typography class Typography (    val displayLarge: TextStyle,    val displayMedium: TextStyle,    val displaySmall: TextStyle,    // headlineLarge、titleMedium、bodySmall 等等) val AppTypography = Typography (    bodyLarge = TextStyle(...),    // displayLarge、titleMedium、labelSmall 等等    // 使用默認的 Roboto 基準值) MaterialTheme (    typography = AppTypography,    // colorScheme) {    //App content}

我們再來看看 Jetchat 的排版。設計人員為我們提供了新的品牌字體規格，用到了自定義字體 Montserrat 和 Karla:

我們首先使用 FontFamily 類聲明這些字體，該類將保存 Font 類的實例。我們可以使用字體資源 ID 和字體粗細構造 Font 類，然后使用 Typography 類聲明 Jetchat 字體樣式，并使用 TextStyle 類覆蓋每個文本樣式，包括我們的字體、字號、字體粗細等其他排版值。最后，同樣的，將 Typography 作為參數傳遞給 MaterialTheme:

val MontserratFontFamily = FontFamily (     Font(R.font.montserrat_regular),    Font(R.font montserrat_light, FontWeight Light),    Font(R.font.montserrat_semibold, FontWeight. SemiBold)) val KarlaFontFamily = FontFamily (    Font(R.font.karla_regular),    Font(R.font.karla_bold, FontWeight. Bold)) val JetchatTypography = Typography(     bodyLarge = TextStyle(        fontFamily = KarlaFontFamily,        fontWeight = FontWeight. Normal,        fontSize = 16.sp,        lineHeight = 24.sp,        letterSpacing = 0.15.sp    ),     // titleMedium、labelSmall 等等) MaterialTheme (    typography = JetchatTypography,    // colorScheme、content)

我們來看一下 Jetchat 對話界面，界面中的每個部分使用了 Jetchat 字體規格中的不同文本樣式。例如，消息中的聯系人和時間戳，分別使用了 titleMedium 和 labelSmall 樣式。它們通過 MaterialTheme.typography 表示訪問主題字體值。

@Composablefun Message(...) {…    Text (style = MaterialTheme.typography.titleMedium, ...)    …    Text (style = MaterialTheme.typography.labelSmall, ...)}

高度

在了解了 Material 3 主題相關的更新后，接下來讓我們看看 Material Design 另一個關鍵更新——高度。概括來說，Material 2 中使用陰影表示高度，而 Material 3 中改為使用色調顏色疊加層表示高度。這是一種區分容器和表面的新方式，增加色調高度會使色調變得更為突出。

在 Material 2 中高度疊加層是深色主題的一部分，在 Material 3 中也已更改為色調顏色疊加層。

我們以 Surface 組件為例，Surface 是用于支持大多數 Material 組件的可組合項，現有的 Surface 可組合項實現的是 Material Design 2 的高度系統。在 Material Design 2 中 Surface 接收一個 elevation 參數并處理深色主題中的陰影和疊加層渲染。我們為 Material Design 3 引入了新版 Surface，它接受一個 tonalElevation 參數，并會在淺色和深色主題中處理色調顏色疊加層渲染。讓我們看看前后有何不同:

組件更新

Material 3 對許多組件進行了更新，比如按鈕、應用欄、對話框、FAB 和導航組件。此類更新利用了新的 Material 3 主題設置值，并包含了對每個組件規范的最新更新。

例如 Material 2 中的 BottomNavigation。它符合 Material Design 2 規范，并接受 backgroundColor 和 elevation 等參數。在 Material 3 中該可組合項更名為 NavigationBar，它符合 Material Design 3 規范，其中的參數更改為 containerColor 和 tonalElevation，以更準確地反映各自的用途。

// Materail 2 中的 NavigationBarimport androidx.compose.material.BottomNavigation @Composablefun BottomNavigation (    // M2 默認值    backgroundColor: Color,     elevation: Dp,    …)  // Materail 3 中的 NavigationBarimportandroidx.compose.material3.NavigationBar @Composablefun NavigationBar (    // M3 默認值    containerColor: Color,     tonalElevation: Dp,    …)

import androidx.compose.material.ExtendedFloatingActionButtonimport androidx.compose.material.Iconimport androidx.compose.material.Text ExtendedFloatingActionButton(    icon = { Icon(...) },    text = { Text(...) },    backgroundColor = MaterialTheme.colors.primary,    ...)

Material 3 對該組件的更新如這里所示，可組合項的依賴導入已更改為 Material 3，我們使用更名后的 containerColor 參數和 Material 3 配色方案中的 Tertiary 顏色。

importandroidx.compose.material3.ExtendedFloatingActionButtonimportandroidx.compose.material3.Iconimportandroidx.compose.material3.Text ExtendedFloatingActionButton(    icon = { Icon(...) },    text = { Text(...) },containerColor=MaterialTheme.colorScheme.tertiary,    ...)

視覺效果

Material You 的某些方面來自新的 Android 12 視覺樣式和系統界面，其中的兩個重要變化是波紋和滾動效果?，F在，波紋效果會在按下時使用細微的閃光照亮表面，滾動效果則會在滾動容器的邊緣使用拉伸效果。實現這些更改不需要額外的工作，在 Compose Foundation 1.1 及更高版本的滾動容器可組合項中拉伸滾動默認處于開啟狀態;Android 12 上提供的閃光波紋適用于所有 Material 組件。

// 拉伸滾動// 適用于 LazyColumn、Lazy Row、LazyVerticalGrid 等組件// ComposeFoundation 1.1.0+ 可用 // 閃光波紋// 適用于所有 Material 2 和 Material 3 組件//Android12+可用

與 Android View 的互操作性改進

與 Android 視圖的互操作性是使用 Compose 開發應用的一個重要部分，我們已經在 Material 3 中進行了一些更新來支持這一點。MDC-AndroidCompose Theme Adapter 庫是一款支持重用 Android XML 主題的 Material 組件，以方便我們在 Jetpack Compose 中設置主題。

現有的 MdcTheme 可組合項與 Material 2 XML 主題兼容，我們還引入了一個新的 Mdc3Theme 可組合項，它與 Material 3 XML 主題兼容。

尾聲

現在是在您的 Android 應用中試用 Compose Material 3 的好時機，我們準備了一系列資源來幫助您順利完成旅程。我們提供了新的關于 Compose Material 3 的 API 文檔，并在 Android Studio 中提供了新的 Empty Compose Activity 模板，其中包含有關 Material 3 的更新。此外，我們還更新了 Compose 中的主題設置指南，以及在前面看到的 Jetchat 示例和 Compose Material Catalog 應用，以及 MDC-Android ComposeTheme Adapter 互操作性庫。

原文標題：實戰 | 在應用中使用 Compose Material 3

文章出處：【微信公眾號：谷歌開發者】歡迎添加關注!文章轉載請注明出處。

審核編輯：湯梓紅