ArgbEvaluator一个计算颜色渐变值的类

ArgbEvaluator一个计算颜色渐变值的类

一.前言

为了提升应用的颜值，设计师会有这样的思路，增加应用的颜色复杂度。比如一个应用有着比较多的标签页面，每个标签页面有不同的主题颜色，当页面滑动切换的时候，我们希望标题的颜色也要随着标签页面的主题色更改，但是并不希望出现生硬的颜色转换，这个时候就需要我们去通过滑动的进程来计算不同标签主题色之间的渐变色。这个时候我们可以考虑使用ArgbEvaluator。

二.效果展示

1.文字描述

标签一的主题色是红色，标签二的主题色是绿色，当使用viewpager进行页面切换的时候，我们希望在滑动的过程中我们的标题栏会随着滑动的过程进行颜色的渐变。

2.效果

三.ArgbEvaluator的使用

• 定义颜色常量

private int PAGE_COLOR_ONE;
private int PAGE_COLOR_TWO;

• 初始化颜色常量

PAGE_COLOR_ONE = ContextCompat.getColor(this, R.color.colorPrimary);
PAGE_COLOR_TWO = ContextCompat.getColor(this, R.color.colorAccent);

• 使用ArgbEvaluator进行渐变颜色的计算

ArgbEvaluator argbEvaluator = new ArgbEvaluator();//渐变色计算类
int currentLastColor = (int) (argbEvaluator.evaluate(positionOffset, PAGE_COLOR_ONE, PAGE_COLOR_TWO));
//positionOffset:表示渐变度，取0.0F-1.0F之间某一值
//PAGE_COLOR_ONE:表示起始颜色值
//PAGE_COLOR_TWO:表示最终颜色值
//currentLastColor:表示由以上三个参数计算得到的渐变颜色值

四.实践

• 布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_main"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:titleTextColor="@color/colorWhite" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
LinearLayout>

• activity代码

import android.animation.ArgbEvaluator;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

/**
 * @author ZSC
 *         Created by ZSC on 2017/3/29.
 */

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private int PAGE_COLOR_ONE;
    private int PAGE_COLOR_TWO;
    private int PAGE_COLOR_THREE;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initColorDate();
        initToolbar();
        initPage();
    }

    private void initColorDate() {
        PAGE_COLOR_ONE = ContextCompat.getColor(this, R.color.colorPrimary);
        PAGE_COLOR_TWO = ContextCompat.getColor(this, R.color.colorAccent);
        PAGE_COLOR_THREE = ContextCompat.getColor(this, R.color.colorPrimaryDark);
    }

    /**
     * 初始化toolbar
     */
    private void initToolbar() {
        toolbar = (Toolbar) findViewById(R.id.toolbar_main);
        toolbar.setTitle(getString(R.string.main_title));
        setSupportActionBar(toolbar);
    }

    /**
     * 初始化viewPager
     */
    private void initPage() {
        ViewPager viewPager = (ViewPager) findViewById(R.id.vp_content);
        List itemList = new ArrayList<>();
        TextView tvPageOne = new TextView(this);
        tvPageOne.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        tvPageOne.setGravity(Gravity.CENTER);
        tvPageOne.setText("第一页");
        tvPageOne.setBackgroundColor(PAGE_COLOR_ONE);
        itemList.add(tvPageOne);
        TextView tvPageTwo = new TextView(this);
        tvPageTwo.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        tvPageTwo.setGravity(Gravity.CENTER);
        tvPageTwo.setText("第二页");
        tvPageTwo.setBackgroundColor(PAGE_COLOR_TWO);
        itemList.add(tvPageTwo);
        TextView tvPageThree = new TextView(this);
        tvPageThree.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        tvPageThree.setGravity(Gravity.CENTER);
        tvPageThree.setText("第三页");
        tvPageThree.setBackgroundColor(PAGE_COLOR_THREE);
        itemList.add(tvPageThree);
        viewPager.setAdapter(new ContentPagerAdapter(itemList));
        //为viewPager添加滑动事件监听
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //viewPager滑动过程中会回调该接口
                changeTitleColor(position, positionOffset);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private class ContentPagerAdapter extends PagerAdapter {
        List itemList;

        public ContentPagerAdapter(List itemList) {
            this.itemList = itemList;
        }

        @Override
        public int getCount() {
            if (itemList == null) {
                return 0;
            }
            return itemList.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(itemList.get(position));
            return itemList.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(itemList.get(position));
        }
    }

    /**
     * 修改整体颜色
     *
     * @param position
     * @param positionOffset
     */
    private void changeTitleColor(int position, float positionOffset) {
        switch (position) {
            case 0: {
                ArgbEvaluator argbEvaluator = new ArgbEvaluator();//渐变色计算类
                int currentLastColor = (int) (argbEvaluator.evaluate(positionOffset, PAGE_COLOR_ONE, PAGE_COLOR_TWO));
                //positionOffset:表示渐变度，取0.0F-1.0F之间某一值
                //PAGE_COLOR_ONE:表示起始颜色值
                //PAGE_COLOR_TWO:表示最终颜色值
                setToolbarColor(currentLastColor);
                setStatusBarColor(currentLastColor);
            }
            break;
            case 1: {
                ArgbEvaluator argbEvaluator = new ArgbEvaluator();
                int currentLastColor = (int) (argbEvaluator.evaluate(positionOffset, PAGE_COLOR_TWO, PAGE_COLOR_THREE));
                setToolbarColor(currentLastColor);
                setStatusBarColor(currentLastColor);
            }
            break;
            case 2: {
                setStatusBarColor(PAGE_COLOR_THREE);
            }
            break;
        }
    }

    /**
     * 给状态栏设置颜色
     * 安卓系统4.4以上可用
     * 不向下兼容
     *
     * @param color
     */
    private void setStatusBarColor(int color) {
        try {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                Window window = this.getWindow();
                window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
                window.setStatusBarColor(color);
                //window.setNavigationBarColor(activity.getResources().getColor(colorResId));
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private void setToolbarColor(int color) {
        if (toolbar != null) {
            toolbar.setBackgroundColor(color);
        }
    }
}

• 源码
  https://github.com/FlyMyFish/ExampleMoudle/