知乎客户端淡入淡出的Banner的一种实现
2016-11-28 本文已影响91人
初见破晓
新版知乎客户端发现页面上有一个淡入淡出的banner
最初的想法就是拿viewpager实现,重写protected void onPageScrolled(int position, float offset, int offsetPixels)方法,但是应该我得拿到所有page,去改变两个page的不同状态。转念一想,ViewPager有一个PageTransformer,不如拿这个去实现
QQ截图20161128125301.pngposition返回的是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方便