Palette调色板的演示

Palette的翻译是调色板，也就是对于颜色的控制。

具体有什么特效是可以让Palette发挥出它的光彩呢，看以下的动图。
palette动图

Palette强大的地方在于可以抽取图片当中突出的颜色，然后设置到状态栏，标题栏等地方，使之整体的主题随之变动，非常协调。以前用天天动听的时候就存在这种效果，换歌的时候歌星的专辑图改变了，整个界面的颜色会变成专辑图当中突出的颜色。那时候就一直觉得很神奇，现在发现实现起来却是这么的简单。（从诺基亚开始，一直用天天动听的用户）

使用之前，我们先引入对应的依赖包：

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

Palette可以提取的颜色分类分别是：
- Vibrant （有活力的）
- Vibrant dark（有活力的暗色）
- Vibrant light（有活力的亮色）
- Muted （柔和的）
- Muted dark（柔和的暗色）
- Muted light（柔和的亮色）

使用方法：

获得一张图片突出的颜色：

同步

/**
     * 根据Palette提取的颜色，修改tab和toolbar以及状态栏的颜色
     */
    private void changeTopBgColor2(int position) {
        // 用来提取颜色的Bitmap
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.pic_one);
        // Palette的部分
        Palette.Builder builder = Palette.from(bitmap);
        Palette palette= builder.generate();

        //获取到充满活力的这种色调
        Palette.Swatch vibrant = palette.getVibrantSwatch();
        //根据调色板Palette获取到图片中的颜色设置到toolbar和tab中背景，标题等，使整个UI界面颜色统一
        mTabLayout.setBackgroundColor(vibrant.getRgb());
        mTabLayout.setSelectedTabIndicatorColor(colorBurn(vibrant.getRgb()));
        toolbar.setBackgroundColor(vibrant.getRgb());

        if (android.os.Build.VERSION.SDK_INT >= 21) {
            Window window = getWindow();
            window.setStatusBarColor(colorBurn(vibrant.getRgb()));
            window.setNavigationBarColor(colorBurn(vibrant.getRgb()));
        }
    }

异步

/**
     * 根据Palette提取的颜色，修改tab和toolbar以及状态栏的颜色
     */
    private void changeTopBgColor(int position) {
        // 用来提取颜色的Bitmap
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), myViewPagerAdapter.getItem(position)
                .getBackgroundBitmapPosition(position));
        // Palette的部分
        Palette.Builder builder = Palette.from(bitmap);
        builder.generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                //获取到充满活力的这种色调
                Palette.Swatch vibrant = palette.getVibrantSwatch();
                //根据调色板Palette获取到图片中的颜色设置到toolbar和tab中背景，标题等，使整个UI界面颜色统一
                mTabLayout.setBackgroundColor(vibrant.getRgb());
                mTabLayout.setSelectedTabIndicatorColor(colorBurn(vibrant.getRgb()));
                toolbar.setBackgroundColor(vibrant.getRgb());

                if (android.os.Build.VERSION.SDK_INT >= 21) {
                    Window window = getWindow();
                    window.setStatusBarColor(colorBurn(vibrant.getRgb()));
                    window.setNavigationBarColor(colorBurn(vibrant.getRgb()));
                }
            }
        });
    }

接下来会用一个例子来说明使用方法，一般都是搭配Toolbar+TabLayout+ViewPager+Fragment这些来使用的。

主界面的布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tablayout_coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/tablayout_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppBaseTheme">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tablayout_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:navigationIcon="@mipmap/ic_launcher">

        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#26c6da"
            app:tabSelectedTextColor="#ff0000">

        </android.support.design.widget.TabLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/tablayout_viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <!--@string/appbar_scrolling_view_behavior-->

    </android.support.v4.view.ViewPager>


</android.support.design.widget.CoordinatorLayout>

代码实现效果：

扫描二维码关注公众号，回复： 2811731 查看本文章

package com.voctex.ui.tablayout.view;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.graphics.Palette;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Window;

