Android Material Design 之 Palette

簡(jiǎn)介

Palette 即調(diào)色板。從圖片中提取顏色故源,然后賦給相應(yīng)的視圖污抬,使界面看起來(lái)更加協(xié)調(diào)好看。

簡(jiǎn)單使用

首先添加相應(yīng)的依賴

implementation 'com.android.support:palette-v7:26.0.0'

Android Studio 3.0 開(kāi)始新建項(xiàng)目默認(rèn)使用 implementation 了心软,當(dāng)然 compile 也能用壕吹。

我們給 Layout 文件添加一個(gè) ImageView 和 6 個(gè) View。ImageView 是用來(lái)放圖片來(lái)提取顏色的删铃,提取的顏色分別放到準(zhǔn)備的 6 個(gè) View 中耳贬。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@color/colorPrimary"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.teletian.palette.MainActivity">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/naruto" />

    <View
        android:id="@+id/color1"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="5dp" />

    <View
        android:id="@+id/color2"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="5dp" />

    <View
        android:id="@+id/color3"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="5dp" />

    <View
        android:id="@+id/color4"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="5dp" />

    <View
        android:id="@+id/color5"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="5dp" />

    <View
        android:id="@+id/color6"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="5dp" />

</LinearLayout>

接下來(lái)就是在 Activity 中提取,先上代碼如下:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView image = findViewById(R.id.image);
        Bitmap bitmap = ((BitmapDrawable)image.getDrawable()).getBitmap();

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

                //充滿活力的樣本
                Palette.Swatch swath1 = palette.getVibrantSwatch();
                if (swath1 != null) {
                    findViewById(R.id.color1).setBackgroundColor(swath1.getRgb());
                }

                //充滿活力的暗色樣本
                Palette.Swatch swath2 = palette.getDarkVibrantSwatch();
                if (swath2 != null) {
                    findViewById(R.id.color2).setBackgroundColor(swath2.getRgb());
                }

                //充滿活力的亮色樣本
                Palette.Swatch swath3 = palette.getLightVibrantSwatch();
                if (swath3 != null) {
                    findViewById(R.id.color3).setBackgroundColor(swath3.getRgb());
                }

                //柔和的樣本
                Palette.Swatch swath4 = palette.getMutedSwatch();
                if (swath4 != null) {
                    findViewById(R.id.color4).setBackgroundColor(swath4.getRgb());
                }

                //柔和的暗色樣本
                Palette.Swatch swath5 = palette.getDarkMutedSwatch();
                if (swath5 != null) {
                    findViewById(R.id.color5).setBackgroundColor(swath5.getRgb());
                }

                //柔和的亮色樣本
                Palette.Swatch swath6 = palette.getLightMutedSwatch();
                if (swath6 != null) {
                    findViewById(R.id.color6).setBackgroundColor(swath6.getRgb());
                }
            }
        });
    }
}

Palette 對(duì)象的生成有兩種方法猎唁,例子中的是異步生成咒劲,還可以同步生成,代碼如下:

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

推薦使用異步诫隅,尤其是圖片大小比較大的時(shí)候腐魂。

提取顏色提供了 6 中不同的顏色,詳見(jiàn)代碼注釋逐纬。

除了提取 rgb 顏色蛔屹,還可以提取其他信息:
getTitleTextColor():返回適合標(biāo)題的顏色
getBodyTextColor():返回適合文本內(nèi)容的顏色
getTitleTextColor():返回float[],可以進(jìn)行修改豁生,后使用ColorUtils工具類進(jìn)行轉(zhuǎn)換
getPopulation():返回像素的總數(shù)

運(yùn)行效果如下:

可以發(fā)現(xiàn)下面 6 中顏色只有 5 中顏色顯示出來(lái)了兔毒,其中 "充滿活力的暗色樣本" 沒(méi)有顯示。也就是說(shuō) Palette 獲取的樣本是可能沒(méi)有值的甸箱。但是 "充滿活力的樣本" 和其他不一樣育叁,始終有值。

