如何應(yīng)用Material Design 3和Material You

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

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

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

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

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

我們先來看看 MaterialTheme。現(xiàn)有的 MaterialTheme 可組合項是 Material Design 2 的實現(xiàn)，它通過調(diào)整顏色、排版和形狀系統(tǒng)，可以在整個應(yīng)用內(nèi)實現(xiàn)對 Material 2 組件進行主題設(shè)置。我們?yōu)?Material Design 3 引入了新版本的 MaterialTheme，可以通過調(diào)整配色方案和排版系統(tǒng)對 Material 3 組件的主題進行設(shè)置，而更新 Shape 的功能也會在不久之后加入。

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

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

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

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

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

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

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

// 來自名為'Blue'的色調(diào)調(diào)色盤的 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 等等)

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

@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    }    ...}

動態(tài)配色

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

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

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

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

為了在 Jetchat 中實現(xiàn)這一點，我們首先更新 JetchatTheme 為動態(tài)配色添加一個新參數(shù)，然后使用該動態(tài)配色參數(shù)設(shè)置動態(tài) ColorScheme，或者在不可用時回退到品牌的藍(lán)色配色方案。與前面一樣將 colorScheme 值和 content 傳遞給內(nèi)部的 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,    )}

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

排版

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

Compose 使用新的 Typography 類對字體規(guī)格進行建模，其參數(shù)以 Material Design 3 字體規(guī)格中的樣式命名。我們可以使用 Roboto 基準(zhǔn)值創(chuàng)建一個 Typography 實例，用自定義文本樣式覆蓋默認(rèn)值，最后將 Typography 作為參數(shù)傳遞給 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 等等    // 使用默認(rèn)的 Roboto 基準(zhǔn)值) MaterialTheme (    typography = AppTypography,    // colorScheme) {    //App content}

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

我們首先使用 FontFamily 類聲明這些字體，該類將保存 Font 類的實例。我們可以使用字體資源 ID 和字體粗細(xì)構(gòu)造 Font 類，然后使用 Typography 類聲明 Jetchat 字體樣式，并使用 TextStyle 類覆蓋每個文本樣式，包括我們的字體、字號、字體粗細(xì)等其他排版值。最后，同樣的，將 Typography 作為參數(shù)傳遞給 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 字體規(guī)格中的不同文本樣式。例如，消息中的聯(lián)系人和時間戳，分別使用了 titleMedium 和 labelSmall 樣式。它們通過 MaterialTheme.typography 表示訪問主題字體值。

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

高度

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

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

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

組件更新

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

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

// Materail 2 中的 NavigationBarimport androidx.compose.material.BottomNavigation @Composablefun BottomNavigation (    // M2 默認(rèn)值    backgroundColor: Color,     elevation: Dp,    …)  // Materail 3 中的 NavigationBarimportandroidx.compose.material3.NavigationBar @Composablefun NavigationBar (    // M3 默認(rèn)值    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 對該組件的更新如這里所示，可組合項的依賴導(dǎo)入已更改為 Material 3，我們使用更名后的 containerColor 參數(shù)和 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 視覺樣式和系統(tǒng)界面，其中的兩個重要變化是波紋和滾動效果。現(xiàn)在，波紋效果會在按下時使用細(xì)微的閃光照亮表面，滾動效果則會在滾動容器的邊緣使用拉伸效果。實現(xiàn)這些更改不需要額外的工作，在 Compose Foundation 1.1 及更高版本的滾動容器可組合項中拉伸滾動默認(rèn)處于開啟狀態(tài);Android 12 上提供的閃光波紋適用于所有 Material 組件。

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

與 Android View 的互操作性改進

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

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

尾聲

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

原文標(biāo)題：實戰(zhàn) | 在應(yīng)用中使用 Compose Material 3

文章出處：【微信公眾號：谷歌開發(fā)者】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。

審核編輯：湯梓紅