Android Lollipop:使用Palette抽取圖片主色調(diào)

使用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解析六個(gè)主顏色

獲取提取的顏色

你獲取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的例子谎倔,里面展示了它們分別在圖像中所占的比例:

默認(rèn)16個(gè)顏色值

關(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文檔

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末樱拴,一起剝皮案震驚了整個(gè)濱河市柠衍,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌晶乔,老刑警劉巖珍坊,帶你破解...
    沈念sama閱讀 216,919評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異正罢,居然都是意外死亡阵漏,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來履怯,“玉大人回还,你說我怎么就攤上這事√局蓿” “怎么了柠硕?”我有些...
    開封第一講書人閱讀 163,316評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長运提。 經(jīng)常有香客問我蝗柔,道長,這世上最難降的妖魔是什么民泵? 我笑而不...
    開封第一講書人閱讀 58,294評(píng)論 1 292
  • 正文 為了忘掉前任癣丧,我火速辦了婚禮,結(jié)果婚禮上栈妆,老公的妹妹穿的比我還像新娘胁编。我一直安慰自己,他們只是感情好鳞尔,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,318評(píng)論 6 390
  • 文/花漫 我一把揭開白布掏呼。 她就那樣靜靜地躺著,像睡著了一般铅檩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上莽鸿,一...
    開封第一講書人閱讀 51,245評(píng)論 1 299
  • 那天昧旨,我揣著相機(jī)與錄音,去河邊找鬼祥得。 笑死兔沃,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的级及。 我是一名探鬼主播乒疏,決...
    沈念sama閱讀 40,120評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼饮焦!你這毒婦竟也來了怕吴?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,964評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤县踢,失蹤者是張志新(化名)和其女友劉穎转绷,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體硼啤,經(jīng)...
    沈念sama閱讀 45,376評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡议经,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,592評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片煞肾。...
    茶點(diǎn)故事閱讀 39,764評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡咧织,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出籍救,到底是詐尸還是另有隱情习绢,我是刑警寧澤,帶...
    沈念sama閱讀 35,460評(píng)論 5 344
  • 正文 年R本政府宣布钧忽,位于F島的核電站毯炮,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏耸黑。R本人自食惡果不足惜桃煎,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,070評(píng)論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望大刊。 院中可真熱鬧为迈,春花似錦、人聲如沸缺菌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽伴郁。三九已至耿战,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間焊傅,已是汗流浹背剂陡。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留狐胎,地道東北人鸭栖。 一個(gè)月前我還...
    沈念sama閱讀 47,819評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像握巢,于是被迫代替她去往敵國和親晕鹊。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,665評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,085評(píng)論 25 707
  • 一暴浦、Palette的簡單介紹 android-support-v7-palette 里面的Palette是Andr...
    黃海佳閱讀 7,454評(píng)論 0 10
  • 今天我們講的這個(gè)Palette非常好用溅话,也非常好玩。 Palette的作用是從圖像中提取突出的顏色歌焦,這樣我們可以根...
    咸魚Jay閱讀 442評(píng)論 0 0
  • Palette 單詞本意是調(diào)色板的意思公荧,所以在Android中Palette肯定會(huì)與顏色有關(guān),它在作用是根據(jù)當(dāng)前圖...
    Soul丶ly閱讀 1,085評(píng)論 0 4
  • 我曾經(jīng)說過同规,如緹姐姐其實(shí)是所有人的妹妹——林妹妹循狰,一襲多愁多病身窟社,永遠(yuǎn)嬌喘微微⌒髟浚口頭禪竟是: 我要好好吃藥灿里,把身體...
    小女巫惠惠閱讀 381評(píng)論 4 4