Android WebView的缓存

Question

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，(这里加载了一个淘宝的图片):

　　

　　第三步:修改main.xml布局文件一个WebView控件一个Button(点击加载缓存图片用),代码如下:

2. 　　1. < ?xml version= "1.0" encoding= "utf-8" ?>
4. 　　2. < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
6. 　　3. android:orientation="vertical"
8. 　　4. android:layout_width="fill_parent"
10. 　　5. android:layout_height="fill_parent"
12. 　　6. >
14. 　　7. < WebView
16. 　　8. android:id="@+id/webview"
18. 　　9. android:layout_width="fill_parent"
20. 　　10. android:layout_height="wrap_content"
22. 　　11. />
24. 　　12. < Button
26. 　　13. android:id="@+id/button"
28. 　　14. android:layout_width="fill_parent"
30. 　　15. android:layout_height="wrap_content"
32. 　　16. android:text="从缓存里读取图片"
34. 　　17. />
36. 　　18. < /LinearLayout>

复制代码Java代码

1. 1. < ?xml version="1.0" encoding="utf-8"?>
3. 　　2. < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
5. 　　3. android:orientation="vertical"
7. 　　4. android:layout_width="fill_parent"

复制代码

Answer 1

接上页

1. 5. android:layout_height="fill_parent"
3. 　　6. >
5. 　　7. < WebView
7. 　　8. android:id="@+id/webview"
9. 　　9. android:layout_width="fill_parent"
11. 　　10. android:layout_height="wrap_content"
13. 　　11. />
15. 　　12. < Button
17. 　　13. android:id="@+id/button"
19. 　　14. android:layout_width="fill_parent"
21. 　　15. android:layout_height="wrap_content"
23. 　　16. android:text="从缓存里读取图片"
25. 　　17. />
27. 　　18. < /LinearLayout>

复制代码第四步:修改主核心程序WebViewCacheDemo.java，这里我只加载了index.html文件，按钮事件暂时没写,代码如下:

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

复制代码

Answer 2

接上页

1. 17.
3. 　　18. mWebView = (WebView)findViewById(R.id.webview);
5. 　　19. mWebView.loadUrl(url);
7. 　　20.
9. 　　21. // mButton = (Button)findViewById(R.id.button);
11. 　　22. // mButton.setOnClickListener(listener);
13. 　　23. }
15. 　　24. }

复制代码Java代码

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

复制代码第五步:在AndroidMainifest.xml文件中加访问网络的权限:

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

复制代码Java代码

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

复制代码运行效果如下:

　　此时我们在WebViewCache.db里的cache.table里多了一条记录如下图所示:

　　在cache/webviewCache/目录下多了一个10d8d5cd文件，刚好和cache.table里的filepath，我们可以断定这个文件就是我们从网上拽下来的图片:

　　为了验证猜想，我给Button增加事件响应，就是弹出Dialog，里面加载缓存的图片,完整代码如下:

