（译）使用Palettes提取颜色

本文介绍了如何使用Palettes提取图片颜色。

原文链接：Dynamic Color using Palettes

概述

材料设计鼓励动态地使用颜色，尤其是当你应用含有丰富的图片时。新的Palette support library可以让你从一个图片中抽取一些颜色应用到UI样式为了看起来更搭。抽取的palette包括鲜艳色和柔和色还有最优易读性的前景文本色。

如果你的应用支持Android 5.0（API 21)以下版本，确保在build.gradle文件中添加了依赖。

compile 'com.android.support:palette-v7:21.0.+'

生成Palette

使用Palette.Builder可以创建一个Palette。生成的Palette可以设置颜色的最大数量和同步或异步生成Palette。

同步

当你在图片加载线程同步生成palette。

Palette palette = Palette.from(bitmap).generate();
// OR
Palette palette = Palette.from(bitmap).maximumColorCount(numberOfColors).generate();

传入的bitmap是你想抽取颜色的图片。默认情况下，它会使用16种颜色palette大小。你可以重写maximumColorCount方法修改。然后我们可以向下面一样使用颜色：

// Pick one of the swatches
Palette.Swatch vibrant = palette.getVibrantSwatch();
if (vibrant != null) {
    // Set the background color of a layout based on the vibrant color
    containerView.setBackgroundColor(vibrant.getRgb());
    // Update the title TextView with the proper text color
    titleView.setTextColor(vibrant.getTitleTextColor());
}

注意现在这个同步方法已经被弃用最好使用异步方法。

异步

给generate方法传入PaletteAsyncListener，它会使用一个AsyncTask异步从bitmap提取样本信息生成palette：

// This is the quick and easy integration path.
// May not be optimal (since you're dipping in and out of threads)
Palette.from(bitmap).maximumColorCount(numberOfColors).generate(new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {
         // Get the "vibrant" color swatch based on the bitmap
         Palette.Swatch vibrant = palette.getVibrantSwatch();
          if (vibrant != null) {
              // Set the background color of a layout based on the vibrant color
              containerView.setBackgroundColor(vibrant.getRgb());
              // Update the title TextView with the proper text color
              titleView.setTextColor(vibrant.getTitleTextColor());
          }
    }
});

设置颜色的数量

numberOfColors的最佳值依赖于图片类型。对于风景图，最佳值的范围为12-16。对于大部分为人的面部的图片这个值应该增加到24-32。注意增加颜色数量会增加计算时间。

Palette的属性

当palette生成后，它会根据一些标准尝试选出匹配的6个样本：

• Vibrant(鲜艳色)。Palette.getVibrantSwatch()
• Vibrant dark(鲜艳色中的暗色)。Palette.getDarkVibrantSwatch()
• Vibrant light(鲜艳色中的亮色)。Palette.getLightVibrantSwatch()
• Muted(柔和色)。Palette.getMutedSwatch()
• Muted dark(柔和色中的暗色)。Palette.getDarkMutedSwatch()
• Muted light(柔和色中的亮色)。Palette.getLightMutedSwatch()

根据你的使用情况选择。开发者通常使用的为Vibrant和Dark Vibrant。

样本属性

每个样本包含下面的方法：

• getPopulation()：表示这个样式的像素数量。
• getRgb()：这个颜色的RGB值。
• getHsl()：这个颜色的HSL值。
• getBodyTextColor()：可以显示在这个颜色上面的文本颜色的RGB值。
• getTitleTextColor()：可以显示在这个颜色上面的文本颜色的RGB值。

不同的文本颜色符合材料设计标准中相同名称的样式。标题文本比较大颜色会更透明因此需要更少的颜色对比。内容文本比较小颜色会更不透明因此需要更多的颜色对比。

参考

• https://chris.banes.me/2014/10/20/palette-v21/
• http://www.willowtreeapps.com/blog/palette-the-new-api-for-android/
• http://android-developers.blogspot.com/2014/10/implementing-material-design-in-your.html