Android加载WebView避免页面空白

最新推荐文章于 2025-01-18 19:36:51 发布

屋檐下躲小小雨

最新推荐文章于 2025-01-18 19:36:51 发布

阅读量1.1k

点赞数

本文链接：https://blog.youkuaiyun.com/xkyh941/article/details/78835996

版权

本文介绍如何在Android应用中优化WebView加载过程，通过展示加载指示器来改善用户体验。文章提供了具体的实现代码，包括如何设置WebView属性、监听加载状态以及显示和隐藏进度条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般来说WebView加载需要几秒，如果我们这时候不做处理，加载过程中会出现页面白屏，我们可以在加载完成前使用旋转框，直接上代码。

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/loadingView"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:background="@drawable/indicator_shape" />

</FrameLayout>

Activity：

public class MainActivity extends AppCompatActivity {
    View mLadingView;
    WebView mWebView;
    private String url;

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

        mLadingView = findViewById(R.id.loadingView);
        mWebView = (WebView)findViewById(R.id.webView);
        mWebView.setWebViewClient(new CustomWebViewClient());

        mWebView.getSettings().setBuiltInZoomControls(true);//设置WebView是否使用其内置的变焦机制，该机制集合屏幕缩放控件使用，默认是false
        mWebView.getSettings().setDisplayZoomControls(false);//设置WebView使用内置缩放机制时，是否展现在屏幕缩放控件上，默认true
        //使用javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setDomStorageEnabled(true);
        url = "http://blog.youkuaiyun.com/xkyh941/article/details/78743158";
        mWebView.loadUrl(url);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mWebView.destroy();

    }

    private class CustomWebViewClient extends WebViewClient {

        /**
         * 网页加载完成时回调
         * @param webView
         * @param url
         */
        @Override
        public void onPageFinished(WebView webView, String url) {
            super.onPageFinished(webView, url);
            mLadingView.setVisibility(View.GONE);
        }

        //在WebView开始加载网页时调用
        @Override
        public void onPageStarted(WebView webView, String url, Bitmap favicon) {
            super.onPageStarted(webView, url, favicon);
        }
        
         //加载错误的时候会回调，在其中可做错误处理，比如再请求加载一次
        @Override
        public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
            super.onReceivedError(view, request, error);
            mLadingView.setVisibility(View.GONE);
        }
    }
}

在页面加载完成时隐藏即可。

用到的drawable文件：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@color/drawable_bg"></solid>
    <corners android:radius="5dp"></corners>
</shape>

<color name="drawable_bg" >#7b393a3f</color>