乐趣区

关于android:实战-在应用中使用-Compose-Material-3

jiezi

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。

如果您更喜爱通过视频理解此内容，请在此处查看:

https://www.bilibili.com/vide…

△ 在利用中应用 Compose Material 3

Jetchat 是一款应用 Jetpack Compose 构建的示例聊天利用，目前应用 Material Design 2 中的主题和组件。咱们将在 Jetchat 中，利用由咱们的设计人员提供的 Compose Material 3 库的更新，其中包含更宽泛的色调色彩、对组件的最新更新，甚至包含动静配色以使利用更加个性化，从而使其更加好看。

△ Jetchat 利用

在开始前，咱们首先要将 Material 3 的依赖项增加到模块的 build.gradle 文件中:

implementation 'androidx.compose.material3:material3:1.0.0-alpha01'

MaterialTheme

咱们先来看看 MaterialTheme。现有的 MaterialTheme 可组合项是 Material Design 2 的实现，它通过调整色彩、排版和形态零碎，能够在整个利用内实现对 Material 2 组件进行主题设置。咱们为 Material Design 3 引入了新版本的 MaterialTheme，能够通过调整配色计划和排版系统对 Material 3 组件的主题进行设置，而更新 Shape 的性能也会在不久之后退出。

import androidx.compose.material3.MaterialTheme
 
@Composable
fun MaterialTheme (
    colorScheme: ColorScheme,
    typography: Typography,
    // 更新 Shape 的性能行将到来
    content: @Composable () -> Unit)

首先，咱们看一下配色计划。Material Design 3 将色彩细分到特定名称的色彩槽中。比方 Material 3 组件应用的 Primary、Background 和 Error，这些色彩槽独特造成一种配色计划。局部色彩槽来自 Material Design 2，同时也引入了一些新的色彩槽以裁减整体调色板。这些色彩槽都蕴含了好看的全新默认基准色彩，在浅色和深色主题上都能够利用。

△ 绿色框为 Material You 中新退出的色彩槽

下面这些色彩取自一组色调调色板，例如，咱们来看一下 Primary 色彩槽。该色彩槽应用的色彩值来自 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 色彩槽。

△ MaterialTheme Builder 工具中生成的 Jetchat 配色计划

要实现 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)
val Blue90 = 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 内容并为利用提供主题。

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

上面让咱们看一下 Jetchat 对话界面，界面中的不同局部应用了配色计划中的不同色彩槽。例如，依据用户不同，音讯头像的边框色彩应用 Primary 色彩或 Tertiary 色彩。这里应用 MaterialTheme.colorScheme 拜访主题色彩值。

△ Jetchat 对话界面 

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

动静配色

接下来，让咱们来理解什么是动静配色。动静配色是 Material You 的重要局部，即用算法从用户的壁纸中提取自定义色彩并利用于利用和零碎界面，您可将此作为终点来生成残缺的浅色和深色配色计划。

△ Jetchat 的配色计划随用户设置的壁纸变动

动静配色可在 Android 12 及更高版本中应用，要在 Compose 中实现动静 ColorScheme，须要首先查看 Build.VERSION.SDK。如果动静配色可用，咱们便能够设置动静 ColorScheme；如果不可用，则能够回退到像以前一样应用 lightColorScheme 或 darkColorScheme:

val dynamic = Build.VERSION.SOK_INT >= Build.VERSION_CODES.S
val 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 可组合项。

@Composable
fun 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 适配而来的文本款式。款式的命名和分组简化为显示、大题目、题目、注释和标签；每个分组都有大号、中号和小号字体。

△ Material 3 与 Material 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:

△ Jetchat 所应用的字体规格

咱们首先应用 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 示意拜访主题字体值。

△ 对话界面的字体设置 

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

高度

在理解了 Material 3 主题相干的更新后，接下来让咱们看看 Material Design 另一个要害更新——高度。概括来说，Material 2 中应用暗影示意高度，而 Material 3 中改为应用色调色彩叠加层示意高度。这是一种辨别容器和外表的新形式，减少色调高度会使色调变得更为突出。

在 Material 2 中高度叠加层是深色主题的一部分，在 Material 3 中也已更改为色调色彩叠加层。

△ M2 与 M3 中高度零碎成果比照

咱们以 Surface 组件为例，Surface 是用于反对大多数 Material 组件的可组合项，现有的 Surface 可组合项实现的是 Material Design 2 的高度零碎。在 Material Design 2 中 Surface 接管一个 elevation 参数并解决深色主题中的暗影和叠加层渲染。咱们为 Material Design 3 引入了新版 Surface，它承受一个 tonalElevation 参数，并会在浅色和深色主题中解决色调色彩叠加层渲染。让咱们看看前后有何不同:

