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

  1. private void initViews() {  
  2.     mToolbar = (Toolbar) findViewById(R.id.toolbar);  
  3.     // toolbar.setLogo(R.drawable.ic_launcher);   
  4.     mToolbar.setTitle("Rocko");// 标题的文字需在setSupportActionBar之前，不然会无效   
  5.     // toolbar.setSubtitle("副标题");   
  6.     setSupportActionBar(mToolbar);  
  7.     /* 这些通过ActionBar来设置也是一样的，注意要在setSupportActionBar(toolbar);之后，不然就报错了 */  
  8.     // getSupportActionBar().setTitle("标题");   
  9.     // getSupportActionBar().setSubtitle("副标题");   
  10.     // getSupportActionBar().setLogo(R.drawable.ic_launcher);   
  11.       
  12.     /* 菜单的监听可以在toolbar里设置，也可以像ActionBar那样，通过下面的两个回调方法来处理 */  
  13.     mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  
  14.         @Override  
  15.         public boolean onMenuItemClick(MenuItem item) {  
  16.             switch (item.getItemId()) {  
  17.             case R.id.action_settings:  
  18.                 Toast.makeText(MainActivity.this, "action_settings", 0).show();  
  19.                 break;  
  20.             case R.id.action_share:  
  21.                 Toast.makeText(MainActivity.this, "action_share", 0).show();  
  22.                 break;  
  23.             default:  
  24.                 break;  
  25.             }  
  26.             return true;  
  27.         }  
  28.     });  
  29.     getSupportActionBar().setDisplayHomeAsUpEnabled(true);  
  30.     /* findView */  
  31.     mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);  
  32.     mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,  
  33.             R.string.drawer_close);  
  34.     mDrawerToggle.syncState();  
  35.     mDrawerLayout.setDrawerListener(mDrawerToggle);  
  36.   
  37.     mPagerSlidingTabStrip = (PagerSlidingTabStrip) findViewById(R.id.tabs);  
  38.     mViewPager = (ViewPager) findViewById(R.id.pager);  
  39.     mViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));  
  40.     mPagerSlidingTabStrip.setViewPager(mViewPager);  
  41.     mPagerSlidingTabStrip.setOnPageChangeListener(new OnPageChangeListener() {  
  42.   
  43.         @Override  
  44.         public void onPageSelected(int arg0) {  
  45.             colorChange(arg0);  
  46.         }  
  47.   
  48.         @Override  
  49.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
  50.         }  
  51.   
  52.         @Override  
  53.         public void onPageScrollStateChanged(int arg0) {  
  54.         }  
  55.     });  
  56.     initTabsValue();  
  57. }  
  58.   
  59. /** 
  60.  * mPagerSlidingTabStrip默认值配置 
  61.  *  
  62.  */  
  63. private void initTabsValue() {  
  64.     // 底部游标颜色   
  65.     mPagerSlidingTabStrip.setIndicatorColor(Color.BLUE);  
  66.     // tab的分割线颜色   
  67.     mPagerSlidingTabStrip.setDividerColor(Color.TRANSPARENT);  
  68.     // tab背景   
  69.     mPagerSlidingTabStrip.setBackgroundColor(Color.parseColor("#4876FF"));  
  70.     // tab底线高度   
  71.     mPagerSlidingTabStrip.setUnderlineHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,  
  72.             1, getResources().getDisplayMetrics()));  
  73.     // 游标高度   
  74.     mPagerSlidingTabStrip.setIndicatorHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,  
  75.             5, getResources().getDisplayMetrics()));  
  76.     // 选中的文字颜色   
  77.     mPagerSlidingTabStrip.setSelectedTextColor(Color.WHITE);  
  78.     // 正常文字颜色   
  79.     mPagerSlidingTabStrip.setTextColor(Color.BLACK);  
  80. }  

