作者 /Android 開發(fā)技術(shù)推廣工程師 Gurupreet Singh

首個穩(wěn)定版 Compose Material 3 現(xiàn)已發(fā)布。借助此內(nèi)容庫，您可以使用 Material Design 3 (新一代 Material Design) 構(gòu)建 Jetpack Compose 界面。立即開始在應(yīng)用中使用 Material Design 3 吧！

• Compose Material 3https://developer.android.google.cn/reference/kotlin/androidx/compose/material3/package-summary
• Material Design 3https://m3.material.io/

*文中交替使用的術(shù)語 "Material Design 3"、"Material 3" 和 "M3" 均指代同一內(nèi)容。

Material 3 不僅包含更新后的主題和組件、動態(tài)配色等個性化功能，還旨在與最新的 Android 視覺風(fēng)格和系統(tǒng)界面相得益彰。

△ 多個使用 Material Design 3 主題的應(yīng)用

您可以將 Compose Material 3 依賴項添加到 build.gradle 文件中，即可開始在應(yīng)用中使用 Material Design 3:

// 在模塊 build.gradle 中添加依賴項


執(zhí)行“androidx.compose.material3$material3_version”

注意: 您可以前往 Compose Material 3 版本頁面了解最新的 M3 版本:

https://developer.android.google.cn/jetpack/androidx/releases/compose-material3

配色方案

Material 3 不僅提供更廣泛的、更細粒度的顏色自定義選項，還提供開箱即用的淺色和深色配色方案。借助 Material Theme Builder，您可以使用核心顏色生成自定義配色方案，并選擇導(dǎo)出 Compose 主題代碼。您可以閱讀更多關(guān)于配色方案及顏色角色的內(nèi)容。

△用于導(dǎo)出 Material 3 配色方案的 Material Theme Builder

• Material Theme Builderhttps://material.io/material-theme-builder
• 更多關(guān)于配色方案及顏色角色的內(nèi)容https://m3.material.io/styles/color/the-color-system/key-colors-tones

動態(tài)配色

動態(tài)配色源自用戶的壁紙，可應(yīng)用于應(yīng)用和系統(tǒng)界面中。

• 動態(tài)配色

  https://m3.material.io/styles/color/dynamic-color/overview

動態(tài)配色適用于 Android 12 (API 級別 31) 及更高版本的系統(tǒng)。如果系統(tǒng)支持動態(tài)配色，則可以設(shè)置動態(tài) ColorScheme。如果不支持，您可以轉(zhuǎn)而使用自定義的深色或淺色 ColorScheme。

△Reply 示例: 動態(tài)壁紙主題 (左) 和默認應(yīng)用主題 (右)

• Reply 示例

  https://github.com/android/compose-samples/tree/main/Reply

ColorScheme 類為構(gòu)建器提供函數(shù)以創(chuàng)建動態(tài)和自定義的深色與淺色配色方案:

• 深色

  https://developer.android.google.cn/reference/kotlin/androidx/compose/material3/package-summary#dynamiclightcolorscheme

• 淺色

  https://developer.android.google.cn/reference/kotlin/androidx/compose/material3/package-summary#dynamicdarkcolorscheme

Theme.kt

// 動態(tài)配色適用于 Android 12 及更高版本的系統(tǒng)
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colorScheme = when {
  dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
  dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
  darkTheme -> darkColorScheme(...)
  else -> lightColorScheme(...)
}


