WebView后台加载时显示启动屏功能实现故障求助

嘿，我明白你遇到的问题了——WebView加载网页时的白屏确实很影响用户体验，尤其是在网络不佳的时候。让我给你一套可行的方案，完美解决这个启动屏的需求：

核心思路 #

我们会在布局里先放一个加载启动屏容器（可以是你的启动logo+进度条），一开始让它显示；同时准备一个容器用来动态添加WebView，初始设为隐藏。然后通过WebView的加载回调，在页面加载完成后切换显示状态——隐藏启动屏，显示WebView。

步骤1：修改MainActivity的布局文件 #

首先在activity_main.xml里添加启动屏和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">

    <!-- 加载启动屏：替换成你自己的启动图/样式 -->
    <LinearLayout
        android:id="@+id/loading_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:background="@color/white">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/your_splash_logo" />

        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp" />
    </LinearLayout>

    <!-- 用来容纳动态创建的WebView的容器 -->
    <FrameLayout
        android:id="@+id/webview_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" />

</RelativeLayout>

步骤2：MainActivity代码实现 #

接下来在MainActivity里动态创建WebView，设置加载回调并控制视图显示：

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;
    private LinearLayout mLoadingContainer;
    private FrameLayout mWebViewContainer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 初始化布局里的容器
        mLoadingContainer = findViewById(R.id.loading_container);
        mWebViewContainer = findViewById(R.id.webview_container);

        // 动态创建WebView并配置基础设置
        mWebView = new WebView(this);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true); // 若网页需要JS则开启
        webSettings.setDomStorageEnabled(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setUseWideViewPort(true);

        // 用WebChromeClient监听加载进度（比onPageFinished更准确，能处理动态加载内容）
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                // 进度到100%时切换显示状态
                if (newProgress == 100) {
                    mLoadingContainer.setVisibility(View.GONE);
                    mWebViewContainer.setVisibility(View.VISIBLE);
                }
            }
        });

        // 可选：处理加载错误的情况
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                mLoadingContainer.setVisibility(View.GONE);
                // 这里可以显示错误提示，比如Toast或者切换到错误页面
                Toast.makeText(MainActivity.this, "加载失败，请检查网络", Toast.LENGTH_SHORT).show();
            }
        });

        // 将WebView添加到容器中
        mWebViewContainer.addView(mWebView);

        // 加载目标网页
        mWebView.loadUrl("https://your-target-url.com");
    }

    // 处理WebView生命周期，避免内存泄漏
    @Override
    protected void onDestroy() {
        if (mWebView != null) {
            mWebViewContainer.removeView(mWebView);
            mWebView.destroy();
            mWebView = null;
        }
        super.onDestroy();
    }
}

关键注意事项 #

• 权限配置：确保在AndroidManifest.xml中添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• 明文HTTP支持：如果你的网页是HTTP协议（非HTTPS），在Android 9及以上需要在application标签里添加：

  android:usesCleartextTraffic="true"
  

• 启动屏自定义：你可以把loading_container改成任何你想要的样式，比如全屏图片、动画加载效果，只要保证初始状态是显示的即可。

之前你的代码组合可能失效的原因大概率是：没有正确绑定视图的显示隐藏时机，或者WebView的加载回调没正确实现，又或者动态创建的WebView没有被添加到布局中导致无法显示。按照上面的步骤来，应该就能完美解决问题啦！

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