Android Material Design系列之Palette

今天我們講的這個(gè)Palette非常好用,也非常好玩癌蓖。 Palette的作用是從圖像中提取突出的顏色瞬哼,這樣我們可以根據(jù)提取到的色值把它賦給Toolbar,標(biāo)題租副,狀態(tài)欄等坐慰,可以使我們的整個(gè)界面色調(diào)統(tǒng)一,效果非常好看附井。

Palette介紹

Palette顧名思義調(diào)色板, Palette的作用是可以從圖像中提取圖片的顏色两残。我們可以把提取的顏色融入到App UI中永毅,可以使UI風(fēng)格更加美觀融洽。

  • Palette可以提取的顏色如下:
  • Vibrant (有活力的)
  • Vibrant dark(有活力的 暗色)
  • Vibrant light(有活力的 亮色)
  • Muted (柔和的)
  • Muted dark(柔和的 暗色)
  • Muted light(柔和的 亮色)

通過Palette對(duì)象獲取到六個(gè)樣本swatch

Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();//1.活力顏色
Palette.Swatch lightVibrantSwatch = palette.getLightVibrantSwatch();//2.亮的活力顏色
Palette.Swatch darkVibrantSwatch = palette.getDarkVibrantSwatch();//3.暗的活力顏色
Palette.Swatch mutedSwatch = palette.getMutedSwatch();//4.柔色
Palette.Swatch lightMutedSwatch = palette.getLightMutedSwatch();//5.亮的柔色
Palette.Swatch darkMutedSwatch = palette.getDarkMutedSwatch();//6.暗的柔色

swatch對(duì)象對(duì)應(yīng)的顏色方法

  • getPopulation(): 像素的數(shù)量
  • getRgb(): RGB顏色
  • getHsl(): HSL顏色
  • getBodyTextColor(): 用于內(nèi)容文本的顏色
  • getTitleTextColor(): 標(biāo)題文本的顏色

Palette實(shí)例

Palette的一些方法:

Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {
        //暗人弓、柔和的顏色
        int darkMutedColor = palette.getDarkMutedColor(Color.BLUE);//如果分析不出來沼死,則返回默認(rèn)顏色
        //暗、柔和
        int lightMutedColor = palette.getLightMutedColor(Color.GRAY);
        //暗崔赌、鮮艷
        int darkVibrantColor = palette.getDarkVibrantColor(Color.BLUE);
        //亮意蛀、鮮艷
        int lightVibrantColor = palette.getLightVibrantColor(Color.BLUE);
        //柔和
        int mutedColor = palette.getMutedColor(Color.BLUE);
        //柔和
        int vibrantColor = palette.getVibrantColor(Color.BLUE);

        //獲取某種特性顏色的樣品
        Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();//1.活力顏色
    Palette.Swatch lightVibrantSwatch = palette.getLightVibrantSwatch();//2.亮的活力顏色
        Palette.Swatch darkVibrantSwatch = palette.getDarkVibrantSwatch();//3.暗的活力顏色
        Palette.Swatch mutedSwatch = palette.getMutedSwatch();//4.柔色
        Palette.Swatch lightMutedSwatch = palette.getLightMutedSwatch();//5.亮的柔色
        Palette.Swatch darkMutedSwatch = palette.getDarkMutedSwatch();//6.暗的柔色

        //谷歌推薦的:圖片的整體的顏色rgb的混合值---主色調(diào)
        int rgb = vibrantSwatch.getRgb();
        //谷歌推薦:圖片中間的文字顏色
        int bodyTextColor = vibrantSwatch.getBodyTextColor();
        //谷歌推薦:作為標(biāo)題的顏色(有一定的和圖片的對(duì)比度的顏色值)
        int titleTextColor = vibrantSwatch.getTitleTextColor();
        //顏色向量
        float[] hsl = vibrantSwatch.getHsl();
        //分析該顏色在圖片中所占的像素多少值
        int population = vibrantSwatch.getPopulation();

    }
});

private int getTranslucentColor(float percent, int rgb) {
    // 10101011110001111
    int blue = Color.blue(rgb);
    int green = Color.green(rgb);
    int red = Color.red(rgb);
    int alpha = Color.alpha(rgb);

    //上面四個(gè)的原理也就是下面的方法
//      int blue = rgb & 0xff;
//      int green = rgb>>8 & 0xff;
//      int red = rgb>>16 & 0xff;
//      int alpha = rgb>>>24;

    alpha = Math.round(alpha*percent);
    return Color.argb(alpha, red, green, blue);
}

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)格。

先看效果圖,如下:


效果圖

第一步:添加依賴

compile 'com.android.support:palette-v7:23.4.0'

第二步:創(chuàng)建Palette對(duì)象谴麦,并獲取圖片的顏色值

// 用來提取顏色的Bitmap
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), PaletteFragment.getBackgroundBitmapPosition(position));
// Palette的部分
Palette.Builder builder = Palette.from(bitmap);
builder.generate(new Palette.PaletteAsyncListener() {@Override public void onGenerated(Palette palette) {
        //獲取到充滿活力的這種色調(diào)
        Palette.Swatch vibrant = palette.getVibrantSwatch();
        //根據(jù)調(diào)色板Palette獲取到圖片中的顏色設(shè)置到toolbar和tab中背景蠢沿,標(biāo)題等,使整個(gè)UI界面顏色統(tǒng)一
        toolbar_tab.setBackgroundColor(vibrant.getRgb());
        toolbar_tab.setSelectedTabIndicatorColor(colorBurn(vibrant.getRgb()));
        toolbar.setBackgroundColor(vibrant.getRgb());

        if (android.os.Build.VERSION.SDK_INT >= 21) {
            Window window = getWindow();
            window.setStatusBarColor(colorBurn(vibrant.getRgb()));
            window.setNavigationBarColor(colorBurn(vibrant.getRgb()));
        }
    }
});

就是這么簡(jiǎn)單匾效,這里略過了對(duì)TabLayout的講解舷蟀,因?yàn)檫@次主講的是Palette嘛,沒記錯(cuò)的話面哼,以前講解過TabLayout的使用野宜,不會(huì)的同學(xué)可以去看源碼或者是查找歷史消息去看看文章。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末精绎,一起剝皮案震驚了整個(gè)濱河市速缨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌代乃,老刑警劉巖旬牲,帶你破解...
    沈念sama閱讀 216,919評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異搁吓,居然都是意外死亡原茅,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門堕仔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來擂橘,“玉大人,你說我怎么就攤上這事摩骨⊥ㄕ辏” “怎么了?”我有些...
    開封第一講書人閱讀 163,316評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵恼五,是天一觀的道長(zhǎng)昌罩。 經(jīng)常有香客問我,道長(zhǎ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
  • 文/蒼蘭香墨 我猛地睜開眼削葱,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(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ú)居荒郊野嶺守林人離奇死亡陨囊,尸身上長(zhǎng)有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
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蠢甲,地道東北人僵刮。 一個(gè)月前我還...
    沈念sama閱讀 47,819評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像鹦牛,于是被迫代替她去往敵國(guó)和親搞糕。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,665評(píng)論 2 354

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