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部分的代码:

 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);  
 }  
 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行。他是这么干的:

 /** 
  * 界面颜色的更改 
  */ 
 @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);  
 }  
 /** 
  * 界面颜色的更改 
  */ 
 @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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏项勇

笔记20 | 学习整理开源APP(BaseAnimation)程序源码“中的通讯录效果(一)

1645
来自专栏Felix的技术分享

Android ListView头部视差控件

1363
来自专栏androidBlog

Android 圆形头像的两种实现方式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

1130
来自专栏刘晓杰

使用TabLayout遇到的几个坑

3576
来自专栏developerHaoz 的安卓之旅

Android 带你撸一个好玩的 DoodleView(涂鸦)

可以看到这个这个自定义 View 的功能还是很丰富的,无论是设置画笔的形状、颜色、粗细,还是进行重置和保存,该有的 API,基本都已经实现了。有需要的读者直接 ...

993
来自专栏lzj_learn_note

Android TextView实现查看全部和收起功能

在工作遇到上图所示的一个小需求,将“查看全部”的提示连在原文的后面,使用一个textview显示。实现该功能大致步骤:

6847
来自专栏androidBlog

自定义Drawable实现圆角图片和圆形图片

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

1472
来自专栏Android知识点总结

1-VII-RecyclerView基本使用

1033
来自专栏Android干货园

Android源码解析-仿今日头条PagerSlidingTabStrip滑动页面导航效果

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/48...

3672
来自专栏向治洪

Android Material Design之Toolbar与Palette实践

前言 我们都知道Marterial Design是Google推出的全新UI设计规范,如果对其不太了解的可以看下:Material design非官方中文指导手...

2218

扫码关注云+社区