Android Palette（调色板）的使用

作者: 黄海佳 | 来源:发表于2017-04-14 00:04 被阅读316次

一、Palette的简单介绍

android-support-v7-palette 里面的Palette是Android L SDK 中的新特性，可以使用 Palette 从图像中提取出突出的颜色（主色调），获取到颜色之后我们再将这个颜色值赋给 ActionBar、状态栏等。从而达到界面色调的统一，使界面美观协调。

原理
通过得到一个bitmap，通过方法进行分析，取出LightVibrantSwatch，DarkVibrantSwatch，LightMutedSwatch，DarkMutedSwatch这些样本，然后得到rgb。

Palette这个类中提取以下突出的颜色

Vibrant （有活力）
Vibrant dark（有活力暗色）
Vibrant light（有活力亮色）
Muted （柔和）
Muted dark（柔和暗色）
Muted light（柔和亮色）

创建方法

      //目标bitmap
      Bitmap bm =BitmapFactory.decodeResource(getResources(),R.drawable.kale);
      //方法1
      Palette.Builder builder = Palette.from(bm);
      Palette palette=builder.generate();

      //方法2   使用异步
      builder.generate(bitmap, new Palette.PaletteAsyncListener() {  
          @Override  
          public void onGenerated(Palette palette) {     
           // Here's your generated palette
      }

二、内部嵌套类和常用方法

Palette.Builder

生成器类，生成 Palette 实例。

Palette.Filter

过滤器接口，使 Palette 有更加细腻的颜色过滤

Palette.PaletteAsyncListener

异步加载监听

pattle.Swatch

提供获取结果的色彩样本

from(List<Palette.Switch> switches)

通过预设的 Palette.Swatch 颜色样本列表来生成 Palette
返回值：static Palette

from(Bitmap bitmap)

通过返回 Palette.Builder 实例来构建 Palette
返回值：static Palette.Builder

generate(Bitmap bitmap,int numColors) 、generate(Bitmap bitmap) 、

该方法已被遗弃，建议用 Palette.Builder 来生成Palette
返回值：static Palette

getColorForTarget(Target target,int defaultColor)

返回一个从目标获取的的 rgb 色值
返回值：int

getDarkMutedColor(int defaultColor)

返回一个柔和的暗色调 rgb 值
返回值：int

getDarkMutedSwatch()

返回一个柔和的暗色调样本类
返回值：Palette.Swatch

getDarkVibrantColor(int defaultColor)

返回一个鲜明的暗色调 rgb 值
返回值：int

getDomainSwatch()

返回一个主色调的样本类
返回值：Palette.Swatch

getLightMutedColor(int defaultColor)

返回一个柔和的亮色调颜色 rgb
返回值：Palette.Swatch

getLightVibrantSwatch()

返回一个鲜明的亮色调样本类
返回值：Palette.Swatch

三、使用样本（swatch）

创建完一个实例之后，我们还需要得到一种采集的样本（swatch），有6中样本（swatch）：

Palette.getVibrantSwatch()
Palette.getDarkVibrantSwatch()
Palette.getLightVibrantSwatch()
Palette.getMutedSwatch()
Palette.getDarkMutedSwatch()
Palette.getLightMutedSwatch()
List<Palette.Swatch> swatches = palette.getSwatches();//一次性获得所有的swatch;

使用方法

getPopulation(): the amount of pixels which this swatch represents.
getRgb(): the RGB value of this color.
getHsl(): the HSL value of this color.
getBodyTextColor(): the RGB value of a text color which can be displayed on top of this color.
getTitleTextColor(): the RGB value of a text color which can be displayed on top of this color.

比如如果你的TextView 有个背景图片，要想让字体颜色能够和背景图片匹配，则使用getBodyTextColor()比较合适，getTitleTextColor()其实应该和getBodyTextColor()差不多

四、Size问题

在上面的代码中，你可能注意到了可以设置palette的size。size越大，花费的时间越长，而越小，可以选择的色彩也越小。最佳的选择是根据image的用途：

头像之类的，size最好在24-32之间；
风景大图之类的 size差不多在8-16；
默认是16.

Bitmap bm = BitmapFactory.decodeResource(getResources(),
              R.drawable.kale);
      Palette palette = Palette.generate(bm);
      if (palette.getLightVibrantSwatch() != null) {
          //需要注意的是`getVibrantSwatch()可能会返回一个null值，
          //所以检查一下是必须的。
          //得到不同的样本，设置给imageview进行显示
          iv.setBackgroundColor(palette.getLightVibrantSwatch().getRgb());
          iv1.setBackgroundColor(palette.getDarkVibrantSwatch().getRgb());
          iv2.setBackgroundColor(palette.getLightMutedSwatch().getRgb());
          iv3.setBackgroundColor(palette.getDarkMutedSwatch().getRgb());

      }

注意

加载不能在主线程中进行，加载方式有同步加载和异步加载两种：

1 同步

由于他们很可能会比较耗时（在分析大图片或者所需颜色较多时），所以它们不应该在主线程中执行。你应该先在别的线程中使用这两个函数进行解析，解析成功之后再使用。

//在加载图片的后台线程中同步加载
Palette palette = Palette.from(bitmap).genrate();
.
.
.

2 异步

有时候你不会在加载图片的线程（非主线程）中使用解析出的颜色，所以Palette提供了异步方法，他们与之前的函数的区别就是需要传入PaletteAsyncListener，提供在图片解析完成后的回调函数。

//异步加载
Palette.from(bitmap).genrate(new PaletteAsyncListener(){
  public void onGenerated(Palette p){
      .
      .
      .
  }
});

Palette经常用于和ViewPager，Fragment搭配使用，当我们的Pager切换时伴随着Fragment的变化，而Fragment里的内容一般是不同的，所以每个Fragment里的一般视觉效果也是不同的，所以我们可以用Palette来去提取Fragment中的主色调，把这个主色调用于整体的UI风格。

Demo下载地址：http://download.csdn.net/detail/breeze_wf/9273313

2625875-1a5ffa9daaeb0192.gif

其他Demo

private void setPaletteColor(TextView tv, int color) {
    tv.setBackgroundColor(color);
    tv.setText(ColorUtils.toRGBHexString(color));
    tv.setTextColor(ColorUtils.parseBackgroundColor(color));
}

private void initPalette() {
    Drawable drawable = mPictureIv.getDrawable();
    Bitmap bitmap = drawableToBitmap(drawable);

    // Synchronous
    // mPalette = Palette.from(bitmap).generate();

    // Asynchronous
    Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
        @Override
        public void onGenerated(Palette palette) {
            // Use generated instance
            int defaultColor = Color.parseColor("#b64242");

            int mVibrantColor = palette.getVibrantColor(defaultColor);
            int mDarkVibrantColor = palette.getDarkVibrantColor(defaultColor);
            int mLightVibrantColor = palette.getLightVibrantColor(defaultColor);
            int mMutedColor = palette.getMutedColor(defaultColor);
            int mDarkMutedColor = palette.getDarkMutedColor(defaultColor);
            int mLightMutedColor = palette.getLightMutedColor(defaultColor);

            setPaletteColor(mVibrantColorTv, mVibrantColor);
            setPaletteColor(mDarkVibrantColorTv, mDarkVibrantColor);
            setPaletteColor(mLightVibrantColorTv, mLightVibrantColor);
            setPaletteColor(mMutedColorTv, mMutedColor);
            setPaletteColor(mDarkMutedColorTv, mDarkMutedColor);
            setPaletteColor(mLightMutedColorTv, mLightMutedColor);

            // dominant color (主色)
            int mDominantColor = palette.getDominantColor(defaultColor);
            setPaletteColor(mDominantColorTv, mDominantColor);

            // Swatch - 色块 // 15种
            List<Palette.Swatch> mSwatchList = palette.getSwatches();
            Toast.makeText(MainActivity.this, "Swatch num: " + mSwatchList.size(), Toast.LENGTH_SHORT).show();
            int index = -1;
            LinearLayout mSwatchesContainer = null;
            LinearLayout.LayoutParams params;
            for (Palette.Swatch swatch : mSwatchList) {
                int color = swatch.getRgb();
                index++;

                if (index % 3 == 0) {
                    mSwatchesContainer = new LinearLayout(getApplicationContext());
                    mSwatchesContainer.setOrientation(LinearLayout.HORIZONTAL);
                    params = new LinearLayout.LayoutParams(
                            LinearLayout.LayoutParams.MATCH_PARENT,
                            LinearLayout.LayoutParams.WRAP_CONTENT
                    );
                    params.topMargin = (int) DisplayUtils.dp2px(getApplicationContext(), 10);
                    mContainerLayout.addView(mSwatchesContainer, params);       //
                }

                LinearLayout mSwatchContainer = new LinearLayout(getApplicationContext());
                mSwatchContainer.setOrientation(LinearLayout.VERTICAL);
                params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT);
                params.weight = 1;
                params.gravity = Gravity.CENTER;
                if (mSwatchesContainer != null) {
                    mSwatchesContainer.addView(mSwatchContainer, params);       //
                }

                TextView mColorTv = new TextView(getApplicationContext());
                mColorTv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
                setPaletteColor(mColorTv, color);           //
                mColorTv.setGravity(Gravity.CENTER);
                params = new LinearLayout.LayoutParams(
                        LinearLayout.LayoutParams.MATCH_PARENT,
                        (int) DisplayUtils.dp2px(getApplicationContext(), 80)
                );
                params.gravity = Gravity.CENTER;
                mSwatchContainer.addView(mColorTv, params);                 //

                TextView mColorNameTv = new TextView(getApplicationContext());
                mColorNameTv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
                mColorNameTv.setText("Swatch " + index);
                mColorNameTv.setGravity(Gravity.CENTER);
                mColorNameTv.setTextColor(Color.parseColor("#333333"));
                params = new LinearLayout.LayoutParams(
                        LinearLayout.LayoutParams.WRAP_CONTENT,
                        LinearLayout.LayoutParams.WRAP_CONTENT
                );
                params.gravity = Gravity.CENTER;
                mSwatchContainer.addView(mColorNameTv, params);
            }
        }
    });
}

