閱讀829 返回首頁    go 阿裏雲 go 技術社區[雲棲]

Android WebView的緩存

 

各位讀者大家好，最近比較忙好久沒有寫blog了，今天擠點時間和大家分享一下Android中WebView的緩存。我們在項目中也時常會用到 WebView這個控件，當我們加載html時候，會在我們data/應用package下生成database與cache兩個文件夾如下圖如示:

　　我們請求的url記錄是保存在webviewCache.db裏，而url的內容是保存在webviewCache文件夾下.

　　為了讓大家更容易理解，我做一個簡單的例子,我定義一個html文件,在裏麵加載了一個淘寶的衣服圖片的url，用WebView加載出來，然後再試著從緩存裏把這張圖片讀取出來。

　　下麵大家可以按照我的步驟一步一步來實踐:

　　第一步:新建一個Android工程命名為WebViewCacheDemo.目錄結構如下:

　　第二步:在assets目錄下新建一個html文件，命名為index.html，(這裏加載了一個淘寶的圖片):

　　https://img04.taobaocdn.com/imgextra/i4/608825099/T2nGXBXXpaXXXXXXXX_!!608825099.jpg_310x310.jpg

　　第三步:修改main.xml布局文件一個WebView控件一個Button(點擊加載緩存圖片用),代碼如下:

 

XML/HTML代碼
  1.     < ?xml version="1.0" encoding="utf-8"?>  
  2.     < LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5. android:layout_height="fill_parent"  
  6.     >  
  7.     < WebView  
  8.     android:id="@+id/webview"  
  9.     android:layout_width="fill_parent"  
  10.      android:layout_height="wrap_content"  
  11.      />  
  12.      < Button  
  13.      android:id="@+id/button"  
  14.      android:layout_width="fill_parent"  
  15.      android:layout_height="wrap_content"  
  16.      android:text="從緩存裏讀取圖片"  
  17.      />  
  18.      < /LinearLayout>  

第四步:修改主核心程序WebViewCacheDemo.java，這裏我隻加載了index.html文件，按鈕事件暫時沒寫,代碼如下:

XML/HTML代碼

  1. package com.tutor.webviewcache;   
  2. import android.app.Activity;   
  3. import android.os.Bundle;   
  4. import android.view.View;   
  5. import android.view.View.OnClickListener;   
  6. import android.webkit.WebView;   
  7. import android.widget.Button;   
  8. public class WebViewCacheDemo extends Activity {   
  9.   
  10.  private WebView mWebView;   
  11.  //private Button mButton;   
  12.  private static final String url = "file:///android_asset/index.html";   
  13.  @Override   
  14.  public void onCreate(Bundle savedInstanceState) {   
  15.  super.onCreate(savedInstanceState);   
  16.  setContentView(R.layout.main);   
  17.   
  18.  mWebView = (WebView)findViewById(R.id.webview);   
  19.  mWebView.loadUrl(url);   
  20.   
  21.  // mButton = (Button)findViewById(R.id.button);   
  22.  // mButton.setOnClickListener(listener);   
  23.  }   
  24.  }   

第五步:在AndroidMainifest.xml文件中加訪問網絡的權限:

XML/HTML代碼

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

　運行效果如下:

　　此時我們在WebViewCache.db裏的cache.table裏多了一條記錄如下圖所示:

　　在cache/webviewCache/目錄下多了一個10d8d5cd文件，剛好和cache.table裏的filepath，我們可以斷定這個文件就是我們從網上拽下來的圖片:

　　為了驗證猜想，我給Button增加事件響應，就是彈出Dialog，裏麵加載緩存的圖片,完整代碼如下:

Java代碼

  1. package com.tutor.webviewcache;   
  2. import java.io.File;   
  3. import java.io.FileInputStream;   
  4. import java.io.FileNotFoundException;   
  5. import android.app.Activity;   
  6. import android.app.Dialog;   
  7. import android.graphics.Bitmap;   
  8. import android.graphics.BitmapFactory;   
  9. import android.os.Bundle;   
  10.  import android.view.View;   
  11.  import android.view.View.OnClickListener;   
  12.  import android.view.ViewGroup.LayoutParams;   
  13.  import android.webkit.WebView;   
  14.  import android.widget.Button;   
  15.  import android.widget.ImageButton;   
  16.  import android.widget.ImageView;   
  17.  public class WebViewCacheDemo extends Activity {   
  18.   
  19.  private WebView mWebView;   
  20.  private Button mButton;   
  21.  private static final String url = "file:///android_asset/index.html" ;   
  22.  @Override  
  23.  public void onCreate(Bundle savedInstanceState) {   
  24.  super .onCreate(savedInstanceState);   
  25.  setContentView(R.layout.main);   
  26.   
  27.  mWebView = (WebView)findViewById(R.id.webview);   
  28.  mWebView.loadUrl(url);   
  29.   
  30.  mButton = (Button)findViewById(R.id.button);   
  31.  mButton.setOnClickListener(listener);   
  32.  }   
  33.   
  34.  //button點擊事件   
  35.  OnClickListener listener = new Button.OnClickListener(){   
  36.  @Override  
  37.  public void onClick(View v) {   
  38.  ImageView mImageView = new ImageButton(WebViewCacheDemo. this );   
  39.  mImageView.setImageBitmap(getPictureFromCache());   
  40.  Dialog d = new Dialog(WebViewCacheDemo. this );   
  41.  d.setTitle("從緩存裏讀取圖片" );   
  42.  d.setContentView(mImageView,   
  43.  new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));   
  44.  d.show();   
  45.  }   
  46.   
  47.  };   
  48.  //從緩存裏讀取圖片,實際實用中會比這個靈活多，我這裏寫死了   
  49.  private Bitmap getPictureFromCache(){   
  50.  Bitmap bitmap = null ;   
  51.  File file = new File(getCacheDir()+ "/webviewCache/10d8d5cd" );   
  52.  try {   
  53.  FileInputStream is = new FileInputStream(file);   
  54.  bitmap = BitmapFactory.decodeStream(is);   
  55.  } catch (FileNotFoundException e) {   
  56.  e.printStackTrace();   
  57.  }   
  58.  return bitmap;   
  59.  }   
  60.  }   

 

最後更新：2017-04-02 06:51:48

  上一篇：go Android控件之ProgressBar探究
  下一篇：go 7.1.4 ScrollView結合案例詳解