android - 如何使用为 Android 12 发布的新 Material You 颜色

Question

谷歌 announced采用“Material You”设计的 Android 12 新颜色个性化。
我们如何使用应用程序中的这些个性化颜色？
首先，我想知道如何将它与 Jetpack Compose UI 一起使用。

Answer 1

Update (October 27, 2021):Google released official Jetpack Compose support for Material Design 3 (M3) with dynamic color support.
See details, API reference, and full M3 guide.

Material Components library also supports M3 since version 1.5.0-alpha04 or later.

因此，每次用户更改其设备上的壁纸时，Android 12 都可以根据该壁纸生成一组新的颜色。
这是基于“Material You”壁纸主题系统的结果，代号为“Monet”。
该集由五个系统颜色组组成: accent1 , accent2 , accent3 , neutral1 , 和 neutral2 . neutral*颜色可用于文本和背景。不像 accent* ，它们几乎没有颜色。
每种颜色有 13 种色调，最浅的用 0 编码，最黑暗的—— 1000 :

system_accent1_0     // the lightest shade of accent color #1
system_accent1_10
system_accent1_50
system_accent1_100
system_accent1_200
system_accent1_300
...
system_accent1_1000  // the darkest shade of accent color #1

所有颜色均可用 @android:color/system_accent1_0来自 XML 和 android.R.color.system_accent1_0来自 Kotlin/Java。 OverlayManager RROs 可以在运行时覆盖值!
官方 Material Components 库引入了新的 Material 3 主题(从版本 1.5.0-alpha03 开始)，支持名为“动态颜色”的“Monet”——基于用户在设备上的壁纸或颜色选择。见 documentation .
警告:所有这些颜色都是在 API 级别 31 中添加的，所以不要忘记查看 Build.VERSION.SDK_INT以供使用，并确保更新您应用的 compileSdkVersion至 31 .

Material 你颜色展示:

左:Pixel 的壁纸和样式，右:我们可以通过 API 使用的颜色。 ( source)
甚至在应用程序图标中也可以使用莫奈颜色!

在不同壁纸上使用基于莫奈的颜色的应用程序图标示例。 ( source)

Jetpack Compose UI 主题的简单示例，带有 Material You 颜色和日/夜支持:

import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material.MaterialTheme
import androidx.compose.material.darkColors
import androidx.compose.material.lightColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)

val Teal200 = Color(0xFF03DAC5)

val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200,
)

val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200,
)

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = when {
        // Material You colors for Android 12+
        Build.VERSION.SDK_INT >= 31 -> {
            val mainDark700 = colorResource(android.R.color.system_accent1_700)
            val secondary200 = colorResource(android.R.color.system_accent2_200)
            when {
                darkTheme -> darkColors(
                    primary = colorResource(android.R.color.system_accent1_200),
                    primaryVariant = mainDark700,
                    secondary = secondary200,
                )
                else -> lightColors(
                    primary = colorResource(android.R.color.system_accent1_500),
                    primaryVariant = mainDark700,
                    secondary = secondary200,
                )
            }
        }
        darkTheme -> DarkColorPalette
        else -> LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        content = content,
    )
}

官方 Material Design 3 (M3) 颜色概览:
https://m3.material.io/styles/color/overview
以 system_accent1_0 开头的所有“Monet”颜色引用 Material :
https://developer.android.com/reference/android/R.color#system_accent1_0
此答案的信息来源: Medium article , Twitter thread .
来自 Dmitry Chertenko 的演示应用程序«Material You» 颜色: GitHub , Google Play .提供了一个很好的使用旧的基于 XML 的 UI 的示例。