如何实现自定义的android WebView错误页

一般来说，可能第一时间想到的是自定义一个html来替代webview内置的异常页面。  但是实际操作时，这种方法比较困难。

这里介绍一个简单的替代方案，希望能有所帮助。

可以采用嵌套layout的方式，然后在webview的错WebViewClient的onReceivedError方法中控制异视图的显示和隐藏，具体代码如下：

 

public class DefaultWebViewClient extends WebViewClient {
        boolean isInErrorState = false;
        @Override
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
       //这里可以将异常信息也显示出来
            isInErrorState = true;
            mEmptyView.setVisibility(View.VISIBLE);
            webView.setVisibility(View.GONE);
            mEmptyViewIndicator.setImageResource(R.drawable.no_service);
            mEmptyView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    isInErrorState = false;
                    webView.reload();
                }
            });
//            super.onReceivedError(view, errorCode, description, failingUrl);
        }


        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            if(!isInErrorState) {
                mEmptyView.setVisibility(View.GONE);
                webView.setVisibility(View.VISIBLE);
            }else {
                mEmptyView.setVisibility(View.VISIBLE);
                webView.setVisibility(View.GONE);
            }
            super.onPageStarted(view, url, favicon);
        }
    }

 

对应的layout如下：

<?xml version="1.0" encoding="utf-8"?>

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    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"

        android:layout_gravity="center_horizontal" />

 

    <LinearLayout

        android:orientation="vertical" android:layout_width="match_parent"

        android:id="@+id/empty_view_root"

 

        android:layout_height="match_parent"

        android:gravity="center"

        android:paddingTop="50dp"

        android:paddingBottom="50dp">

 

        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:id="@+id/empty_view_indicator"

            android:layout_gravity="center"

            android:src="@drawable/pic_nothing" />

 

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:id="@+id/empty_view_text"

            android:textColor="#999999"

            android:singleLine="false" />

    </LinearLayout>

</RelativeLayout>