从事件原理彻底解决WebView与ViewPager(水平),ScrolloView(纵向)滑动冲突

前言:#####

WebKit中的JavaScriptCore引擎处理的JS滑动与原生控件滑动冲突尚未完善,这篇文章讨论下如何彻底解决H5端的滑动控件与原生控件滑动冲突

更多文章请关注:http://www.jianshu.com/u/b1cff340957c####

---

效果图####

1:点击WebView中的轮播图区域左右滑动与上下滑动######

2:WebView非轮播区域左右翻页ViewPager######

一:WebView内容的滑动####

首先介绍下WebView内容的几种滑动方式

１：WebView在固定宽高时与自适应屏幕时的滑动######

固定宽高时,WebView加载的html页面内容宽度或高度大于webView的宽度或高度时,滑动的都是改变mScrollX, mScrollY的值,这种滑动能在onScrollChanged(int l, int t, int oldl, int oldt)监听到getScrollX, getScrollY值变化.
WebView自适应屏幕宽度,高度自适应嵌套在ScrollView中滑动时,WebView高度即为加载页面的实际高度,此时页面中内容的滑动实际就是ScrollView在控制,滑动改变的是ScrollView中第一个子控件的scrollY值

2：H5控件通过JS控制的滑动######

这种滑动在WebView的某个固定区域内通过JS控制滑动,无论是水平滑动还是垂直滑动都不会像android原生滑动控件有requestDisallowInterceptTouchEvent请求事件放行,而且又不影响WebView的scrollX,scrollY值,所以即使是(能自动处理水平与垂直滑动区别的)ViewPager也不能判断它是否能够优先滑动
第1个问题只要能改变scrollX或scrollY值外层控件就能识别是否能够优先滑动,这里不再讲述如何处理滑动优先
上层控件如何处理水平与垂直滑动和多层嵌套-此处链接

---

二：解决JS与原生控件滑动冲突####

直接举例子说明,　H5中的轮播控件被嵌套到NestedScrollView中,外层再嵌套SwipeRefreshLayout 下拉刷新,外层再嵌套ViewPager,既然外层控件无法判断JS是否优先滑动,那思路只能由JS绝对优先滑动,在产生水平或垂直滑动或无法滑动时再告诉上层控件是否要放行事件

举例子前先讲下网上一些大神们如何处理

这种冲突网上也有一大堆的方法,有用js交互处理返回滑动区域,在该区域内都不拦截事件, 也有修改WebView的onTouchEvent方法,在ACTION_DOWN时请求.requestDisallowInterceptTouchEvent(true),在ACTION_MOVE时再根据x,y轴的差值比较来判断是否为水平还是垂直滑动,这里分析下不完善之处
a:
如果WebView中加载的H5页面或WebView外面嵌套的控件即有水平又有垂直滑动时,这方法就行不通了
b:
android判断水平与垂直滑动的标准也不是这样子定义的,在google提供的所有的滑动控件中都可以看到 yDiff>mTouchSlop 或 xDiff > mTouchSlop的代码, 不仅是判断差值还要判断差值大于最小滑动单位才算是水平或垂直滑动

