【译文】利用Palette为android应用着色

利用Palette为android应用着色

原文地址：Coloring Android Apps with Palette

材料设计中定义特征的方式之一就是利用颜色在屏幕上强调内容.通过使用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.