[java] view
plaincopy

  1. private void initViews() {  
  2.     mToolbar = (Toolbar) findViewById(R.id.toolbar);  
  3.     // toolbar.setLogo(R.drawable.ic_launcher);  
  4.     mToolbar.setTitle("Rocko");// 标题的文字需在setSupportActionBar之前，不然会无效  
  5.     // toolbar.setSubtitle("副标题");  
  6.     setSupportActionBar(mToolbar);  
  7.     /* 这些通过ActionBar来设置也是一样的，注意要在setSupportActionBar(toolbar);之后，不然就报错了 */  
  8.     // getSupportActionBar().setTitle("标题");  
  9.     // getSupportActionBar().setSubtitle("副标题");  
  10.     // getSupportActionBar().setLogo(R.drawable.ic_launcher);  
  11.       
  12.     /* 菜单的监听可以在toolbar里设置，也可以像ActionBar那样，通过下面的两个回调方法来处理 */  
  13.     mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  
  14.         @Override  
  15.         public boolean onMenuItemClick(MenuItem item) {  
  16.             switch (item.getItemId()) {  
  17.             case R.id.action_settings:  
  18.                 Toast.makeText(MainActivity.this, "action_settings", 0).show();  
  19.                 break;  
  20.             case R.id.action_share:  
  21.                 Toast.makeText(MainActivity.this, "action_share", 0).show();  
  22.                 break;  
  23.             default:  
  24.                 break;  
  25.             }  
  26.             return true;  
  27.         }  
  28.     });  
  29.     getSupportActionBar().setDisplayHomeAsUpEnabled(true);  
  30.     /* findView */  
  31.     mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);  
  32.     mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,  
  33.             R.string.drawer_close);  
  34.     mDrawerToggle.syncState();  
  35.     mDrawerLayout.setDrawerListener(mDrawerToggle);  
  36.   
  37.     mPagerSlidingTabStrip = (PagerSlidingTabStrip) findViewById(R.id.tabs);  
  38.     mViewPager = (ViewPager) findViewById(R.id.pager);  
  39.     mViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));  
  40.     mPagerSlidingTabStrip.setViewPager(mViewPager);  
  41.     mPagerSlidingTabStrip.setOnPageChangeListener(new OnPageChangeListener() {  
  42.   
  43.         @Override  
  44.         public void onPageSelected(int arg0) {  
  45.             colorChange(arg0);  
  46.         }  
  47.   
  48.         @Override  
  49.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
  50.         }  
  51.   
  52.         @Override  
  53.         public void onPageScrollStateChanged(int arg0) {  
  54.         }  
  55.     });  
  56.     initTabsValue();  
  57. }  
  58.   
  59. /** 
  60.  * mPagerSlidingTabStrip默认值配置 
  61.  *  
  62.  */  
  63. private void initTabsValue() {  
  64.     // 底部游标颜色  
  65.     mPagerSlidingTabStrip.setIndicatorColor(Color.BLUE);  
  66.     // tab的分割线颜色  
  67.     mPagerSlidingTabStrip.setDividerColor(Color.TRANSPARENT);  
  68.     // tab背景  
  69.     mPagerSlidingTabStrip.setBackgroundColor(Color.parseColor("#4876FF"));  
  70.     // tab底线高度  
  71.     mPagerSlidingTabStrip.setUnderlineHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,  
  72.             1, getResources().getDisplayMetrics()));  
  73.     // 游标高度  
  74.     mPagerSlidingTabStrip.setIndicatorHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,  
  75.             5, getResources().getDisplayMetrics()));  
  76.     // 选中的文字颜色  
  77.     mPagerSlidingTabStrip.setSelectedTextColor(Color.WHITE);  
  78.     // 正常文字颜色  
  79.     mPagerSlidingTabStrip.setTextColor(Color.BLACK);  
  80. }  

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

[java] view
plaincopy

  1. /** 
  2.  * 界面颜色的更改 
  3.  */  
  4. @SuppressLint("NewApi")  
  5. private void colorChange(int position) {  
  6.     // 用来提取颜色的Bitmap   
  7.     Bitmap bitmap = BitmapFactory.decodeResource(getResources(),  
  8.             SuperAwesomeCardFragment.getBackgroundBitmapPosition(position));  
  9.     // Palette的部分   
  10.     Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {  
  11.         /** 
  12.          * 提取完之后的回调方法 
  13.          */  
  14.         @Override  
  15.         public void onGenerated(Palette palette) {  
  16.             Palette.Swatch vibrant = palette.getVibrantSwatch();  
  17.             /* 界面颜色UI统一性处理,看起来更Material一些 */  
  18.             mPagerSlidingTabStrip.setBackgroundColor(vibrant.getRgb());  
  19.             mPagerSlidingTabStrip.setTextColor(vibrant.getTitleTextColor());  
  20.             // 其中状态栏、游标、底部导航栏的颜色需要加深一下，也可以不加，具体情况在代码之后说明   
  21.             mPagerSlidingTabStrip.setIndicatorColor(colorBurn(vibrant.getRgb()));  
  22.   
  23.             mToolbar.setBackgroundColor(vibrant.getRgb());  
  24.             if (android.os.Build.VERSION.SDK_INT >= 21) {  
  25.                 Window window = getWindow();  
  26.                 // 很明显，这两货是新API才有的。   
  27.                 window.setStatusBarColor(colorBurn(vibrant.getRgb()));  
  28.                 window.setNavigationBarColor(colorBurn(vibrant.getRgb()));  
  29.             }  
  30.         }  
  31.     });  
  32. }  
  33.   
  34. /** 
  35.  * 颜色加深处理 
  36.  *  
  37.  * @param RGBValues 
  38.  *            RGB的值，由alpha（透明度）、red（红）、green（绿）、blue（蓝）构成， 
  39.  *            Android中我们一般使用它的16进制， 
  40.  *            例如："#FFAABBCC",最左边到最右每两个字母就是代表alpha（透明度）、 
  41.  *            red（红）、green（绿）、blue（蓝）。每种颜色值占一个字节(8位)，值域0~255 
  42.  *            所以下面使用移位的方法可以得到每种颜色的值，然后每种颜色值减小一下，在合成RGB颜色，颜色就会看起来深一些了 
  43.  * @return 
  44.  */  
  45. private int colorBurn(int RGBValues) {  
  46.     int alpha = RGBValues >> 24;  
  47.     int red = RGBValues >> 16 & 0xFF;  
  48.     int green = RGBValues >> 8 & 0xFF;  
  49.     int blue = RGBValues & 0xFF;  
  50.     red = (int) Math.floor(red * (1 - 0.1));  
  51.     green = (int) Math.floor(green * (1 - 0.1));  
  52.     blue = (int) Math.floor(blue * (1 - 0.1));  
  53.     return Color.rgb(red, green, blue);  
  54. }  

