在Fragment的WebView中实现下拉刷新功能

嘿，我知道你在Fragment里给WebView加下拉刷新踩坑了，别慌，咱们一步步来搞定它！

首先看你的布局，用SwipeRefreshLayout包裹WebView的思路是对的，先给你补全一个结构完整的布局示例：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swipe"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/web_fauna"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 可以把进度条放在这里，加载时显示 -->
    <ProgressBar
        android:id="@+id/prgFauna"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="gone"/>

</android.support.v4.widget.SwipeRefreshLayout>

接下来是Fragment里的核心代码，这才是让刷新功能生效的关键：

步骤1：初始化控件并配置WebView #

在Fragment的onViewCreated方法里，先拿到控件实例，再给WebView做基础配置：

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    
    SwipeRefreshLayout swipeRefreshLayout = view.findViewById(R.id.swipe);
    WebView webView = view.findViewById(R.id.web_fauna);
    ProgressBar progressBar = view.findViewById(R.id.prgFauna);

    // 基础WebView配置，按需调整
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setDomStorageEnabled(true);
    
    // 用ProgressBar显示网页加载进度
    webView.setWebChromeClient(new WebChromeClient() {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            super.onProgressChanged(view, newProgress);
            progressBar.setVisibility(newProgress == 100 ? View.GONE : View.VISIBLE);
        }
    });

步骤2：绑定刷新逻辑 #

给SwipeRefreshLayout设置刷新监听器，同时在WebView加载完成后停止刷新动画：

// 设置下拉刷新触发事件
    swipeRefreshLayout.setOnRefreshListener(() -> {
        // 刷新时重新加载当前页面
        webView.reload();
    });

    // 监听页面加载完成，停止刷新动画
    webView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            swipeRefreshLayout.setRefreshing(false);
        }
    });

步骤3：修复滚动冲突（关键！） #

很多人忽略这一步：当WebView还没滚动到顶部时，下拉应该是滚动网页，而不是触发刷新。给WebView加滚动监听，控制SwipeRefreshLayout的启用状态：

// 解决WebView滚动与下拉刷新的冲突
    webView.setOnScrollChangeListener((v, scrollX, scrollY, oldScrollX, oldScrollY) -> {
        // 只有WebView滚到最顶部时，才允许触发下拉刷新
        swipeRefreshLayout.setEnabled(scrollY == 0);
    });

    // 加载目标网页
    webView.loadUrl("你的网页地址");
}

可能的小坑排查 #

• 如果你已经迁移到AndroidX，记得把布局里的android.support.v4.widget.SwipeRefreshLayout换成androidx.swiperefreshlayout.widget.SwipeRefreshLayout，依赖也要对应更新。
• 有些网页有顶部固定导航，可能导致WebView的scrollY永远不为0，这时候可以把判断条件改成scrollY <= 10（根据网页情况调整），避免刷新功能被误禁用。

这样一套操作下来，你的WebView下拉刷新功能应该就能正常工作啦！

内容的提问来源于stack exchange，提问作者Fabián Muñoz