github地址（完整Demo下載避归，歡迎訪問）
https://github.com/zhouxu88/ErroWebViewDemo
在Android項(xiàng)目中昵慌，我們通常會(huì)用WebView來加載網(wǎng)頁面，當(dāng)我們的手機(jī)沒有聯(lián)網(wǎng)涧衙，或是服務(wù)端不小心癱瘓的時(shí)候哪工，WebView展示的效果就比較丑奥此。
Paste_Image.png
解決辦法
我們自定義一個(gè)View用來展示加載失敗的樣子，或者我們也可以直接寫一個(gè)錯(cuò)誤展示的HTML讓W(xué)ebView加載等等雁比。我們進(jìn)行重寫的方法是WebViewClient的onReceivedError（）方法稚虎。
效果圖
自定義加載網(wǎng)頁錯(cuò)誤的view.jpg
MainActivity：
public class MainActivity extends AppCompatActivity {
private static final String TAG = "MainActivity";
private WebView webView;
private FrameLayout loadingLayout; //提示用戶正在加載數(shù)據(jù)
private RelativeLayout webParentView;
private View mErrorView; //加載錯(cuò)誤的視圖
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView);
loadingLayout = (FrameLayout) findViewById(R.id.loading_layout);
initErrorPage();//初始化自定義頁面
initWebView();
}
private void initWebView() {
//加載需要顯示的網(wǎng)頁
webView.loadUrl("http://www.baidu.com/");
WebSettings mWebSettings = webView.getSettings();
mWebSettings.setJavaScriptEnabled(true); //允許加載javascript
mWebSettings.setSupportZoom(true); //允許縮放
mWebSettings.setBuiltInZoomControls(true); //原網(wǎng)頁基礎(chǔ)上縮放
mWebSettings.setUseWideViewPort(true); //任意比例縮放
webView.setWebViewClient(new WebViewClient() {
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
//6.0以下執(zhí)行
Log.i(TAG, "onReceivedError: ------->errorCode" + errorCode + ":" + description);
//網(wǎng)絡(luò)未連接
showErrorPage();
}
//處理網(wǎng)頁加載失敗時(shí)
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
super.onReceivedError(view, request, error);
//6.0以上執(zhí)行
Log.i(TAG, "onReceivedError: ");
showErrorPage();//顯示錯(cuò)誤頁面
}
});
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
Log.i(TAG, "onProgressChanged:----------->" + newProgress);
if (newProgress == 100) {
loadingLayout.setVisibility(View.GONE);
}
}
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
Log.i(TAG, "onReceivedTitle:title ------>" + title);
if (title.contains("404")){
showErrorPage();
}
}
});
webParentView = (RelativeLayout) webView.getParent(); //獲取父容器
}
/**
* 顯示自定義錯(cuò)誤提示頁面，用一個(gè)View覆蓋在WebView
*/
private void showErrorPage() {
webParentView.removeAllViews(); //移除加載網(wǎng)頁錯(cuò)誤時(shí)偎捎，默認(rèn)的提示信息
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
webParentView.addView(mErrorView, 0, layoutParams); //添加自定義的錯(cuò)誤提示的View
}
/***
* 顯示加載失敗時(shí)自定義的網(wǎng)頁
*/
private void initErrorPage() {
if (mErrorView == null) {
mErrorView = View.inflate(this, R.layout.layout_load_error, null);
}
}
}
- activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.zx.errowebviewdemo.MainActivity">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--加載提示的loading圖-->
<include
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout="@layout/loading_anim"
android:layout_centerInParent="true"/>
</RelativeLayout>
- layout_load_error.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/load_error_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--加載網(wǎng)頁錯(cuò)誤的提示圖-->
<ImageView
android:id="@+id/error_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="@null"
android:src="@mipmap/no_data" />
<!--點(diǎn)擊提示文字蠢终，重新加載網(wǎng)頁-->
<TextView
android:id="@+id/reload_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/error_iv"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="數(shù)據(jù)獲取失敗\n, 請(qǐng)檢查網(wǎng)絡(luò)后再重試 ~~~" />
</RelativeLayout>
- layout/loading_anim.xml
<?xml version="1.0" encoding="utf-8"?><!--加載提示圖-->
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/loading_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@null"
android:scaleType="centerCrop"
android:src="@drawable/beijing" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="@null"
android:scaleType="centerCrop"
android:src="@drawable/loading_anim" />
<!--loading提示圖-->
<TextView
android:id="@+id/loading_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="3dp"
android:gravity="center"
android:text="@string/please_wait"
android:textColor="#ffffff" />
</FrameLayout>
