android viewpager 竖屏滑动效果

Viewpager 横向滑动效果系统就自带了很多种，比如这个

效果

那如果做成竖屏的这种效果呢 。我百度过很多，效果都不是很好，有的代码特别多而且存在很多问题。我结合了以前别人的代码现在来教大家个简单的实现过程。

首先自定义Viewpager 是肯定必不可少的了

public class VerticalViewPager extends ViewPager {
    private OnItemClickListener mOnItemClickListener;

    public VerticalViewPager(Context context) {
        super(context);
        init();
    }

    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
        setup();
    }

    private void init() {
        // The majority of the magic happens here
        setPageTransformer(true, new VerticalPageTransformer());
        // The easiest way to get rid of the overscroll drawing that happens on the left and right
        setOverScrollMode(OVER_SCROLL_NEVER);
    }
      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 touch coordinates to original reference frame for any child views
        return intercepted;
    }

    private float scaleY ;
    @Override
    public boolean onTouchEvent(MotionEvent ev) {

        System.out.println("----------getY" + ev.getY());
        System.out.println("----------scaleY" + scaleY);
        if (ev.getAction()==MotionEvent.ACTION_MOVE){
        }
        if (ev.getAction()==MotionEvent.ACTION_DOWN){
            scaleY = ev.getY();
        }
        if (ev.getAction()==MotionEvent.ACTION_UP){
            if (scaleY == ev.getY()){
                System.out.println("------------------======");
                scaleY= 0;
                return  false;
            }
        }
        try {
            return super.onTouchEvent(swapXY(ev));
        }catch (Exception e){
        }
        return true;
    }
    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        mOnItemClickListener = onItemClickListener;
    }

    public interface OnItemClickListener {
        void onItemClick(int position);
    }
    private void setup() {
        final GestureDetector tapGestureDetector = new    GestureDetector(getContext(), new TapGestureListener());

        setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                tapGestureDetector.onTouchEvent(event);
                return false;
            }
        });
    }
    private class TapGestureListener extends GestureDetector.SimpleOnGestureListener {

        @Override
        public boolean onSingleTapConfirmed(MotionEvent e) {
            if(mOnItemClickListener != null) {
                mOnItemClickListener.onItemClick(getCurrentItem());
            }
            return true;
        }
    }

}

要实现动画效果的核心就在 setPageTransformer(true, new VerticalPageTransformer());，大家都知道这个是设置Viewpager 设置动画的方法 ，那么要实现这个如果用系统自带的切换动画效果的话 肯定是不符合Viewpager 竖屏滑动的效果的。所以自定义PageTransformer 就是必然的趋势了

private class VerticalPageTransformer implements ViewPager.PageTransformer {
       private  float MIN_SCALE = 0.5f;

        @Override
        public void transformPage(View view, float position) {
            if (position < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
                view.setAlpha(0);

            }else if (position <= 0) { // [-1,1]
                view.setAlpha(1 + position);
                view.setTranslationX(-view.getWidth() * position);
                view.setPivotY( view.getMeasuredHeight());
                view.setPivotX( view.getMeasuredWidth()/2);
                view.setTranslationY( position * view.getHeight());
                float scaleFactor = MIN_SCALE + (1 - MIN_SCALE)
                        * (1 - Math.abs(position));
                view.setScaleX(scaleFactor);
                view.setScaleY(scaleFactor);

            }
            else if (position <= 1) { // [-1,1]
                view.setAlpha(1);
                view.setTranslationX(-view.getWidth() * position);
                view.setTranslationY( position * view.getHeight());
                float scaleFactor = MIN_SCALE + (1 - MIN_SCALE)
                        * (1 - Math.abs(position));

            } else { // (1,+Infinity]
                view.setAlpha(0);
                view.setTranslationY( position * view.getHeight());
            }
        }

    }

重写transformPage 方法。然后得到如上gif 向左旋转90的效果，剩下的代码你们看看也就知道是item点击事件与滑动事件的监听。所以就不细讲了