1. 程式人生 > >使用Palette抽取圖片顏色

使用Palette抽取圖片顏色

nac public sage new nts itl activity map 它的

最近想實現從一張圖片中,獲取它的顏色,設置給其余控件,以使得 UI 頁面的整體風格更加的美觀和融洽。網上查詢了一些資料,發現了一個Android 下比較有意思的 Support v7 庫~~~

Palette庫可以從一張圖片(Bitmap)中提取出它突出的顏色,恰巧可以達到我的需求。

步驟

1、傳遞一個 Bitmap,得到一個 Palette。
2、獲取Palette中指定的色樣
3、從色樣中提取相應的顏色。

開始使用

導包

在工程下的 build.gradle 裏添加依賴才可以使用Palette,因為傳遞一個 Bitmap,得到一個Palette,我平常用的glide庫加載圖片,所以後面我就用glide來獲取Bitmap。

implementation ‘com.android.support:palette-v7:27.1.1‘
implementation ‘com.github.bumptech.glide:glide:3.6.1‘

1、獲取Palette對象

獲取Palette對象有同步異步兩種方式,建議使用異步獲取Palette對象。

同步獲取

Palette palette = Palette.from(bitmap).generate();

異步獲取

Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {

    }   
});

2、獲取Palette生成的色樣

可以獲取到以下幾種色樣,但是有的時候獲取不到對應的色樣對象,必須註意非空判斷。
| 色樣| 顏色|
| ---------- |:-----------:|
|DominantSwatch|最突出的顏色|
|VibrantSwatch|有活力的顏色|
|DarkVibrantSwatch|有活力的暗色|
|LightVibrantSwatch|有活力的亮色|
|MutedSwatch|柔和的顏色|
|DarkMutedSwatch|柔和的暗色|
|LightMutedSwatch|柔和的亮色|

////獲取有活力的顏色
final Palette.Swatch swatch1 = palette.getDarkVibrantSwatch();
//非空判斷
if (swatch1 != null) {
}

3、從色樣中提取相應的顏色。

得到Swatch對象之後,就可以調用Swatch中的獲取我們需要的顏色值。

//圖片中的像素數量
swatch.getPopulation()
//顏色的RBG值
swatch.getRgb()
//顏色的HSL值
swatch.getHsl()
//主體文字的顏色值
swatch.getBodyTextColor()
//標題文字的顏色值
swatch.getTitleTextColor()

這是從我的項目中抽出來的代碼,大家可以看看

Glide.with(MainActivity.this).load(music_pic).asBitmap().into(new SimpleTarget<Bitmap>() {
                    @Override
                    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
                        music_message_music_iv.setImageBitmap(resource);
                        Palette.generateAsync(resource, new Palette.PaletteAsyncListener() {
                            @Override
                            public void onGenerated(Palette palette) {
                                // palette為生成的調色板
                                final Palette.Swatch s1 = palette.getDarkVibrantSwatch();
                                if (swatch1 != null) {
                                    linearLayout.setBackgroundColor(swatch1.getRgb());
                                }
                            }
                        });
                    }
                }); //方法中設置asBitmap可以設置回調類型

使用Palette抽取圖片顏色