Drawable转Bitmap的方法：

public static Bitmap drawableToBitmap(Drawable drawable) {
    Bitmap bitmap = Bitmap.createBitmap(
            drawable.getIntrinsicWidth(),
            drawable.getIntrinsicHeight(),
            drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888 : Bitmap.Config.RGB_565);
    Canvas canvas = new Canvas(bitmap); // canvas -> bitmap
    //canvas.setBitmap(bitmap);
    drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
    drawable.draw(canvas);      // drawable -> canvas
    return bitmap;  // drawable -> canvas -> bitmap
}

ColorUtils

public class ColorUtils {

    public static int parseBackgroundColor2(int color) {
        int counter = 0;
        counter += Color.red(color) >= 128 ? 1 : 0;
        counter += Color.green(color) >= 128 ? 1 : 0;
        counter += Color.blue(color) >= 128 ? 1 : 0;
        return counter >= 2 ? Color.BLACK : Color.WHITE;
    }

    // 通过分析背景色来决定当前文字的匹配颜色，使文字颜色自适应背景颜色
    public static int parseBackgroundColor(int color) {
        int red = Color.red(color);
        int green = Color.green(color);
        int blue = Color.blue(color);
        if (red >= 128 && green >= 128      // 三选二
                || red >= 128 && blue >= 128
                || green >= 128 && blue >= 128) {
            return Color.rgb(0, 0, 0);
        }
        return Color.rgb(255, 255, 255);
    }

