Material Design设计之Palette调色板

Material Design设计之Palette调色板

　　Palette的作用是从图像中提取突出的颜色，这样我们可以根据提取到的色值把它赋给Toolbar，标题，状态栏等，可以使我们的整个界面色调统一，效果非常好看。

Palette介绍

可以提取的颜色有如下几种：

Vibrant （有活力的）

Vibrant dark（有活力的 暗色）

Vibrant light（有活力的 亮色）

Muted （柔和的）

Muted dark（柔和的 暗色）

Muted light（柔和的 亮色）

Paletee.Swatch介绍

Palette.Swatch s = p.getVibrantSwatch();       //获取到充满活力的这种色调
Palette.Swatch s = p.getDarkVibrantSwatch();    //获取充满活力的黑
Palette.Swatch s = p.getLightVibrantSwatch();   //获取充满活力的亮
Palette.Swatch s = p.getMutedSwatch();           //获取柔和的色调
Palette.Swatch s = p.getDarkMutedSwatch();      //获取柔和的黑
Palette.Swatch s = p.getLightMutedSwatch();    //获取柔和的亮

swatch对应的颜色方法有如下几种：

getPopulation(): 像素的数量

getRgb(): RGB颜色

getTitleTextColor(): 标题文本的颜色

getBodyTextColor(): 用于内容文本的颜色

getHsl(): HSL颜色

Palette使用实例：

1、添加依赖

compile 'com.android.support:palette-v7:24.2.1'

2、得到Bitmap，分析取得色彩信息，Demo完整代码如下：

package learing.md.com.palatedemo;

import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.graphics.Palette;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private ImageView iv;
    private TextView tv_title;
    private ImageView iv2;
    private TextView tv_title2;

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

        iv = (ImageView) findViewById(R.id.iv);
        iv2 = (ImageView) findViewById(R.id.iv2);

        tv_title = (TextView) findViewById(R.id.tv_title);
        tv_title2 = (TextView) findViewById(R.id.tv_title2);
        final TextView tv1 = (TextView) findViewById(R.id.tv1);
        final TextView tv2 = (TextView) findViewById(R.id.tv2);
        final TextView tv3 = (TextView) findViewById(R.id.tv3);
        final TextView tv4 = (TextView) findViewById(R.id.tv4);
        final TextView tv5 = (TextView) findViewById(R.id.tv5);
        final TextView tv6 = (TextView) findViewById(R.id.tv6);

        BitmapDrawable drawable = (BitmapDrawable) iv.getDrawable();
        Bitmap bitmap = drawable.getBitmap();

        //得到bitmap里面的的一些色彩信息---通过Palette类分析出来的
        Bitmap bitmap2 = ((BitmapDrawable) iv2.getDrawable()).getBitmap();
        Palette.from(bitmap2).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                Palette.Swatch darkSwatch = palette.getDarkMutedSwatch();
                //谷歌推荐：作为标题的颜色（有一定的和图片的对比度的颜色值）
                int textColor = darkSwatch.getTitleTextColor();
                //谷歌推荐的：图片的整体的颜色rgb的混合值---主色调
                int rgb = darkSwatch.getRgb();
                tv_title2.setBackgroundColor(getTranslucentColor(0.5f, rgb));
                tv_title2.setTextColor(textColor);
            }
        });

        //异步任务，可能分析的图片会比较大或者颜色比较复杂，会耗时比较久，防止卡死主线程
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                //暗、柔和的颜色
                int darkMutedColor = palette.getDarkMutedColor(Color.BLUE);//分析不出来使用默认颜色
                //亮、柔和
                int lightMutedColor = palette.getLightMutedColor(Color.BLUE);

                //暗、鲜艳
                int darkVibrantColor = palette.getDarkVibrantColor(Color.BLUE);
                //亮、鲜艳
                int lightVibrantColor = palette.getLightVibrantColor(Color.BLUE);

                //柔和
                int mutedColor = palette.getMutedColor(Color.BLUE);
                //鲜艳
                int vibrantColor = palette.getVibrantColor(Color.BLUE);
                //获取某种特性颜色的样品
//				Swatch lightVibrantSwatch = palette.getLightVibrantSwatch();
                Palette.Swatch lightVibrantSwatch = palette.getVibrantSwatch();
                //谷歌推荐的：图片的整体的颜色rgb的混合值---主色调
                int rgb = lightVibrantSwatch.getRgb();
                //谷歌推荐：图片中间的文字颜色
                int bodyTextColor = lightVibrantSwatch.getBodyTextColor();
                //谷歌推荐：作为标题的颜色（有一定的和图片的对比度的颜色值）
                int titleTextColor = lightVibrantSwatch.getTitleTextColor();
                //颜色向量
                float[] hsl = lightVibrantSwatch.getHsl();
                //分析该颜色在图片中所占的像素多少值
                int population = lightVibrantSwatch.getPopulation();

                tv_title.setBackgroundColor(getTranslucentColor(0.5f, rgb));
                tv_title.setTextColor(titleTextColor);


                tv1.setBackgroundColor(darkMutedColor);
                tv1.setText("darkMutedColor");
                tv2.setBackgroundColor(lightMutedColor);
                tv2.setText("lightMutedColor");
                tv3.setBackgroundColor(darkVibrantColor);
                tv3.setText("darkVibrantColor");
                tv4.setBackgroundColor(lightVibrantColor);
                tv4.setText("lightVibrantColor");
                tv5.setBackgroundColor(mutedColor);
                tv5.setText("mutedColor");
                tv6.setBackgroundColor(vibrantColor);
                tv6.setText("vibrantColor");
            }
        });


    }

    /**
     * 1101 0111 1000 1011
     * 1111 1111
     * 1000 1011
     */
    protected int getTranslucentColor(float percent, int rgb) {
        // 10101011110001111
        int blue = Color.blue(rgb);
        int green = Color.green(rgb);
        int red = Color.red(rgb);
        int alpha = Color.alpha(rgb);
//		int blue = rgb & 0xff;
//		int green = rgb>>8 & 0xff;
//		int red = rgb>>16 & 0xff;
//		int alpha = rgb>>>24;

        alpha = Math.round(alpha * percent);
        Toast.makeText(this, "alpha:" + alpha + ",red:" + red + ",green:" + green, Toast.LENGTH_LONG).show();
        return Color.argb(alpha, red, green, blue);
    }
}

activity_main.xml代码如下：(其实没必要贴出了)

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <RelativeLayout
            android:layout_width="200dp"
            android:layout_height="230dp">

            <ImageView
                android:id="@+id/iv"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/aaa" />

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="fill_parent"
                android:layout_height="50dp"
                android:background="#5fff"
                android:gravity="center"
                android:text="照相机联客价" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="200dp"
            android:layout_height="230dp">

            <ImageView
                android:id="@+id/iv2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/img" />

            <TextView
                android:id="@+id/tv_title2"
                android:layout_width="fill_parent"
                android:layout_height="50dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:background="#5fff"
                android:gravity="center"
                android:text="照相机联客价" />
        </RelativeLayout>

        <TextView
            android:id="@+id/tv1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="text" />

        <TextView
            android:id="@+id/tv2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="text" />

        <TextView
            android:id="@+id/tv3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="text" />

        <TextView
            android:id="@+id/tv4"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="text" />

        <TextView
            android:id="@+id/tv5"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="text" />

        <TextView
            android:id="@+id/tv6"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="text" />
    </LinearLayout>
</ScrollView>

效果如下：