转载请注明:https://blog.youkuaiyun.com/u012854870/article/details/84790724
使用Palette抽取Bitmap主色调
关于Palette
一些Support库随着Android Lollipop的发布而诞生了,其中就有Palette。这个库可以让你很轻松地从一幅图中抽取特征颜色,这在你希望界面的颜色风格适应指定图片时非常有用,它还会提供与指定颜色相搭配的字体颜色。
Palette顾名思义调色板, Palette的作用是可以从图像中提取图片的颜色。我们可以把提取的颜色融入到App UI中,可以使UI风格更加美观融洽。有些时候Palette显得非常好用,比如我们可以提取到的突出的色值设置为Toolbar,标题,状态栏的颜色等,可以使我们的整个界面色调统一,效果非常好看。
开始使用
导包
你需要在工程下的build.gradle里添加依赖才可以使用Palette,像如下代码所示:
compile 'com.android.support:palette-v7:27.1.1'
生成Palette
生成一幅图像的Palette有一下几种方法:
/**
* 使用Glide获取网络图片并转换为Bitmap
*
* @param path 图片地址
*/
private void asBitmap(String path) {
Glide.with(HomeNewFragment.this).asBitmap()
.load(path)
.into(new SimpleTarget<Bitmap>() {
@Override
public void onResourceReady(@NonNull Bitmap bitmap, @Nullable Transition<? super Bitmap>
transition) {
paletteBitmap(bitmap);
}
});
}
/**
* 异步抽取图片色调方法
*
* @param bitmap Bitmap对象
*/
private void paletteBitmap(@NonNull Bitmap bitmap) {
Palette.from(bitmap)//创建Palette.Builder
.generate(new Palette.PaletteAsyncListener() {//异步抽取图片色调方法
@Override
public void onGenerated(@NonNull Palette palette) {
//获取到充满活力的这种色调
Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();
if (vibrantSwatch != null) {
Log.e("Zorro", "===vibrantSwatch=1=" + vibrantSwatch.getRgb());
}
//获取充满活力的黑
Palette.Swatch darkVibrantSwatch = palette.getDarkVibrantSwatch();
if (darkVibrantSwatch != null) {
Log.e("Zorro", "===darkVibrantSwatch=2=" + darkVibrantSwatch.getRgb());
}
//获取充满活力的亮
Palette.Swatch lightVibrantSwatch = palette.getLightVibrantSwatch();
if (lightVibrantSwatch != null) {
Log.e("Zorro", "===lightVibrantSwatch=3=" + lightVibrantSwatch.getRgb());
}
//获取柔和的色调
Palette.Swatch mutedSwatch = palette.getMutedSwatch();
if (mutedSwatch != null) {
Log.e("Zorro", "===mutedSwatch=4=" + mutedSwatch.getRgb());
mBinding.testBg.setBackgroundColor(mutedSwatch.getRgb());
}
//获取柔和的黑
Palette.Swatch darkMutedSwatch = palette.getDarkMutedSwatch();
if (darkMutedSwatch != null) {
Log.e("Zorro", "===darkMutedSwatch=5=" + darkMutedSwatch.getRgb());
}
//获取柔和的亮
Palette.Swatch lightMutedSwatch = palette.getLightMutedSwatch();
if (lightMutedSwatch != null) {
Log.e("Zorro", "===lightMutedSwatch=6=" + lightMutedSwatch.getRgb());
}
}
});
}
异步方法。有时候你不会在加载图片的线程(非主线程)中使用解析出的颜色,所以Palette提供了异步方法,他们与之前的函数的区别就是需要传入PaletteAsyncListener,提供在图片解析完成后的回调函数。
PaletteAsyncListener的实现是非常简单的(参考下面这几行代码),它只要重写onGenerated就好了。如此一来你就可以在任何需要的时候使用这两个函数创建Palette。
Palette.PaletteAsyncListener listener = new Palette.PaletteAsyncListener() {
public void onGenerated(Palette palette) {
// 使用Palette对象,获取解析出的颜色
}
}
提取出的颜色
Palette默认会解析出图像的16种特征颜色种类,但是这六种颜色是你最经常用到的:
- vibrant(鲜艳色)
- dark vibrant(鲜艳色中的暗色)
- light vibrant(鲜艳色中的亮色)
- muted(柔和色)
- dark muted(柔和色中的暗色)
- light muted(柔和色中的亮色)
获取提取的颜色
你获取Palette对象之后,可以通过以下这些内置getter函数直接获取这六个颜色。你需要传入默认颜色防止Palette无法解析到指定颜色种类,返回的类型是24位RGB颜色数值。
//同步抽取图片色调方式
Palette palette = Palette.from(bitmap).generate();
int vibrant = palette.getVibrantColor(0x000000);
int vibrantLight = palette.getLightVibrantColor(0x000000);
int vibrantDark = palette.getDarkVibrantColor(0x000000);
int muted = palette.getMutedColor(0x000000);
int mutedLight = palette.getLightMutedColor(0x000000);
int mutedDark = palette.getDarkMutedColor(0x000000);
//独特的一种
//返回从调色板中占主导地位的样本的颜色,为RGB包装INT。
int dominant = palette.getDominantColor(0x000000);
获取Swatch
你也可以选择先获取Swatch对象,然后再通过Swatch提供的方法获取颜色的相关信息:
Palette.Swatch s = palette.getVibrantSwatch(); //获取到充满活力的这种色调
Palette.Swatch s = palette.getDarkVibrantSwatch(); //获取充满活力的黑
Palette.Swatch s = palette.getLightVibrantSwatch(); //获取充满活力的亮
Palette.Swatch s = palette.getMutedSwatch(); //获取柔和的色调
Palette.Swatch s = palette.getDarkMutedSwatch(); //获取柔和的黑
Palette.Swatch s = palette.getLightMutedSwatch(); //获取柔和的亮
//独特的一种
//返回从调色板中占主导地位的样本。
Palette.Swatch s = palette.getDominantSwatch();
注意:getVibrantSwatch()可能会返回一个null值,所以在使用前检查一下是必须的。if (swatch != null) {}
Palette解析出的颜色都来自于对应的Swatch,在Swatch里面含有很多关于对应颜色的有用信息。你可以从Swatch中获取RGB颜色值、HSL颜色向量、对应颜色在图像中所占的比例、与对应颜色搭配的标题字体颜色和正文字体颜色(这两个颜色和对应颜色的对比值是处理好的,你不必再去操心)。
swatch对象对应的颜色方法:
getPopulation(): 像素的数量
getRgb(): RGB颜色
getHsl(): HSL颜色
getBodyTextColor(): 用于内容正文文本的颜色
getTitleTextColor(): 标题文本的颜色
Palette只为七种主颜色种类Swatch提供了getter,如果你要使用其他颜色种类的Swatch(一共有16种颜色种类),你需要手动获取它。调用getSwatchs()会返回一个列表,里面有所有获取到的Swatch。
List<Palette.Swatch> swatches = palette.getSwatches();
关于颜色种类的值size
Palette.from(bitmap).maximumColorCount(16);
生成Palette的时候,你可能注意到了可以设置Palette的size。size越大,花费的时间越长,而越小,可以选择的色彩也越小。最佳的选择是根据image的用途:
- 头像之类的,size最好在24-32之间;
- 风景大图之类的,size差不多在8-16;
- 默认是16.
最后推荐大家一个三方库
此库是结合Glide实现的抽取图片色调
地址:https://github.com/florent37/GlidePalette
Glide