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

这些都是一些基本设置，然后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. mToolbar.setBackgroundColor(vibrant.getRgb());
  23. if (android.os.Build.VERSION.SDK_INT >= 21) {
  24. Window window = getWindow();
  25. // 很明显，这两货是新API才有的。
  26. window.setStatusBarColor(colorBurn(vibrant.getRgb()));
  27. window.setNavigationBarColor(colorBurn(vibrant.getRgb()));
  28. }
  29. }
  30. });
  31. }
  32. /**
  33. * 颜色加深处理
  34. *
  35. * @param RGBValues
  36. *            RGB的值，由alpha（透明度）、red（红）、green（绿）、blue（蓝）构成，
  37. *            Android中我们一般使用它的16进制，
  38. *            例如："#FFAABBCC",最左边到最右每两个字母就是代表alpha（透明度）、
  39. *            red（红）、green（绿）、blue（蓝）。每种颜色值占一个字节(8位)，值域0~255
  40. *            所以下面使用移位的方法可以得到每种颜色的值，然后每种颜色值减小一下，在合成RGB颜色，颜色就会看起来深一些了
  41. * @return
  42. */
  43. private int colorBurn(int RGBValues) {
  44. int alpha = RGBValues >> 24;
  45. int red = RGBValues >> 16 & 0xFF;
  46. int green = RGBValues >> 8 & 0xFF;
  47. int blue = RGBValues & 0xFF;
  48. red = (int) Math.floor(red * (1 - 0.1));
  49. green = (int) Math.floor(green * (1 - 0.1));
  50. blue = (int) Math.floor(blue * (1 - 0.1));
  51. return Color.rgb(red, green, blue);
  52. }
