使用Palette優化界面色彩搭配 Jetpack

Palette 動態獲取圖片的某種顏色。作用請看下面動圖

---

沒有添加筆記 ，直接查看 原文：https://www.jianshu.com/p/dfa9aac6143d

我寫過一篇博客介紹了常用Material Design控件的使用。
http://www.jianshu.com/p/776cc6329fff
本想把大部分的Material Design的知識點寫到一個博客中，結果無奈東西太多隻好分開寫。這篇博客介紹的是Palette調色板的使用。
源碼地址：https://github.com/AxeChen/MaterialDesignSimple

示例代碼（由於提交中不慎修改了其他module的代碼，所以用紅框標出了）

1、Palette的基本理解

Palette是調色版的意思，用它能獲取到Bitmap中一些活躍的顏色，其他控件通過設置這些顏色來優化界面色彩搭配。
效果圖：
沒有使用Palette調色時。Toolbar和TabLayout等控件是藍色，和圖片很明顯不協調。

沒使用Palette調色效果圖

使用Palette調色後。Toolbar、TabLayout狀態欄等會根據圖片展示比較搭配的顏色。
注意：Palette並不只適用於我寫的示例，Palette應用的情況很多，我這裏只用作效果展示。

使用Palette調色效果圖

2、Palette的基本使用

Palette使用起來非常簡單，沒有比較複雜的步驟。

2.1、導入依賴

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

2.2、主要方法

調用Palette.from() 方法將bitmap傳入，然後在回調中獲取顏色值。

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

通過Palette 可以獲取到一些顏色值。

 // 獲取到柔和的深色的顏色（可傳默認值）
 palette.getDarkMutedColor(Color.BLUE);
 // 獲取到活躍的深色的顏色（可傳默認值）
 palette.getDarkVibrantColor(Color.BLUE);
 // 獲取到柔和的明亮的顏色（可傳默認值）
 palette.getLightMutedColor(Color.BLUE);
 // 獲取到活躍的明亮的顏色（可傳默認值）
 palette.getLightVibrantColor(Color.BLUE);
 // 獲取圖片中最活躍的顏色（也可以說整個圖片出現最多的顏色）（可傳默認值）
 palette.getVibrantColor(Color.BLUE);
 // 獲取圖片中一個最柔和的顏色（可傳默認值）
 palette.getMutedColor(Color.BLUE);
// ...  這裏省略其他的方法。

以上我都是通過源碼中的註釋來獲取這些方法的基本含義的。Palette的方法並不多，大部分都是返回顏色的方法，這裏不再多介紹。
以上方法的效果圖：

效果圖

2.3、示例代碼

示例代碼中的TabLayout和Viewpager的聯用，我就不介紹了。如果不知道TabLayout和Viewpager的聯用可以看我的另一篇寫Material Design控件的博客：http://www.jianshu.com/p/776cc6329fff
唯一注意的地方就是使用了不同的獲取顏色的方法。
palette.getVibrantSwatch()：獲取顏色樣本。在這裏做了非空判斷，如果獲取的顏色樣本爲空就從所有的樣本中獲取一個樣本。
vibrant.getRgb()：從樣本中獲取顏色的RGB值。獲取到RGB值之後可以直接給其他控件使用這個值，或者稍微調整這個值的顏色再使用。

Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                Palette.Swatch vibrant = palette.getVibrantSwatch();
                if (vibrant == null) {
                    for (Palette.Swatch swatch : palette.getSwatches()) {
                        vibrant = swatch;
                        break;
                    }
                }
                // 這樣獲取的顏色可以進行改變。
                int rbg = vibrant.getRgb();

                // ... 省略一些無關緊要的代碼

                tabLayout.setBackgroundColor(rbg);
                toolbar.setBackgroundColor(rbg);
                if (Build.VERSION.SDK_INT > 21) {
                    Window window = getWindow();
                    //狀態欄改變顏色。
                    int color = changeColor(rbg);
                    window.setStatusBarColor(color);
                }
            }
        });

  // 對獲取到的RGB顏色進行修改。（涉及到位運算，我也不是很懂這塊）
 private int changeColor(int rgb) {
      int red = rgb >> 16 & 0xFF;
      int green = rgb >> 8 & 0xFF;
      int blue = rgb & 0xFF;
      red = (int) Math.floor(red * (1 - 0.2));
      green = (int) Math.floor(green * (1 - 0.2));
      blue = (int) Math.floor(blue * (1 - 0.2));
      return Color.rgb(red, green, blue);
 }

3、最後

源碼地址：https://github.com/AxeChen/MaterialDesignSimple

作者：AxeChen
鏈接：https://www.jianshu.com/p/dfa9aac6143d
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。