Android 照片墙完整版，完美结合 LruCache 和 DiskLruCache

在上一篇文章当中，我们学习了 DiskLruCache 的概念和基本用法，但仅仅是掌握理论知识显然是不够的，那么本篇文章我们就来继续进阶一下，看一看在实战当中应该怎样合理使用DiskLruCache。还不熟悉DiskLruCache用法的朋友可以先去参考我的上一篇文章 Android DiskLruCache完全解析，硬盘缓存的最佳方案。

其实，在真正的项目实战当中如果仅仅是使用硬盘缓存的话，程序是有明显短板的。而如果只使用内存缓存的话，程序当然也会有很大的缺陷。因此，一个优秀的程序必然会将内存缓存和硬盘缓存结合到一起使用，那么本篇文章我们就来看一看，如何才能将 LruCache 和 DiskLruCache 完美结合到一起。

在 Android照片墙应用实现，再多的图片也不怕崩溃 这篇文章当中，我编写了一个照片墙的应用程序，但当时只是单纯使用到了内存缓存而已，而今天我们就对这个例子进行扩展，制作一个完整版的照片墙。

那我们开始动手吧，新建一个 Android 项目，起名叫 PhotoWallDemo，这里我使用的是 Android 4.0 的 API。然后新建一个 libcore.io 包，并将 DiskLruCache.java 文件拷贝到这个包下，这样就把准备工作完成了。

接下来首先需要考虑的仍然是图片源的问题，简单起见，我仍然是吧所有图片都上传到了我的 CSDN 相册当中，然后新建一个 Images 类，将所有相册中图片的网址都配置进去，

代码如下所示：

public class Images {

    public final static String[] imageUrls = new String[] {

            "http://img.my.csdn.net/uploads/201309/01/1378037235_3453.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037235_7476.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037235_9280.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037234_3539.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037234_6318.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037194_2965.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037193_1687.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037193_1286.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037192_8379.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037178_9374.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037177_1254.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037177_6203.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037152_6352.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037151_9565.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037151_7904.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037148_7104.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037129_8825.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037128_5291.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037128_3531.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037127_1085.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037095_7515.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037094_8001.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037093_7168.jpg",
            "http://img.my.csdn.net/uploads/201309/01/1378037091_4950.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949643_6410.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949642_6939.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949630_4505.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949630_4593.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949629_7309.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949629_8247.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949615_1986.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949614_8482.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949614_3743.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949614_4199.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949599_3416.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949599_5269.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949598_7858.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949598_9982.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949578_2770.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949578_8744.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949577_5210.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949577_1998.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949482_8813.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949481_6577.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949480_4490.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949455_6792.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949455_6345.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949442_4553.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949441_8987.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949441_5454.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949454_6367.jpg",
            "http://img.my.csdn.net/uploads/201308/31/1377949442_4562.jpg" };
}

设置好了图片源之后，我们需要一个 GridView 来展示照片墙上的每一张图片。打开或修改 activity_main.xml中的代码，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <GridView
        android:id="@+id/gvPhotoWall"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnWidth="@dimen/image_thumbnail_size"
        android:gravity="center"
        android:horizontalSpacing="@dimen/image_thumbnail_spacing"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
        android:verticalSpacing="@dimen/image_thumbnail_spacing" >
    </GridView>

</LinearLayout>
 
很简单，只是在 LinearLayout 中写了一个 GridView 而已。接着我们要定义 GridView 中每一个子 View 的布局，新建一个 photo_layout.xml 布局，加入如下代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <ImageView 
        android:id="@+id/photo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:scaleType="fitXY"
        />

</RelativeLayout>

仍然很简单，photo_layout.xml 布局中只有一个 ImageView 控件，就是用它来显示图片的。这样我们就把所有的布局文件都写好了。
接下来新建 PhotoWallAdapter 做为 GridView 的适配器，代码如下所示：

public class PhotoWallAdapter extends ArrayAdapter<String> {

    /**
     * 记录所有正在下载或等待下载的任务。
     */
    private Set<BitmapWorkerTask> taskCollection;

    /**
     * 图片缓存技术的核心类，用于缓存所有下载好的图片，在程序内存达到设定值时会将最少最近使用的图片移除掉。
     */
    private LruCache<String, Bitmap> mMemoryCache;

    /**
     * 图片硬盘缓存核心类。
     */
    private DiskLruCache mDiskLruCache;

    /**
     * GridView的实例
     */
    private GridView mPhotoWall;

    /**
     * 记录每个子项的高度。
     */
    private int mItemHeight = 0;