[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. mToolbar.setBackgroundColor(vibrant.getRgb());
  23. if (android.os.Build.VERSION.SDK_INT >= 21) {
  24. Window window = getWindow();
  25. // 很明显，这两货是新API才有的。
  26. window.setStatusBarColor(colorBurn(vibrant.getRgb()));
  27. window.setNavigationBarColor(colorBurn(vibrant.getRgb()));
  28. }
  29. }
  30. });
  31. }
  32. /**
  33. * 颜色加深处理
  34. *
  35. * @param RGBValues
  36. *            RGB的值，由alpha（透明度）、red（红）、green（绿）、blue（蓝）构成，
  37. *            Android中我们一般使用它的16进制，
  38. *            例如："#FFAABBCC",最左边到最右每两个字母就是代表alpha（透明度）、
  39. *            red（红）、green（绿）、blue（蓝）。每种颜色值占一个字节(8位)，值域0~255
  40. *            所以下面使用移位的方法可以得到每种颜色的值，然后每种颜色值减小一下，在合成RGB颜色，颜色就会看起来深一些了
  41. * @return
  42. */
  43. private int colorBurn(int RGBValues) {
  44. int alpha = RGBValues >> 24;
  45. int red = RGBValues >> 16 & 0xFF;
  46. int green = RGBValues >> 8 & 0xFF;
  47. int blue = RGBValues & 0xFF;
  48. red = (int) Math.floor(red * (1 - 0.1));
  49. green = (int) Math.floor(green * (1 - 0.1));
  50. blue = (int) Math.floor(blue * (1 - 0.1));
  51. return Color.rgb(red, green, blue);
  52. }

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

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

  1. Android开发学习之路-Palette颜色提取工具类使用

    视频(要FQ):https://www.youtube.com/watch?v=5u0dtzXL3PQ Palette是一个在support-v7包中的一个颜色提取工具类,用法比较简单,而且是谷歌官方 ...

  2. android自定义状态栏颜色

    我们知道IOS上的应用,状态栏的颜色总能与应用标题栏颜色保持一致,用户体验很不错,那安卓是否可以呢?若是在安卓4.4之前,答案是否定的,但在4.4之后,谷歌允许开发者自定义状态栏背景颜色啦,这是个不错 ...

  3. iOS状态栏颜色

    下面截图给出修改 iOS 状态栏颜色的 4 种方式 Target.png Info.plist.png Storyboard.png code.png 其中第四张图中的代码,直接写在你的任何一个 Vi ...

  4. Android开发技巧——设置系统状态栏颜色

    开门见山,先来三张效果图: 然后我们再来讲如何实现以及如何快速地实现. 如何实现 实现设置系统状态栏颜色需要至少在Android 4.4.2(API 19)以上.这是因为,在这个版本以下,没有任何的A ...

  5. Flutter修改状态栏颜色以及字体颜色

    Flutter沉浸式状态栏 void main() { runApp(MyApp()); if (Platform.isAndroid) { // 以下两行 设置android状态栏为透明的沉浸.写在 ...

  6. IOS8修改状态栏颜色

    IOS8修改状态栏颜色 http://blog.csdn.net/suelu/article/details/43701913 使用了storyboard,直接view controller里面设置s ...

  7. Android状态栏颜色修改

    android状态栏颜色修改   状态栏颜色的修改在4.4和5.x环境下分别有不同的方式,低于4.4以下是不能修改的.   5.x环境下 方式一,状态栏将显示为纯净的颜色,没有渐变效果 /** * 状 ...

  8. Android 4.4及以上系统下应用的状态栏颜色渐变效果的实现

    上一篇转载的博文里讲到了怎么开启状态栏透明的效果,不过如果在有ActionBar的情况下,会出现状态栏透明而ActionBar横亘在状态栏和内容之间的丑陋情况,如下图: 通过百度之后,发现了GitHu ...

  9. cordova StatusBar插件的使用（设置手机状态栏颜色和页面头部颜色一致），做出和原生一样的页面效果体验

    cordova StatusBar插件的使用(设置手机状态栏颜色和页面头部颜色一致),做出和原生一样的页面效果体验设置设备状态栏背景颜色StatusBar.backgroundColorByHexSt ...

随机推荐

  1. android studio 转为eclipse快捷键后还存在的问题汇总

    提取局部变量:Ctrl+Alt+V 提取全局变量:Ctrl+Alt+F 提取方法:Shit+Alt+M 使用android studio 出现红色下划线代表有错误产生,eclipse中的Ctrl+1( ...

  2. Activtiy完全解析（一、Activity的创建过程）

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/52452218 本文出自:[openXu的博客]   在Android开发过程中,我们几乎每天 ...

  3. 查看oracle数据库的连接数以及用户 （转：http://blog.itpub.net/24558279/viewspace-752293/）

    select2.查询oracle的并发连接数4select3.查看不同用户的连接数6select4.查看所有用户:8select5.查看用户或角色系统权限(直接赋值给用户或角色的系统权限):10sel ...

  4. iOS 用RunTime来提升按钮的体验

    用RunTime来提升按钮的体验 载请标明出处:http://blog.csdn.net/sk719887916/article/details/52597388,作者:Ryan 经常处理按钮问题都是 ...

  5. Windows Python requests 详细模块安装方法

    据说requests是一个很吊的处理网络问题的第三方库.我折腾了半天.终于在Win上安装好了. 网上找到的都不详细,我是反复尝试才成功的. 还是自己写一个傻瓜式的指南吧: 1.安装 Setuptool ...

  6. Linux--Web应用服务和MySQL数据库

     (1)  WWW是一种交互式图形界面的Internet服务,具有强大的信息连接功能,是 人们在网上查找.浏览信息的主要手段.它使得成千上万的用户通过简单的 图形界面就可以获取各个大学.组织.公司 ...

  7. Python 键盘鼠标监听

    异想天开的想记录一下自己每天的键盘键位走向,于是就在网上搜索了一下相关的实现,然后就发现了一个第三方的库pyHook.封装的很好,我们只需要傻瓜式的调用里面的API就可以了. 下面是我在使用pyHoo ...

  8. 浅谈C++中的友元关系

    在封装中C++类数据成员大多情况是private属性:但是如果接口采用多参数实现肯定影响程序效率:然而这时候如果外界需要频繁访问这些私有成员,就不得不需要一个既安全又理想的"后门" ...

  9. Android的数字选择器NumberPicker-android学习之旅（三十七）

    我想说的话 今天晚上我依然在图书馆写博客,其实此刻我的没心激动而忐忑,因为明天就是足球赛的决赛,我作为主力球员压力很大,因对对方很强大,但是那又怎么样.so what...我不会停止写博客的 Numb ...

  10. 2015-2016机器人操作系统（ROS）及其应用暑期学校资料汇总 ROS Summer School 持续更新

    综合信息:2015    2016 课程资料:2015     2016 其他重要机器人.ROS相关学习活动 知乎关于ROS的话题 1 ROS的开发流程?http://www.zhihu.com/qu ...