MaterialTheme(
  colorScheme = colorScheme,
  typography = typography,
  shapes = shapes
) {
  // M3 應(yīng)用內(nèi)容

Material 組件

Compose Material 3 API 包含大量全新和經(jīng)過優(yōu)化的 Material 組件，且我們計劃在未來的版本中添加更多組件。許多 Material 組件 (如 Card、RadioButton 和 CheckBox) 已不再是實驗性組件；這些組件的 API 十分穩(wěn)定，可以在沒有 ExperimentalMaterial3Api 注釋的情況使用。

M3 Switch 組件采用全新界面，支持符合無障礙性的最小觸摸目標尺寸、顏色映射，以及不同的 Switch 滑塊圖標選項。該界面增加了觸摸目標的尺寸，同時增加了用戶互動時的滑塊尺寸，從而為用戶提供反饋: 滑塊正在與之互動。

△Material 3 Switch 滑塊互動

Switch(
      checked = isChecked,
      onCheckedChange = { /*...*/ },
      thumbContent = {
          Icon(
              imageVector = Icons.Default.Check,
              contentDescription = stringResource(id = R.string.switch_check)
          )
      },
)

抽屜式導(dǎo)航欄組件現(xiàn)在提供封裝容器表，以便單獨更改內(nèi)容的顏色、形狀和高度。

抽屜式導(dǎo)航欄組件	內(nèi)容
ModalNavigationDrawer	ModalDrawerSheet
PermanentNavigationDrawer	PermanentDrawerSheet
DismissableNavigationDrawer	DismissableDrawerSheet

△ModalNavigationDrawer

其中內(nèi)容封裝在 ModalDrawerSheet 中

ModalNavigationDrawer {
    ModalDrawerSheet(
        drawerShape = MaterialTheme.shapes.small,
        drawerContainerColor = MaterialTheme.colorScheme.primaryContainer,
        drawerContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
        drawerTonalElevation = 4.dp,
    ) {
        DESTINATIONS.forEach { destination ->
            NavigationDrawerItem(
                selected = selectedDestination == destination.route,
                onClick = { ... },
                icon = { ... },
                label = { ... }
            )
        }
    }
}

除現(xiàn)有的應(yīng)用欄外，我們還推出了全新的CenterAlignedTopAppBar。該欄可用于應(yīng)用的主要根網(wǎng)頁: 您可以借助主頁和操作圖標顯示應(yīng)用名稱或頁面標題。

CenterAlignedTopAppBar(
          title = {
              Text(stringResources(R.string.top_stories))
          },
          scrollBehavior = scrollBehavior,
          navigationIcon =  { /* Navigation Icon */},
          actions = { /* App bar actions */}
)

您可以前往Compose Material 3 API 參考文檔概覽，查看 M3 最新組件和布局。也歡迎您關(guān)注版本發(fā)布頁面，即時獲取全新的和更新后的 API。

• Compose Material 3 API 參考文檔概覽

  https://developer.android.google.cn/reference/kotlin/androidx/compose/material3/package-summary#overview

• 版本發(fā)布頁面

  https://developer.android.google.cn/jetpack/androidx/releases/compose-material3

排版

Material 3 將排版的命名及分組簡化為:

• 顯示

• 大標題
• 小標題
• 正文
• 標簽

每項內(nèi)容都有大、中、小三種字體大小可供選擇，總計 15 種文本樣式。 Typography構(gòu)造函數(shù)為每種樣式提供默認值，因此您無需設(shè)置您不想自定義的參數(shù):

val typography = Typography(
  titleLarge = TextStyle(
      fontWeight = FontWeight.SemiBold,
      fontSize = 22.sp,
      lineHeight = 28.sp,
      letterSpacing = 0.sp
  ),
  titleMedium = TextStyle(
      fontWeight = FontWeight.SemiBold,
      fontSize = 16.sp,
      lineHeight = 24.sp,
      letterSpacing = 0.15.sp
  ),
  ...
}

如需自定義排版，您可以更改 TextStyle 和字體相關(guān)的屬性 (如 fontFamily 和 letterSpacing)。

bodyLarge = TextStyle(
  fontWeight = FontWeight.Normal,
  fontFamily = FontFamily.SansSerif,
  fontStyle = FontStyle.Italic,
  fontSize = 16.sp,
  lineHeight = 24.sp,
  letterSpacing = 0.15.sp,
  baselineShift = BaselineShift.Subscript
)

• TextStylehttps://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/TextStyle
• 字體相關(guān)https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/font/package-summary

形狀

Material 3 形狀比例定義了容器邊角的樣式，提供從方形到正圓形的一系列不同角度。

不同的形狀大小如下:

• 超小號

• 小號

• 中號

• 大號

• 超大號

△將 Material Design 3 的不同形狀作為默認值用于不同組件每種形狀都有一個默認值，但您可以進行覆蓋:

val shapes = Shapes(
  extraSmall = RoundedCornerShape(4.dp),
  small = RoundedCornerShape(8.dp),
  medium = RoundedCornerShape(12.dp),
  large = RoundedCornerShape(16.dp),
  extraLarge = RoundedCornerShape(28.dp)
)

您可以前往官方網(wǎng)站，閱讀更多關(guān)于應(yīng)用形狀的內(nèi)容:

https://m3.material.io/styles/shape/overview

窗口大小類

Jetpack Compose 和 Material 3 提供了幫助您的應(yīng)用實現(xiàn)自適應(yīng)的窗口大小工件。如需開始使用，您可以將 Compose Material 3 窗口大小類依賴項添加到您的 build.gradle 文件中:

// 在模塊 build.gradle 中添加依賴項


implementation "androidx.compose.material3$material3_version"

窗口大小類將大小劃分到標準大小的存儲分區(qū)中，這些存儲分區(qū)是旨在針對大部分特殊情況優(yōu)化應(yīng)用的斷點。

△用于將設(shè)備劃分到不同大小的存儲分區(qū)中的 WindowWidthSize 類

您可以查看 Reply Compose 示例，詳細了解自適應(yīng)應(yīng)用和窗口大小類的實現(xiàn):

https://github.com/android/compose-samples/tree/main/Reply

窗口邊襯區(qū)支持

M3 組件 (如頂部應(yīng)用欄、抽屜式導(dǎo)航欄、普通導(dǎo)航欄和側(cè)邊欄) 包含對窗口邊襯區(qū)的內(nèi)置支持。無論是單獨使用還是與 Scaffold 配合使用，這些組件都能自動處理由狀態(tài)欄、導(dǎo)航欄和系統(tǒng)界面的其他部分確定的邊襯區(qū)。 Scaffold 現(xiàn)在支持 contentWindowInsets 參數(shù)，該參數(shù)有助于為 Scaffold 內(nèi)容確定邊襯區(qū)。 只有當(dāng) topBar 或 bottomBar 無法在 Scaffold 中使用時，您才需要考慮使用 Scaffold 邊襯區(qū)，因為這些組件會以組件級別處理邊襯區(qū)。

Scaffold(
    contentWindowInsets = WindowInsets(16.dp)
) {
    // Scaffold content
}

資源

隨著 Compose Material 3 迎來穩(wěn)定版本，現(xiàn)在是全面了解該內(nèi)容庫并準備好在應(yīng)用中使用的絕佳時機。您可以查看下方資源，即刻開始使用。

• 完整的 Material 3 和 Compose 示例 Reply:

  https://github.com/android/compose-samples/tree/main/Reply
• 開始將 Material 3 添加至您應(yīng)用的指南:https://developer.android.google.cn/jetpack/compose/themes/material3
• Material 2 升級至 Material 3 的遷移指南:

  https://developer.android.google.cn/jetpack/compose/themes/material2-material3

• Jetpack Compose 示例 GitHub 代碼庫，您可以在其中找到各種使用 Material 3 的最新示例:

  https://github.com/android/compose-samples

• StackOverflow中的 Compose 社區(qū):

  https://stackoverflow.com/questions/tagged/material-desig

• Kotlin Slack 群組

  http://slack.kotlinlang.org/

• 您可以在錯誤追蹤器，將發(fā)現(xiàn)的問題分享給我們并追蹤功能請求:

  https://issuetracker.google.com/issues/new?component=742043

歡迎您持續(xù)關(guān)注我們，及時了解更多開發(fā)技術(shù)和產(chǎn)品更新等資訊動態(tài)。

?點擊屏末|閱讀原文|即刻了解 Compose Material 3 更多相關(guān)內(nèi)容

---