如何实现自定义的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>