android 实现淘宝消息滚动条

因为最近有项目需求，需要实现一个类似淘宝的消息滚动条，如下图所示。

比如上面图上的这个糯米头条功能，通过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

setPageTransformer(true, new MJNPageTransformer());
setOverScrollMode(OVER_SCROLL_NEVER);
这样一个纵向的ViewPager就出来了，接下来就是我们平常写轮播图的方式了

-定时器自动轮播

mHandler.sendEmptyMessage(0);

private 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);
            }
        }
    };

END