Android -- 知乎客户端淡入淡出的Banner的一种实现

新版知乎客户端发现页面上有一个淡入淡出的banner

最初的想法就是拿viewpager实现，重写protected void onPageScrolled(int position, float offset, int offsetPixels)方法，但是应该我得拿到所有page，去改变两个page的不同状态。转念一想，ViewPager有一个PageTransformer，不如拿这个去实现

QQ截图20161128125301.png

position返回的是front-and-center，可以理解为0是中心0~1是右边的page；-1~0是左边的page

大概的代码会是
左边的page得叠加他的位置，让他看起来会向左移动， 右边的page应该先移动到位，然后阻止他的移动，最后改变两个page的透明度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
int pageWidth = view.getWidth();

if (position <= 1) {
    if (position < 0) {
        view.setTranslationX( - pageWidth * position);
    } else {
        view.setTranslationX(pageWidth);
        view.setTranslationX( - pageWidth * position);
    }
    float alpha = Math.max(0, 1 - Math.abs(position));
    view.setAlpha(alpha);
} else {
    view.setAlpha(0f);
}

这就完成了viewpager的淡入淡出，感觉比重写onPageScrolled方便