Android Kotlin WebView双主题启动页等待网页加载完成后隐藏问题咨询

1. 修改activity_main.xml，增加启动页覆盖层 #

将原有单WebView布局改为FrameLayout布局，底层放WebView，顶层放启动页控件，加载完成后再隐藏顶层启动页：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <WebView
        android:id="@+id/activity_main_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ImageView
        android:id="@+id/splash_iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/splash_image"
        android:scaleType="centerCrop"/>
</FrameLayout>

2. 修改MyWebViewClient.java，增加加载状态回调 #

新增回调接口监听页面加载完成/加载失败状态，避免加载失败时一直卡在启动页：

import android.content.Intent;
import android.net.Uri;
import android.webkit.WebView;
import android.webkit.WebViewClient;

class MyWebViewClient extends WebViewClient {
    // 加载状态回调接口
    public interface OnLoadStateListener {
        void onLoadFinished();
        void onLoadError();
    }

    private OnLoadStateListener mListener;

    public MyWebViewClient(OnLoadStateListener listener) {
        mListener = listener;
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        String hostname = "fa.azdamghest.com";
        Uri uri = Uri.parse(url);
        if (url.startsWith("file:") || uri.getHost() != null && uri.getHost().endsWith(hostname)) {
            return false;
        }
        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        view.getContext().startActivity(intent);
        return true;
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        if (mListener != null) {
            mListener.onLoadFinished();
        }
    }

    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        super.onReceivedError(view, errorCode, description, failingUrl);
        if (mListener != null) {
            mListener.onLoadError();
        }
    }
}

3. 修改MainActivity.kt，接收回调控制启动页隐藏 #

初始化时绑定启动页控件，接收WebView加载状态回调，加载完成后隐藏启动页，这里加了300ms渐变动画避免切换生硬：

import android.annotation.SuppressLint
import android.app.Activity
import android.os.Bundle
import android.view.View
import android.webkit.WebView
import android.widget.ImageView
import android.widget.Toast

class MainActivity : Activity() {
    private var mWebView: WebView? = null
    private var splashIv: ImageView? = null

    @SuppressLint("SetJavaScriptEnabled")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setTheme(R.style.Theme_Splash_kotlin_)
        setContentView(R.layout.activity_main)
        
        mWebView = findViewById(R.id.activity_main_webview)
        splashIv = findViewById(R.id.splash_iv)
        
        val webSettings = mWebView?.settings
        webSettings?.javaScriptEnabled = true

        mWebView?.webViewClient = MyWebViewClient(object : MyWebViewClient.OnLoadStateListener {
            override fun onLoadFinished() {
                // 加载完成，渐变隐藏启动页
                splashIv?.animate()?.alpha(0f)?.setDuration(300)?.withEndAction {
                    splashIv?.visibility = View.GONE
                }?.start()
            }

            override fun onLoadError() {
                // 加载失败也隐藏启动页，可自定义错误提示逻辑
                splashIv?.visibility = View.GONE
                Toast.makeText(this@MainActivity, "页面加载失败，请检查网络设置", Toast.LENGTH_SHORT).show()
            }
        })

        mWebView?.loadUrl("https://fa.azdamghest.com/")
    }

    override fun onBackPressed() {
        if (mWebView?.canGoBack() == true) {
            mWebView?.goBack()
        } else {
            super.onBackPressed()
        }
    }
}

4. 可选优化（减少冷启动白屏） #

修改themes.xml里的splashScreenTheme，将windowBackground设置为启动图的背景色，减少冷启动阶段的白屏时间：

<style name="splashScreenTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <item name="android:windowBackground">@color/你的启动图背景色</item>
</style>

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