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

定个小目标

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

PageTransformer

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

/*** 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.**

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.

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

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

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

实现的思路

只有中间位置是绿色&＃xff0c;其余两边的都是蓝色&＃xff0c;所以可以确定的是position&＃61;0&＃xff0c;肯定是绿色&＃xff0c;position的绝对值Math.abs(position)>&＃61;1一定是蓝色&＃xff0c;剩下的我们就是要处理-1

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

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

初始颜色&＃xff1a;#00ff00
最终颜色&＃xff1a;#0000ff
初始颜色分量&＃xff1a;红00&＃xff0c;绿ff(255)&＃xff0c;蓝00
最终颜色分量&＃xff1a;红00&＃xff0c;绿00&＃xff0c;蓝ff(255)
颜色分量差值&＃xff1a;红00&＃xff0c;绿-255&＃xff0c;蓝255

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

所以position&＃61;0.5时当前的颜色为#007f7f。

代码实现

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

设置PagerTransfromer

mViewPager.setPageTransformer(true, new ViewPager.PageTransformer() {&＃64;Overridepublic void transformPage(&＃64;NonNull View view, float v) {// 取绝对值v &＃61; Math.abs(v);// 超过左右两边第一个位置的page都设置成蓝色if (v > 1) {v &＃61; 1;}String color &＃61; transColor("#00ff00", "#0000ff", v);view.setBackgroundColor(Color.parseColor(color));}
});


计算当前颜色值

/*** 根据起始颜色、最终颜色和变化率计算当前颜色* &＃64;param start 起始颜色* &＃64;param end 最终颜色* &＃64;param rate 变化率* &＃64;return 当前颜色*/
private static String transColor(String start, String end, float rate) {// 获取初始颜色的RGB分量String startR &＃61; start.substring(1, 3);String startG &＃61; start.substring(3, 5);String startB &＃61; start.substring(5, 7);// 获取最终颜色的颜色分量String endR &＃61; end.substring(1, 3);String endG &＃61; end.substring(3, 5);String endB &＃61; end.substring(5, 7);// 计算初始颜色的RGB分量十进制值int startRI &＃61; Integer.parseInt(startR, 16);int startGI &＃61; Integer.parseInt(startG, 16);int startBI &＃61; Integer.parseInt(startB, 16);// 计算最终颜色的RGB分量十进制值int endRI &＃61; Integer.parseInt(endR, 16);int endGI &＃61; Integer.parseInt(endG, 16);int endBI &＃61; Integer.parseInt(endB, 16);// 计算当前颜色分量int curRI &＃61; (int) (startRI &＃43; (endRI - startRI)*rate);int curGI &＃61; (int) (startGI &＃43; (endGI - startGI)*rate);int curBI &＃61; (int) (startBI &＃43; (endBI - startBI)*rate);// 转成16进制String curR &＃61; String.format("%02x", curRI);String curG &＃61; String.format("%02x", curGI);String curB &＃61; String.format("%02x", curBI);// 拼成颜色码return "#" &＃43; curR &＃43; curG &＃43; curB;
}


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