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