使用 Palette API 选择颜色

出色的视觉设计是应用成功的关键,配色方案 是设计的主要组成部分通过 Palette 库是一个 Jetpack 该库会从图片中提取突出颜色,以打造具有视觉吸引力的 。

你可以使用 Palette 库设计布局 主题,并将自定义颜色应用到 视觉元素例如,您可以使用调色板创建一个 根据专辑封面为歌曲配色的片头字幕,或调整 应用的工具栏颜色。通过 Palette 对象可让您访问 Bitmap 张图片 同时提供位图中的六种主要颜色配置文件 设计选择

设置调色板库

要使用 Palette 库,请将以下代码添加到 build.gradle:

Kotlin

android {
    compileSdkVersion(33)
    ...
}

dependencies {
    ...
    implementation("androidx.palette:palette:1.0.0")
}

Groovy

android {
    compileSdkVersion 33
    ...
}

dependencies {
    ...
    implementation 'androidx.palette:palette:1.0.0'
}

创建调色板

借助 Palette 对象,您可以访问 以及叠加文字的相应颜色。使用调色板 设计应用的样式,并根据动态更改应用的配色方案 对给定来源映像进行微调。

要创建调色板,请先将 Palette.BuilderBitmap 中获取。然后,您可以使用 Palette.Builder 请在生成调色板之前对其进行自定义本部分将介绍 生成和自定义位图图像。

生成调色板实例

使用Palette from(Bitmap bitmap) 方法首先创建一个 Palette.Builder Bitmap

生成工具可以同步或异步生成调色板。使用 同步调色板生成功能。 将线程视为被调用的方法。如果您异步生成调色板, 其他线程上,请使用 onGenerated() 方法,以便在创建调色板后立即访问该面板。

以下代码段为这两种类型的调色板提供了示例方法 世代:

Kotlin

// Generate palette synchronously and return it.
fun createPaletteSync(bitmap: Bitmap): Palette = Palette.from(bitmap).generate()

// Generate palette asynchronously and use it on a different thread using onGenerated().
fun createPaletteAsync(bitmap: Bitmap) {
    Palette.from(bitmap).generate { palette ->
        // Use generated instance.
    }
}

Java

// Generate palette synchronously and return it.
public Palette createPaletteSync(Bitmap bitmap) {
  Palette p = Palette.from(bitmap).generate();
  return p;
}

// Generate palette asynchronously and use it on a different thread using onGenerated().
public void createPaletteAsync(Bitmap bitmap) {
  Palette.from(bitmap).generate(new PaletteAsyncListener() {
    public void onGenerated(Palette p) {
      // Use generated instance.
    }
  });
}

如果您需要为已排序的图片列表连续生成调色板,或 对象,请考虑 缓存 Palette 实例,以防止界面性能缓慢。请勿创建 调色板上 主线程

自定义调色板

Palette.Builder可让您通过选择 生成的调色板中有多少个颜色,图片中的哪一区域 生成调色板所用的颜色,以及 选项。例如,您可以滤除黑色,或确保构建器 只使用图片的上半部分生成调色板。

使用 Palette.Builder 类:

addFilter()
此方法会添加一个过滤条件,用于指明 显示的调色板。传入您自己的标签 Palette.Filter 并修改其 isAllowed() 方法,以确定 。
maximumColorCount()
此方法可用于设置调色板中的颜色数量上限。默认 值为 16,最佳值取决于源图片。对于 最佳值的范围为 8-16,而包含人脸的图片 值在 24-32 之间。Palette.Builder需要更长的时间才能 生成颜色更多的调色板。
setRegion()
此方法指示当 创建调色板。您只能在生成调色板时使用此方法 并且不会影响原始图像。
addTarget()
通过添加颜色和颜色,您可以自定义颜色调整, Target 颜色配置文件如果默认的 Target 为 则高级开发者可以创建自己的Target 使用 Target.Builder

提取颜色配置文件

基于 Material Design 设计时,调色板库从 图片。每个个人资料都由 Target 定义,提取的颜色 根据饱和度针对每个配置文件进行评分, 亮度和填充(由 颜色)。对于每个配置文件,得分最高的颜色定义了该颜色 配置文件。

默认情况下,Palette 对象包含来自不同颜色的 16 种主要颜色, 图片。生成调色板时,您可以 自定义其颜色数量,方法是使用 Palette.Builder。提取更多颜色可提高 匹配每个颜色配置文件,但也会导致 Palette.Builder 花费更长的时间来生成调色板

