cardview和Palette，ActionBar颜色随图改变

CardView是一个控件，Palette是取色工具（工具类），本文会对他们进行比较细致的介绍，相信机制的各位看完一定轻而易举地实现ActionBar随图改变的特效。

首先看一下效果图：

Gradle(Module:app)配置

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:24.0.0'
compile 'com.android.support:cardview-v7:24.0.+'
compile 'com.android.support:palette-v7:24.0.+'
}

Cardview

cardview可以理解成带圆角，内边距，阴影的FrameLayout，它本身也是继承自FrameLayout，使用的时候内部再嵌套一个自己喜欢的布局文件，就可以随意使用了，记得在Xml布局开头加这一段话：

xmlns:app="http://schemas.android.com/apk/res-auto"

cardview的可选属性：

• app:cardBackgroundColor这是设置背景颜色
• app:cardCornerRadius这是设置圆角大小
• app:cardElevation这是设置z轴的阴影
• app:cardMaxElevation这是设置z轴的最大高度值
• app:cardUseCompatPadding是否使用CompatPadding
• app:cardPreventCornerOverlap是否使用
• app:contentPadding 设置内容的padding
• app:contentPaddingLeft 设置内容的左padding
• app:contentPaddingTop 设置内容的上padding
• app:contentPaddingRight 设置内容的右padding
• app:contentPaddingBottom 设置内容的底padding

card_view:cardUseCompatPadding 设置内边距，V21+的版本和之前的版本仍旧具有一样的计算方式
card_view:cardPreventConrerOverlap 在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠

Palette

相当于一个图片的颜料吸管，使用的时候传入一个Bitmap 对象，至于取什么颜色就让代码处理了，也有可能会取不到颜色，使用的时候注意判断即可。

创建Palette实例

1. 第一种方式：

public void initPalette2(int imgId, final View view){
Bitmap bitmap = BitmapFactory.decodeResource( getResources(), imgId);
Palette.from( bitmap ).generate( new Palette.PaletteAsyncListener() {
@Override
public void onGenerated( Palette palette ) {
//在这里调用Palette对象
//view.setBackgroundColor(.......);
}
});
}

2. 第二种方式：

private Palette mPalette;
public void initPalette(int imgId) {
//对象实例化
Bitmap bm = BitmapFactory.decodeResource(getResources(), imgId);
mPalette = Palette.from(bm).generate();
}

3. 最实用的方式

获取Drawable对象，
如果是ImageView就这样：img.getDrawable()；
如果是Button就这样：btn.getBackground()，
然后把获取的Drawable传入下面这个方法，关于Drawable转Bitmap文章后面还会介绍：

private Palette mPalette;
public void initPalette(Drawable drawable) {
//对象实例化
mPalette = Palette.from(((BitmapDrawable) drawable).getBitmap()).generate();
}

Palette这个类中提取颜色的方式：

需要注意的是getVibrantSwatch()返回一个swatch对象，也可能会返回一个null值，所以检查一下是必须的，一共6种方式：

• Vibrant （有活力）Palette.getVibrantSwatch()
• Vibrant dark（有活力 暗色）Palette.getDarkVibrantSwatch()
• Vibrant light（有活力 亮色）Palette.getLightVibrantSwatch()
• Muted （柔和）Palette.getMutedSwatch()
• Muted dark（柔和 暗色）Palette.getDarkMutedSwatch()
• Muted light（柔和 亮色）Palette.getLightMutedSwatch()

更加实用的方法：
上面的6种方法都有一个与之对应的GetColor的方法，参数是颜色的默认值（int类型），取不到颜色的时候就用默认值
Palette.getDarkMutedColor(Color.GREEN)

swatch对象有以下方法：

• getPopulation(): 像素总数 the amount of pixels which this swatch
  represents.
• getRgb(): the RGB value of this color.
• getHsl(): 色相(H)、饱和度(S)、明度(L)，the HSL value of this color.
• getBodyTextColor(): the RGB value of a text color which can be
  displayed on top of this color.
• getTitleTextColor(): the RGB value of a text color which can be
  displayed on top of this color.

TextView 有个背景图片，要想让字体颜色能够和背景图片匹配，则使用getBodyTextColor()比较合适，getTitleTextColor()其实应该和getBodyTextColor()差不多。

获取全部swatch

你还可以使用如下方法一次性获得所有的swatch：

List<Palette.Swatch> swatches = palette.getSwatches();


在上面的代码中，你可能注意到了可以设置palette的size。size越大，花费的时间越长，而越小，可以选择的色彩也越小。最佳的选择是根据image的用途：头像之类的，size最好在24-32之间；风景大图之类的 size差不多在8-16；默认是16.

• maximunColorCount(int
  numOfSwatches)允许你改变从bitmap中生成的Swatch的数量,默认的数量为16.
  生成越多的Swatch对象需要耗费越多的时间去生成Palette对象.
