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>

效果如下：