Palette 库会尝试提取以下六种颜色配置文件:

  • Light Vibrant
  • Vibrant
  • Dark Vibrant
  • Light Muted
  • Muted
  • Dark Muted

中的每种 get<Profile>Color() 方法 Palette 会返回与该颜色相关联的调色板中的颜色。 其中 <Profile> 会替换为特定配置文件 六种颜色配置文件之一的名称。例如,获取 “深色鲜艳”颜色配置文件现为 getDarkVibrantColor()。 由于并非所有图片都包含全部颜色配置文件,因此请为 return。

图 1 显示了一张照片以及 get<Profile>Color() 方法。

图片左侧是日落,右侧是提取的调色板。
图 1. 示例图像及其提取的颜色配置文件(给定 调色板的默认颜色数量上限 (16)。

使用色样创建配色方案

Palette 类还会生成 Palette.Swatch 对象。Palette.Swatch 对象包含 以及该配置文件的颜色填充 像素。

色样可以通过其他方法访问 颜色配置文件,例如 HSL 值和像素填充。您可以使用色样 有助于创建更全面的配色方案和应用主题 getBodyTextColor()getTitleTextColor() 方法。这些方法会返回适合在色样的 color 决定。

每个 get<Profile>Swatch() 方法(从 Palette 返回与该特定配置文件相关联的色样, 其中 <Profile> 会替换为以下任一名称 六种颜色配置文件虽然调色板的 get<Profile>Swatch() 方法不需要默认值 value 参数,则对于特定配置文件,会返回 null 不存在。因此,请先检查色样是否不为 null。 使用它。例如,以下代码从 调色板(如果 Vibrant 色样不为 null):

Kotlin

val vibrant = myPalette.vibrantSwatch
// In Kotlin, check for null before accessing properties on the vibrant swatch.
val titleColor = vibrant?.titleTextColor

Java

Palette.Swatch vibrant = myPalette.getVibrantSwatch();
if(vibrant != null){
    int titleColor = vibrant.getTitleTextColor();
    // ...
}

要访问调色板中的所有颜色, getSwatches() 方法会返回根据图片生成的所有色样的列表,其中包括 标准的六种颜色配置文件

以下代码段使用前面代码中的方法 同步生成调色板,获取其鲜艳色样, 工具栏的颜色以匹配位图图像。图 2 显示了 随即显示的图片和工具栏

Kotlin

// Set the background and text colors of a toolbar given a bitmap image to
// match.
fun setToolbarColor(bitmap: Bitmap) {
    // Generate the palette and get the vibrant swatch.
    val vibrantSwatch = createPaletteSync(bitmap).vibrantSwatch

    // Set the toolbar background and text colors.
    // Fall back to default colors if the vibrant swatch isn't available.
    with(findViewById<Toolbar>(R.id.toolbar)) {
        setBackgroundColor(vibrantSwatch?.rgb ?:
                ContextCompat.getColor(context, R.color.default_title_background))
        setTitleTextColor(vibrantSwatch?.titleTextColor ?:
                ContextCompat.getColor(context, R.color.default_title_color))
    }
}

Java

// Set the background and text colors of a toolbar given a bitmap image to
// match.
public void setToolbarColor(Bitmap bitmap) {
    // Generate the palette and get the vibrant swatch.
    // See the createPaletteSync() method from the preceding code snippet.
    Palette p = createPaletteSync(bitmap);
    Palette.Swatch vibrantSwatch = p.getVibrantSwatch();

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

    // Load default colors.
    int backgroundColor = ContextCompat.getColor(getContext(),
        R.color.default_title_background);
    int textColor = ContextCompat.getColor(getContext(),
        R.color.default_title_color);

    // Check that the Vibrant swatch is available.
    if(vibrantSwatch != null){
        backgroundColor = vibrantSwatch.getRgb();
        textColor = vibrantSwatch.getTitleTextColor();
    }

    // Set the toolbar background and text colors.
    toolbar.setBackgroundColor(backgroundColor);
        toolbar.setTitleTextColor(textColor);
}
显示日落的图片以及包含 TitleTextColor 的工具栏
图 2. 示例图片及其色彩鲜艳的工具栏和 相应的标题文字颜色。