WebView下拉刷新与SwipeRefreshLayout事件

2019-04-01 本文已影响14人谢栋

引言

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轴的距离
            }
        });
    }

WebView下拉刷新与SwipeRefreshLayout事件

引言

猜你喜欢

热点阅读