android palette组件用法,Android Palette（调色板）的使用

admin 管理员组

文章数量: 887021

android palette组件用法,Android Palette（调色板）的使用

一、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 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 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风格。

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 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();

}

}

本文标签： android palette组件用法 Android Palette（调色板）的使用