Webview&Viewpager滑动冲突解决方案

TokenYc
3,342 阅读3分钟

参考的文章

感谢这些作者的分享

www.jianshu.com/p/24038d957… developer.android.com/jetpack/and… wangyeming.github.io/2017/07/16/… ​

​

在使用viewpager时，如果某一页存在webview，则会出现webview中轮播图或者其他滑动控件，无法滑动的问题。这种情况是可以仅通过app端就解决的。

解决问题的思路

1、如何控制使用webview处理事件还是viewpager处理事件。 2、根据什么来判断webview处理事件还是viewpager处理事件。 ​

问题一：如何控制

所有的滑动冲突问题解决的思路就是两个：

  • 内部拦截法
  • 外部拦截法

在这个场景中，在webview外面，可能还包了fragment等众多viewgroup，并且最终判断谁处理事件的依据在webview中，所以这里使用内部拦截法更方便。

public class ScrollConflictWebView extends WebView {

    private boolean 判断依据 = false;

    public ScrollConflictWebView(Context context) {
        super(context);
    }

    public ScrollConflictWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    判断依据 = false;
										//Down时拦截事件保证在move时可以拿到事件。
                    requestDisallowInterceptTouchEvent(true);
                    break;
                case MotionEvent.ACTION_MOVE:
                    //Move时决定是否还要拦截事件
                    requestDisallowInterceptTouchEvent(!判断依据);
                    break;
                default:
                    requestDisallowInterceptTouchEvent(false);
										break;
          	}
       		 return super.onTouchEvent(event);
    }

}

可能你在测试时，会出现无法拦截的情况，我也遇到了，因为使用了SwipeRefreshLayout。下文会说到。 ​

问题2：如何判断

我找到了两种思路，第一种

  • 通过js交互实现，h5告诉客户端什么情况下是可以滑动的，或者什么位置是可以滑动的。
  • 通过webview自身的回调：onOverScrolled来判断。参考了这个文章

显然，第一种方法是非常麻烦的，涉及到js交互，不具备通用性。因为测试了uc和夸克，发现在他们的浏览器中，都自动解决了滑动冲突，所以必然是有其他可以判断的依据的，最终找到了第二种方法。

    @Override
    protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
        super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
        isScrollX = clampedX;
    }

这个方法触发的时机是webview滑动到边界时会触发，如果是横向滑动，则clamped则为true。这样的话，我们只要在clamped为true的时候，把事件交给viewpager来处理就行了。

public class ScrollConflictWebView extends WebView {

    private boolean 判断依据 = false;

    public ScrollConflictWebView(Context context) {
        super(context);
    }

    public ScrollConflictWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    判断依据 = false;
										//Down时拦截事件保证在move时可以拿到事件。
                    requestDisallowInterceptTouchEvent(true);
                    break;
                case MotionEvent.ACTION_MOVE:
                    //Move时决定是否还要拦截事件
                    requestDisallowInterceptTouchEvent(!判断依据);
                    break;
                default:
                    requestDisallowInterceptTouchEvent(false);
										break;
          	}
       		 return super.onTouchEvent(event);
    }

    @Override
    protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
        super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
        判断依据 = clampedX;
    }

}

坑

与SwipeRefresh同时使用问题

上面说到了，如果你Webview的父布局中存在SwipeRefreshLayout，会发现，可能disallow无法传递到viewpager。理论上，不做任何处理，viewgroup的disallow方法，会挨个往父布局传递。但是为什么会传递失败呢？这就得看下SwipeRefreshLayout的源码(appcompat版本：1.2.0-alpha03)了：

@Override
public void requestDisallowInterceptTouchEvent(boolean b) {
    // if this is a List < L or another view that doesn't support nested
    // scrolling, ignore this request so that the vertical scroll event
    // isn't stolen
    if ((android.os.Build.VERSION.SDK_INT < 21 && mTarget instanceof AbsListView)
            || (mTarget != null && !ViewCompat.isNestedScrollingEnabled(mTarget))) {
        // Nope.
    } else {
        super.requestDisallowInterceptTouchEvent(b);
    }
}

从源码可以看出，如果SwipeRefreshLayout包裹的布局不支持NestedScroll的话，就不做任何处理。 其实这个是appcompat在1.2.0中才修改的，1.1.0版本是给了方法自己控制的： image.png 一开始的思路是让SwipeRefreshLayout下面一层View支持nestedScroll，但是这样的话，会导致下拉刷新无法触发。 那就只能手动去修改disallow方法了：

public class AllowSwipeRefreshLayout extends QFSwipeRefreshLayout {
    public AllowSwipeRefreshLayout(@NonNull @NotNull Context context) {
        super(context, null);
    }

