Material Design全新设计系列之Pallette

RecycleView+Pallette


版权声明：本文为博主原创文章，转载请注明出处

Palette介绍

Palette用法汇总

效果图以及核心代码展示

Palette介绍

A Color Pallette that includes all the colors respects Android

Material Design. Thanks “Marcel Ulbrich” for creating datas.

Palette英文名——调色板、颜料，Palette从图像中提取突出的颜色，赋给App UI控件如ActionBar、Toolbar、或者其他，清新简约的App很受人们追捧。

Palette用法汇总

从图像中提取突出的颜色如下：

Vibrant （有活力的）

Vibrant dark（有活力的 暗色）

Vibrant light（有活力的 亮色）

Muted （柔和的）

Muted dark（柔和的 暗色）

Muted light（柔和的 亮色）

Palette有两种初始化方法，同步和异步。各自都有两个方法：

两种同步方法：

// 最好在加载图片线程中使用

// 默认调色板大小(16).

private static final int DEFAULT_CALCULATE_NUMBER_COLORS = 16;

Palette p = Palette.generate(bitmap);

//设置调色板大小numcolor

Palette p = Palette.generate(bitmap, numcolor);

两种异步方法：

// 内部使用AsyncTask
// 但是可能不是最优的方法(因为有线程的切换)
// 默认调色板大小(16).
Palette.generateAsync(bitmap,
new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
// palette进行对UI控件的赋值
}
});
// 设置调色板大小
Palette.generateAsync(bitmap,
numcolor, new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
// palette为生成的调色板
}
});

通过Palette对象获取到六个样本

swatPalette.Swatch s = p.getVibrantSwatch(); //获取到充满活力的这种色调

Palette.Swatch s = p.getDarkVibrantSwatch(); //获取充满活力的黑

Palette.Swatch s = p.getLightVibrantSwatch(); //获取充满活力的亮

Palette.Swatch s = p.getMutedSwatch(); //获取柔和的色调

Palette.Swatch s = p.getDarkMutedSwatch(); //获取柔和的黑

Palette.Swatch s = p.getLightMutedSwatch(); //获取柔和的亮

对象对应的颜色方法：

getPopulation(): 像素的数量

getHsl(): HSL颜色

getBodyTextColor(): 用于内容文本的颜色

getTitleTextColor(): 标题文本的颜色

-

效果图以及核心代码展示

一.AS开发——首先需要添加Palette的依赖：

在build.gralde的dependencies添加appcomat v7和palette-v7依赖，RecycleView展示瀑布流数据，所以相应的添加依赖

dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
compile 'com.android.support:design:23.1.0'
compile 'com.android.support:appcompat-v7:21.0.+'
compile 'com.android.support:palette-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}

注意：如果是Eclipse开发，需要导入相应的jar包。


核心代码如下：

/**
* 将数据与item视图进行绑定
*
* @param holder
* @param position
*/
@Override
public void onBindViewHolder(final MyRecycleViewAdapter.ViewHolder holder, int position) {
//文本赋值
holder.tv.setText("我是文本" + position);
ImageLoader.getInstance().displayImage(s[position], holder.imageView, new ImageLoadingListener() {
//加载开始
@Override
public void onLoadingStarted(String s, View view) {}

//加载失败
@Override
public void onLoadingFailed(String s, View view, FailReason failReason) {}

//加载完成
@Override
public void onLoadingComplete(String s, View view, Bitmap bitmap) {

holder.imageView.setImageBitmap(bitmap);
if (bitmap != null) {
Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
//以获取明亮的色调为例
Palette.Swatch vibrant =
palette.getVibrantSwatch();
if (vibrant != null) {
// If we have a vibrant color
// update the title TextView
holder.tv.setBackgroundColor(
vibrant.getRgb());
holder.tv.setTextColor(
vibrant.getTitleTextColor());
}

}
});

4000
}
}

@Override
public void onLoadingCancelled(String s, View view) {}
});

}

源码github :

https://github.com/CreateFutureW/PaletteRecycleView