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. /* 菜单的监听可以在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
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. /* 菜单的监听可以在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
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. 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
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. 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 2.2 新功能详解

    Tamic /文 -译 http://blog.csdn.net/sk719887916/article/details/52672688 Android的Studio 2.2 已经可以在官网下载了. ...

  2. 等价于n*n的矩阵,填写0,1,要求每行每列的都有偶数个1 (没有1也是偶数个),问有多少种方法。

    #define N 4 /* * 公式: * f(n) = 2^((n - 1) ^2) */ int calWays(int n) { int mutiNum = (n - 1) * (n - 1) ...

  3. Java异常处理机制难点解惑-用代码说话

    是否需要看这篇文章? 下面的例子中,如果正常执行返回值多少? 如果出现了ArithmeticException返回值多少? 如果出现非ArithmeticException(如NullPointerE ...

  4. EBS开发之环境迁移

    (一)环境迁移说明 1.1   迁移 由于EBS系统开发复杂,一般项目实施都是使用三套或者三套以上的系统,一套作为开发使用系统,一套作为集成测试系统,一套就是企业用的正式环境系统,在项目实施过程中对一 ...

  5. Java命名和目录接口——JNDI

    JNDI即Java命名和目录接口(JavaNaming and Directory Interface),它属于J2EE规范范畴,是J2EE的核心技术之一,提供了一组接口.类和关于命名空间的概念.JD ...

  6. springMVC源码分析--HandlerInterceptor拦截器(一)

    对SpringMVC有所了解的人肯定接触过HandlerInterceptor拦截器,HandlerInterceptor接口给我们提供了3个方法: (1)preHandle: 在执行controll ...

  7. 如何将dtb反编译成dts

    点击打开链接 由于device tree会将一个node的信息分布在各个文件里,查看起来很不方便,比如如下例子,ldb在三个文件中都有配置: imx6qdl-sabresd.dtsi: [plain] ...

  8. Java之String类型详解

    字符串的特点 A:字符串一旦被赋值,就不能改变. 注意:这里指的是字符串的内容不能改变,而不是引用不能改变. B:字面值作为字符串对象和通过构造方法创建对象的不同 String s = new Str ...

  9. Linux网络和进程管理

     1) 计算机网络是通过外围的设备和连接,将分布在相同或不同区域的多台计算机 连接在一起所形成的集合.网络中的计算机实现彼此间互相通信,并且可以共 同使用硬件.软件和数据资源,实现资源共享.Lin ...

  10. 在非ViewController中显示AlertController的方法

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 以前我们可以在任何类中使用UIAlertView的show实例 ...