【Android】图片的异步加载

这几天做项目，遇到要从一个相册里面加载数百张图片到GridView的问题，一开始将图片读取为bitmap，由于图片数量过多，发生OOM异常，导致程序崩溃。解决的方案网上也有很多，大致就是将图缩略之后再显示。具体见另外一篇博客（～～）。下面要讲的是另外一个问题。

将图缩略之后，因为要读取数百张图片进行缩略，耗时非常长久。但是事实上GridView(ListView也一样)在一个屏幕上显示的图片数量是有限的，如果首先显示一屏幕，后台再慢慢的加载其余的图片，无疑比让用户黑着屏幕长时间的等待这样的体验要来的好的多。

根据网上所查的资料，目前有两套解决方案：

1）根据博客[源码、文档、分享] 【开发共享】获取Android手机上的图片和视频缩略图，我们可以知道其实Android是自带缩略图的，缩略图在一个叫做.thumbnails的隐藏文件夹中（我写的读取SD卡所有图片格式的文件的程序是可以读取这个隐藏文件的），所以，如果直接读取这个文件夹中的文件，就可以省去图的缩略过程。（这个我没有实验，感觉比较繁琐，而且也不符合我所做项目的需要）；

2）异步加载。思路和上面提到的差不多，先用一张默认空白图片先占位，之后慢慢的一张张加载，加载完毕就刷新。下面主要探讨的就是如何异步加载。

根据异步加载的思想，我们必须要刷新主界面，Android Handler机制中提到，主界面中主线程是负责管理界面的，要刷新我们就得通知主界面，所以很容易就想到Handler机制。额，所以目前可以这么考虑，假设我么要实现异步加载一张图片，我们可以先用一张默认图片替这个要加载的图片占位，然后将图片的加载放到一个线程里面（主要是不去影响主线程）加载完毕之后，我们可以让这个线程发消息给主线程，之后就可以由主线程更新了。（下面的代码很多是转自：Android异步加载图像小结）代码类似如下：

 private void loadImage(final String url, final int id) {
         handler.post(new Runnable() {
                public void run() {
                    Drawable drawable = null;
                    try {
                        drawable = Drawable.createFromStream(new URL(url).openStream(), "image.png");
　　　　　　　　　　　　　　　　//A
                    } catch (IOException e) {
                    }
                    ((ImageView) LazyLoadImageActivity.this.findViewById(id)).setImageDrawable(drawable);
　　　　　　　　　　　　　　　 //B
                }
            });
    }

这里使用的是post，post的具体使用在Android Handler机制中讲过，将线程排进主线程的线程队列，然后等待执行，执行的结果就是ImageView更新Drawable.根据原博客的说法，这种方法的缺陷是如果要加载多个图片，这并不能实现异步加载，而是等到所有的图片都加载完才一起显示，因为它们都运行在一个线程中。我想它的写法是，在A处和B处重复同样的代码，这个样子的确是无法做到几张图片异步加载，因为更新是在一起进行的。但是换个写法差不多就可以了，我们连续使用多个post，每个post里面为一个组件加载一个图片，这样就可以实现异步加载了，慢慢来（对吧？）。

 

好吧，我们来考虑原博客里面的第一次改进，它将Handler+Runnable模式改为Handler+Thread+Message模式。我们先来看一下代码：

第一段：

private void loadImage2(final String url, final int id) {
         Thread thread = new Thread(){
             @Override
             public void run() {
               Drawable drawable = null;
                    try {
                        drawable = Drawable.createFromStream(new URL(url).openStream(), "image.png");
                    } catch (IOException e) {
                    }

                Message message= handler2.obtainMessage() ;
                 message.arg1 = id;
                 message.obj = drawable;
                 handler2.sendMessage(message);
             }
         };
         thread.start();
         thread = null;
    }

第二段：

final Handler handler2=new Handler(){
          @Override
          public void handleMessage(Message msg) {
             ((ImageView) LazyLoadImageActivity.this.findViewById(msg.arg1)).setImageDrawable((Drawable)msg.obj);
          }
      };

这段代码里面新建一个线程，一旦加载完毕就通过Message通知主线程。在主线程的handler中处理图片的更新。其实没什么改进，就是将线程提出来，通知的方式由Message实现。博客后面提出的引入线程池则是主要是管理多线程（因为是在线程里面发送message，所以多线程很好实现），引入缓存的比较值得看一下：做法是建立一个HashMap，其键（key）为加载图像url，其值（value）是图像对象Drawable（原理就是保存其引用，避免重复加载同一张图片）。

