WebView下拉刷新与SwipeRefreshLayout事件冲突解决

引言

SwipeRefreshLayout是Android在Support.v4包中为我们提供的用户刷新UI的一个组件,大部分场景下我们会使用它包裹RecyclerView,在列表上下拖动到顶部时继续向下滑动视图触发刷新事件,我们可以通过给SwipeRefreshLayout设置OnRefreshListener通过回调方法onRefresh()来完成下拉刷新事件的监听动作。但是当我们把WebView作为子View放置在SwipeRefreshLayout中时,H5上的scroll事件与原生安卓的滑动事件就会出现冲突,导致我们无法完成预期的效果,下面看下出现问题的效果图,然后我们一起解决下这个原生跟H5上的滑动冲突,从而达到我们最终的效果。

问题效果图
滑动冲突效果图

从图上我们可以很清楚的看到,当我们在滑动H5页的时候,H5页向下滑动的过程中我们如果向上拖动页面,会同时触发先触发SwipeRefreshLayout上的监听事件,导致H5页无法正常向上拖动,但是此时并非我们的预期,我们看下存在滑动冲突事件的代码

存在冲突的代码

@RequiresApi(api = Build.VERSION_CODES.ECLAIR_MR1)
    @Override
    protected void setUpView() {
        wvPage = findViewById(R.id.wv_page);
        swipeRefreshLayout = findViewById(R.id.srl_refresh);
        wvPage.getSettings().setJavaScriptEnabled(true);
        wvPage.getSettings().setDomStorageEnabled(true);
        wvPage.setWebViewClient(new WebViewClient());
        wvPage.setWebChromeClient(new WebChromeClient());
        wvPage.loadUrl(getUrl());

        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                swipeRefreshLayout.setRefreshing(false);
                wvPage.reload();
            }
        });

      ...  //省略部分代码
    }

在上面我们已经提到了出现滑动冲突是由于H5内部的scroll事件与SwipeRefreshLayout滑动监听发生了冲突,我们只需要找到解决此二者冲突的解决方案,问题就可以迎刃而解。

阅读SwipeRefreshLayout的源码,我们发现这样一段回调接口

/**
  * Classes that wish to override {@link SwipeRefreshLayout#canChildScrollUp()} method
  * behavior should implement this interface.
  */
 public interface OnChildScrollUpCallback {
     /**
      * Callback that will be called when {@link SwipeRefreshLayout#canChildScrollUp()} method
      * is called to allow the implementer to override its behavior.
      *
      * @param parent SwipeRefreshLayout that this callback is overriding.
      * @param child The child view of SwipeRefreshLayout.
      *
      * @return Whether it is possible for the child view of parent layout to scroll up.
      */
     boolean canChildScrollUp(SwipeRefreshLayout parent, @Nullable View child);
 }

通过这一段代码我们了解到:OnChildScrollUpCallback 接口就一个canChildScrollUp方法,返回是否可滚动。此时我们可以根据WebView在Y轴方向的滚动距离来判断当前webview加载的H5页是否在顶部来决定SwipeRefreshLayout的回调刷新方法是否被触发。

总结如下:

  • 当前加载的内容在H5页顶部时,返回false,表示子视图不可滚动,refreshLayout接收到滑动事件,引出滑动视图和调用滑动刷新方法
  • 当前加载的内容不在H5页顶部时,webView.getScrollY() > 0,返回true,表示子视图可滚动,refreshLayout中canChildScrollUp()返回true,刷新控件不再处理滑动问题,所以没有调用滑动刷新方法

解决后的效果图
解决滑动冲突效果图

代码

  @RequiresApi(api = Build.VERSION_CODES.ECLAIR_MR1)
    @Override
    protected void setUpView() {
        wvPage = findViewById(R.id.wv_page);
        swipeRefreshLayout = findViewById(R.id.srl_refresh);
        wvPage.getSettings().setJavaScriptEnabled(true);
        wvPage.getSettings().setDomStorageEnabled(true);
        wvPage.setWebViewClient(new WebViewClient());
        wvPage.setWebChromeClient(new WebChromeClient());
        wvPage.loadUrl(getUrl());

        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                swipeRefreshLayout.setRefreshing(false);
                wvPage.reload();
            }
        });

        swipeRefreshLayout.setOnChildScrollUpCallback(new SwipeRefreshLayout.OnChildScrollUpCallback() {
            @Override
            public boolean canChildScrollUp(@NonNull SwipeRefreshLayout swipeRefreshLayout, @Nullable View view) {
                return wvPage.getScrollY() > 0;  // 原生安卓使用getScrollY()来判断在Y轴的距离
//                return wvPage.getWebScrollY() > 0;   // 我项目中使用的X5内核的webview需要调用getWebScrollY()来判断在Y轴的距离
            }
        });
    }
展开阅读全文
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值