    public PhotoWallAdapter(Context context, int textViewResourceId,
            String[] objects, GridView photoWall) {

        super(context, textViewResourceId, objects);

        mPhotoWall = photoWall;
        taskCollection = new HashSet<BitmapWorkerTask>();

        // 获取应用程序最大可用内存
        int maxMemory = (int) Runtime.getRuntime().maxMemory();
        int cacheSize = maxMemory / 8;

        // 设置图片缓存大小为程序最大可用内存的1/8
        mMemoryCache = new LruCache<String, Bitmap>(cacheSize) {
            
            @Override
            protected int sizeOf(String key, Bitmap bitmap) {
                
                return bitmap.getByteCount();
            }
        };

        try {

            // 获取图片缓存路径
            File cacheDir = getDiskCacheDir(context, "thumb");

            if (!cacheDir.exists()) {

                cacheDir.mkdirs();
            }

            // 创建 DiskLruCache 实例，初始化缓存数据
            mDiskLruCache = DiskLruCache.open(cacheDir, getAppVersion(context),
                    1, 10 * 1024 * 1024);

        } catch (IOException e) {

            e.printStackTrace();
        }
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        final String url = getItem(position);
        View view;
        if (convertView == null) {
            view = LayoutInflater.from(getContext()).inflate(
                    R.layout.photo_layout, null);
        } else {
            view = convertView;
        }
        final ImageView imageView = (ImageView) view.findViewById(R.id.photo);
        if (imageView.getLayoutParams().height != mItemHeight) {
            imageView.getLayoutParams().height = mItemHeight;
        }
        // 给ImageView设置一个Tag，保证异步加载图片时不会乱序
        imageView.setTag(url);
        imageView.setImageResource(R.drawable.empty_photo);
        loadBitmaps(imageView, url);
        return view;
    }

    /**
     * 将一张图片存储到LruCache中。
     * 
     * @param key
     *            LruCache的键，这里传入图片的URL地址。
     * @param bitmap
     *            LruCache的键，这里传入从网络上下载的Bitmap对象。
     */
    public void addBitmapToMemoryCache(String key, Bitmap bitmap) {
        if (getBitmapFromMemoryCache(key) == null) {
            mMemoryCache.put(key, bitmap);
        }
    }

    /**
     * 从LruCache中获取一张图片，如果不存在就返回null。
     * 
     * @param key
     *            LruCache的键，这里传入图片的URL地址。
     * @return 对应传入键的Bitmap对象，或者null。
     */
    public Bitmap getBitmapFromMemoryCache(String key) {
        return mMemoryCache.get(key);
    }

