今天我们讲的这个Palette非常好用,也非常好玩。 Palette的作用是从图像中提取突出的颜色,这样我们可以根据提取到的色值把它赋给Toolbar,标题,状态栏等,可以使我们的整个界面色调统一,效果非常好看。
Palette介绍
Palette顾名思义调色板, Palette的作用是可以从图像中提取图片的颜色。我们可以把提取的颜色融入到App UI中,可以使UI风格更加美观融洽。
- Palette可以提取的颜色如下:
- Vibrant (有活力的)
- Vibrant dark(有活力的 暗色)
- Vibrant light(有活力的 亮色)
- Muted (柔和的)
- Muted dark(柔和的 暗色)
- Muted light(柔和的 亮色)
通过Palette对象获取到六个样本swatch
Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();//1.活力颜色
Palette.Swatch lightVibrantSwatch = palette.getLightVibrantSwatch();//2.亮的活力颜色
Palette.Swatch darkVibrantSwatch = palette.getDarkVibrantSwatch();//3.暗的活力颜色
Palette.Swatch mutedSwatch = palette.getMutedSwatch();//4.柔色
Palette.Swatch lightMutedSwatch = palette.getLightMutedSwatch();//5.亮的柔色
Palette.Swatch darkMutedSwatch = palette.getDarkMutedSwatch();//6.暗的柔色
swatch对象对应的颜色方法
- getPopulation(): 像素的数量
- getRgb(): RGB颜色
- getHsl(): HSL颜色
- getBodyTextColor(): 用于内容文本的颜色
- getTitleTextColor(): 标题文本的颜色
Palette实例
Palette的一些方法:
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
//暗、柔和的颜色
int darkMutedColor = palette.getDarkMutedColor(Color.BLUE);//如果分析不出来,则返回默认颜色
//暗、柔和
int lightMutedColor = palette.getLightMutedColor(Color.GRAY);
//暗、鲜艳
int darkVibrantColor = palette.getDarkVibrantColor(Color.BLUE);
//亮、鲜艳
int lightVibrantColor = palette.getLightVibrantColor(Color.BLUE);
//柔和
int mutedColor = palette.getMutedColor(Color.BLUE);
//柔和
int vibrantColor = palette.getVibrantColor(Color.BLUE);
//获取某种特性颜色的样品
Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();//1.活力颜色
Palette.Swatch lightVibrantSwatch = palette.getLightVibrantSwatch();//2.亮的活力颜色
Palette.Swatch darkVibrantSwatch = palette.getDarkVibrantSwatch();//3.暗的活力颜色
Palette.Swatch mutedSwatch = palette.getMutedSwatch();//4.柔色
Palette.Swatch lightMutedSwatch = palette.getLightMutedSwatch();//5.亮的柔色
Palette.Swatch darkMutedSwatch = palette.getDarkMutedSwatch();//6.暗的柔色
//谷歌推荐的:图片的整体的颜色rgb的混合值---主色调
int rgb = vibrantSwatch.getRgb();
//谷歌推荐:图片中间的文字颜色
int bodyTextColor = vibrantSwatch.getBodyTextColor();
//谷歌推荐:作为标题的颜色(有一定的和图片的对比度的颜色值)
int titleTextColor = vibrantSwatch.getTitleTextColor();
//颜色向量
float[] hsl = vibrantSwatch.getHsl();
//分析该颜色在图片中所占的像素多少值
int population = vibrantSwatch.getPopulation();
}
});
private int getTranslucentColor(float percent, int rgb) {
// 10101011110001111
int blue = Color.blue(rgb);
int green = Color.green(rgb);
int red = Color.red(rgb);
int alpha = Color.alpha(rgb);
//上面四个的原理也就是下面的方法
// int blue = rgb & 0xff;
// int green = rgb>>8 & 0xff;
// int red = rgb>>16 & 0xff;
// int alpha = rgb>>>24;
alpha = Math.round(alpha*percent);
return Color.argb(alpha, red, green, blue);
}
Palette经常用于和ViewPager,Fragment搭配使用,当我们的Pager切换时伴随着Fragment的变化,而Fragment里的内容一般是不同的,所以每个Fragment里的一般视觉效果也是不同的,所以我们可以用Palette来去提取Fragment中的主色调,把这个主色调用于整体的UI风格。
先看效果图,如下:
第一步:添加依赖
compile 'com.android.support:palette-v7:23.4.0'
第二步:创建Palette对象,并获取图片的颜色值
// 用来提取颜色的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获取到图片中的颜色设置到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()));
}
}
});
就是这么简单,这里略过了对TabLayout的讲解,因为这次主讲的是Palette嘛,没记错的话,以前讲解过TabLayout的使用,不会的同学可以去看源码或者是查找历史消息去看看文章。