Palette状态栏颜色提取，写的不错就分享了

Palette

说Palette之前先说下前面提到的Pager。ViewPager是什么大家应该都是知道的了，一般ViewPager、xxxTabStrip、Fragment三个好基友是一起出现的。这里的xxxTabStrip是使用Github上的PagerSlidingTabStrip。当我们的Pager切换时伴随着Fragment的变化，而Fragment里的内容一般是不同的，所以每个Fragment里的一般视觉效果也是不同的，所以我们可以用Palette来去提取Fragment中的主色调，那Fragment中的拿什么给Palatte去提取颜色呢，这就需要自己根据自己的情况来决定的。比如我这个demo里，Fragment就一个TextView和给Fragment设了背景，那么我就可以把背景的图片给Palette去提取颜色了。

说了上面一段你也基本知道Palatte是用来干么的了，它就是用来从Bitmap中提取颜色的，然后把颜色设置给title啊content啊等等。

先贴上Pager部分的代码：

[java] view
plaincopy

private void initViews() {

mToolbar = (Toolbar) findViewById(R.id.toolbar);

// toolbar.setLogo(R.drawable.ic_launcher);

mToolbar.setTitle("Rocko");// 标题的文字需在setSupportActionBar之前，不然会无效

// toolbar.setSubtitle("副标题");

setSupportActionBar(mToolbar);

/* 这些通过ActionBar来设置也是一样的，注意要在setSupportActionBar(toolbar);之后，不然就报错了 */

// getSupportActionBar().setTitle("标题");

// getSupportActionBar().setSubtitle("副标题");

// getSupportActionBar().setLogo(R.drawable.ic_launcher);



/* 菜单的监听可以在toolbar里设置，也可以像ActionBar那样，通过下面的两个回调方法来处理 */

mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {

@Override

public boolean onMenuItemClick(MenuItem item) {

switch (item.getItemId()) {

case R.id.action_settings:

Toast.makeText(MainActivity.this, "action_settings", 0).show();

break;

case R.id.action_share:

Toast.makeText(MainActivity.this, "action_share", 0).show();

break;

default:

break;

}

return true;

}

});

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

/* findView */

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,

R.string.drawer_close);

mDrawerToggle.syncState();

mDrawerLayout.setDrawerListener(mDrawerToggle);



mPagerSlidingTabStrip = (PagerSlidingTabStrip) findViewById(R.id.tabs);

mViewPager = (ViewPager) findViewById(R.id.pager);

mViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));

mPagerSlidingTabStrip.setViewPager(mViewPager);

mPagerSlidingTabStrip.setOnPageChangeListener(new OnPageChangeListener() {



@Override

public void onPageSelected(int arg0) {

colorChange(arg0);

}



@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {

}



@Override

public void onPageScrollStateChanged(int arg0) {

}

});

initTabsValue();

}



/**

* mPagerSlidingTabStrip默认值配置

*

*/

private void initTabsValue() {

// 底部游标颜色

mPagerSlidingTabStrip.setIndicatorColor(Color.BLUE);

// tab的分割线颜色

mPagerSlidingTabStrip.setDividerColor(Color.TRANSPARENT);

// tab背景

mPagerSlidingTabStrip.setBackgroundColor(Color.parseColor("#4876FF"));

// tab底线高度

mPagerSlidingTabStrip.setUnderlineHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,

1, getResources().getDisplayMetrics()));

// 游标高度

mPagerSlidingTabStrip.setIndicatorHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,

5, getResources().getDisplayMetrics()));

// 选中的文字颜色

mPagerSlidingTabStrip.setSelectedTextColor(Color.WHITE);

// 正常文字颜色

mPagerSlidingTabStrip.setTextColor(Color.BLACK);

}

[java] view
plaincopy





