Android高手進階教程(二十四)之——Android WebView的緩存

今天擠點時間和大家分享一下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(點擊加載緩存圖片用),代碼如下:

<?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文件，按鈕事件暫時沒寫,代碼如下:

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文件中加訪問網絡的權限:

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

運行效果如下:

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

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

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

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