    /**
     * 加载Bitmap对象。此方法会在LruCache中检查所有屏幕中可见的ImageView的Bitmap对象，
     * 如果发现任何一个ImageView的Bitmap对象不在缓存中，就会开启异步线程去下载图片。
     */
    public void loadBitmaps(ImageView imageView, String imageUrl) {
        try {
            Bitmap bitmap = getBitmapFromMemoryCache(imageUrl);
            if (bitmap == null) {
                BitmapWorkerTask task = new BitmapWorkerTask();
                taskCollection.add(task);
                task.execute(imageUrl);
            } else {
                if (imageView != null && bitmap != null) {
                    imageView.setImageBitmap(bitmap);
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 取消所有正在下载或等待下载的任务。
     */
    public void cancelAllTasks() {
        if (taskCollection != null) {
            for (BitmapWorkerTask task : taskCollection) {
                task.cancel(false);
            }
        }
    }

    /**
     * 根据传入的uniqueName获取硬盘缓存的路径地址。
     */
    public File getDiskCacheDir(Context context, String uniqueName) {
        String cachePath;
        if (Environment.MEDIA_MOUNTED.equals(Environment
                .getExternalStorageState())
                || !Environment.isExternalStorageRemovable()) {
            cachePath = context.getExternalCacheDir().getPath();
        } else {
            cachePath = context.getCacheDir().getPath();
        }
        return new File(cachePath + File.separator + uniqueName);
    }

    /**
     * 获取当前应用程序的版本号。
     */
    public int getAppVersion(Context context) {
        try {
            PackageInfo info = context.getPackageManager().getPackageInfo(
                    context.getPackageName(), 0);
            return info.versionCode;
        } catch (NameNotFoundException e) {
            e.printStackTrace();
        }
        return 1;
    }

    /**
     * 设置item子项的高度。
     */
    public void setItemHeight(int height) {
        if (height == mItemHeight) {
            return;
        }
        mItemHeight = height;
        notifyDataSetChanged();
    }

    /**
     * 使用 MD5 算法对传入的 key 进行加密并返回。
     */
    public String hashKeyForDisk(String key) {

        String cacheKey;

        try {

            final MessageDigest mDigest = MessageDigest.getInstance("MD5");
            mDigest.update(key.getBytes());
            cacheKey = bytesToHexString(mDigest.digest());

        } catch (NoSuchAlgorithmException e) {

            cacheKey = String.valueOf(key.hashCode());
        }

        return cacheKey;
    }

    /**
     * 将缓存记录同步到journal文件中。
     */
    public void fluchCache() {
        if (mDiskLruCache != null) {
            try {
                mDiskLruCache.flush();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    private String bytesToHexString(byte[] bytes) {

        StringBuilder sb = new StringBuilder();

        for (int i = 0; i < bytes.length; i++) {

            String hex = Integer.toHexString(0xFF & bytes[i]);

            if (hex.length() == 1) {

                sb.append('0');
            }

            sb.append(hex);
        }

        return sb.toString();
    }

    /**
     * 异步下载图片的任务。
     * 
     * @author guolin
     */
    class BitmapWorkerTask extends AsyncTask<String, Void, Bitmap> {

        /**
         * 图片的URL地址
         */
        private String imageUrl;

        @Override
        protected Bitmap doInBackground(String... params) {
            imageUrl = params[0];
            FileDescriptor fileDescriptor = null;
            FileInputStream fileInputStream = null;
            Snapshot snapShot = null;
            try {

                // 生成图片URL对应的key
                final String key = hashKeyForDisk(imageUrl);
                // 查找key对应的缓存
                snapShot = mDiskLruCache.get(key);
                if (snapShot == null) {
                    // 如果没有找到对应的缓存，则准备从网络上请求数据，并写入缓存
                    DiskLruCache.Editor editor = mDiskLruCache.edit(key);
                    if (editor != null) {
                        OutputStream outputStream = editor.newOutputStream(0);
                        if (downloadUrlToStream(imageUrl, outputStream)) {
                            editor.commit();
                        } else {
                            editor.abort();
                        }
                    }
                    // 缓存被写入后，再次查找key对应的缓存
                    snapShot = mDiskLruCache.get(key);
                }
                if (snapShot != null) {

                    fileInputStream = (FileInputStream) snapShot
                            .getInputStream(0);
                    fileDescriptor = fileInputStream.getFD();
                }
                // 将缓存数据解析成Bitmap对象
                Bitmap bitmap = null;
                if (fileDescriptor != null) {
                    bitmap = BitmapFactory.decodeFileDescriptor(fileDescriptor);
                }
                if (bitmap != null) {
                    // 将Bitmap对象添加到内存缓存当中
                    addBitmapToMemoryCache(params[0], bitmap);
                }
                return bitmap;
            } catch (IOException e) {
                e.printStackTrace();
            } finally {
                if (fileDescriptor == null && fileInputStream != null) {
                    try {
                        fileInputStream.close();
                    } catch (IOException e) {
                    }
                }
            }
            return null;
        }

        @Override
        protected void onPostExecute(Bitmap bitmap) {
            super.onPostExecute(bitmap);
            // 根据Tag找到相应的ImageView控件，将下载好的图片显示出来。
            ImageView imageView = (ImageView) mPhotoWall
                    .findViewWithTag(imageUrl);
            if (imageView != null && bitmap != null) {
                imageView.setImageBitmap(bitmap);
            }
            taskCollection.remove(this);
        }

        /**
         * 建立HTTP请求，并获取 Bitmap 对象。
         * 
         * @param imageUrl
         *            图片的URL地址
         * @return 解析后的Bitmap对象
         */
        private boolean downloadUrlToStream(String urlString,
                OutputStream outputStream) {

            HttpURLConnection urlConnection = null;
            BufferedOutputStream out = null;
            BufferedInputStream in = null;

            try {

                final URL url = new URL(urlString);
                urlConnection = (HttpURLConnection) url.openConnection();

                in = new BufferedInputStream(urlConnection.getInputStream(),
                        8 * 1024);

                out = new BufferedOutputStream(outputStream, 8 * 1024);

                int b;

                while ((b = in.read()) != -1) {
                    out.write(b);
                }

                return true;
            } catch (final IOException e) {
                e.printStackTrace();
            } finally {

                if (urlConnection != null) {

                    urlConnection.disconnect();
                }

                try {

                    if (out != null) {

                        out.close();
                    }

                    if (in != null) {

                        in.close();
                    }

                } catch (final IOException e) {

                    e.printStackTrace();
                }
            }
            return false;
        }
    }

}

代码有点长，我们一点点进行分析。首先在 PhotoWallAdapter 的构造函数中，我们初始化了 LruCache 类，并设置了内存缓存容量为程序最大可用内存的 1/8，紧接着调用了DiskLruCache 的 open() 方法来创建实例，并设置了硬盘缓存容量为 10M，这样我们就把 LruCache 和 DiskLruCache 的初始化工作完成了。

接着在 getView() 方法中，我们为每个 ImageView 设置了一个唯一的 Tag，这个 Tag 的作用是为了后面能够准确地找回这个 ImageView，不然异步加载图片会出现乱序的情况。然后在 getView() 方法的最后调用了 loadBitmaps() 方法，加载图片的具体逻辑也就是在这里执行的了。

进入到 loadBitmaps() 方法中可以看到，实现是调用了getBitmapFromMemoryCache() 方法来从内存中获取缓存，如果获取到了则直接调用 ImageView 的 setImageBitmap() 方法将图片显示到界面上。如果内存中没有获取到，则开启一个 BitmapWorkerTask 任务来去异步加载图片。

那么在 BitmapWorkerTask 的 doInBackground() 方法中，我们就灵活运用了上篇文章中学习的 DiskLruCache 的各种用法。首先根据图片的 URL 生成对应的 MD5 key，然后调用 DiskLruCache 的 get() 方法来获取硬盘缓存，如果没有获取到的话则从网络上请求图片并写入硬盘缓存，接着将 Bitmap 对象解析出来并添加到内存缓存当中，最后将这个Bitmap 对象显示到界面上，这样一个完整的流程就执行完了。

那么我们再来分析一下上述流程，每次加载图片的时候都优先去内存缓存当中读取，当读取不到的时候则回去硬盘缓存中读取，而如果硬盘缓存仍然读取不到的话，就从网络上请求原始数据。不管是从硬盘缓存还是从网络获取，读取到了数据之后都应该添加到内存缓存当中，这样的话我们下次再去读取图片的时候就能迅速从内存当中读取到，而如果该图片从内存中被移除了的话，那就重复再执行一遍上述流程就可以了。

这样我们就把 LruCache 和 DiskLruCache 完美结合到一起了。接下来还需要编写 PhotoWallActivity 的代码，非常简单，如下所示：

public class PhotoWallActivity extends Activity {

    /**
     * 用于展示照片墙的GridView
     */
    private GridView mPhotoWall;

    /**
     * GridView的适配器
     */
    private PhotoWallAdapter mAdapter;

    private int mImageThumbSize;
    private int mImageThumbSpacing;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_lru_disk_cache);

        mImageThumbSize = getResources().getDimensionPixelSize(
                R.dimen.image_thumbnail_size);

        mImageThumbSpacing = getResources().getDimensionPixelSize(
                R.dimen.image_thumbnail_spacing);

        mPhotoWall = (GridView) findViewById(R.id.gvPhotoWall);

        mAdapter = new PhotoWallAdapter(this, 0, Images.imageThumbUrls,
                mPhotoWall);

        mPhotoWall.setAdapter(mAdapter);

        mPhotoWall.getViewTreeObserver().addOnGlobalLayoutListener(
                new ViewTreeObserver.OnGlobalLayoutListener() {

                    @Override
                    public void onGlobalLayout() {
                        
                        final int numColumns = (int) Math.floor(mPhotoWall
                                .getWidth()
                                / (mImageThumbSize + mImageThumbSpacing));
                        if (numColumns > 0) {
                            int columnWidth = (mPhotoWall.getWidth() / numColumns)
                                    - mImageThumbSpacing;
                            mAdapter.setItemHeight(columnWidth);
                            mPhotoWall.getViewTreeObserver()
                                    .removeGlobalOnLayoutListener(this);
                        }
                    }
                });
    }

    @Override
    protected void onPause() {
        super.onPause();
        mAdapter.fluchCache();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        // 退出程序时结束所有的下载任务
        mAdapter.cancelAllTasks();
    }
}

上述代码中，我们通过 getViewTreeObserver() 的方式监听 View 的布局事件，当布局完成以后，我们重新修改一下 GridView 中子 View 的高度，以保证子 View 的宽度和高度可以保持一致。

到这里还没有结束，最后还需要配置一下 AndroidManifest.xml 文件，并加入相应的权限，如下所示：

    <!-- 往SDCard写入权限 -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- 网络权限 允许应用程序打开网络套接字 -->
    <uses-permission android:name="android.permission.INTERNET" />

好了，全部代码都在这儿了，让我们来运行一下吧，效果如下图所示：

第一次从网络上请求图片的时候有点慢，但之后加载图片就会非常快了，滑动起来也很流畅。

那么我们最后再检查一下这些图片是不是已经正确缓存在指定地址了，进入 /sdcard/Android/data/<application package>/cache/thumb 这个路径，如下图所示：

可以看到，每张图片的缓存以及 journal 文件都在这里了，说明我们的硬盘缓存已经成功了。
好了，今天的讲解就到这里，有疑问的朋友可以在下面留言。
源码下载，请点击这里