ViewPager通过PageTransformer实现切换时背景色的渐变

发表于 | 阅读次数：
| 本文字数： 3.8k | 阅读时长 ≈ 3 分钟

定个小目标

我们要实现如下的效果，ViewPager正中的page显示为绿色，其余两边的显示为蓝色。中间page向左右两边切换时会从绿色慢慢过渡到蓝色，同理两边的page向中间切换时颜色也会慢慢过渡，而不是直接跳变。

PageTransformer

为了实现以上效果我们要借助PagerTransfromer，所以有必要简单介绍下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * A PageTransformer is invoked whenever a visible/attached page is scrolled.
 * This offers an opportunity for the application to apply a custom transformation
 * to the page views using animation properties.
 *
 * <p>As property animation is only supported as of Android 3.0 and forward,
 * setting a PageTransformer on a ViewPager on earlier platform versions will
 * be ignored.</p>
 */
public interface PageTransformer {
    /**
     * Apply a property transformation to the given page.
     *
     * @param page Apply the transformation to this page
     * @param position Position of page relative to the current front-and-center
     *                 position of the pager. 0 is front and center. 1 is one full
     *                 page position to the right, and -1 is one page position to the left.
     */
    void transformPage(View page, float position);
}

PageTransformer很简单，就只有一个transformPage方法。
第一个参数是我们要变换颜色的page。

重点看第二个参数，英语好的话直接看注释说得很明白，意思就是我们当前要变化的页面当前位置的中心距离pager中心的距离，比如当前处于中心的page的position就是0，右边第一个page的position=1，右边第二个page的position为2，左边第一个page的position=-1，左边第二个page的position=-2，以此类推。

当然position的值不可能一直是整数，比如当处于中间位置的page向右边切换到右边第一个位置时，position的值会从0变化到1，1就是表示一个page的宽度，从中间位置移到右边第一个位置就是移动了一个page的宽度。如果向右移动到一半，那么position就是0.5。

实现的思路

只有中间位置是绿色，其余两边的都是蓝色，所以可以确定的是position=0，肯定是绿色，position的绝对值Math.abs(position)>=1一定是蓝色，剩下的我们就是要处理-1<position<1这些位置的渐变色，也就是中间位置到左右两边第一个page的位置。

中间位置到左右两边第一个page的位置的position取绝对值的值范围从0-1，其实就是0%-100%，我们可以用这个值当做颜色的变化率，0就是绿色，值越大表示越往蓝色变化，1就表示变成蓝色了。

另一个难点就是如何实现颜色的渐变。我们知道颜色由RGB表示，有三个颜色的分量分别表示红绿蓝。我们把起始颜色和最终颜色的三个颜色分量分别取出来，分别计算三个颜色分量的差值，最后用差值乘以变化率再加上初始颜色分量就是当前的颜色分量值，把三个当前颜色分量的值拼起来就是当前的颜色值。

初始颜色：#00ff00
最终颜色：#0000ff
初始颜色分量：红00，绿ff(255)，蓝00
最终颜色分量：红00，绿00，蓝ff(255)
颜色分量差值：红00，绿-255，蓝255

假设我们要计算position=0.5位置的颜色
当前红色分量=0+0.500=0=0x00
当前绿色分量=255+0.5(-255)=127=0x7f
当前蓝色分量=0+0.5*255=127=0x7f

所以position=0.5时当前的颜色为#007f7f。

代码实现

一个很简单的功能说了这么多，就是为了让大家更好的理解，如果直接放代码看了坑能会一头雾水

设置PagerTransfromer

1
2
3
4
5
6
7
8
9
10
11
12
13
mViewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
    @Override
    public void transformPage(@NonNull View view, float v) {
        // 取绝对值
        v = Math.abs(v);
        // 超过左右两边第一个位置的page都设置成蓝色
        if (v > 1) {
            v = 1;
        }
        String color = transColor("#00ff00", "#0000ff", v);
        view.setBackgroundColor(Color.parseColor(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
/**
 * 根据起始颜色、最终颜色和变化率计算当前颜色
 * @param start 起始颜色
 * @param end 最终颜色
 * @param rate 变化率
 * @return 当前颜色
 */
private static String transColor(String start, String end, float rate) {
    // 获取初始颜色的RGB分量
    String startR = start.substring(1, 3);
    String startG = start.substring(3, 5);
    String startB = start.substring(5, 7);
    // 获取最终颜色的颜色分量
    String endR = end.substring(1, 3);
    String endG = end.substring(3, 5);
    String endB = end.substring(5, 7);
    // 计算初始颜色的RGB分量十进制值
    int startRI = Integer.parseInt(startR, 16);
    int startGI = Integer.parseInt(startG, 16);
    int startBI = Integer.parseInt(startB, 16);
    // 计算最终颜色的RGB分量十进制值
    int endRI = Integer.parseInt(endR, 16);
    int endGI = Integer.parseInt(endG, 16);
    int endBI = Integer.parseInt(endB, 16);
    // 计算当前颜色分量
    int curRI = (int) (startRI + (endRI - startRI)*rate);
    int curGI = (int) (startGI + (endGI - startGI)*rate);
    int curBI = (int) (startBI + (endBI - startBI)*rate);
    // 转成16进制
    String curR = String.format("%02x", curRI);
    String curG = String.format("%02x", curGI);
    String curB = String.format("%02x", curBI);
    // 拼成颜色码
    return "#" + curR + curG + curB;
}

如果喜欢我的文章，可以扫描以下二维码关注我的微信公众号，我会定期发布最新的文章。
关注我的微信，回复背景色渐变获取本文的完整代码。