（三十四）Palette 使用和 MaterialDesign 整合使用

版权声明：本文为博主原创文章，未经博主允许不得转载。

本文纯个人学习笔记，由于水平有限，难免有所出错，有发现的可以交流一下。

一、概述

Palette 是一个类似调色板的工具类，根据传入的 Bitmap，提取出主体颜色，使得图片和颜色更加搭配，界面更协调。

Palette 可以从一张图片中提取颜色，我们可以把提取的颜色融入到 App UI 中，可以使 UI 风格更加美观融洽。比如，我们可以从图片中提取颜色设置给 ActionBar 做背景颜色，这样 ActionBar 的颜色就会随着显示图片的变化而变化。

二、Demo

这个比较简单，直接上 demo 看使用和效果。

MainActivity：

public class MainActivity extends AppCompatActivity {
    TextView t1;
    TextView t2;
    TextView t3;
    TextView t4;
    TextView t5;
    TextView t6;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        t1 = (TextView) findViewById(R.id.t1);
        t2 = (TextView) findViewById(R.id.t2);
        t3 = (TextView) findViewById(R.id.t3);
        t4 = (TextView) findViewById(R.id.t4);
        t5 = (TextView) findViewById(R.id.t5);
        t6 = (TextView) findViewById(R.id.t6);

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.f);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            //发生主线程    Palette调色板   总共六种颜色
            @Override
            public void onGenerated(Palette palette) {
                //柔和而暗的颜色
                int darkMutedColor = palette.getDarkMutedColor(Color.BLUE);
                //鲜艳和暗的颜色
                int darkVibrantColor = palette.getDarkVibrantColor(Color.BLUE);
                //亮和鲜艳的颜色
                int lightVibrantColor = palette.getLightVibrantColor(Color.BLUE);
                //亮和柔和的颜色
                int lightMutedColor = palette.getLightMutedColor(Color.BLUE);
                //柔和颜色
                int mutedColor = palette.getMutedColor(Color.BLUE);
                //鲜艳颜色
                int vibrantColor = palette.getVibrantColor(Color.BLUE);

                t1.setBackgroundColor(darkMutedColor);
                t2.setBackgroundColor(darkVibrantColor);
                t3.setBackgroundColor(lightVibrantColor);
                t4.setBackgroundColor(lightMutedColor);
                t5.setBackgroundColor(mutedColor);
                t6.setBackgroundColor(vibrantColor);
            }
        });
    }
}

获取 Palette 的六种颜色，分别给不同 TextView 设置背景颜色。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
        <TextView
            android:id="@+id/t1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="darkMutedColor"
            android:minHeight="40dp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            android:layout_alignParentTop="true"
            />
        <TextView
            android:id="@+id/t2"
            android:layout_below="@+id/t1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="darkVibrantColor"
            android:minHeight="40dp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            />
        <TextView
            android:id="@+id/t3"
            android:layout_below="@+id/t2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="lightVibrantColor"
            android:minHeight="40dp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            />
        <TextView
            android:layout_below="@+id/t3"
            android:id="@+id/t4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="lightMutedColor"
            android:minHeight="40dp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            />
        <TextView
            android:layout_below="@+id/t4"
            android:id="@+id/t5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="mutedColor"
            android:minHeight="40dp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            />
        <TextView
            android:layout_below="@+id/t5"
            android:id="@+id/t6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="vibrantColor"
            android:minHeight="40dp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            />
    </RelativeLayout>

</ScrollView>

效果：

原图 f（即提取颜色的来源）：

三、详解

1.构造方法

我们需要通过一个 Bitmap 对象来生成一个对应的 Palette 对象。 Palette 提供了四个静态方法用来生成对象。

  Palette generate(Bitmap bitmap)
  Palette generate(Bitmap bitmap, int numColors)
  generateAsync(Bitmap bitmap, PaletteAsyncListener listener)
  generateAsync(Bitmap bitmap, int numColors, final PaletteAsyncListener listener)

不难看出，生成方法分为 generate (同步)和 generateAsync (异步)两种，如果图片过大使用 generate 方法，可能会阻塞主线程，我们更倾向于使用 generateAsync 的方法，其实内部就是创建了一个AsyncTask。generateAsync 方法需要一个 PaletteAsyncListener 对象用于监听生成完毕的回调。除了必须的 Bitmap 参数外，还可以传入一个 numColors 参数指定颜色数，默认是 16。

2.获取颜色

得到Palette对象后，就可以拿到提取到的颜色值

  Palette.getVibrantSwatch()
  Palette.getDarkVibrantSwatch()
  Palette.getLightVibrantSwatch()
  Palette.getMutedSwatch()
  Palette.getDarkMutedSwatch()
  Palette.getLightMutedSwatch()

3.使用颜色

上面get方法中返回的是一个 Swatch 样本对象，这个样本对象是 Palette 的一个内部类，它提供了一些获取最终颜色的方法。

  getPopulation(): 样本中的像素数量
  getRgb(): 颜色的RBG值
  getHsl(): 颜色的HSL值
  getBodyTextColor(): 主体文字的颜色值
  getTitleTextColor(): 标题文字的颜色值

通过 getRgb() 可以得到最终的颜色值并应用到 UI 中。getBodyTextColor() 和 getTitleTextColor() 可以得到此颜色下文字适合的颜色，这样很方便我们设置文字的颜色，使文字看起来更加舒服。

四、MaterialDesign

到这边 MaterialDesign 的几个控件都学完了，把前面内容整合起来就可以开发一下比较炫酷的界面了。

效果：

代码链接：
代码链接：http://download.csdn.net/download/qq_18983205/10132915