1. 　1. package com.tutor.webviewcache;
3. 　　2. import java.io.File;
5. 　　3. import java.io.FileInputStream;
7. 　　4. import java.io.FileNotFoundException;
9. 　　5. import android.app.Activity;
11. 　　6. import android.app.Dialog;
13. 　　7. import android.graphics.Bitmap;
15. 　　8. import android.graphics.BitmapFactory;
17. 　　9. import android.os.Bundle;
19. 　　10. import android.view.View;
21. 　　11. import android.view.View.OnClickListener;
23. 　　12. import android.view.ViewGroup.LayoutParams;
25. 　　13. import android.webkit.WebView;
27. 　　14. import android.widget.Button;
29. 　　15. import android.widget.ImageButton;
31. 　　16. import android.widget.ImageView;
33. 　　17. public class WebViewCacheDemo extends Activity {
35. 　　18.
37. 　　19. private WebView mWebView;
39. 　　20. private Button mButton;
41. 　　21. private static final String url = "file:///android_asset/index.html" ;
43. 　　22. @Override
45. 　　23. public void onCreate(Bundle savedInstanceState) {
47. 　　24. super .onCreate(savedInstanceState);
49. 　　25. setContentView(R.layout.main);
51. 26.
53. 　　27. mWebView = (WebView)findViewById(R.id.webview);
55. 　　28. mWebView.loadUrl(url);
57. 　　29.
59. 　　30. mButton = (Button)findViewById(R.id.button);
61. 　　31. mButton.setOnClickListener(listener);
63. 　　32. }
65. 　　33.
67. 　　34. //button点击事件
69. 　　35. OnClickListener listener = new Button.OnClickListener(){
71. 　　36. @Override
73. 　　37. public void onClick(View v) {
75. 　　38. ImageView mImageView = new ImageButton(WebViewCacheDemo. this );
77. 　　39. mImageView.setImageBitmap(getPictureFromCache());
79. 　　40. Dialog d = new Dialog(WebViewCacheDemo. this );
81. 　　41. d.setTitle("从缓存里读取图片" );
83. 　　42. d.setContentView(mImageView,
85. 　　43. new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
87. 　　44. d.show();
89. 　　45. }
91. 　　46.
93. 　　47. };
95. 　　48. //从缓存里读取图片,实际实用中会比这个灵活多，我这里写死了
97. 　　49. private Bitmap getPictureFromCache(){
99. 　　50. Bitmap bitmap = null ;
101. 　　51. File file = new File(getCacheDir()+ "/webviewCache/10d8d5cd" );
103. 　　52. try {
105. 　　53. FileInputStream is = new FileInputStream(file);
107. 　　54. bitmap = BitmapFactory.decodeStream(is);
109. 　　55. } catch (FileNotFoundException e) {
111. 　　56. e.printStackTrace();
113. 　　57. }
115. 　　58. return bitmap;
117. 　　59. }
119. 　　60. }

复制代码Java代码

2. 　　1. package com.tutor.webviewcache;
4. 　　2. import java.io.File;
6. 　　3. import java.io.FileInputStream;
8. 　　4. import java.io.FileNotFoundException;
10. 　　5. import android.app.Activity;
12. 　　6. import android.app.Dialog;
14. 　　7. import android.graphics.Bitmap;
16. 　　8. import android.graphics.BitmapFactory;
18. 　　9. import android.os.Bundle;
20. 　　10. import android.view.View;
22. 　　11. import android.view.View.OnClickListener;

复制代码

Answer 3

1. 　12. import android.view.ViewGroup.LayoutParams;
3. 　　13. import android.webkit.WebView;
5. 　　14. import android.widget.Button;
7. 　　15. import android.widget.ImageButton;
9. 　　16. import android.widget.ImageView;
11. 　　17. public class WebViewCacheDemo extends Activity {
13. 　　18.
15. 　　19. private WebView mWebView;
17. 　　20. private Button mButton;
19. 　　21. private static final String url = "file:///android_asset/index.html";
21. 　　22. @Override
23. 　　23. public void onCreate(Bundle savedInstanceState) {
25. 　　24. super.onCreate(savedInstanceState);
27. 　　25. setContentView(R.layout.main);
29. 　　26.
31. 　　27. mWebView = (WebView)findViewById(R.id.webview);
33. 　　28. mWebView.loadUrl(url);
35. 　　29.
37. 　　30. mButton = (Button)findViewById(R.id.button);
39. 　　31. mButton.setOnClickListener(listener);
41. 　　32. }
43. 　　33.
45. 　　34. //button点击事件
47. 　　35. OnClickListener listener = new Button.OnClickListener(){
49. 　　36. @Override
51. 　　37. public void onClick(View v) {
53. 　　38. ImageView mImageView = new ImageButton(WebViewCacheDemo.this);
55. 　　39. mImageView.setImageBitmap(getPictureFromCache());
57. 　　40. Dialog d = new Dialog(WebViewCacheDemo.this);
59. 　　41. d.setTitle("从缓存里读取图片");
61. 　　42. d.setContentView(mImageView,
63. 　　43. new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
65. 　　44. d.show();
67. 　　45. }
69. 　　46.
71. 　　47. };
73. 　　48. //从缓存里读取图片,实际实用中会比这个灵活多，我这里写死了
75. 　　49. private Bitmap getPictureFromCache(){
77. 　　50. Bitmap bitmap = null;
79. 　　51. File file = new File(getCacheDir()+"/webviewCache/10d8d5cd");
81. 　　52. try {
83. 　　53. FileInputStream is = new FileInputStream(file);
85. 　　54. bitmap = BitmapFactory.decodeStream(is);
87.       55. } catch (FileNotFoundException e) {
89. 　　56. e.printStackTrace();
91. 　　57. }
93. 　　58. return bitmap;
95. 　　59. }
97. 　　60. }

复制代码第六步:再次运行工程，点击button按钮，效果如下图所示:

　　OK,验证成功，呵呵，今天只是一个简单的小例子加深大家理解，实际应用肯定比这个复杂的多，希望对大家有所帮助，谢谢!