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，(這裡加載了一個淘寶的圖片):

　　/School/UploadFiles_7810/201203/20120331164136190.jpg

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

　　vIEw plaincopy to clipboardprint?

　　1. < ?XML version= "1.0" encoding= "utf-8" ?>

　　2. < LinearLayout XMLns:android="http://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>

　　Java代碼

　　1. < ?XML version="1.0" encoding="utf-8"?>

　　2. < LinearLayout XMLns:android="http://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>

　　< ?xml version="1.0" encoding="utf-8"?> < LinearLayout XMLns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > < WebView android:id="@+id/webvIEw" android:layout_width="fill_parent" android:layout_height="wrap_content" /> < Button android:id="@+id/button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="從緩存裡讀取圖片" /> < /LinearLayout>

　　第四步:修改主核心程序WebVIEwCacheDemo.Java，這裡我只加載了index.Html文件，按鈕事件暫時沒寫,代碼如下:

　　vIEw plaincopy to clipboardprint?

　　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. }

　　Java代碼

　　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. }

　　package com.tutor.webviewcache; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.webkit.WebView; import android.widget.Button; public class WebViewCacheDemo extends Activity { private WebView mWebVIEw; //private Button mButton; private static final String url = "file:///android_asset/index.Html"; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mWebView = (WebView)findViewById(R.id.webview); mWebView.loadUrl(url); // mButton = (Button)findVIEwById(R.id.button); //

　　接上頁

mButton.setOnClickListener(listener); } }

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

　　vIEw plaincopy to clipboardprint?

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

　　Java代碼

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

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

　　運行效果如下:

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

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

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

　　vIEw plaincopy to clipboardprint?

　　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. }

　　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. }

　　package com.tutor.webvIEwcache; import java.io.File; import java.io.FileInputStream; import Java.io.FileNotFoundException; import android.app.Activity; import android.app.Dialog; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup.LayoutParams; import android.webkit.WebView; import android.widget.Button; import android.widget.ImageButton; import android.widget.ImageView; public class WebViewCacheDemo extends Activity { private WebView mWebVIEw; private Button mButton; private static final String url = "file:///android_asset/index.Html"; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mWebView = (WebView)findViewById(R.id.webview); mWebView.loadUrl(url); mButton = (Button)findViewById(R.id.button); mButton.setOnClickListener(listener); } //button點擊事件 OnClickListener listener = new Button.OnClickListener(){ @Override public void onClick(View v) { ImageView mImageView = new ImageButton(WebViewCacheDemo.this); mImageView.setImageBitmap(getPictureFromCache()); Dialog d = new Dialog(WebViewCacheDemo.this); d.setTitle("從緩存裡讀取圖片"); d.setContentView(mImageView, new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); d.show(); } }; //從緩存裡讀取圖片,實際實用中會比這個靈活多，我這裡寫死了 private Bitmap getPictureFromCache(){ Bitmap bitmap = null; File file = new File(getCacheDir()+"/webvIEwCache/10d8d5cd"); try { FileInputStream is = new FileInputStream(file); bitmap = BitmapFactory.decodeStream(is); } catch (FileNotFoundException e) { e.printStackTrace(); } return bitmap; } }

　　第六步:再次運行工程，點擊button按鈕，效果如下圖所示:

　　OK,驗證成功，呵呵，今天只是一個簡單的小例子加深大家理解，實際應用肯定比這個復雜的多，希望對大家有所幫助，謝謝!