public class AsyncImageLoader3 {
   //为了加快速度，在内存中开启缓存（主要应用于重复图片较多时，或者同一个图片要多次被访问，比如在ListView时来回滚动）
    public Map<String, SoftReference<Drawable>> imageCache = new HashMap<String, SoftReference<Drawable>>();
    private ExecutorService executorService = Executors.newFixedThreadPool(5);    //固定五个线程来执行任务
    private final Handler handler=new Handler();

     /**
     *
     * @param imageUrl     图像url地址
     * @param callback     回调接口
     * @return     返回内存中缓存的图像，第一次加载返回null
     */
    public Drawable loadDrawable(final String imageUrl, final ImageCallback callback) {
        //如果缓存过就从缓存中取出数据
        if (imageCache.containsKey(imageUrl)) {
            SoftReference<Drawable> softReference = imageCache.get(imageUrl);
            if (softReference.get() != null) {
                return softReference.get();
            }
        }
        //缓存中没有图像，则从网络上取出数据，并将取出的数据缓存到内存中
         executorService.submit(new Runnable() {
            public void run() {
                try {
                    final Drawable drawable = Drawable.createFromStream(new URL(imageUrl).openStream(), "image.png");

                    imageCache.put(imageUrl, new SoftReference<Drawable>(drawable));

                    handler.post(new Runnable() {
                        public void run() {
                           callback.imageLoaded(drawable);
                        }
                    });
                } catch (Exception e) {
                    throw new RuntimeException(e);
                }
            }
        });
        return null;
    }

这里出现两个新概念SoftwareReference和ImageCallback，我们先不管，之后再解释。先看代码，我们维系了一个map，每次加载一张图片就以url为key，将图片保存在map中，下次加载的时候先检测map中是否可包含url的key，不包含的再去下载。

ImageCallback其实是个接口，这个接口的存在非常关键，因为已经把加载的方法封装在类里面，在这个类里面要获取祝Activity的handler已经非常困难了（没有细想，传递参数或许可能实现），我们需要一种将图片跟新到界面上的有效方法：

//对外界开放的回调接口
    public interface ImageCallback {
        //注意 此方法是用来设置目标对象的图像资源
        public void imageLoaded(Drawable imageDrawable);
    }

在主线程中首先要引入AsyncImageLoader3 对象，然后直接调用其loadDrawable方法即可，需要注意的是ImageCallback接口的imageLoaded方法是唯一可以把加载的图像设置到目标ImageView或其相关的组件上。具体代码如下：

//引入线程池，并引入内存缓存功能,并对外部调用封装了接口，简化调用过程
    private void loadImage4(final String url, final int id) {
          //如果缓存过就会从缓存中取出图像，ImageCallback接口中方法也不会被执行
         Drawable cacheImage = asyncImageLoader.loadDrawable(url,new AsyncImageLoader.ImageCallback() {
             //请参见实现：如果第一次加载url时下面方法会执行
             public void imageLoaded(Drawable imageDrawable) {
               ((ImageView) findViewById(id)).setImageDrawable(imageDrawable);
             }
         });
        if(cacheImage!=null){
          ((ImageView) findViewById(id)).setImageDrawable(cacheImage);
        }
    }

注意注意！这里实现了接口当中的imageLoaded方法，就是更新界面！（嗯？所以假设我要在GridView里面显示一组图片的话，就是将u一组rl传入就行？）

原博客中还提到了使用handler的方法（下面也有解释），读者有兴趣可以去好好看看。接下来就给出一段具体的GridView异步加载图片的例子。之前推荐两篇博客：

1）演化理解 Android 异步加载图片（对前面例子代码的总结）

2）Android GridView 异步加载图片（例子就是转自第二篇博客）

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        GridView gridView=(GridView)findViewById(R.id.gridview);
        List<ImageAndText> list = new ArrayList<ImageAndText>();
        String[] paths=new String[15];
        for(int i=0;i<15;i++){
            int index=i;
            paths[i]="/sdcard/"+String.valueOf(index+1)+".jpg";//自己动手向SD卡添加15张图片，如：1.jpg
        }
        for(int i=0;i<15;i++){
            list.add(new ImageAndText(paths[i], String.valueOf(i)));
        }
        gridView.setAdapter(new ImageAndTextListAdapter(this, list, gridView));
    }
}

这个类没什么，就是Android的主界面，声明了一个GridView，然后加载了几个SD卡上图片的地址，ImageAndText是一个辅助类，代码如下：

public class ImageAndText {
        private String imageUrl;
        private String text;

        public ImageAndText(String imageUrl, String text) {
            this.imageUrl = imageUrl;
            this.text = text;
        }
        public String getImageUrl() {
            return imageUrl;
        }
        public String getText() {
            return text;
        }
}

记载了图片的具体地址以及要显示的文字。

以下代码是实现异步获取图片的主方法，SoftReference是软引用，是为了更好的为了系统回收变量，重复的URL直接返回已有的资源，实现回调函数，让数据成功后，更新到UI线程。