• resizeBitmapSize(int maxDimension)重新调整bitmap的大小，因此它最大的尺寸只能是此方法定义的最大值.
  bitmap越大，生成Palette对象的时间就越长. 同样的，更小的bitmap将会处理得更快些，但是这样的话你可能将会失去颜色的精度.

Drawable换Bitmap

简单的强转了一下，将Drawable转换为Bitmap

public Bitmap drawableToBitamp(Drawable drawable) {
BitmapDrawable bd = (BitmapDrawable) drawable;
return bd.getBitmap();
}

繁琐的drawable转Bitamp方法，使用Canvas重新绘制了一个Bitmap，速度较慢

public Bitmap drawable2Bitamp(Drawable drawable) {
int w = drawable.getIntrinsicWidth();
int h = drawable.getIntrinsicHeight();
Bitmap.Config config =
drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888
: Bitmap.Config.RGB_565;
Bitmap bitmap = Bitmap.createBitmap(w, h, config);
//注意，下面三行代码要用到，否在在View或者surfaceview里的canvas.drawBitmap会看不到图
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, w, h);
drawable.draw(canvas);
return bitmap;
}

源码：

Java文件：

public class TestCardView extends AppCompatActivity {
private Palette mPalette; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_card_view);
this.init();
} public void init() {
ImageView img= (ImageView) findViewById(R.id.car_view_img);
initPalette(img.getDrawable());
TextView tv1 = (TextView) findViewById(R.id.car_view_txt_1);
TextView tv2 = (TextView) findViewById(R.id.car_view_txt_2);
TextView tv3 = (TextView) findViewById(R.id.car_view_txt_3);
TextView tv4 = (TextView) findViewById(R.id.car_view_txt_4);
TextView tv5 = (TextView) findViewById(R.id.car_view_txt_5);
TextView tv6 = (TextView) findViewById(R.id.car_view_txt_6);
TextView tv7 = (TextView) findViewById(R.id.car_view_txt_7);
TextView tv8 = (TextView) findViewById(R.id.car_view_txt_8); //设置Actionbar的颜色
getSupportActionBar().setBackgroundDrawable(
new ColorDrawable(mPalette.getLightVibrantSwatch().getTitleTextColor())); //使用Swatch对象取色
if (mPalette.getVibrantSwatch() != null)
tv1.setBackgroundColor(mPalette.getVibrantSwatch().getRgb());
if (mPalette.getDarkVibrantSwatch() != null)
tv2.setBackgroundColor(mPalette.getDarkVibrantSwatch().getRgb());
if (mPalette.getLightVibrantSwatch() != null)
tv3.setBackgroundColor(mPalette.getLightVibrantSwatch().getRgb());
if (mPalette.getMutedSwatch() != null)
tv4.setBackgroundColor(mPalette.getMutedSwatch().getRgb());
if (mPalette.getDarkMutedSwatch() != null)
tv5.setBackgroundColor(mPalette.getDarkMutedSwatch().getRgb());
if (mPalette.getLightMutedSwatch() != null)
tv6.setBackgroundColor(mPalette.getLightMutedSwatch().getRgb()); //使用指定默认值的取色方法
tv8.setBackgroundColor(mPalette.getDarkMutedColor(Color.GREEN)); //通过背景更换字体颜色，原先指定为红色，运行之后为灰色
initPalette(tv7.getBackground());
if (mPalette.getVibrantSwatch() != null)
tv7.setTextColor(mPalette.getVibrantSwatch().getBodyTextColor());
} public void initPalette(Drawable drawable) {
//对象实例化
mPalette = Palette.from(((BitmapDrawable) drawable).getBitmap()).generate();
}
}

XML布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".souce.TestCardView"> <android.support.v7.widget.CardView
android:layout_width="150dp"
android:layout_height="150dp"
card:cardBackgroundColor="#FFF"
card:cardCornerRadius="75dp"
card:cardElevation="25dp"> <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:orientation="vertical"> <ImageView
android:id="@+id/car_view_img"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="fitXY"
android:src="@drawable/card_view_img" /> <Button
android:layout_width="150dp"
android:layout_height="50dp"
android:background="#669900"
android:text="@string/app_name" />
</LinearLayout>
</android.support.v7.widget.CardView> <TextView
android:id="@+id/car_view_txt_1"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="Vibrant" /> <TextView
android:id="@+id/car_view_txt_2"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="Vibrant Dark" /> <TextView
android:id="@+id/car_view_txt_3"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="Vibrant Light" /> <TextView
android:id="@+id/car_view_txt_4"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="Muted" /> <TextView
android:id="@+id/car_view_txt_5"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="Muted Dark" /> <TextView
android:id="@+id/car_view_txt_6"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="Muted Light" /> <TextView
android:id="@+id/car_view_txt_7"
android:layout_width="300dp"
android:textColor="#F00"
android:background="@drawable/common_ic_googleplayservices"
android:layout_height="wrap_content"
android:text="GetBodyTextColor" /> <TextView
android:id="@+id/car_view_txt_8"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="GetTitleTextColor" />
</LinearLayout>