Materail Design 入门（十一）——Palette 使用

Palette简介

Palette可以从一张图片中提取颜色，我们可以把提取的颜色融入到App UI中，可以使UI风格更加美观融洽。比如，我们可以从图片中提取颜色设置给ActionBar做背景颜色，这样ActionBar的颜色就会随着显示图片的变化而变化。

Palette可以提取的颜色如下:

• Vibrant （有活力的）
• Vibrant dark（有活力的 暗色）
• Vibrant light（有活力的 亮色）
• Muted （柔和的）
• Muted dark（柔和的 暗色）
• Muted light（柔和的 亮色）

Palette的使用

1、添加依赖

compile 'com.android.support:palette-v7:x.x.x'

2、如何获取Palette对象
Palette.Builder提供了同步和异步两种方式来生成Palette对象。

 // 同步
 Palette p = Palette.from(bitmap).generate();
 // 异步 
 Palette.from(bitmap).generate(new PaletteAsyncListener() {
     public void onGenerated(Palette p) {
         // Use generated instance
     }
 });

如果图片过大使用generate方法，可能会阻塞主线程，我们更倾向于使用generateAsync的方法，其实内部就是创建了一个AsyncTask。generateAsync方法需要一个PaletteAsyncListener对象用于监听生成完毕的回调。除了必须的Bitmap参数外，还可以传入一个numColors参数指定颜色数，默认是 16。
3、获取颜色值

Palette.getVibrantSwatch()
Palette.getDarkVibrantSwatch()
Palette.getLightVibrantSwatch()
Palette.getMutedSwatch()
Palette.getDarkMutedSwatch()
Palette.getLightMutedSwatch()

使用颜色，上面get方法中返回的是一个 Swatch 样本对象，这个样本对象是Palette的一个内部类，它提供了一些获取最终颜色的方法。

getPopulation(): 样本中的像素数量
getRgb(): 颜色的RBG值
getHsl(): 颜色的HSL值
getBodyTextColor(): 主体文字的颜色值
getTitleTextColor(): 标题文字的颜色值

通过 getRgb() 可以得到最终的颜色值并应用到UI中。getBodyTextColor() 和 getTitleTextColor() 可以得到此颜色下文字适合的颜色，这样很方便我们设置文字的颜色，使文字看起来更加舒服。
4、例子

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);  
}  

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

最终效果图如下：