看到小米有品頂部banner設計挺有意思，以前沒實現(xiàn)過類似的效果，就嘗試著實現(xiàn)一下。

GIT地址

小米有品.gif

當時想到二個思路：

1. 識別banner圖片主色調，優(yōu)點：方便、易用、靈活 。缺點：圖片顏色過多容易出錯
2. 后臺返回，優(yōu)點：最精確 。缺點：麻煩，上傳banner的人需要先判斷主色調。
   下文主要采用第一種思路。
   Android中想實現(xiàn)提取圖像中突出的顏色就需要引入Palette。

Palette

是什么：可提取突出顏色的庫
使用場景: 比如上文舉的小米有品banner，還可以根據UI背景的顏色調整ToolBar和狀態(tài)欄的顏色。

使用

1. 導入依賴

dependencies{
implementation 'androidx.palette:palette:1.0.0'
}

2.調用方法

// Generate palette synchronously and return it （同步調用）
    public Palette createPaletteSync(Bitmap bitmap) {
      Palette p = Palette.from(bitmap).generate();
      return p;
    }

// Generate palette asynchronously and use it on a different（異步調用）
    // thread using onGenerated()
    public void createPaletteAsync(Bitmap bitmap) {
      Palette.from(bitmap).generate(new PaletteAsyncListener() {
        public void onGenerated(Palette p) {
          // Use generated instance
        }
      });
    }

3.六種顏色配置：

• Light Vibrant
• Vibrant
• Dark Vibrant
• Light Muted
• Muted
• Dark Muted

Palette.Swatch s = palette.getDominantSwatch();//獨特的一種
Palette.Swatch s1 = palette.getVibrantSwatch();       //獲取到充滿活力的這種色調
Palette.Swatch s2 = palette.getDarkVibrantSwatch();    //獲取充滿活力的黑
Palette.Swatch s3 = palette.getLightVibrantSwatch();   //獲取充滿活力的亮
Palette.Swatch s4 = palette.getMutedSwatch();           //獲取柔和的色調
Palette.Swatch s5 = palette.getDarkMutedSwatch();      //獲取柔和的黑
Palette.Swatch s6 = palette.getLightMutedSwatch();    //獲取柔和的亮
Palette.Swatch s7 = palette.getDominantSwatch(); //返回調色板中的主要色板
....

4.主要代碼

/**
     * 根據Palette提取的顏色，修改tab和toolbar以及狀態(tài)欄的顏色
     */
    private void changeTopBgColor(int position) {
        // 用來提取顏色的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) {
                //獲取到充滿活力的這種色調
                //Palette.Swatch vibrant = palette.getVibrantSwatch();
                //返回調色板中的主要色板
                Palette.Swatch vibrant = palette.getDominantSwatch();
                //根據調色板Palette獲取到圖片中的顏色設置到toolbar和tab中背景，標題等，使整個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()));
                }
            }
        });
    }

5.顏色加深處理

/**
    * 顏色加深處理
    *
    * @param RGBValues RGB的值，由alpha（透明度）、red（紅）、green（綠）、blue（藍）構成，
    *                  Android中我們一般使用它的16進制，
    *                  例如："#FFAABBCC",最左邊到最右每兩個字母就是代表alpha（透明度）、
    *                  red（紅）、green（綠）、blue（藍）。每種顏色值占一個字節(jié)(8位)，值域0~255
    *                  所以下面使用移位的方法可以得到每種顏色的值，然后每種顏色值減小一下，在合成RGB顏色，顏色就會看起來深一些了
    * @return
    */
   private int colorBurn(int RGBValues) {
       int alpha = RGBValues >> 24;
       int red = RGBValues >> 16 & 0xFF;
       int green = RGBValues >> 8 & 0xFF;
       int blue = RGBValues & 0xFF;
       red = (int) Math.floor(red * (1 - 0.1));
       green = (int) Math.floor(green * (1 - 0.1));
       blue = (int) Math.floor(blue * (1 - 0.1));
       return Color.rgb(red, green, blue);
   }

簡單效果

111120210519_141837.gif

111120210611_175629.gif

項目地址