<Android 基础（八）> Palette

介绍

Palette， 英文翻译，调色板，意思比较接近，Google给它的定位应该是颜色萃取器。

看下Source Code

Palette , A helper class to extract prominent colors from an image.

A number of colors with different profiles are extracted from the image:

支持的颜色类型

颜色	类型
Vibrant	有活力
Vibrant Dark	有活力 暗色
Vibrant Light	有活力 亮色
Muted	柔和
Muted Dark	柔和 暗色
Muted Light	柔和 亮色

使用方法：

// Synchronous 同步

Palette p = Palette.from(bitmap).generate();

// Asynchronous 异步

Palette.from(bitmap).generate(new PaletteAsyncListener() {

public void onGenerated(Palette p) {

// Use generated instance

}

});

---

Demo示例

布局设置

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="mraz.com.palettedemo.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimaryDark"></android.support.v7.widget.Toolbar>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
</LinearLayout>

RecyclerView中使用Item的布局设置：card_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="6dp">

    <com.makeramen.roundedimageview.RoundedImageView
        android:id="@+id/riv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:riv_border_color="@color/colorAccent"
        app:riv_border_width="1dp"
        app:riv_corner_radius="20dp" />

</LinearLayout>

ActionBar上使用的menu资源：main_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_add"
        android:icon="@drawable/ic_add_black_24dp"
        android:title="@string/add"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_del"
        android:icon="@drawable/ic_remove_black_24dp"
        android:title="@string/del"
        app:showAsAction="ifRoom" />
</menu>

代码使用

package mraz.com.palettedemo;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.graphics.Palette;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    private final int[] resIds = {R.drawable.p_1, R.drawable.p_2, R.drawable.p_3, R.drawable.p_4, R.drawable.p_5, R.drawable.p_6, R.drawable.p_7};//资源图片Id
    private final String[] titles = {"Vibrant", "DarkVibrant", "LightVibrant", "Muted", "DarkMuted", "LightMuted"};//6种萃取出来的颜色对应的英文翻译
    private Toolbar toolbar;//toolbar
    private ArrayList<Integer> colorList;//存储从Palette中萃取出来的6中颜色
    private int clickCount = 0;//点击数

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

        colorList = new ArrayList<>();
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);//设置ActionBar

        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rv_content);
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
        MyRecyclerAdapter myRecyclerAdapter = new MyRecyclerAdapter();//初始化RecyclerView

        recyclerView.setAdapter(myRecyclerAdapter);
        recyclerView.setLayoutManager(layoutManager);

        recyclerView.setOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                int offset = recyclerView.computeHorizontalScrollOffset();
                int width = recyclerView.getChildAt(0).getWidth();
                int current = offset / width;
                int secondoffset = offset % width;
                if (secondoffset >= width / 2) {
                    current = current + 1;
                }
                setActionBarColor(current);
                clickCount = 0;
                super.onScrolled(recyclerView, dx, dy);
            }
        });//设置recyclerView的滚动事件监听，以此来改变actionbar支持的颜色
        setActionBarColor(0);//首次使用初始化
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu, menu);//初始化菜单资源
        return super.onCreateOptionsMenu(menu);
    }

    private void setActionBarColor(int position) {
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), resIds[position]);
        Palette.PaletteAsyncListener paletteAsyncListener = new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                colorList.clear();
                colorList.add(palette.getVibrantColor(Color.WHITE));
                colorList.add(palette.getDarkVibrantColor(Color.WHITE));
                colorList.add(palette.getLightVibrantColor(Color.WHITE));
                colorList.add(palette.getMutedColor(Color.WHITE));
                colorList.add(palette.getDarkMutedColor(Color.WHITE));
                colorList.add(palette.getLightMutedColor(Color.WHITE));//萃取出六种颜色
                toolbar.setBackgroundColor(colorList.get(0));
                toolbar.setTitle(titles[0]);
            }
        };
        Palette.from(bitmap).generate(paletteAsyncListener);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_add: {
                clickCount++;
                int index = clickCount % (colorList.size());
                toolbar.setBackgroundColor(colorList.get(index)); //通过点击事件切换ActionBar的背景色和标题
                toolbar.setTitle(titles[index]);
                break;
            }
            case R.id.action_del: {
                if (clickCount > 0) clickCount--;
                int index = clickCount % (colorList.size());
                toolbar.setBackgroundColor(colorList.get(index));
                toolbar.setTitle(titles[index]);
                break;
            }
        }
        return super.onOptionsItemSelected(item);
    }
}

关于Palette的使用分为两种：

1.同步使用

Palette p = Palette.from(bitmap).generate();

2.异步使用

Palette.from(bitmap).generate(new PaletteAsyncListener() {

public void onGenerated(Palette p) {

// Use generated instance

}

});

Demo效果

操作	效果图
左右滑动ActionBar背景色改变
切换ActionBar背景色

---

API简介

• Palette相关API
  
  

• 直接获取颜色的方法
  
  
  
  通过创建的Palette直接获取其中的颜色，用来设置UI界面中的一些元素

• 获取Swatch的方法
  
  

• 这里获取的Swatch中的内容更丰富
  
  

  通过Swatch可以获取更丰富的颜色内容，如
  
  
  
  getTitleTextColor()
  
  getBodyTextColor()
  
  getRgb()
  
  getHsl()
  
  
  
  示例中只是使用了一部分的方法，具体的其他方法使用情况类似，根据Bitmap的颜色风格，设置对应的字体颜色，UI资源颜色，可以使界面看上去更加的和谐和美好。