    public AllowSwipeRefreshLayout(@NonNull @NotNull Context context, @Nullable @org.jetbrains.annotations.Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public void requestDisallowInterceptTouchEvent(boolean b) {
        getParent().requestDisallowInterceptTouchEvent(b);
        super.requestDisallowInterceptTouchEvent(b);
    }
}

这样修改以后，disallow就可以正常传递给viewpager了。到这里，就完美的解决了webview嵌套在Viewpager中的滑动冲突问题。 最终实现效果与uc和夸克一致。

腾讯X5兼容

如果项目中使用的是腾讯X5浏览器，上面的做法无法生效。需要做额外的兼容。

image.png

直接上代码：

    class CallbackClient implements WebViewCallbackClient {
        public void invalidate() {
        }
        @Override
        public boolean onTouchEvent(MotionEvent event, View view) {
            LogUtils.d("ycycyc onTouchEvent");
            return super_onTouchEvent(event);
        }
        @TargetApi(Build.VERSION_CODES.GINGERBREAD)
        @Override
        public boolean overScrollBy(int deltaX, int deltaY, int scrollX,
                                    int scrollY, int scrollRangeX, int scrollRangeY,
                                    int maxOverScrollX, int maxOverScrollY,
                                    boolean isTouchEvent, View view) {
            Log.e("0705", "overScrollBy");
            return super_overScrollBy(deltaX, deltaY, scrollX, scrollY,
                    scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY,
                    isTouchEvent);
        }
        @Override
        public void computeScroll(View view) {
            super_computeScroll();
        }
        @TargetApi(Build.VERSION_CODES.GINGERBREAD)
        @Override
        public void onOverScrolled(int scrollX, int scrollY, boolean clampedX,
                                   boolean clampedY, View view) {
            super_onOverScrolled(scrollX, scrollY, clampedX, clampedY);
        }
        @Override
        public void onScrollChanged(int l, int t, int oldl, int oldt, View view) {
            super_onScrollChanged(l, t, oldl, oldt);
        }
        @Override
        public boolean dispatchTouchEvent(MotionEvent ev, View view) {
            return super_dispatchTouchEvent(ev);
        }
        @Override
        public boolean onInterceptTouchEvent(MotionEvent ev, View view) {
            return super_onInterceptTouchEvent(ev);
        }
    }
    private IX5WebViewClientExtension mWebViewClientExtension = new ProxyWebViewClientExtension() {
        public void invalidate() {
        }
        public void onReceivedViewSource(String data) {
        }
        @Override
        public boolean onTouchEvent(MotionEvent event, View view) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    if (event.getPointerCount() == 1) {
                        isScrollX = false;
                        //事件由webview处理
                        requestDisallowInterceptTouchEvent(true);
                    } else {
                        requestDisallowInterceptTouchEvent(true);
                    }
                    break;
                case MotionEvent.ACTION_MOVE:
                    if (event.getPointerCount() == 1) {
                        //事件由webview处理
                        requestDisallowInterceptTouchEvent(!isScrollX);
                    } else {
                        requestDisallowInterceptTouchEvent(true);
                    }
                    break;
                default:
                    if (event.getPointerCount() == 1) {
                        requestDisallowInterceptTouchEvent(false);
                    } else {
                        requestDisallowInterceptTouchEvent(true);
                    }
                    break;
            }
            return mCallbackClient.onTouchEvent(event, view);
        }
        // 1
        public boolean onInterceptTouchEvent(MotionEvent ev, View view) {
            return mCallbackClient.onInterceptTouchEvent(ev, view);
        }
        // 3
        public boolean dispatchTouchEvent(MotionEvent ev, View view) {
            return mCallbackClient.dispatchTouchEvent(ev, view);
        }
        // 4
        public boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY,
                                    int scrollRangeX, int scrollRangeY,
                                    int maxOverScrollX, int maxOverScrollY,
                                    boolean isTouchEvent, View view) {
            return mCallbackClient.overScrollBy(deltaX, deltaY, scrollX, scrollY,
                    scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent, view);
        }
        // 5
        public void onScrollChanged(int l, int t, int oldl, int oldt, View view) {
            mCallbackClient.onScrollChanged(l, t, oldl, oldt, view);
            if (getOnScrollChangedCallBack() != null) {
                getOnScrollChangedCallBack().onScrollChanged(l, t, oldl, oldt);
            }
        }
        // 6
        public void onOverScrolled(int scrollX, int scrollY, boolean clampedX,
                                   boolean clampedY, View view) {
            isScrollX = clampedX;
            LogUtils.d("ycycyc clampedX-->");
            mCallbackClient.onOverScrolled(scrollX, scrollY, clampedX, clampedY, view);
        }
        // 7
        public void computeScroll(View view) {
            mCallbackClient.computeScroll(view);
        }
        @Override
        public void onResponseReceived(WebResourceRequest request, WebResourceResponse response, int errorCode) {
            super.onResponseReceived(request, response, errorCode);
        }
    };
avatar
文章
阅读
粉丝