1. 全栈程序员必看首页

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

全栈程序员-站长 • • 未分类 • 阅读 55

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 plain
copy

  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 plain
copy
在CODE上查看代码片
派生到我的代码片

  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 plain
copy

  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 plain
copy
在CODE上查看代码片
派生到我的代码片

  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效果：

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/109329.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • 一比一还原axios源码（五）—— 拦截器「建议收藏」

    一比一还原axios源码（五）—— 拦截器「建议收藏」

    上一篇，我们扩展了Axios，构建了一个Axios类，然后通过这个Axios工厂类，创建真正的axios实例。那么今天，我们来实现下Axios的拦截器也就是interceptors。我们来简单看下Ax

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月25日
  • 微服务架构设计模式 pdf下载_常见微服务架构 设计模式

    微服务架构设计模式 pdf下载_常见微服务架构

    微服务架构设计模式 pdf下载_常见微服务架构链接：https://pan.baidu.com/s/1RCsi9bDoPgQw0swztzsmBQ提取码：jhie若链接失效，请联系本人：18642984053@163.com

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月22日
  • 群晖nas 文件服务器,群晖nas挂到云服务器上

    群晖nas 文件服务器,群晖nas挂到云服务器上

    群晖nas 文件服务器,群晖nas挂到云服务器上群晖nas挂到云服务器上内容精选换一换在公有云上部署SAPHANA所需要的云服务如下。无法直接从云备份控制台查看备份中的数据，您可以通过以下几种方式进行查看：云服务器备份使用云服务器备份创建镜像后，再使用镜像创建云服务器。登录云服务器，查看服务器中的数据。云硬盘备份使用云硬盘备份创建新的云硬盘后，将云硬盘挂载至云服务器上。登录云服务器，查看磁盘中的数据。SFSTurbo备份使用SFSTur…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月26日
  • linux 卸载cuda_如何卸载CUDA

    linux 卸载cuda_如何卸载CUDA

    linux 卸载cuda_如何卸载CUDALinux下cuda卸载亲测好用#1.用runfile方式安装的删除方法：sudo/usr/local/cuda-8.0/bin/uninstall_cuda_8.0.pl#2.用packagemanager方式安装的删除方法：sudoapt-get–purgeremovecuda-8.0sudoaptautoremovesudoapt-getautoclean#cudnn文件和samples残留在/usr/local/cuda-8.0/，删除

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月6日
  • Python 实现异步调用函数

    Python 实现异步调用函数

    Python 实现异步调用函数async_call.py#coding:utf-8fromthreadingimportThreaddefasync_call(fn):defwrapper(*args,**kwargs):Thread(target=fn,args=args,kwargs=kwargs).start()returnwrappertest.p…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月11日
  • JavaWeb专栏之（三）：Eclipse创建JavaWeb项目「建议收藏」

    JavaWeb专栏之（三）：Eclipse创建JavaWeb项目「建议收藏」

    JavaWeb专栏之（三）：Eclipse创建JavaWeb项目「建议收藏」JavaWeb专栏之（三）：Eclipse创建JavaWeb项目前言：关注：《遇见小Du说》微信公众号，分享更多Java知识，不负每一次相遇。更多内容请访问：www.dushunchang.top在上一篇文章中，小Du猿带大家使用Idea创建JavaWeb项目，相比之下Idea作为当前非常主流的开发IDE，深受Java后端程序员使用。市面上约75%开发者使用Idea，一代开发神器Eclipse就此没落。小Du猿第一次使用的开发IDE就是Eclipse，也算是我的启蒙神器。今天就带了使

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月18日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号