谷歌 announced采用“Material You”设计的 Android 12 新颜色个性化。
我们如何使用应用程序中的这些个性化颜色?
首先,我想知道如何将它与 Jetpack Compose UI 一起使用。
最佳答案
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 version1.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 的示例。
关于android - 如何使用为 Android 12 发布的新 Material You 颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69065334/