利用Palette为android应用着色
材料设计中定义特征的方式之一就是利用颜色在屏幕上强调内容.通过使用Palette类,开发者可以从一个bitmap中提取突出的颜色,然后在他们的应用中自定义用户界面元素的颜色.
在这篇文章中,你将会学到如何从一个bitmap中创建一个Palette对象. 在Palette对象当中包含有一系列的Swatch(样本)对象,Swatch对象允许您使用特定的颜色配置文件和图像的可见颜色列表.
1.创建一个Palette
首先,你需要在你的project中导入palette support library,你可以通过下面的方式在你的build.gradle文件中导入它.由于这是一个v7 support library,Palette相关的类对android api 7以上的版本有效.
compile 'com.android.support:palette-v7:+'
在你的project中运行 gradle sync 之后,你就可以从一个 Bitmap 中生成一个Palette对象. 这可以通过使用 Palette.Builder 来完成(要么使用同步的没有任何参数generate() 方法,要么使用异步的 generate(Palette.PaletteAsyncListener listener) 方法). 因为创建一个Palette 需要耗费一定的时间,同步方法一般建议仅仅在一个后台线程中调用. 除了以上两种生成方式,Palette.Builder 类根据一些具体的需求也有一些其他使用的方式:
- maximunColorCount(int numOfSwatches)允许你改变从bitmap中生成的Swatch的数量,默认的数量为16. 生成越多的Swatch对象需要耗费越多的时间去生成Palette对象.
- resizeBitmapSize(int maxDimension)重新调整bitmap的大小,因此它最大的尺寸只能是此方法定义的最大值. bitmap越大,生成Palette对象的时间就越长. 同样的,更小的bitmap将会处理得更快些,但是这样的话你可能将会失去颜色的精度.
以下的程序片段展示了如何从一个本地的资源中创建一个bitmap以及异步地创建一个Palette对象.
Bitmap bitmap = BitmapFactory.decodeResource( getResources(), R.drawable.union_station );
Palette.from( bitmap ).generate( new Palette.PaletteAsyncListener() {
@Override
public void onGenerated( Palette palette ) {
//work with the palette here
}
});
一旦你拥有了一个Palette对象,你就可以处理相关的Swatch对象了.
Swatches
Swatch对象代表了从一个图像的palette中生成的颜色. 每一个Swatch对象都包含有:
- 颜色的一个RGB(Red,Green,Blue)和一个HSL(Hue,Saturation,Lightness)值.
- 一个反映Swatch对象所代表的像素数量的population值.
- 一个可以被title text使用的颜色值(显示在样本的主要颜色).
- 一个可以被body text使用的颜色值(显示在样本的主要颜色).
Swatche Profile
每一个Palette都有6个预定义的颜色配置文件:
- vibrant
- light vibrant
- dark vibrant
- muted
- light muted
- dark muted
以上的每一种配置文件都是很有用的,这取决与你的应用设计,vibrant 和 dark vibrant是最常使用的两种. 一个值得注意的事情是这些配置文件可能为null,因此你应该处理这种情况. 在这个 sample project中,在异步的palette.Builder方法onGenerated(Palette palette)中,你可以看到如何提取每一个Swatch的配置文件.
- setViewSwatch( mVibrantTextView, palette.getVibrantSwatch() );
- setViewSwatch( mLightVibrantTextView, palette.getLightVibrantSwatch() );
- setViewSwatch( mDarkVibrantTextView, palette.getDarkVibrantSwatch() );
- setViewSwatch( mMutedTextView, palette.getMutedSwatch() );
- setViewSwatch( mLightMutedTextView, palette.getLightMutedSwatch() );
- setViewSwatch( mDarkMutedTextView, palette.getDarkMutedSwatch() );
setViewSwatch(TextView view,Palette.Swatch swatch)是一个接收Swatch和TextView的方法,根据Swatch中的值设置了TextView的背景和文字颜色.你将会注意到我们首先检查Swatch是否为null,如果是,我们将简单的将view隐藏起来.
public void setViewSwatch( TextView view, Palette.Swatch swatch ) {
if( swatch != null ) {
view.setTextColor( swatch.getTitleTextColor() );
view.setBackgroundColor( swatch.getRgb() );
view.setVisibility( View.VISIBLE );
} else {
view.setVisibility( View.GONE );
}
}
Additional Swatches
除了Swatch对象的标准配置之外,每一个Palette一系列从bitmap中生成的普通的Swatch对象.这些可以通过Palette的getSwatches()方法被获取到一个List集合中.
在这个sample project中,和bitmap像素数量所代表的Swatch一样,此List集合被放置在ArrayAdapter< Palette.Swatch >中,然后展示Swatch对象中的primary color和body text color. 需要注意的一件事情是这个List集合并没有任何特定的顺序. 在sample project中,我根据他们的population值整理了这些item.
for( Palette.Swatch swatch : palette.getSwatches() ) {
mAdapter.add( swatch );
}
mAdapter.sortSwatches();
mAdapter.notifyDataSetChanged();
在这个代码片段中,mAdapter是用下面的方法生成的Swatch对象的适配器:
@Override
public View getView( int position, View convertView, ViewGroup parent ) {
ViewHolder holder;
if( convertView == null ) {
holder = new ViewHolder();
convertView = LayoutInflater.from( getContext() ).inflate( R.layout.color_item, parent, false );
holder.view = (TextView) convertView.findViewById( R.id.view );
convertView.setTag( holder );
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.view.setBackgroundColor( getItem( position ).getRgb() );
holder.view.setTextColor( getItem( position ).getBodyTextColor() );
holder.view.setText( "Population: " + getItem( position ).getPopulation() );
return convertView;
}
public void sortSwatches() {
sort(new Comparator<Palette.Swatch>() {
@Override
public int compare( Palette.Swatch lhs, Palette.Swatch rhs ) {
return rhs.getPopulation() - lhs.getPopulation();
}
});
}
public class ViewHolder {
TextView view;
}
Conclusion
在这篇文章中,你已经学习到有关Palette support library的内容,以及如何从一个bitmap中提取Swatches中的颜色. 这将会允许你去自定义用户界面的元素,比如backgrounds和text,这样他们就会在你的应用程序中赞美你的图片. 当与Color 和 ColorUtil 类(在v4 support library中)结合在一起的时候,你将会有更多的选择去着色你的app.