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

Question

谷歌宣布Android 12 的新颜色个性化采用“Material You”设计。

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

Answer 1

\n

更新（2021 年 10 月 27 日）： \nGoogle 发布了对 Material Design 3 (M3) 的官方 Jetpack Compose 支持，并提供动态颜色支持。
\n请参阅详细信息、API 参考和完整的 M3 指南。

\nMaterial Components 库还支持 M3自版本1.5.0-alpha04或更高版本。

\n

\n

因此，每次用户更改其设备上的壁纸时，Android 12xc2xa0 都会根据该壁纸生成一组新的 xc2xa0 颜色。\n它\xe2\x80\x99 \xc2\xa0\xc2\xa0\xc2\xabMaterial You\xc2\xbb 基于壁纸的主题系统的结果，代号为 \xc2\xabMonet\xc2\xbb。

\n

该集由\xc2\xa0五个系统颜色组组成：accent1、accent2、accent3、neutral1和neutral2。neutral*颜色对于文本和背景可能很有用。与 不同的是accent*，它们几乎没有颜色。

\n

每种颜色都有 13\xc2\xa0 色度，最浅的用 编码0，最暗的\xc2\xa0\xe2\x80\x94 1000：

\n

system_accent1_0     // the lightest shade of accent color #1\nsystem_accent1_10\nsystem_accent1_50\nsystem_accent1_100\nsystem_accent1_200\nsystem_accent1_300\n...\nsystem_accent1_1000  // the darkest shade of accent color #1\n

\n

所有颜色都可以@android:color/system_accent1_0从 XML 和android.R.color.system_accent1_0Kotlin/Java 获得。值可以由OverlayManager RRO覆盖在 \xc2\xa0runtime\xc2\xa0 处！

\n

官方材质组件库引入了新的材质 3\xc2\xa0themes （从版本1.5.0-alpha03开始​​），支持 \xc2\xabMonet\xc2\xbb ，命名为\xc2\xa0\xc2\xabdynamiccolors\xc2\xbb\xc2 \xa0\xe2\x80\x94 基于\xc2\xa0用户\xe2\x80\x99的壁纸或\xc2\xa0设备上的\xc2\xa0颜色选择。请参阅文档。

\n

警告：所有这些颜色都添加在\xc2\xa0API级别\xc2\xa031中，因此\xc2\xa0don\xe2\x80\x99不要忘记\xc2\xa0检查Build.VERSION.SDK_INT使用情况并确保\xc2\xa0更新你的应用程序\xe2\ x80\x99scompileSdkVersion到\xc2\xa0 31。

\n\n

Material You 颜色展示：\n
\n左：Pixel\xe2\x80\x99s 壁纸 &\xc2\xa0style，右：\xc2\xa0us 通过 API 可用的颜色。（来源）

\n

莫奈颜色甚至可以在\xc2\xa0应用程序图标中使用\xc2\xa0！\n
\n在\xc2\xa0不同壁纸上使用基于莫奈的颜色的\xc2\xa0应用程序图标示例。（来源）

\n\n

\xc2\xa0Jetpack Compose UI\xc2\xa0theme 的简单示例，具有 Material You 颜色和日/夜支持：

\n

system_accent1_0     // the lightest shade of accent color #1\nsystem_accent1_10\nsystem_accent1_50\nsystem_accent1_100\nsystem_accent1_200\nsystem_accent1_300\n...\nsystem_accent1_1000  // the darkest shade of accent color #1\n

\n\n

官方 Material Design 3 (M3) 颜色概述：
\n https://m3.material.io/styles/color/overview

\n

\xc2\xabMonet\xc2\xbb 颜色参考的所有材料，开头为system_accent1_0：
\n https://developer.android.com/reference/android/R.color#system_accent1_0

\n

该答案的信息来源：Medium 文章、Twitter 帖子。

\n

来自Dmitry Chertenko的带有 \xc2\xabMaterial You\xc2\xbb 颜色的演示应用程序： GitHub、Google Play。提供了\xc2\xa0使用旧的基于XML的UI的\xc2\xa0很好的示例。

\n