import com.voctex.R;
import com.voctex.base.BaseActivity;
import com.voctex.ui.tablayout.adapter.MyViewPagerAdapter;

/**
 * Created by mac_xihao on 17/6/28.
 */
public class TabLayoutUIA extends BaseActivity {

    private MyViewPagerAdapter myViewPagerAdapter;
    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.uia_tablayout_main);

        initView();
    }

    private void initView() {

        final CoordinatorLayout coordinatorLayout = ((CoordinatorLayout) findViewById(R.id.tablayout_coordinator));
        AppBarLayout appBarLayout = ((AppBarLayout) findViewById(R.id.tablayout_appbar));
        toolbar = ((Toolbar) findViewById(R.id.tablayout_toolbar));
        mTabLayout = ((TabLayout) findViewById(R.id.tablayout_tabs));
        mViewPager = ((ViewPager) findViewById(R.id.tablayout_viewpager));

        toolbar.setTitle("TabLayout界面");
        setSupportActionBar(toolbar);
        //要在setSupportActionBar方法之后调用才会才生效
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

        mTabLayout.addTab(mTabLayout.newTab().setText("TabOne"));//给TabLayout添加Tab
        mTabLayout.addTab(mTabLayout.newTab().setText("TabTwo"));
        mTabLayout.addTab(mTabLayout.newTab().setText("TabThree"));
        mTabLayout.setupWithViewPager(mViewPager);
        //给TabLayout设置关联ViewPager，如果设置了ViewPager，那么ViewPagerAdapter中的getPageTitle()方法返回的就是Tab上的标题

        myViewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager());
        myViewPagerAdapter.addFragment(OneTabLayoutUIF.newInstance(), "TabOne");//添加Fragment
        myViewPagerAdapter.addFragment(TwoTabLayoutUIF.newInstance(), "TabTwo");
        myViewPagerAdapter.addFragment(ThrTabLayoutUIF.newInstance(), "TabThree");
        mViewPager.setAdapter(myViewPagerAdapter);//设置适配器
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                changeTopBgColor(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        changeTopBgColor(0);

    }

    /**
     * 根据Palette提取的颜色，修改tab和toolbar以及状态栏的颜色
     */
    private void changeTopBgColor(int position) {
        // 用来提取颜色的Bitmap
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), myViewPagerAdapter.getItem(position)
                .getBackgroundBitmapPosition(position));
        // Palette的部分
        Palette.Builder builder = Palette.from(bitmap);
        builder.generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                //获取到充满活力的这种色调
                Palette.Swatch vibrant = palette.getVibrantSwatch();
                //根据调色板Palette获取到图片中的颜色设置到toolbar和tab中背景，标题等，使整个UI界面颜色统一
                mTabLayout.setBackgroundColor(vibrant.getRgb());
                mTabLayout.setSelectedTabIndicatorColor(colorBurn(vibrant.getRgb()));
                toolbar.setBackgroundColor(vibrant.getRgb());

                if (android.os.Build.VERSION.SDK_INT >= 21) {
                    Window window = getWindow();
                    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);
    }

}

这里的Fragment都需要继承于PaletteUIF，其实也就是几行代码而已：

package com.voctex.ui.tablayout.view;

import com.voctex.R;
import com.voctex.base.BaseFragment;

/**
 * Created by mac_xihao on 17/7/11.
 * PaletteUIF
 */
public abstract class PaletteUIF extends BaseFragment {

    private static final int[] drawables = {R.mipmap.pic_one, R.mipmap.pic_two, R.mipmap.pic_four, R.mipmap
            .pic_three, R.mipmap.pic_five};

    /**
     * 提供当前Fragment的主色调的Bitmap对象,供Palette解析颜色
     *
     * @return
     */
    public static int getBackgroundBitmapPosition(int selectViewPagerItem) {
        return drawables[selectViewPagerItem];
    }
}

演示到此为止，具体代码可以直接导下我的项目进行查看。
https://github.com/voctex/Kepler

QQ：361561789
可事可以直接加Q联系

Palette调色板的演示

使用方法：

猜你喜欢