因为最近有项目需求,需要实现一个类似淘宝的消息滚动条,如下图所示。
比如上面图上的这个糯米头条功能,通过Ui automator view 发现糯米是通过一个listview的方式实现的,但是我们可以意识到这其实就是一个我们最常用的轮播图,只不过他的方向是纵向的,那么我们只要将ViewPager滚动方向改成纵向的就可以了。
思路:
- 写一个VerticalViewPager
- 通过定时器让他不断滚动
但是,我们都知道ViewPager只提供了横向的滑动,其实github上有很多的开源的项目来实现VerticalViewPager,在stack overflow上也有人给出了我们方法:
http://stackoverflow.com/questions/13477820/android-vertical-viewpager;
我们就可以根据他的方法实现了。
- 实现viewpager 里的ViewPager.PageTransformer,代码如下:
private class MJNPageTransformer implements PageTransformer
{
@Override
public void transformPage(View page, float position)
{
if (position < -1)
{
page.setAlpha(0);
} else if (position<=1)
{
page.setAlpha(1);
page.setTranslationX(page.getWidth() * -position);
//set Y position to swipe in from top
float yPosition = position * page.getHeight();
page.setTranslationY(yPosition);
} else
{
page.setAlpha(0);
}
}
}
- 重写ViewPager里的onTouchEvent方法
private MotionEvent swapXY(MotionEvent ev) {
float width = getWidth();
float height = getHeight();
float newX = (ev.getY() / height) * width;
float newY = (ev.getX() / width) * height;
ev.setLocation(newX, newY);
return ev;
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev){
boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev);
return intercepted;
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapXY(ev));
}
setPageTransformer(true, new MJNPageTransformer()); setOverScrollMode(OVER_SCROLL_NEVER);
这样一个纵向的ViewPager就出来了,接下来就是我们平常写轮播图的方式了
-定时器自动轮播
mHandler.sendEmptyMessage(0);
ENDprivate Handler mHandler = new Handler(new Handler.Callback() { @Override public boolean handleMessage(Message msg) { if (mHandler.hasMessages(0)) { mHandler.removeMessages(0); } mHandler.postDelayed(runnable,3000); return true; } });
private Runnable runnable = new Runnable() { @Override public void run() { if (vp != null) { if (vp.getCurrentItem() == items.size() - 1 ) { vp.setCurrentItem(0); } else { vp.setCurrentItem(vp.getCurrentItem()+1); } mHandler.sendEmptyMessage(0); } } };