使用Palette抽取Bitmap主色調(diào)
關(guān)于Palette
一些Support庫隨著Android Lollipop的發(fā)布而誕生了坞笙,其中就有Palette。這個(gè)庫可以讓你很輕松地從一幅圖中抽取特征顏色舞虱,這在你希望界面的顏色風(fēng)格適應(yīng)指定圖片時(shí)非常有用诞外,它還會(huì)提供與指定顏色相搭配的字體顏色料睛。
Palette顧名思義調(diào)色板, Palette的作用是可以從圖像中提取圖片的顏色撬槽。我們可以把提取的顏色融入到App UI中此改,可以使UI風(fēng)格更加美觀融洽。有些時(shí)候Palette顯得非常好用侄柔,比如我們可以提取到的突出的色值設(shè)置為Toolbar共啃,標(biāo)題,狀態(tài)欄的顏色等暂题,可以使我們的整個(gè)界面色調(diào)統(tǒng)一移剪,效果非常好看。
開始使用
導(dǎo)包
你需要在工程下的build.gradle里添加依賴才可以使用Palette薪者,像如下代碼所示:
dependencies {
compile 'com.android.support:palette-v7:21.0.0'
}
生成Palette
生成一幅圖像的Palette有一下幾種方法:
// Synchronous methods.同步方法--------------------------------
// 這些應(yīng)該在訪問底層圖像加載線程時(shí)使用纵苛。
// 方法1:使用默認(rèn)16種顏色種類的調(diào)色板大小。
Palette p = Palette.generate(bitmap);
// 方法2:允許指定調(diào)色板的顏色種類的值,這里為24.
Palette p = Palette.generate(bitmap, 24);
// Asynchronous methods.異步方法--------------------------------
// 這是快速的集成路徑攻人,在內(nèi)部使用AsyncTask等取试,不一定是最好的方式。
// 方法3:
Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
// Here's your generated palette 這是你生成的調(diào)色板
}
});
// 方法4:
Palette.generateAsync(bitmap, 24, new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
// Here's your generated palette
}
});
同步方法怀吻。由于他們很可能會(huì)比較耗時(shí)(在分析大圖片或者所需顏色較多時(shí))瞬浓,所以它們不應(yīng)該在主線程中執(zhí)行。你應(yīng)該先在別的線程中使用這兩個(gè)函數(shù)進(jìn)行解析蓬坡,解析成功之后再使用猿棉。
異步方法。有時(shí)候你不會(huì)在加載圖片的線程(非主線程)中使用解析出的顏色屑咳,所以Palette提供了異步方法铺根,他們與之前的函數(shù)的區(qū)別就是需要傳入PaletteAsyncListener,提供在圖片解析完成后的回調(diào)函數(shù)乔宿。
PaletteAsyncListener的實(shí)現(xiàn)是非常簡單的(參考下面這幾行代碼),它只要重寫onGenerated就好了访雪。如此一來你就可以在任何需要的時(shí)候使用這兩個(gè)函數(shù)創(chuàng)建Palette详瑞。
Palette.PaletteAsyncListener listener = new Palette.PaletteAsyncListener() {
public void onGenerated(Palette palette) {
// 使用Palette對(duì)象,獲取解析出的顏色
}
}
提取出的顏色
Palette默認(rèn)會(huì)解析出圖像的16種特征顏色種類臣缀,但是這六種顏色是你最經(jīng)常用到的:
- vibrant(鮮艷色)
- dark vibrant(鮮艷色中的暗色)
- light vibrant(鮮艷色中的亮色)
- muted(柔和色)
- dark muted(柔和色中的暗色)
- light muted(柔和色中的亮色)
借一張別人的圖坝橡,給大家一種更直觀的感受。
獲取提取的顏色
你獲取Palette對(duì)象之后精置,可以通過以下這些內(nèi)置getter函數(shù)直接獲取這六個(gè)顏色计寇。你需要傳入默認(rèn)顏色防止Palette無法解析到指定顏色種類,返回的類型是24位RGB顏色數(shù)值脂倦。
Palette palette = Palette.generate(myBitmap);
int vibrant = palette.getVibrantColor(0x000000);
int vibrantLight = palette.getLightVibrantColor(0x000000);
int vibrantDark = palette.getDarkVibrantColor(0x000000);
int muted = palette.getMutedColor(0x000000);
int mutedLight = palette.getLightMutedColor(0x000000);
int mutedDark = palette.getDarkMutedColor(0x000000);
//獨(dú)特的一種
getDominantColor(int defaultColor)
//返回從調(diào)色板中占主導(dǎo)地位的樣本的顏色番宁,為RGB包裝INT。
獲取Swatch
你也可以選擇先獲取Swatch對(duì)象赖阻,然后再通過Swatch提供的方法獲取顏色的相關(guān)信息:
Palette.Swatch s = p.getVibrantSwatch(); //獲取到充滿活力的這種色調(diào)
Palette.Swatch s = p.getDarkVibrantSwatch(); //獲取充滿活力的黑
Palette.Swatch s = p.getLightVibrantSwatch(); //獲取充滿活力的亮
Palette.Swatch s = p.getMutedSwatch(); //獲取柔和的色調(diào)
Palette.Swatch s = p.getDarkMutedSwatch(); //獲取柔和的黑
Palette.Swatch s = p.getLightMutedSwatch(); //獲取柔和的亮
//獨(dú)特的一種
getDominantSwatch()
//返回從調(diào)色板中占主導(dǎo)地位的樣本蝶押。
注意:getVibrantSwatch()可能會(huì)返回一個(gè)null值,所以在使用前檢查一下是必須的火欧。
if (swatch != null) {}
Palette解析出的顏色都來自于對(duì)應(yīng)的Swatch棋电,在Swatch里面含有很多關(guān)于對(duì)應(yīng)顏色的有用信息。你可以從Swatch中獲取RGB顏色值苇侵、HSL顏色向量赶盔、對(duì)應(yīng)顏色在圖像中所占的比例、與對(duì)應(yīng)顏色搭配的標(biāo)題字體顏色和正文字體顏色(這兩個(gè)顏色和對(duì)應(yīng)顏色的對(duì)比值是處理好的榆浓,你不必再去操心)于未。
swatch對(duì)象對(duì)應(yīng)的顏色方法:
getPopulation(): 像素的數(shù)量
getRgb(): RGB顏色
getHsl(): HSL顏色
getBodyTextColor(): 用于內(nèi)容正文文本的顏色
getTitleTextColor(): 標(biāo)題文本的顏色
Palette只為六種主顏色種類Swatch提供了getter,如果你要使用其他顏色種類的Swatch(一共有16種顏色種類),你需要手動(dòng)獲取它沉眶。調(diào)用getSwatchs()會(huì)返回一個(gè)列表打却,里面有所有獲取到的Swatch。
List<Palette.Swatch> swatches = palette.getSwatches();
這里是一個(gè)Palette獲取所有Swatch的例子谎倔,里面展示了它們分別在圖像中所占的比例:
關(guān)于顏色種類的值size
在上面生成Palette的時(shí)候柳击,你可能注意到了可以設(shè)置Palette的size。size越大片习,花費(fèi)的時(shí)間越長捌肴,而越小,可以選擇的色彩也越小藕咏。最佳的選擇是根據(jù)image的用途:
- 頭像之類的状知,size最好在24-32之間;
- 風(fēng)景大圖之類的孽查,size差不多在8-16饥悴;
- 默認(rèn)是16.
Palette實(shí)例
Palette經(jīng)常用于和ViewPager,F(xiàn)ragment搭配使用盲再,當(dāng)我們的Pager切換時(shí)伴隨著Fragment的變化西设,而Fragment里的內(nèi)容一般是不同的,所以每個(gè)Fragment里的一般視覺效果也是不同的答朋,所以我們可以用Palette來去提取Fragment中的主色調(diào)贷揽,把這個(gè)主色調(diào)用于整體的UI風(fēng)格。
這個(gè)例子可以參考這篇博客:http://www.reibang.com/p/9fcf316031ba
Demo的地址:https://github.com/loonggg/MaterialDesignDemo
另外一個(gè)例子:
詳情參考這篇博客:http://www.itdadao.com/articles/c15a485862p0.html
Demo下載地址:http://download.csdn.net/detail/breeze_wf/9273313
這篇博客也大多借鑒上面兩篇博客的內(nèi)容梦碗。
Palette的異步方法使得它非常容易去使用禽绪,而且我也看到了它用在很多地方。它真是一個(gè)非常棒的工具洪规,能夠收集一幅圖中所有的顏色印屁,并將它們總結(jié)到幾個(gè)不同種類的顏色中。建議大家閱讀源碼來更多地學(xué)習(xí)它淹冰!
關(guān)于更多Palette的詳細(xì)用法库车,可以查看官方API文檔。