    // #FF55FF => color
    // int color = Color.parseColor("#b64242");

    // color -> #FF55FF
    public static String toRGBHexString(final int color) {
        return toRGBHexString(Color.red(color), Color.green(color), Color.blue(color));
    }

    // (r,g,b) -> #FF55FF
    public static String toRGBHexString(int red, int green, int blue) {
        return toARGBHexString(-1, red, green, blue);
    }

    // default prefix: "#"
    // (a,r,g,b) -> #FF55FF55
    public static String toARGBHexString(int alpha, int red, int green, int blue) {
        return toARGBHexString("#", alpha, red, green, blue);
    }

    public static String toARGBHexString(String prefix, int alpha, int red, int green, int blue) {
        StringBuilder sb = new StringBuilder();
        sb.append(prefix);
        if (alpha != -1) {
            String mAlphaStr = Integer.toHexString(alpha);
            sb.append(mAlphaStr.length() == 1 ? "0" + mAlphaStr : mAlphaStr);
        }
        String mRedStr = Integer.toHexString(red);
        sb.append(mRedStr.length() == 1 ? "0" + mRedStr : mRedStr);
        String mGreenStr = Integer.toHexString(green);
        sb.append(mGreenStr.length() == 1 ? "0" + mGreenStr : mGreenStr);
        String mBlueStr = Integer.toHexString(blue);
        sb.append(mBlueStr.length() == 1 ? "0" + mBlueStr : mBlueStr);
        return sb.toString().toUpperCase();
    }

}

Palette
Demo地址