[java] view
plaincopy

  1. /** 
  2.  * 界面颜色的更改 
  3.  */  
  4. @SuppressLint("NewApi")  
  5. private void colorChange(int position) {  
  6.     // 用来提取颜色的Bitmap  
  7.     Bitmap bitmap = BitmapFactory.decodeResource(getResources(),  
  8.             SuperAwesomeCardFragment.getBackgroundBitmapPosition(position));  
  9.     // Palette的部分  
  10.     Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {  
  11.         /** 
  12.          * 提取完之后的回调方法 
  13.          */  
  14.         @Override  
  15.         public void onGenerated(Palette palette) {  
  16.             Palette.Swatch vibrant = palette.getVibrantSwatch();  
  17.             /* 界面颜色UI统一性处理,看起来更Material一些 */  
  18.             mPagerSlidingTabStrip.setBackgroundColor(vibrant.getRgb());  
  19.             mPagerSlidingTabStrip.setTextColor(vibrant.getTitleTextColor());  
  20.             // 其中状态栏、游标、底部导航栏的颜色需要加深一下，也可以不加，具体情况在代码之后说明  
  21.             mPagerSlidingTabStrip.setIndicatorColor(colorBurn(vibrant.getRgb()));  
  22.   
  23.             mToolbar.setBackgroundColor(vibrant.getRgb());  
  24.             if (android.os.Build.VERSION.SDK_INT >= 21) {  
  25.                 Window window = getWindow();  
  26.                 // 很明显，这两货是新API才有的。  
  27.                 window.setStatusBarColor(colorBurn(vibrant.getRgb()));  
  28.                 window.setNavigationBarColor(colorBurn(vibrant.getRgb()));  
  29.             }  
  30.         }  
  31.     });  
  32. }  
  33.   
  34. /** 
  35.  * 颜色加深处理 
  36.  *  
  37.  * @param RGBValues 
  38.  *            RGB的值，由alpha（透明度）、red（红）、green（绿）、blue（蓝）构成， 
  39.  *            Android中我们一般使用它的16进制， 
  40.  *            例如："#FFAABBCC",最左边到最右每两个字母就是代表alpha（透明度）、 
  41.  *            red（红）、green（绿）、blue（蓝）。每种颜色值占一个字节(8位)，值域0~255 
  42.  *            所以下面使用移位的方法可以得到每种颜色的值，然后每种颜色值减小一下，在合成RGB颜色，颜色就会看起来深一些了 
  43.  * @return 
  44.  */  
  45. private int colorBurn(int RGBValues) {  
  46.     int alpha = RGBValues >> 24;  
  47.     int red = RGBValues >> 16 & 0xFF;  
  48.     int green = RGBValues >> 8 & 0xFF;  
  49.     int blue = RGBValues & 0xFF;  
  50.     red = (int) Math.floor(red * (1 - 0.1));  
  51.     green = (int) Math.floor(green * (1 - 0.1));  
  52.     blue = (int) Math.floor(blue * (1 - 0.1));  
  53.     return Color.rgb(red, green, blue);  
  54. }  

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

时间： 2024-10-27 04:05:50

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

主题颜色提取 ——— Palette

Palette 调色板 Palette 是 Android L SDK 中的新特性.可以使用 Palette 从图像中提取出突出的颜色(主色调),获取到颜色之后我们再将这个颜色值赋给 ActionBar.状态栏等.从而达到界面色调的统一,使界面美观协调. Palette 可以提取图片中如下几种特性的颜色: Vibrant (有活力的) Vibrant dark(有活力的 暗色调) Vibrant light(有活力的 明亮) Muted (柔和的) Muted dark(柔和的 暗色调) Mut

