简单几行代码让ViewPager实现垂直滑动效果

近几日有网友在群里提问：有没有大神做过ViewPager实现垂直滑动效果。其实这个问题实现很简单，下面就简单的讲一下实现步骤：

先来看一张效果图：（你会发现，切换ViewPager慢一些，会看到颜色过渡效果，so beautiful）

一、首先写一个类继承ViewPager，在构造方法里面设置viewpage的切换动画,然后重写onInterceptTouchEvent，对事件是否处理进行判断。

写一个类继承ViewPager， 具体代码如下：(掘金的MarkDown语法代码高亮做得还不够好，所以后面的都贴图了)

public class MyViewPager extends ViewPager {

	public MyViewPager(Context context) {
		this(context, null);
	}

	public MyViewPager(Context context, AttributeSet attrs) {
		super(context, attrs);
		//设置viewpage的切换动画,这里设置才能真正实现垂直滑动的viewpager
		setPageTransformer(true, new DefaultTransformer());
	}

	/**
	*拦截touch事件
	*/
	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
	    booleanintercept = super.onInterceptTouchEvent(swapEvent(ev));
	    swapEvent(ev);
	    return intercept;
	}

	@Override
	public boolean onTouchEvent(MotionEvent ev) {
	    return super.onTouchEvent(swapEvent(ev));
	}

	private MotionEvent swapEvent(MotionEvent event) {
		//获取宽高
		float width = getWidth();
		float height = getHeight();
		//将Y轴的移动距离转变成X轴的移动距离
		float swappedX = (event.getY() / height) * width;
		//将X轴的移动距离转变成Y轴的移动距离
		float swappedY = (event.getX() / width) * height;
		//重设event的位置
		event.setLocation(swappedX,swappedY);
		return event;
	}
	
	//下面还有其他代码。。。
}
复制代码

下面看看核心类PageTransformer，它是处理动画切换之类的。下面我自定义一个PageTransformer，重写transformPage方法，处理动画切换方向。

完整的代码如下图所示：

二、使用方法也很简单。

以下是MainActivity的代码：

以下是PagerAdapter的代码：

完整的MainActivity请看下图：

三、布局文件如下：

下面是view_one.xml，view_two，view_three也是一样的，只是text内容不一样。为了演示简单，这里只是用了TextView做演示。

ViewPager加载的布局内容

activity_main.xml代码如下：