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

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

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

知乎客户端淡入淡出的Banner的一种实现_第1张图片
QQ截图20161128125301.png

position返回的是front-and-center,可以理解为0是中心01是右边的page;-10是左边的page

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

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方便

你可能感兴趣的:(知乎客户端淡入淡出的Banner的一种实现)