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

定个小目标

我们要实现如下的效果,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;
}

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