△ Material 2 中的 Surface

△ Material 3 中的 Surface

组件更新

Material 3 对许多组件进行了更新，比方按钮、利用栏、对话框、FAB 和导航组件。此类更新利用了新的 Material 3 主题设置值，并蕴含了对每个组件标准的最新更新。

△ Material 3 中更新的组件

例如 Material 2 中的 BottomNavigation。它合乎 Material Design 2 标准，并承受 backgroundColor 和 elevation 等参数。在 Material 3 中该可组合项更名为 NavigationBar，它合乎 Material Design 3 标准，其中的参数更改为 containerColor 和 tonalElevation，以更精确地反映各自的用处。

// Materail 2 中的 NavigationBar
import androidx.compose.material.BottomNavigation
 
@Composable
fun BottomNavigation (
    // M2 默认值
    backgroundColor: Color, 
    elevation: Dp,
    …
)
 
 
// Materail 3 中的 NavigationBar
import androidx.compose.material3.NavigationBar
 
@Composable
fun NavigationBar (
    // M3 默认值
    containerColor: Color, 
    tonalElevation: Dp,
    …
)

△ 更新前后的款式扭转

Compose Material 3 中的组件进行了很多更新，为了让您全面理解所有的组件以及它们的实现形式，咱们更新了 Compose Material Catalog 利用，并新增了 Material 3 局部。请在 AOSP 上查看 源代码 并在 Google Play 中下载该利用。

上面咱们来看看 Jetchat 中的一个例子。在个人资料界面上有一个用于撰写音讯的扩大 FAB，该组件已从 Material 2 更新为 Material 3 版本。这是 Material 2 版本的一个简略实现，应用了 ExtendedFloatingActionButton 可组合项，外部应用了 Icon 和 Text、可组合项以及自定义的 Primary 背景色彩。

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

Material 3 对该组件的更新如这里所示，可组合项的依赖导入已更改为 Material 3，咱们应用更名后的 containerColor 参数和 Material 3 配色计划中的 Tertiary 色彩。

import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
 
ExtendedFloatingActionButton(icon = { Icon(...) },
    text = {Text(...) },
    containerColor = MaterialTheme.colorScheme.tertiary,
    ...
)

视觉效果

Material You 的某些方面来自新的 Android 12 视觉款式和零碎界面，其中的两个重要变动是波纹和滚动成果。当初，波纹成果会在按下时应用轻微的闪光照亮外表，滚动成果则会在滚动容器的边缘应用拉伸成果。实现这些更改不须要额定的工作，在 Compose Foundation 1.1 及更高版本的滚动容器可组合项中拉伸滚动默认处于开启状态；Android 12 上提供的闪光波纹实用于所有 Material 组件。

△ M2 与 M3 中的波纹成果 

// 拉伸滚动
// 实用于 LazyColumn、Lazy Row、LazyVerticalGrid 等组件
// ComposeFoundation 1.1.0+ 可用
 
// 闪光波纹
// 实用于所有 Material 2 和 Material 3 组件
// Android 12+ 可用

与 Android View 的互操作性改良

与 Android 视图的互操作性是应用 Compose 开发利用的一个重要局部，咱们曾经在 Material 3 中进行了一些更新来反对这一点。MDC-AndroidCompose Theme Adapter 库 是一款反对重用 Android XML 主题的 Material 组件，以不便咱们在 Jetpack Compose 中设置主题。

现有的 MdcTheme 可组合项与 Material 2 XML 主题兼容，咱们还引入了一个新的 Mdc3Theme 可组合项，它与 Material 3 XML 主题兼容。

△ MDC-AndroidCompose Theme Adapter 是 XML 主题与 MaterialTheme 之间的桥梁

序幕

当初是在您的 Android 利用中试用 Compose Material 3 的好时机，咱们筹备了一系列资源来帮忙您顺利完成旅程。咱们提供了新的对于 Compose Material 3 的 API 文档，并在 Android Studio 中提供了新的 Empty Compose Activity 模板，其中蕴含无关 Material 3 的更新。此外，咱们还更新了 Compose 中的主题设置 指南，以及在后面看到的 Jetchat 示例和 Compose Material Catalog 利用，以及 MDC-Android ComposeTheme Adapter 互操作性库。

退出移动版