看到小米有品頂部banner設(shè)計(jì)挺有意思襟衰，以前沒(méi)實(shí)現(xiàn)過(guò)類似的效果稻艰，就嘗試著實(shí)現(xiàn)一下遥缕。

GIT地址

小米有品.gif

當(dāng)時(shí)想到二個(gè)思路：

1. 識(shí)別banner圖片主色調(diào)捉片，優(yōu)點(diǎn)：方便扣唱、易用、靈活 唐瀑。缺點(diǎn)：圖片顏色過(guò)多容易出錯(cuò)
2. 后臺(tái)返回群凶，優(yōu)點(diǎn)：最精確 。缺點(diǎn)：麻煩哄辣，上傳banner的人需要先判斷主色調(diào)请梢。
   下文主要采用第一種思路。
   Android中想實(shí)現(xiàn)提取圖像中突出的顏色就需要引入Palette力穗。

Palette

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

使用

1. 導(dǎo)入依賴

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

2.調(diào)用方法

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

// Generate palette asynchronously and use it on a different（異步調(diào)用）
    // 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();//獨(dú)特的一種
Palette.Swatch s1 = palette.getVibrantSwatch();       //獲取到充滿活力的這種色調(diào)
Palette.Swatch s2 = palette.getDarkVibrantSwatch();    //獲取充滿活力的黑
Palette.Swatch s3 = palette.getLightVibrantSwatch();   //獲取充滿活力的亮
Palette.Swatch s4 = palette.getMutedSwatch();           //獲取柔和的色調(diào)
Palette.Swatch s5 = palette.getDarkMutedSwatch();      //獲取柔和的黑
Palette.Swatch s6 = palette.getLightMutedSwatch();    //獲取柔和的亮
Palette.Swatch s7 = palette.getDominantSwatch(); //返回調(diào)色板中的主要色板
....

4.主要代碼

/**
     * 根據(jù)Palette提取的顏色睛廊，修改tab和toolbar以及狀態(tài)欄的顏色
     */
    private void changeTopBgColor(int position) {
        // 用來(lái)提取顏色的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();
                //返回調(diào)色板中的主要色板
                Palette.Swatch vibrant = palette.getDominantSwatch();
                //根據(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()));
                }
            }
        });
    }

5.顏色加深處理

/**
    * 顏色加深處理
    *
    * @param RGBValues RGB的值超全，由alpha（透明度）咆霜、red（紅）、green（綠）嘶朱、blue（藍(lán)）構(gòu)成蛾坯，
    *                  Android中我們一般使用它的16進(jìn)制，
    *                  例如："#FFAABBCC",最左邊到最右每?jī)蓚€(gè)字母就是代表alpha（透明度）疏遏、
    *                  red（紅）脉课、green（綠）、blue（藍(lán)）财异。每種顏色值占一個(gè)字節(jié)(8位)倘零，值域0~255
    *                  所以下面使用移位的方法可以得到每種顏色的值，然后每種顏色值減小一下戳寸，在合成RGB顏色呈驶，顏色就會(huì)看起來(lái)深一些了
    * @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);
   }

簡(jiǎn)單效果

111120210519_141837.gif

111120210611_175629.gif

項(xiàng)目地址