Android--------WebView+H5開發仿美團 預加載，加載失敗和重新加載

Android嵌入式開發已經占大多數了，很多界面都是以網頁的形式展示，WebView可以使得網頁輕松的內嵌到app里，還可以直接跟js相互調用。

本博客主要是模仿美團的旅游出行模塊的預加載，網頁加載失敗和網頁重新加載，

效果如圖:

              

圖中的步驟是  無網絡情況下加載網頁，則加載不出來，出現提示界面，去把網絡打開，在刷新則又可以加載界面，

上圖  在沒有網絡時，多次點擊刷新時會出現Android WebView原生的網頁加載失敗的界面，這是一個Bug。

 

而我的案例效果圖 如下：

         

 

 在AndroidManifest.xml設置訪問網絡權限：

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />

 

相關代碼：

        webview.setHorizontalScrollBarEnabled(false);//水平不顯示
        webview.setVerticalScrollBarEnabled(false); //垂直不顯示
        WebSettings webSettings = webview.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setBuiltInZoomControls(false);
        webSettings.setSupportZoom(false);
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
        webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.supportMultipleWindows();  //多窗口
        webSettings.setAppCacheMaxSize(1024 * 1024 * 25);//設置緩沖大小，我設的是8M
        webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
        webSettings.setSavePassword(true);
        webSettings.setAppCacheEnabled(true);
        webSettings.setSaveFormData(true);
        webSettings.setDomStorageEnabled(true);
        webSettings.setDatabaseEnabled(true);
　　　　　　//設置緩存
        if (!NetUtils.isNetworkAvailable(MainActivity.this)) {
            webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        } else {
            webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
        }
        webview.loadUrl("url");

 

private void showWebViewLoad(){
        webview.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                // TODO Auto-generated method stub
                return true;
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);

            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                linearLayout.setVisibility(View.GONE);
            }

            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                super.onReceivedError(view, errorCode, description, failingUrl);
                webviewError.setVisibility(View.VISIBLE);
            }
        });
    }

 

在對應的方法中完成相關功能；

 

源碼下載Github：https://github.com/DickyQie/android-webview-ui