如何在Android WebView活动中添加网页加载圆形ProgressBar？

嘿，给你的WebView活动加个圆形加载进度条其实挺简单的，跟着下面两步操作就行：

步骤1：修改布局文件（activity_main.xml） #

首先在你的布局里添加一个圆形ProgressBar，让它默认隐藏，加载时显示在WebView中央：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <!-- 圆形加载进度条 -->
    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="gone"
        style="?android:attr/progressBarStyleLarge" />

</RelativeLayout>

这里用系统自带的大尺寸圆形进度样式，默认隐藏（android:visibility="gone"），加载时再显示出来。

步骤2：修改MainActivity.java代码 #

接下来在Java代码里实现进度监听逻辑，控制进度条的显示和隐藏：

完整修改后的代码： #

package club.moviestreet.www.webviewapp;
import android.content.Intent;
import android.net.Uri;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {
    private WebView mywebView;
    // 新增ProgressBar变量
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mywebView = (WebView) findViewById(R.id.webview);
        // 初始化ProgressBar控件
        progressBar = (ProgressBar) findViewById(R.id.progress_bar);

        WebSettings webSettings= mywebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        mywebView.loadUrl("http://webatozs.com/p/");

        // 保留你原来的链接跳转逻辑
        mywebView.setWebViewClient(new WebViewClient() {
            @SuppressWarnings("deprecation")
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (!url.startsWith("http://lightlobbies.com/p/")) {
                    Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                    startActivity(i);
                    return true;
                }
                return false;
            }
        });

        // 新增：监听网页加载进度，控制进度条显示/隐藏
        mywebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                if (newProgress == 100) {
                    // 网页加载完成，隐藏进度条
                    progressBar.setVisibility(View.GONE);
                } else {
                    // 网页正在加载，显示进度条
                    progressBar.setVisibility(View.VISIBLE);
                }
            }
        });
    }

    // 保留你原来的返回键逻辑
    @Override
    public void onBackPressed() {
        if(mywebView.canGoBack()) {
            mywebView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

关键说明 #

• WebChromeClient是专门用来处理网页加载进度、JS弹窗这类浏览器UI相关事件的，我们重写onProgressChanged方法就能实时获取加载进度。
• 进度条默认隐藏，当网页加载进度不为100时显示，加载完成后自动隐藏，用户能直观看到网页的加载状态。
• 同时设置WebViewClient和WebChromeClient完全没问题，两者职责不同：前者处理页面导航、链接跳转，后者处理浏览器UI事件，不会冲突。

内容的提问来源于stack exchange，提问作者subhasish bose