import java.io.IOException;
import java.io.InputStream;
import java.lang.ref.SoftReference;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.HashMap;

import android.R.drawable;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapFactory.Options;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.widget.ImageView;

public class AsyncImageLoader {

     private HashMap<String, SoftReference<Drawable>> imageCache;
     public AsyncImageLoader() {
             imageCache = new HashMap<String, SoftReference<Drawable>>();
         }
      
     public Drawable loadDrawable(final String imageUrl, final ImageCallback imageCallback) {
             if (imageCache.containsKey(imageUrl)) {
                 SoftReference<Drawable> softReference = imageCache.get(imageUrl);
                 Drawable drawable = softReference.get();
                 if (drawable != null) {
                     return drawable;
                 }
             }
             final Handler handler = new Handler() {
                 public void handleMessage(Message message) {
                     imageCallback.imageLoaded((Drawable) message.obj, imageUrl);
                 }
             };
             new Thread() {
                 @Override
                 public void run() {
                     Drawable drawable = loadImageFromUrl(imageUrl);
                     imageCache.put(imageUrl, new SoftReference<Drawable>(drawable));
                     Message message = handler.obtainMessage(0, drawable);
                     handler.sendMessage(message);
                 }
             }.start();
             return null;
         }
       
    public static Drawable loadImageFromUrl(String url) {
//        /**
//         * 加载网络图片
//         */
//            URL m;
//            InputStream i = null;
//            try {
//                m = new URL(url);
//                i = (InputStream) m.getContent();
//            } catch (MalformedURLException e1) {
//                e1.printStackTrace();
//            } catch (IOException e) {
//                e.printStackTrace();
//            }
//            Drawable d = Drawable.createFromStream(i, "src");
        
        /**
         * 加载内存卡图片
         */
            Options options=new Options();
            options.inSampleSize=2;
            Bitmap bitmap=BitmapFactory.decodeFile(url, options);
            Drawable drawable=new BitmapDrawable(bitmap);
            return drawable;
        }
      
    　　　public interface ImageCallback {
             public void imageLoaded(Drawable imageDrawable, String imageUrl);
             
         }
}

这段代码和前面展示的非常相似，但是有些地方是不一样的，比如使用了handler，图片家在完毕后会调用handler进行消息发送，而handler则调用imageCallback接口中的imageLoad回调函数。loadImageFromUrl里面则展示了如何将图片缩小的方法。看到这里是有一个问题的，我们知道handler只会将消息发送给对应的线程，如果我们要将图片更新到主线程，换句话说，handler必须来自主线程？（额，从整个代码来看，因为这个类的实例是在Activity里面使用的，所以这个handler很自然是来自主线程的）

import java.util.List;

import cn.wangmeng.test.AsyncImageLoader.ImageCallback;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

public class ImageAndTextListAdapter extends ArrayAdapter<ImageAndText> {

        private GridView gridView;
        private AsyncImageLoader asyncImageLoader;
        public ImageAndTextListAdapter(Activity activity, List<ImageAndText> imageAndTexts, GridView gridView1) {
            super(activity, 0, imageAndTexts);
            this.gridView = gridView1;
            asyncImageLoader = new AsyncImageLoader();
        }

        public View getView(int position, View convertView, ViewGroup parent) {
            Activity activity = (Activity) getContext();

            // Inflate the views from XML
            View rowView = convertView;
            ViewCache viewCache;
            if (rowView == null) {
                LayoutInflater inflater = activity.getLayoutInflater();
                rowView = inflater.inflate(R.layout.griditem, null);
                viewCache = new ViewCache(rowView);//将Item的布局View传入构造函数
                rowView.setTag(viewCache);
            } else {
                viewCache = (ViewCache) rowView.getTag();
            }
            ImageAndText imageAndText = getItem(position);//Adapter自带的方法

            // Load the image and set it on the ImageView
            String imageUrl = imageAndText.getImageUrl();
            ImageView imageView = viewCache.getImageView();
            imageView.setTag(imageUrl);
            Drawable cachedImage = asyncImageLoader.loadDrawable(imageUrl, new ImageCallback() {
                public void imageLoaded(Drawable imageDrawable, String imageUrl) {
                    ImageView imageViewByTag = (ImageView) gridView.findViewWithTag(imageUrl);
                    if (imageViewByTag != null) {
                        imageViewByTag.setImageDrawable(imageDrawable);
                    }
                }
            });
            if (cachedImage == null) {
                imageView.setImageResource(R.drawable.icon);
            }else{
                imageView.setImageDrawable(cachedImage);
            }
            // Set the text on the TextView
            TextView textView = viewCache.getTextView();
            textView.setText(imageAndText.getText());
            return rowView;
        }

}

