最近的需求中，需要用到一个横向、竖向同时可滚动的 ViewPager，记住，是横向、竖向同时滚动，不是横竖切换。我想了想，难点在于竖向。对于竖向的 ViewPager，我似乎记得 Jake Wharton 大神写过一个叫 DirectionalViewPager 的框架，它基本上算是在 ViewPager 源码上改的，但效果欠佳且早已没人维护，所以不予采用。
过了几秒，不知怎么的，脑子里突然闪现了一个想法：要使得 ViewPager 竖向滑动，把 Touch 事件交换一下不就得了，也就是将 MotionEvent 的 x 坐标转换成 y 坐标，将 y 坐标转换成 x 坐标。这样，从下往上滑就转换成了从右往左滑。而从右往左滑时， ViewPager 会切换到下一页。此时，只要给 ViewPager 设置一个竖向切换的 PageTransfromer，就成了一个竖向的 ViewPager 了。
我激动了一小会儿，正跃跃欲试，但懒癌又犯了，心想，“我能想到，估计别人早想到了”，于是还是打算先在 GitHub 上找找，看有没有基于同样思路的代码。果不其然，有个日本伙计 10 个月前就搞出来了，代码很短(我做了精简)，大家膜拜下吧：
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(Context context) {
super(context);
}
public VerticalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
private MotionEvent swapTouchEvent(MotionEvent event) {
float width = getWidth();
float height = getHeight();
event.setLocation((event.getY() / height) * width, (event.getX() / width) * height);
return event;
}
@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
return super.onInterceptTouchEvent(swapTouchEvent(MotionEvent.obtain(event)));
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapTouchEvent(MotionEvent.obtain(ev)));
}
}
嗯，实在是妙啊。不过还需要在外部设置一下 overScrollMode 和 PageTransfromer，以免看出破绽：
mVerticalViewPager.setPageTransformer(true, new VerticalTransformer());
mVerticalViewPager.setOverScrollMode(OVER_SCROLL_NEVER);
GitHub 地址 -> VerticalViewPager
双向的 ViewPager
这里的双向不是指一个 ViewPager 既可以横向切换，也可以竖向切换（如果你想要，把上面的代码稍作修改即可），而是一个横向的 ViewPager 里，每一页都是一个 VerticalViewPager，你可以理解为：外面的 ViewPager 用于切换分类，里面的 ViewPager 用于切换分类中的 Item。
如果你简单的使用 ViewPager 嵌套 VerticalViewPager，实际的效果是，里面的 ViewPager 可竖向切换，但外面的 ViewPager 不能横向切换。原因是里面的 ViewPager 将事件消耗掉了，即便里面的 ViewPager 没有可横向滚动的控件（HorizontalScrollView、横向 RecyclerView 等）。解决办法是重写外面的 ViewPager 的 onInterceptTouchEvent 方法，如果检测到横向滚动，则将事件拦截。代码如下：
public class HorizontalViewPager extends ViewPager {
private float mDownX;
private float mDownY;
private float mTouchSlop;
public HorizontalViewPager(Context context) {
super(context);
init(context);
}
public HorizontalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context) {
mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
}
@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
boolean intercept = super.onInterceptTouchEvent(event);
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mDownX = x;
mDownY = y;
break;
case MotionEvent.ACTION_MOVE:
float dx = Math.abs(x - mDownX);
float dy = Math.abs(y - mDownY);
if (!intercept && dx > mTouchSlop && dx * 0.5f > dy) {
intercept = true;
}
break;
default:
break;
}
return intercept;
}
}
当然，这段代码只适用于里面的 ViewPager 不含可横向滚动的控件的情况，如果有，则处理起来就相对麻烦一些，大致的思路是在 onInterceptTouchEvent 里，先将 move 事件 dispatch 给当前页。再根据 (!disallowIntercept && mTouchSlop && dx * 0.5f > dy) 决定是否拦截事件。有兴趣的同学可以试一下。
最后，附上效果图：
好了，就分享这些。
推广：一键直达我的最新开源项目 MagicIndicator。
