看到小米有品顶部banner设计挺有意思，以前没实现过类似的效果，就尝试着实现一下。

GIT地址

小米有品.gif

当时想到二个思路：

1. 识别banner图片主色调，优点：方便、易用、灵活 。缺点：图片颜色过多容易出错
2. 后台返回，优点：最精确 。缺点：麻烦，上传banner的人需要先判断主色调。
   下文主要采用第一种思路。
   Android中想实现提取图像中突出的颜色就需要引入Palette。

Palette

是什么：可提取突出颜色的库
使用场景: 比如上文举的小米有品banner，还可以根据UI背景的颜色调整ToolBar和状态栏的颜色。

使用

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以及状态栏的颜色
     */
    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界面颜色统一
                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（蓝）。每种颜色值占一个字节(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

项目地址