这段代码值得好好研究一下了。

这个Adapter的类构造函数与我们一般看到的不一样，它将GridView显示所在的Activity，以及GridView显示所要的数据和GridView本身全部作为参数传了进来，声明了图片异步加载类的实例，重点就在getView函数。在此之前先介绍另外一个辅助类：

public class ViewCache {

        private View baseView;
        private TextView textView;
        private ImageView imageView;

        public ViewCache(View baseView) {
            this.baseView = baseView;
        }

        public TextView getTextView() {
            if (textView == null) {
                textView = (TextView) baseView.findViewById(R.id.text);
            }
            return textView;
        }

        public ImageView getImageView() {
            if (imageView == null) {
                imageView = (ImageView) baseView.findViewById(R.id.image);
            }
            return imageView;
        }

}

ViewCache通过传入View参数，可以保存相关View里面组件的引用。

接下来要解释的一个很重要的点就是setTag的作用：

public void setTag (Object tag)

Since: API Level 1
Sets the tag associated with this view. A tag can be used to mark a view in its hierarchy and does not have to be unique within the hierarchy. Tags can also be used to store data within a view without resorting to another data structure.
Parameters：an Object to tag the view with

Tag是用来标记一个组件的，它不一定是唯一的，传入的参数是一个Object。Tags可以被用来存储数据并且不需要考虑将数据转化成另外的数据结构（换句话说，你想存什么就存什么）。

在前面的代码中，每个rowView都设置了一个Tag，这个tag有很妙的用处，rowView是每个Item的显示布局对象，viewCache里面则保存了rowView组件里面相应的组件实例的引用。为什么这样子？先推荐另外一个博客：Android杂谈--内存泄露(1)--contentView缓存使用与ListView优化。读这个博客的目的是去了解contentView存在的意义，通过缓存convertView,可以缓存可视范围内的listItem，当再次向下滑动时又开始更 新View，这种利用缓存convertView的方式可以判断如果缓存中不存在View才创建View，如果已经存在可以利用缓存中的View，这样会 减少很多View的创建，提升了性能。再加上前面提到的缓存图片的例子，应该很容易理解这里的机制，contentView(rowView)里面记录缓存了曾经显示的Item，并且一旦显示过，它就保存了与之相关的ViewCache，并且可以通过getTag得到!!!

到这里不知道大家有没有发现这几段程序的微妙之处，首先是缓存了view，其次当我们取出view，根据url去获取图片的时候，图片也是缓存好的，所以整个过程就会非常迅速！！

然后，就是代码中红色部分是对应的，我想理解起来是非常简单的，同时这里也展示了Tag的另外一种作用:标志组件（前提是tag不重复）

后面一段是精华～在异步加载数据asyncImageLoader.loadDrawable函数返回数据的时候，cacheImage是null的，此时直接设置默认图片（等待图片加载完毕就通过回调函数设置图片），否则，就将加载的图片显示出来。（这就是一开始阐述的思想！）

 

最后，补充一下前面遗留下来的一个问题：SoftReference(内存优化的两个类:SoftReference 和 WeakReference)

如果你想写一个 Java 程序，观察某对象什么时候会被垃圾收集的执行绪清除，你必须要用一个 reference 记住此对象，以便随时观察，但是却因此造成此对象的reference 数目一直无法为零， 使得对象无法被清除。不过，现在有了 Weak Reference 之后，这就可以迎刃而解了。如果你希望能随时取得某对象的信息，但又不想影响此对象的垃圾收集，那么你应该用 WeakReference 来记住此对象，而不是用一般的 reference。(我的理解是，它指向一个对象，但是引用计数不会有所改变)

A obj = new A();
WeakReference wr = new WeakReference(obj);
obj = null;
//等待一段时间，obj对象就会被垃圾回收
...
if (wr.get()==null) { 
　　System.out.println("obj 已经被清除了 "); 
} else { 
　　System.out.println("obj 尚未被清除，其信息是 "+obj.toString());
}

在此例中，透过 get() 可以取得此 Reference 的所指到的对象，如果传出值为 null 的话，代表此对象已经被清除。这类的技巧，在设计 Optimizer 或 Debugger 这类的程序时常会用到，因为这类程序需要取得某对象的信息，但是不可以 影响此对象的垃圾收集。

Soft Reference 虽然和 Weak Reference 很类似，但是用途却不同。 被 Soft Reference 指到的对象，即使没有任何 Direct Reference，也不会被清除。一直要到 JVM 内存不足时且 没有 Direct Reference 时才会清除，SoftReference 是用来设计 object-cache 之用的。如此一来 SoftReference 不但可以把对象 cache 起来，也不会造成内存不足的错误 （OutOfMemoryError）。我觉得 Soft Reference 也适合拿来实作 pooling 的技巧。