使用場(chǎng)景

Palette 到底實(shí)際應(yīng)用中有什么用呢芍殖,下面通過(guò)一個(gè)例子來(lái)展示一下其中一種使用場(chǎng)景豪嗽。

先來(lái)看下效果:

ViewPager 滑動(dòng)的時(shí)候,根據(jù)圖片的顏色,改變 StatusBar龟梦,Toolbar隐锭,TabLayout,NavigationBar 的顏色变秦。

Palette 的基本使用既然已經(jīng)在上文中講解過(guò)了成榜,這邊就不再啰嗦了。
例子中使用到了 Toolbar 和 TabLayout蹦玫,如果不熟悉的話,可以參照我之前寫(xiě)的文章↓
Android Material Design 之 Toolbar
Android Material Design 之 TabLayout

所以直接看源碼吧刘绣!

源碼

基本使用
https://github.com/teletian/Android/tree/master/MaterialDesignSamples/Palette

ViewPager 滑動(dòng)改變顏色
https://github.com/teletian/Android/tree/master/MaterialDesignSamples/PaletteWithViewPager

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末樱溉,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子纬凤,更是在濱河造成了極大的恐慌福贞,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,997評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件停士,死亡現(xiàn)場(chǎng)離奇詭異挖帘,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)恋技,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門拇舀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人蜻底,你說(shuō)我怎么就攤上這事骄崩。” “怎么了薄辅?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,359評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵要拂,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我站楚,道長(zhǎng)脱惰,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,309評(píng)論 1 292
  • 正文 為了忘掉前任窿春,我火速辦了婚禮拉一,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘谁尸。我一直安慰自己舅踪,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,346評(píng)論 6 390
  • 文/花漫 我一把揭開(kāi)白布良蛮。 她就那樣靜靜地躺著抽碌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上货徙,一...
    開(kāi)封第一講書(shū)人閱讀 51,258評(píng)論 1 300
  • 那天左权,我揣著相機(jī)與錄音,去河邊找鬼痴颊。 笑死赏迟,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蠢棱。 我是一名探鬼主播锌杀,決...
    沈念sama閱讀 40,122評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼泻仙!你這毒婦竟也來(lái)了糕再?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,970評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤玉转,失蹤者是張志新(化名)和其女友劉穎突想,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體究抓,經(jīng)...
    沈念sama閱讀 45,403評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡猾担,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,596評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了刺下。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片绑嘹。...
    茶點(diǎn)故事閱讀 39,769評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖怠李,靈堂內(nèi)的尸體忽然破棺而出圾叼,到底是詐尸還是另有隱情,我是刑警寧澤捺癞,帶...
    沈念sama閱讀 35,464評(píng)論 5 344
  • 正文 年R本政府宣布夷蚊,位于F島的核電站,受9級(jí)特大地震影響髓介,放射性物質(zhì)發(fā)生泄漏惕鼓。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,075評(píng)論 3 327
  • 文/蒙蒙 一唐础、第九天 我趴在偏房一處隱蔽的房頂上張望箱歧。 院中可真熱鬧,春花似錦一膨、人聲如沸呀邢。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,705評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)价淌。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蝉衣,已是汗流浹背括尸。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,848評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留病毡,地道東北人濒翻。 一個(gè)月前我還...
    沈念sama閱讀 47,831評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像啦膜,于是被迫代替她去往敵國(guó)和親有送。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,678評(píng)論 2 354

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

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,093評(píng)論 25 707
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 46,756評(píng)論 22 665
  • afinalAfinal是一個(gè)android的ioc僧家,orm框架 https://github.com/yangf...
    passiontim閱讀 15,429評(píng)論 2 45
  • 今日北京娶眷,小雨; 恰巧今日9點(diǎn)52分58秒立秋啸臀,意味著夏季結(jié)束,秋季開(kāi)始烁落。 等我清早醒來(lái)的時(shí)候北京已經(jīng)下起...
    Ella0321閱讀 155評(píng)論 7 0