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

一.前言

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

二.效果展示

1.文字描述

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

2.效果

三.ArgbEvaluator的使用

• 定义颜色常量

private int PAGE_COLOR_ONE;
private int PAGE_COLOR_TWO;
 
 
1
2

• 初始化颜色常量

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

• 使用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:表示由以上三个参数计算得到的渐变颜色值
 
 
1
2
3
4
5
6

四.实践

• 布局文件

<?xml version="1.0" encoding="utf-8"?>
<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>
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

• 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<TextView> 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<TextView> itemList;

        public ContentPagerAdapter(List<TextView> 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);
        }
    }
}
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189

• 源码
  https://github.com/FlyMyFish/ExampleMoudle/
• 原文地址
  https://blog.csdn.net/u013581141/article/details/68063469