使用Palette调色板获取色块

Android中可以使用调色板Palette来获取图片中主要颜色,鲜艳或者柔和的颜色,或者其他的小色块Swatch。

Palette默认提取的颜色有:

Vibrant - 鲜艳色
Vibrant dark - 暗色
Vibrant light - 亮色

Muted - 柔和色
Muted dark - 暗色
Muted light - 亮色

Dominant - 主色

先上一张效果演示图片:

palette_swatch.png

1. 添加依赖库

可以直接在Project Structure中搜索库依赖:palette,选择com.android.support域名下的库即可。

compile 'com.android.support:appcompat-v7:25.1.0'
compile 'com.android.support:palette-v7:25.1.0'

2. 创建Palette对象

Palette对象的创建是一个耗时操作,应该使用异步方式或者在线程中调用同步方式创建。当前推荐使用Builder模式来创建Palette实例:

同步创建方式

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

异步创建方式

// Asynchronous
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {
        // Use generated instance
    }
});

3. Palette使用示例

这里使用异步方式来创建Palette调色板,在回调方法onGenerated(Palette)中可以得到Palette对象。Swatch小色块若使用XML方式定义则布局代码会很长,这里使用代码方式来创建布局样式。

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 static String toRGBHexString(final int color) - 将int颜色值转成Hex颜色字符串(color -> #FF55FF)

public static int parseBackgroundColor(int color) - 通过分析背景色来决定当前文字的匹配颜色,使文字颜色自适应背景颜色

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

}

4. 效果演示

palette_swatch.gif

5. Palette的UML类图关系

Swatch是定义在Palette中的内部类

palette_uml_class.png

GitHub源代码参考

Palette

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容