滑动冲突解决-ViewPager

Posted on 2015-10-15 Edited on 2017-03-27 In Android开发经验 Disqus:

ViewPager 作为一个横向滚动的控件, 在 ViewGroup 中嵌套时会有一些可以优化的细节体验.

案例一: `ViewPager` 与 `SwipeRefreshLayout`

问题说明

当 SwipeRefreshLayout 中有 ViewPager 控件, 两者的滑动会相互冲突. 具体表现为 ViewPager 的左右滑动不顺畅, 容易被 SwipeRefreshLayout 拦截(即出现刷新的 View ).
问题原因:

ViewPager 本身是处理了滚动事件的冲突, 它在横向滑动时会调用 requestDisallowInterceptTouchEvent() 方法使父控件不拦截当前的 Touch 事件序列. 但是 SwipeRefreshLayout 的 requestDisallowInterceptTouchEvent() 方法置空了, 所以仍然会拦截当前的 Touch 事件序列.
问题分析:

为什么 SwipeRefreshLayout 的 requestDisallowInterceptTouchEvent() 方法什么都不做?
- 首先 SwipeRefreshLayout 继承自 ViewGroup .
- 在 requestDisallowInterceptTouchEvent() 方法置空的情况下, 用户可以从底部下拉刷新一次拉出 LoadingView (即手指不需要离开屏幕).
- 如果方法调用 ViewGroup 的 requestDisallowInterceptTouchEvent() 方法, 可以解决 ViewPager的兼容问题, 但是用户在界面底部下拉至头部后, 无法继续下拉, 需要手指放开一次才能拉出 LoadingView .
目标分析:

那么为了更加顺滑地滚动, 想要的效果当然是一次性拉出 LoadingView **.既然 ViewPager 在左右滑动时才会调用 requestDisallowInterceptTouchEvent() 方法, 那么 SwipeRefreshLayout **只应该在上下滑动时才拦截 Touch 事件.

代码具体逻辑如下:

记录是否调用了 requestDisallowInterceptTouchEvent() 方法,并且设置为true.
在 SwipeRefreshLayout 中判断是否是上下滑动.
如果同时满足1,2, 则调用 super.requestDisallowInterceptTouchEvent(true) 拦截事件.
否则调用 super.requestDisallowInterceptTouchEvent(false) .

注意:因为 ViewGroup 的 requestDisallowInterceptTouchEvent 方法返回 true 后, 接下来的 Touch 事件在不会再传递到 onInterceptTouchEvent()方法中, 所以需要在 dispatchTouchEvent() 方法中判断是否为上下滑动.

实现代码(部分):

  //非法按键
  private static final int INVALID_POINTER = -1;

  //dispatch方法记录第一次按下的x
  private float mInitialDisPatchDownX;

  //dispatch方法记录第一次按下的y
  private float mInitialDisPatchDownY;

  //dispatch方法记录的手指
  private int mActiveDispatchPointerId = INVALID_POINTER;

  //是否请求拦截
  private boolean hasRequestDisallowIntercept = false;

  @Override
  public void requestDisallowInterceptTouchEvent(boolean b) {
      hasRequestDisallowIntercept = b;
      // Nope.
  }

  @Override
  public boolean dispatchTouchEvent(MotionEvent ev) {
      switch (ev.getAction()) {
          case MotionEvent.ACTION_DOWN:
              mActiveDispatchPointerId = MotionEventCompat.getPointerId(ev, 0);
              final float initialDownX = getMotionEventX(ev, mActiveDispatchPointerId);
              if (initialDownX != INVALID_POINTER) {
                  mInitialDisPatchDownX = initialDownX;
              }
              final float initialDownY = getMotionEventY(ev, mActiveDispatchPointerId);
              if (mInitialDisPatchDownY != INVALID_POINTER) {
                  mInitialDisPatchDownY = initialDownY;
              }
              break;
          case MotionEvent.ACTION_MOVE:
              if (hasRequestDisallowIntercept) {
                  //解决viewPager滑动冲突问题
                  final float x = getMotionEventX(ev, mActiveDispatchPointerId);
                  final float y = getMotionEventY(ev, mActiveDispatchPointerId);
                  if (mInitialDisPatchDownX != INVALID_POINTER && x != INVALID_POINTER &&
                          mInitialDisPatchDownY != INVALID_POINTER && y != INVALID_POINTER) {
                      final float xDiff = Math.abs(x - mInitialDisPatchDownX);
                      final float yDiff = Math.abs(y - mInitialDisPatchDownY);
                      if (xDiff > mTouchSlop && xDiff * 0.7f > yDiff) {
                          //横向滚动不需要拦截
                          super.requestDisallowInterceptTouchEvent(true);
                      } else {
                          super.requestDisallowInterceptTouchEvent(false);
                      }
                  } else {
                      super.requestDisallowInterceptTouchEvent(false);
                  }
              }
              break;
          case MotionEvent.ACTION_UP:
          case MotionEvent.ACTION_CANCEL:
              if (ev.getAction() == MotionEvent.ACTION_UP || ev.getAction() == MotionEvent.ACTION_CANCEL) {
                  hasRequestDisallowIntercept = false;
              }
              break;
      }

      return super.dispatchTouchEvent(ev);
  }

  private float getMotionEventY(MotionEvent ev, int activePointerId) {
      final int index = MotionEventCompat.findPointerIndex(ev, activePointerId);
      if (index < 0) {
          return -1;
      }
      return MotionEventCompat.getY(ev, index);
  }

  private float getMotionEventX(MotionEvent ev, int activePointerId) {
      final int index = MotionEventCompat.findPointerIndex(ev, activePointerId);
      if (index < 0) {
          return -1;
      }
      return MotionEventCompat.getX(ev, index);
  }

