Android Material Design 之 Palett

简介

Palette 即调色板。从图片中提取颜色，然后赋给相应的视图，使界面看起来更加协调好看。

简单使用

首先添加相应的依赖

implementation 'com.android.support:palette-v7:26.0.0'

Android Studio 3.0 开始新建项目默认使用 implementation 了，当然 compile 也能用。

我们给 Layout 文件添加一个 ImageView 和 6 个 View。ImageView 是用来放图片来提取颜色的，提取的颜色分别放到准备的 6 个 View 中。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@color/colorPrimary"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.teletian.palette.MainActivity">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/naruto" />

    <View
        android:id="@+id/color1"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="5dp" />

    <View
        android:id="@+id/color2"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="5dp" />

    <View
        android:id="@+id/color3"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="5dp" />

    <View
        android:id="@+id/color4"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="5dp" />

    <View
        android:id="@+id/color5"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="5dp" />

    <View
        android:id="@+id/color6"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="5dp" />

</LinearLayout>

接下来就是在 Activity 中提取，先上代码如下：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView image = findViewById(R.id.image);
        Bitmap bitmap = ((BitmapDrawable)image.getDrawable()).getBitmap();

        Palette.Builder builder = Palette.from(bitmap);
        builder.generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {

                //充满活力的样本
                Palette.Swatch swath1 = palette.getVibrantSwatch();
                if (swath1 != null) {
                    findViewById(R.id.color1).setBackgroundColor(swath1.getRgb());
                }

                //充满活力的暗色样本
                Palette.Swatch swath2 = palette.getDarkVibrantSwatch();
                if (swath2 != null) {
                    findViewById(R.id.color2).setBackgroundColor(swath2.getRgb());
                }

                //充满活力的亮色样本
                Palette.Swatch swath3 = palette.getLightVibrantSwatch();
                if (swath3 != null) {
                    findViewById(R.id.color3).setBackgroundColor(swath3.getRgb());
                }

                //柔和的样本
                Palette.Swatch swath4 = palette.getMutedSwatch();
                if (swath4 != null) {
                    findViewById(R.id.color4).setBackgroundColor(swath4.getRgb());
                }

                //柔和的暗色样本
                Palette.Swatch swath5 = palette.getDarkMutedSwatch();
                if (swath5 != null) {
                    findViewById(R.id.color5).setBackgroundColor(swath5.getRgb());
                }

                //柔和的亮色样本
                Palette.Swatch swath6 = palette.getLightMutedSwatch();
                if (swath6 != null) {
                    findViewById(R.id.color6).setBackgroundColor(swath6.getRgb());
                }
            }
        });
    }
}

Palette 对象的生成有两种方法，例子中的是异步生成，还可以同步生成，代码如下：

Palette.Builder bulider = Palette.from(bitmap);
Palette palette = bulider.generate();

推荐使用异步，尤其是图片大小比较大的时候。

提取颜色提供了 6 中不同的颜色，详见代码注释。

除了提取 rgb 颜色，还可以提取其他信息：
getTitleTextColor()：返回适合标题的颜色
getBodyTextColor()：返回适合文本内容的颜色
getTitleTextColor()：返回float[]，可以进行修改，后使用ColorUtils工具类进行转换
getPopulation()：返回像素的总数

运行效果如下：

可以发现下面 6 中颜色只有 5 中颜色显示出来了，其中 "充满活力的暗色样本" 没有显示。也就是说 Palette 获取的样本是可能没有值的。但是 "充满活力的样本" 和其他不一样，始终有值。

使用场景

Palette 到底实际应用中有什么用呢，下面通过一个例子来展示一下其中一种使用场景。

先来看下效果：

ViewPager 滑动的时候，根据图片的颜色，改变 StatusBar，Toolbar，TabLayout，NavigationBar 的颜色。

Palette 的基本使用既然已经在上文中讲解过了，这边就不再啰嗦了。
例子中使用到了 Toolbar 和 TabLayout，如果不熟悉的话，可以参照我之前写的文章↓
Android Material Design 之 Toolbar
Android Material Design 之 TabLayout

所以直接看源码吧！

源码

基本使用
https://github.com/teletian/Android/tree/master/MaterialDesignSamples/Palette

ViewPager 滑动改变颜色
https://github.com/teletian/Android/tree/master/MaterialDesignSamples/PaletteWithViewPager