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

Posted 2023-02-22

【中文标题】如何使用为 Android 12 发布的新 Material You 颜色

【英文标题】：How to use new Material You colors announced for Android 12

【发布时间】：2021-11-03 00:00:11

【问题描述】：

Google announced 采用“Material You”设计的 android 12 新颜色个性化。

我们如何使用应用程序中的这些个性化颜色？ 首先，我想知道如何将它与 Jetpack Compose UI 一起使用。

【参考方案1】：

更新（2021 年 10 月 27 日）： Google 发布了对具有动态颜色支持的 Material Design 3 (M3) 的官方 Jetpack Compose 支持。 请参阅details、API reference 和 full M3 guide。 自版本 1.5.0-alpha04 或更高版本以来，材料组件库也为 supports M3。

因此，每次用户更改其设备上的壁纸时，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

所有颜色都可用，例如来自 XML 的 @android:color/system_accent1_0 和来自 Kotlin/Java 的 android.R.color.system_accent1_0。 OverlayManager RROs 可以在运行时覆盖值！

官方 Material Components 库引入了新的 Material 3 主题（从版本 1.5.0-alpha03 开始），支持名为 «动态颜色» 的 «Monet» — 基于用户在设备上的壁纸或颜色选择。见documentation。

警告：所有这些颜色都是在 API 级别 31 中添加的，所以不要忘记检查 Build.VERSION.SDK_INT 的使用情况，并确保将您应用的 compileSdkVersion 更新为 31。

---

Material You 颜色展示： 左：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开头：https://developer.android.com/reference/android/R.color#system_accent1_0

此答案的信息来源：Medium article、Twitter thread。

来自Dmitry Chertenko 的演示应用程序，带有«Material You» 颜色：GitHub、Google Play。提供了使用旧的基于 XML 的 UI 的一个很好的例子。

【讨论】：

附带说明，Material Design 团队正在开发一个 Material3 主题，该主题也将支持动态颜色。它仍处于 Alpha 阶段，但一旦稳定下来，您可能就不需要自己使用原始资源值和颜色组件了。

似乎新版本的材料组件库具有用于此目的的公共颜色资源。 github.com/material-components/material-components-android/…