直接上代码喽，先是JS部分
(这里会用到js交互,与js的事件监听,作者对这块水平烂,如有写错,多多指点)

 // 轮播滚动
    var mySwiper = $('.slidepics').swiper({
        loop : true,
        pagination: '.dotted p',
        paginationClickable: true,
        spaceBetween: 30,
        autoplay:3000,
        autoplayDisableOnInteraction:false,
        onSliderMove:function(swiper) {
            //如果光用此方法来申请app原生控件不拦截事件,在快速滑动的时候可能抢不到事件
            //还要配合下面的touch事件来获取
            isBeingDrag = true;
            window.Android.requestEvent(true);
        }
    });

    // 轮播滚动事件监听
    $('.slidepics').on('touchstart touchmove touchend touchcancel' , function(event) {
        var touch = event.originalEvent.targetTouches[0];
        switch (event.type) {
            case "touchstart":
                mLastClientX = touch.clientX;
                mLastClientY = touch.clientY;
                isBeingDrag = false;
                window.Android.requestEvent(true);
                break;
            case "touchmove":
                if (!isBeingDrag) {
                    var xDiff = Math.abs(touch.clientX - mLastClientX);
                    var yDiff = Math.abs(touch.clientY - mLastClientY);
                    //console.log(xDiff + "  " + yDiff);
                    if (xDiff >= touchSlop) {
                        isBeingDrag = true;
                    } else if(yDiff > touchSlop) {
                        //产生app纵向滑动,父控件不强制请求放行事件,这段逻辑主要是不影响外层垂直滑动控件的滑动
                        //js端控制滑动与app端的标准不一样,所以结合上面的onSliderMove:function方法来判断
                        //如果H5端控件已经产生滑动时则必须请求父控件放行事件
                        //如果有些开源控件没有类似onSliderMove方法时,只需提供控件是否产生滑动就行,原理都是一样
                        isBeingDrag = true;
                        window.Android.requestEvent(false);
                    }
                }
                break;
            case "touchend":
                window.Android.requestEvent(false);
                break;
        }
    });

  //app端的滑动值
  var touchSlop = 0;
  //初次按下时的x, y轴值
  var mLastClientX, mLastClientY;
  //是否处于滑动中
  var isBeingDrag = false;
  //js附值,在web加载完成时将android的滑动单位值传给js
  function initTouchSlop(appTouchSlop) {
      touchSlop = appTouchSlop;
  }

JS端事件代码逻辑跟app端差不多,android代码

   /**
     * js交互类
     */
    private class JsCallback {

        @JavascriptInterface
        public void requestEvent(boolean request) {
            Log.i("you", "requestDisallowInterceptTouchEvent " + request+"  "+Thread.currentThread().getName());
            mWebView.requestDisallowInterceptTouchEvent(request);
        }

    }
 　　　　mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                int touchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
                StringBuilder jsSb = new StringBuilder("javascript:initTouchSlop('").append(touchSlop).append("')");
                mWebView.loadUrl(jsSb.toString());
            }
        });
     

需要注意的是:js交互回调不是在主线程中执行.如果您的界面中没有涉及即有水平又有垂直滑动的复杂嵌套,js代码也可以简单化,只需要监听touchstart, touchend事件即可

---

小细节：requestDisallowInterceptTouchEvent()方法在SwipeRefreshLayout中可能会不生效,此方法在SwipeRefreshLayout中被重写,在SDK22以下版本的V4包中,此方法什么都不执行,google的版本问题甚是头疼,要解决这问题就是下拉刷新嵌套的控件去实现NestedScroll,设置isNestedScrollingEnabled值为true,google也有写好的NestedScrollView

   @Override
    public void requestDisallowInterceptTouchEvent(boolean b) {
        if ((android.os.Build.VERSION.SDK_INT < 21 && mTarget instanceof AbsListView)
                || (mTarget != null && !ViewCompat.isNestedScrollingEnabled(mTarget))) {
            // Nope.
            // 可以看出SwipeRefreshLayout的第一个child没有实现NestedScroll时不能申请到上层控件不拦截事件,
            //这也是为什么SwipeRefreshLayout嵌套很多控件下拉刷新会有冲突的原因,子控件无法传递requestDisallowInterceptTouchEvent
        } else {
            super.requestDisallowInterceptTouchEvent(b);
        }
    }

在使用嵌套下拉刷新SwipeRefreshLayout时注意V4包的版本,SDK22版本以下是不支持的,H5端的冲突也就没法处理
如果您有更好的方法解决冲突,请多多指教

更多文章请关注:http://www.jianshu.com/u/b1cff340957c####

最后附上源码https://github.com/youxiaochen/WebViewDemo#####