private void initViews() {

mToolbar = (Toolbar) findViewById(R.id.toolbar);

// toolbar.setLogo(R.drawable.ic_launcher);

mToolbar.setTitle("Rocko");// 标题的文字需在setSupportActionBar之前，不然会无效

// toolbar.setSubtitle("副标题");

setSupportActionBar(mToolbar);

/* 这些通过ActionBar来设置也是一样的，注意要在setSupportActionBar(toolbar);之后，不然就报错了 */

// getSupportActionBar().setTitle("标题");

// getSupportActionBar().setSubtitle("副标题");

// getSupportActionBar().setLogo(R.drawable.ic_launcher);



/* 菜单的监听可以在toolbar里设置，也可以像ActionBar那样，通过下面的两个回调方法来处理 */

mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {

@Override

public boolean onMenuItemClick(MenuItem item) {

switch (item.getItemId()) {

case R.id.action_settings:

Toast.makeText(MainActivity.this, "action_settings", 0).show();

break;

case R.id.action_share:

Toast.makeText(MainActivity.this, "action_share", 0).show();

break;

default:

break;

}

return true;

}

});

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

/* findView */

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,

R.string.drawer_close);

mDrawerToggle.syncState();

mDrawerLayout.setDrawerListener(mDrawerToggle);



mPagerSlidingTabStrip = (PagerSlidingTabStrip) findViewById(R.id.tabs);

mViewPager = (ViewPager) findViewById(R.id.pager);

mViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));

mPagerSlidingTabStrip.setViewPager(mViewPager);

mPagerSlidingTabStrip.setOnPageChangeListener(new OnPageChangeListener() {



@Override

public void onPageSelected(int arg0) {

colorChange(arg0);

}



@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {

}



@Override

public void onPageScrollStateChanged(int arg0) {

}

});

initTabsValue();

}



/**

* mPagerSlidingTabStrip默认值配置

*

*/

private void initTabsValue() {

// 底部游标颜色

mPagerSlidingTabStrip.setIndicatorColor(Color.BLUE);

// tab的分割线颜色

mPagerSlidingTabStrip.setDividerColor(Color.TRANSPARENT);

// tab背景

mPagerSlidingTabStrip.setBackgroundColor(Color.parseColor("#4876FF"));

// tab底线高度

mPagerSlidingTabStrip.setUnderlineHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,

1, getResources().getDisplayMetrics()));

// 游标高度

mPagerSlidingTabStrip.setIndicatorHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,

5, getResources().getDisplayMetrics()));

// 选中的文字颜色

mPagerSlidingTabStrip.setSelectedTextColor(Color.WHITE);

// 正常文字颜色

mPagerSlidingTabStrip.setTextColor(Color.BLACK);

}

这些都是一些基本设置，然后Palette在哪里开始工作呢，就是在tab切换时了。在onPagerSelect方法里即上面代码的45行。他是这么干的：

[java] view
plaincopy

/**

* 界面颜色的更改

*/

@SuppressLint("NewApi")

private void colorChange(int position) {

// 用来提取颜色的Bitmap

Bitmap bitmap = BitmapFactory.decodeResource(getResources(),

SuperAwesomeCardFragment.getBackgroundBitmapPosition(position));

// Palette的部分

Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {

/**

* 提取完之后的回调方法

*/

@Override

public void onGenerated(Palette palette) {

Palette.Swatch vibrant = palette.getVibrantSwatch();

/* 界面颜色UI统一性处理,看起来更Material一些 */

mPagerSlidingTabStrip.setBackgroundColor(vibrant.getRgb());

mPagerSlidingTabStrip.setTextColor(vibrant.getTitleTextColor());

// 其中状态栏、游标、底部导航栏的颜色需要加深一下，也可以不加，具体情况在代码之后说明

mPagerSlidingTabStrip.setIndicatorColor(colorBurn(vibrant.getRgb()));



mToolbar.setBackgroundColor(vibrant.getRgb());

if (android.os.Build.VERSION.SDK_INT >= 21) {

Window window = getWindow();

// 很明显，这两货是新API才有的。

window.setStatusBarColor(colorBurn(vibrant.getRgb()));

window.setNavigationBarColor(colorBurn(vibrant.getRgb()));

}

}

});

}



/**

* 颜色加深处理

*

* @param RGBValues

* RGB的值，由alpha（透明度）、red（红）、green（绿）、blue（蓝）构成，

* Android中我们一般使用它的16进制，

* 例如："#FFAABBCC",最左边到最右每两个字母就是代表alpha（透明度）、

* red（红）、green（绿）、blue（蓝）。每种颜色值占一个字节(8位)，值域0~255

* 所以下面使用移位的方法可以得到每种颜色的值，然后每种颜色值减小一下，在合成RGB颜色，颜色就会看起来深一些了

* @return

*/