案例二: `ViewPager` 与 `RecyclerView`

如上图, RecyclerView 中嵌套 ViewPager.

问题说明
1. 当用户滑动 RecyclerView 后放开手指, RecyclerView 会继续滑动并处于 Fling 状态.
2. 此时用户重新触摸屏幕, RecyclerView 滑动停止, 但是无法左右滑动 ViewPager, 只能上下滑动 RecyclerView.
问题原因

当用户重新触摸屏幕, 此时 RecyclerView 的 onInterceptTouchEvent() 方法还是返回了 true , 所以 ViewGroup 还是继续拦截了事件, 导致 ViewPager 无法处理.
解决思路
1. 如果是 Fling 状态的 RecyclerView, 在处理 ACTION_DOWN 事件时, 应该与 IDLE 状态下保持一致.
2. Fling 状态下处理 ACTION_DOWN, onInterceptTouchEvent() 方法应该返回 false.

实现代码:

  @Override
  public boolean onInterceptTouchEvent(MotionEvent e) {
      //isScrolling 为 true 表示是 Fling 状态
      boolean isScrolling = getScrollState() == SCROLL_STATE_SETTLING;
      boolean ans = super.onInterceptTouchEvent(e);
      if (ans && isScrolling && e.getAction() == MotionEvent.ACTION_DOWN) {
          //先调用 onTouchEvent() 使 RecyclerView 停下来
          onTouchEvent(e);
          //反射恢复 ScrollState
          try {
              Field field = RecyclerView.class.getDeclaredField("mScrollState");
              field.setAccessible(true);
              field.setInt(this, SCROLL_STATE_IDLE);
          } catch (NoSuchFieldException e1) {
              e1.printStackTrace();
          } catch (IllegalAccessException e1) {
              e1.printStackTrace();
          }
          return false;
      }
      return ans;
  }

案例三: `ViewPager` 与 `ScrollView`

在 ScrollView 嵌套 ViewPager, Fling 状态下会有跟 RecyclerView 一样的问题, 所以解决思路也是一样的, 只是代码部分有所不同.

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        boolean ans = super.onInterceptTouchEvent(ev);
        if (ans && ev.getAction() == MotionEvent.ACTION_DOWN) {
            onTouchEvent(ev);
            Field field = null;
            try {
                field = NestedScrollView.class.getDeclaredField("mIsBeingDragged");
            } catch (NoSuchFieldException e) {
                e.printStackTrace();
            }
            if (field != null) {
                field.setAccessible(true);
                try {
                    field.setBoolean(this, false);
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                }
            }
            return false;
        }
        return ans;
    }

案例一: ViewPager 与 SwipeRefreshLayout

案例二: ViewPager 与 RecyclerView

案例三: ViewPager 与 ScrollView

案例一: `ViewPager` 与 `SwipeRefreshLayout`

案例二: `ViewPager` 与 `RecyclerView`

案例三: `ViewPager` 与 `ScrollView`