android自定义状态栏颜色

我们知道IOS上的应用,状态栏的颜色总能与应用标题栏颜色保持一致,用户体验很不错,那安卓是否可以呢?若是在安卓4.4之前,答案是否定的,但在4.4之后,谷歌允许开发者自定义状态栏背景颜色啦,这是个不错的体验!若你手机上安装有最新版的qq,并且你的安卓SDK版本是4.4及以上,你可以看下它的效果: 实现此功能有两种方法: 1.在xml中设置主题或自定义style: [html] view plaincopy Theme.Holo.Light.NoActionBar.TranslucentDecor

Android自定义状态栏颜色与APP风格保持一致的实现方法_Android

我们知道iOS上的应用,状态栏的颜色总能与应用标题栏颜色保持一致,用户体验很不错,那安卓是否可以呢?若是在安卓4.4之前,答案是否定的,但在4.4之后,谷歌允许开发者自定义状态栏背景颜色啦,这是个不错的体验!若你手机上安装有最新版的qq,并且你的安卓SDK版本是4.4及以上,你可以看下它的效果: 实现此功能有两种方法: 1.在xml中设置主题或自定义style: Theme.Holo.Light.NoActionBar.TranslucentDecor Theme.Holo.NoActionBa

Android自定义状态栏颜色与应用标题栏颜色一致_Android

每次看IOS上的应用,应用中状态栏的颜色总能与应用标题栏颜色保持一致,用户体验很不错,对于这种效果,像我这种好奇心强的人就会去看看那安卓是否可以呢?若是在安卓4.4之前,答案是否定的,但在4.4之后,谷歌允许开发者自定义状态栏背景颜色啦,这是个不错的体验!若你手机上安装有最新版的qq,并且你的安卓SDK版本是4.4及以上,你可以看下它的效果: 实现此功能有两种方法: 1.在xml中设置主题或自定义style: Theme.Holo.Light.NoActionBar.TranslucentDec

Android自定义状态栏颜色与APP风格保持一致的实现方法

我们知道iOS上的应用,状态栏的颜色总能与应用标题栏颜色保持一致,用户体验很不错,那安卓是否可以呢?若是在安卓4.4之前,答案是否定的,但在4.4之后,谷歌允许开发者自定义状态栏背景颜色啦,这是个不错的体验!若你手机上安装有最新版的qq,并且你的安卓SDK版本是4.4及以上,你可以看下它的效果: 实现此功能有两种方法: 1.在xml中设置主题或自定义style: Theme.Holo.Light.NoActionBar.TranslucentDecor Theme.Holo.NoActionBa

Android 使用SystemBarTint设置状态栏颜色

   做项目时,发现APP的状态栏是系统默认的颜色,突然想到,为啥别的APP是自己设置的颜色(和APP本身很相搭),于是也想给自己的APP设置系统状态栏的颜色,更加美美哒...   搜了下,发现原来设置状态栏居然有个很高大上的名字(听不懂的都是高大上)--沉浸式状态栏,Android4.4以后开始支持沉浸式状态栏, 继续搜索,发现,有一个很简单的开源项目--SystemBarTint,可以很完美的支持沉浸式状态栏.     SystemBarTint地址: https://github.com/

Android 沉浸式改变小米魅族状态栏颜色的实例代码

这个是基于SystemBarTintManager更改的 增加一个方法:用于更改MIUIV6系统上的状态栏字体颜色 ,目前我仅仅只发现MIUIV6上可以更改,在android5.0上以及其它4.4以上系统没有发现可以更改字体颜色的代码 核心代码: public void setStatusBarDarkMode(boolean darkmode, Activity activity) { if (sIsMiuiV6) { Class<? extends Window> clazz = acti

写的不错批处理教程一_DOS/BAT

大家知不知道默认共享这回事?这东西用不着的地方可就不是好东西了．所以就要删掉．但这东西是每次系统重起后都会重新创建的．所以每次都要重新打开cmd重新删掉一下．极为麻烦．但有了批处理文件就不一样了,先把命令输入到批处理文件中,然后加入到启动项中,每次启动就会自动运行,免去了每次输入命令的麻烦．   如何创建批处理文件? 将记事本打开,什么都不用写,然后选择文件,保存．保存类型选择所有文件,文件名则命名为*.bat这个*代表是文件名,你可以随便的起．保存好之后,看看你保存的地方,会出现一个白色窗口里

写得不错的jquery table鼠标经过变色代码_jquery

复制代码 代码如下: $('#<%=AllEvent.ClientID%> tr:not(:has("th"))').hover(function () { $bg = $(this).css('background-color'); $(this).css('background-color', '#ffc4c6'); }, function () { $(this).css('background-color', $bg); });