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