private int colorBurn(int RGBValues) {

int alpha = RGBValues >> 24;

int red = RGBValues >> 16 & 0xFF;

int green = RGBValues >> 8 & 0xFF;

int blue = RGBValues & 0xFF;

red = (int) Math.floor(red * (1 - 0.1));

green = (int) Math.floor(green * (1 - 0.1));

blue = (int) Math.floor(blue * (1 - 0.1));

return Color.rgb(red, green, blue);

}

[java] view
plaincopy





/**

* 界面颜色的更改

*/

@SuppressLint("NewApi")

private void colorChange(int position) {

// 用来提取颜色的Bitmap

Bitmap bitmap = BitmapFactory.decodeResource(getResources(),

SuperAwesomeCardFragment.getBackgroundBitmapPosition(position));

// Palette的部分

Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {

/**

* 提取完之后的回调方法

*/

@Override

public void onGenerated(Palette palette) {

Palette.Swatch vibrant = palette.getVibrantSwatch();

/* 界面颜色UI统一性处理,看起来更Material一些 */

mPagerSlidingTabStrip.setBackgroundColor(vibrant.getRgb());

mPagerSlidingTabStrip.setTextColor(vibrant.getTitleTextColor());

// 其中状态栏、游标、底部导航栏的颜色需要加深一下，也可以不加，具体情况在代码之后说明

mPagerSlidingTabStrip.setIndicatorColor(colorBurn(vibrant.getRgb()));



mToolbar.setBackgroundColor(vibrant.getRgb());

if (android.os.Build.VERSION.SDK_INT >= 21) {

Window window = getWindow();

// 很明显，这两货是新API才有的。

window.setStatusBarColor(colorBurn(vibrant.getRgb()));

window.setNavigationBarColor(colorBurn(vibrant.getRgb()));

}

}

});

}



/**

* 颜色加深处理

*

* @param RGBValues

* RGB的值，由alpha（透明度）、red（红）、green（绿）、blue（蓝）构成，

* Android中我们一般使用它的16进制，

* 例如："#FFAABBCC",最左边到最右每两个字母就是代表alpha（透明度）、

* red（红）、green（绿）、blue（蓝）。每种颜色值占一个字节(8位)，值域0~255

* 所以下面使用移位的方法可以得到每种颜色的值，然后每种颜色值减小一下，在合成RGB颜色，颜色就会看起来深一些了

* @return

*/

private int colorBurn(int RGBValues) {

int alpha = RGBValues >> 24;

int red = RGBValues >> 16 & 0xFF;

int green = RGBValues >> 8 & 0xFF;

int blue = RGBValues & 0xFF;

red = (int) Math.floor(red * (1 - 0.1));

green = (int) Math.floor(green * (1 - 0.1));

blue = (int) Math.floor(blue * (1 - 0.1));

return Color.rgb(red, green, blue);

}

Palette需要你自己写的东西还是比较少的，你只需在它提取完成的回调方法了获取各种提取到的颜色设置给相应的view就行了。图片的颜色比较鲜艳突出，方便直观的了解。提取到的颜色怎么很好的搭配，如果你有UI设计师的话就最好了，像我这种的话看着它顺眼就行。上面的颜色处理：像如果有把Toolbar当成了ActionBar来使用而且有一些明显的ActionBar即视感的ActionButton的话，我觉得状态栏的颜色应该比ToolBar颜色深一点比较好，看起来有一点界限分隔。在Android中RGB颜色Color加深减淡的处理：可以看到我采用的加深颜色的方法就是先得到RGB颜色的red、green、blue的值，然后把每个颜色的值减小，floor函数是向下取整的功能，如果看不懂的可以先看下RGB颜色的构成再看就会很好理解了。设置成一样时的情况更多的是没有ActionButton这些明显的东西或没有三个点的更多ActionButton时，看起来更平面一点，更浑然一体。

说了这么多，Palette呢就是一把利器，方便我们对UI界面色调的处理，所以可以说他是Material Design必不可少的一部分。

END

demo效果：





demo源码下载地址：http://download.csdn.net/detail/bbld_/8191251