Palette優化界面色彩搭配

目錄

什麼是Palette

Palette是調色闆的意思它可以通過提取Bitmap中的顔色來優化界面的色彩搭配。

Palette的使用方法

導入依賴

dependencies {
    ...
    implementation 'com.android.support:palette-v7:27.1.1'
}
           

核心方法（傳入bitmap）

Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(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);
            }
});
           

案例示範

這裡使用的是Toolbar+TabLayout+ViewPager結合實作的一個效果

核心代碼：

private void setPaletteColor(int position) {
        Bitmap bitmap = bitmaps.get(position);
        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 rgb = vibrant.getRgb();//從樣本中擷取顔色的RGB值。擷取到RGB值之後可以直接給其他控件使用這個值，或者稍微調整這個值的顔色再使用。
                tablayout.setBackgroundColor(rgb);
                toolbar.setBackgroundColor(rgb);
                if (Build.VERSION.SDK_INT > 21) {
                    Window window = getWindow();
                    //狀态欄改變顔色。
                    int color = changeColor(rgb);
                    window.setStatusBarColor(color);
                }

            }
        });
    }
    /**
     * @method  changeColor
     * @description 修改狀态欄顔色
     * @date: 2018/9/17 11:33
     * @author: LML
     * @param rgb 顔色值參數
     * @return int
     */
    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);
    }
           

案例源碼位址：

https://github.com/myml666/PalettesDemo

個人技術部落格： https://myml666.github.io