如何實現自定義的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>