Listview异步加载之优化篇

  异步加载图片基本思想：

1.      先从内存缓存中获取图片显示（内存缓冲）

2.      获取不到的话从SD卡里获取（SD卡缓冲）

3.      都获取不到的话从网络下载图片并保存到SD卡同时加入内存并显示（视情况看是否要显示）

1. public class LoaderAdapter extends BaseAdapter{  
2.   
3.     private static final String TAG = "LoaderAdapter";  
4.     private boolean mBusy = false;  
5.   
6.     public void setFlagBusy(boolean busy) {  
7.         this.mBusy = busy;  
8.     }  
9.   
10.       
11.     private ImageLoader mImageLoader;  
12.     private int mCount;  
13.     private Context mContext;  
14.     private String[] urlArrays;  
15.       
16.       
17.     public LoaderAdapter(int count, Context context, String []url) {  
18.         this.mCount = count;  
19.         this.mContext = context;  
20.         urlArrays = url;  
21.         mImageLoader = new ImageLoader(context);  
22.     }  
23.       
24.     public ImageLoader getImageLoader(){  
25.         return mImageLoader;  
26.     }  
27.   
28.     @Override  
29.     public int getCount() {  
30.         return mCount;  
31.     }  
32.   
33.     @Override  
34.     public Object getItem(int position) {  
35.         return position;  
36.     }  
37.   
38.     @Override  
39.     public long getItemId(int position) {  
40.         return position;  
41.     }  
42.   
43.     @Override  
44.     public View getView(int position, View convertView, ViewGroup parent) {  
45.   
46.         ViewHolder viewHolder = null;  
47.         if (convertView == null) {  
48.             convertView = LayoutInflater.from(mContext).inflate(  
49.                     R.layout.list_item, null);  
50.             viewHolder = new ViewHolder();  
51.             viewHolder.mTextView = (TextView) convertView  
52.                     .findViewById(R.id.tv_tips);  
53.             viewHolder.mImageView = (ImageView) convertView  
54.                     .findViewById(R.id.iv_image);  
55.             convertView.setTag(viewHolder);  
56.         } else {  
57.             viewHolder = (ViewHolder) convertView.getTag();  
58.         }  
59.         String url = "";  
60.         url = urlArrays[position % urlArrays.length];  
61.           
62.         viewHolder.mImageView.setImageResource(R.drawable.ic_launcher);  
63.           
64.   
65.         if (!mBusy) {  
66.             mImageLoader.DisplayImage(url, viewHolder.mImageView, false);  
67.             viewHolder.mTextView.setText("--" + position  
68.                     + "--IDLE ||TOUCH_SCROLL");  
69.         } else {  
70.             mImageLoader.DisplayImage(url, viewHolder.mImageView, true);          
71.             viewHolder.mTextView.setText("--" + position + "--FLING");  
72.         }  
73.         return convertView;  
74.     }  
75.   
76.     static class ViewHolder {  
77.         TextView mTextView;  
78.         ImageView mImageView;  
79.     }  
80. }  

关键代码是ImageLoader的DisplayImage方法，再看ImageLoader的实现

[java] view plaincopyprint?

1. public class ImageLoader {  
2.   
3.     private MemoryCache memoryCache = new MemoryCache();  
4.     private AbstractFileCache fileCache;  
5.     private Map<ImageView, String> imageViews = Collections  
6.             .synchronizedMap(new WeakHashMap<ImageView, String>());  
7.     // 线程池  
8.     private ExecutorService executorService;  
9.   
10.     public ImageLoader(Context context) {  
11.         fileCache = new FileCache(context);  
12.         executorService = Executors.newFixedThreadPool(5);  
13.     }  
14.   
15.     // 最主要的方法  
16.     public void DisplayImage(String url, ImageView imageView, boolean isLoadOnlyFromCache) {  
17.         imageViews.put(imageView, url);  
18.         // 先从内存缓存中查找  
19.   
20.         Bitmap bitmap = memoryCache.get(url);  
21.         if (bitmap != null)  
22.             imageView.setImageBitmap(bitmap);  
23.         else if (!isLoadOnlyFromCache){  
24.               
25.             // 若没有的话则开启新线程加载图片  
26.             queuePhoto(url, imageView);  
27.         }  
28.     }  
29.   
30.     private void queuePhoto(String url, ImageView imageView) {  
31.         PhotoToLoad p = new PhotoToLoad(url, imageView);  
32.         executorService.submit(new PhotosLoader(p));  
33.     }  
34.   
35.     private Bitmap getBitmap(String url) {  
36.         File f = fileCache.getFile(url);  
37.           
38.         // 先从文件缓存中查找是否有  
39.         Bitmap b = null;  
40.         if (f != null && f.exists()){  
41.             b = decodeFile(f);  
42.         }  
43.         if (b != null){  
44.             return b;  
45.         }  
46.         // 最后从指定的url中下载图片  
47.         try {  
48.             Bitmap bitmap = null;  
49.             URL imageUrl = new URL(url);  
50.             HttpURLConnection conn = (HttpURLConnection) imageUrl  
51.                     .openConnection();  
52.             conn.setConnectTimeout(30000);  
53.             conn.setReadTimeout(30000);  
54.             conn.setInstanceFollowRedirects(true);  
55.             InputStream is = conn.getInputStream();  
56.             OutputStream os = new FileOutputStream(f);  
57.             CopyStream(is, os);  
58.             os.close();  
59.             bitmap = decodeFile(f);  
60.             return bitmap;  
61.         } catch (Exception ex) {  
62.             Log.e("", "getBitmap catch Exception... message = " + ex.getMessage());  
63.             return null;  
64.         }  
65.     }  
66.   
67.     // decode这个图片并且按比例缩放以减少内存消耗，虚拟机对每张图片的缓存大小也是有限制的  
68.     private Bitmap decodeFile(File f) {  
69.         try {  
70.             // decode image size  
71.             BitmapFactory.Options o = new BitmapFactory.Options();  
72.             o.inJustDecodeBounds = true;  
73.             BitmapFactory.decodeStream(new FileInputStream(f), null, o);  
74.   
75.             // Find the correct scale value. It should be the power of 2.  
76.             final int REQUIRED_SIZE = 100;  
77.             int width_tmp = o.outWidth, height_tmp = o.outHeight;  
78.             int scale = 1;  
79.             while (true) {  
80.                 if (width_tmp / 2 < REQUIRED_SIZE  
81.                         || height_tmp / 2 < REQUIRED_SIZE)  
82.                     break;  
83.                 width_tmp /= 2;  
84.                 height_tmp /= 2;  
85.                 scale *= 2;  
86.             }  
87.   
88.             // decode with inSampleSize  
89.             BitmapFactory.Options o2 = new BitmapFactory.Options();  
90.             o2.inSampleSize = scale;  
91.             return BitmapFactory.decodeStream(new FileInputStream(f), null, o2);  
92.         } catch (FileNotFoundException e) {  
93.         }  
94.         return null;  
95.     }  
96.   
97.     // Task for the queue  
98.     private class PhotoToLoad {  
99.         public String url;  
100.         public ImageView imageView;  
101.   
102.         public PhotoToLoad(String u, ImageView i) {  
103.             url = u;  
104.             imageView = i;  
105.         }  
106.     }  
107.   
108.     class PhotosLoader implements Runnable {  
109.         PhotoToLoad photoToLoad;  
110.   
111.         PhotosLoader(PhotoToLoad photoToLoad) {  
112.             this.photoToLoad = photoToLoad;  
113.         }  
114.   
115.         @Override  
116.         public void run() {  
117.             if (imageViewReused(photoToLoad))  
118.                 return;  
119.             Bitmap bmp = getBitmap(photoToLoad.url);  
120.             memoryCache.put(photoToLoad.url, bmp);  
121.             if (imageViewReused(photoToLoad))  
122.                 return;  
123.             BitmapDisplayer bd = new BitmapDisplayer(bmp, photoToLoad);  
124.             // 更新的操作放在UI线程中  
125.             Activity a = (Activity) photoToLoad.imageView.getContext();  
126.             a.runOnUiThread(bd);  
127.         }  
128.     }  
129.   
130.       
131.     boolean imageViewReused(PhotoToLoad photoToLoad) {  
132.         String tag = imageViews.get(photoToLoad.imageView);  
133.         if (tag == null || !tag.equals(photoToLoad.url))  
134.             return true;  
135.         return false;  
136.     }  
137.   
138.     // 用于在UI线程中更新界面  
139.     class BitmapDisplayer implements Runnable {  
140.         Bitmap bitmap;  
141.         PhotoToLoad photoToLoad;  
142.   
143.         public BitmapDisplayer(Bitmap b, PhotoToLoad p) {  
144.             bitmap = b;  
145.             photoToLoad = p;  
146.         }  
147.   
148.         public void run() {  
149.             if (imageViewReused(photoToLoad))  
150.                 return;  
151.             if (bitmap != null)  
152.                 photoToLoad.imageView.setImageBitmap(bitmap);  
153.       
154.         }  
155.     }  
156.   
157.     public void clearCache() {  
158.         memoryCache.clear();  
159.         fileCache.clear();  
160.     }  
161.   
162.     public static void CopyStream(InputStream is, OutputStream os) {  
163.         final int buffer_size = 1024;  
164.         try {  
165.             byte[] bytes = new byte[buffer_size];  
166.             for (;;) {  
167.                 int count = is.read(bytes, 0, buffer_size);  
168.                 if (count == -1)  
169.                     break;  
170.                 os.write(bytes, 0, count);  
171.             }  
172.         } catch (Exception ex) {  
173.             Log.e("", "CopyStream catch Exception...");  
174.         }  
175.     }  
176. }  

先从内存中加载，没有则开启线程从SD卡或网络中获取，这里注意从SD卡获取图片是放在子线程里执行的，否则快速滑屏的话会不够流畅，这是优化一。于此同时，在adapter里有个busy变量，表示listview是否处于滑动状态，如果是滑动状态则仅从内存中获取图片，没有的话无需再开启线程去外存或网络获取图片，这是优化二。ImageLoader里的线程使用了线程池，从而避免了过多线程频繁创建和销毁，有的童鞋每次总是new一个线程去执行这是非常不可取的，好一点的用的AsyncTask类，其实内部也是用到了线程池。在从网络获取图片时，先是将其保存到sd卡，然后再加载到内存，这么做的好处是在加载到内存时可以做个压缩处理，以减少图片所占内存，这是优化三。

而图片错位问题的本质源于我们的listview使用了缓存convertView，假设一种场景，一个listview一屏显示九个item，那么在拉出第十个item的时候，事实上该item是重复使用了第一个item，也就是说在第一个item从网络中下载图片并最终要显示的时候其实该item已经不在当前显示区域内了，此时显示的后果将是在可能在第十个item上输出图像，这就导致了图片错位的问题。所以解决之道在于可见则显示，不可见则不显示。在ImageLoader里有个imageViews的map对象，就是用于保存当前显示区域图像对应的url集，在显示前判断处理一下即可。

下面再说下内存缓冲机制，本例采用的是LRU算法，先看看MemoryCache的实现

[java] view plaincopyprint?

1. public class MemoryCache {  
2.   
3.     private static final String TAG = "MemoryCache";  
4.     // 放入缓存时是个同步操作  
5.     // LinkedHashMap构造方法的最后一个参数true代表这个map里的元素将按照最近使用次数由少到多排列，即LRU  
6.     // 这样的好处是如果要将缓存中的元素替换，则先遍历出最近最少使用的元素来替换以提高效率  
7.     private Map<String, Bitmap> cache = Collections  
8.             .synchronizedMap(new LinkedHashMap<String, Bitmap>(10, 1.5f, true));  
9.     // 缓存中图片所占用的字节，初始0，将通过此变量严格控制缓存所占用的堆内存  
10.     private long size = 0;// current allocated size  
11.     // 缓存只能占用的最大堆内存  
12.     private long limit = 1000000;// max memory in bytes  
13.   
14.     public MemoryCache() {  
15.         // use 25% of available heap size  
16.         setLimit(Runtime.getRuntime().maxMemory() / 10);  
17.     }  
18.   
19.     public void setLimit(long new_limit) {  
20.         limit = new_limit;  
21.         Log.i(TAG, "MemoryCache will use up to " + limit / 1024. / 1024. + "MB");  
22.     }  
23.   
24.     public Bitmap get(String id) {  
25.         try {  
26.             if (!cache.containsKey(id))  
27.                 return null;  
28.             return cache.get(id);  
29.         } catch (NullPointerException ex) {  
30.             return null;  
31.         }  
32.     }  
33.   
34.     public void put(String id, Bitmap bitmap) {  
35.         try {  
36.             if (cache.containsKey(id))  
37.                 size -= getSizeInBytes(cache.get(id));  
38.             cache.put(id, bitmap);  
39.             size += getSizeInBytes(bitmap);  
40.             checkSize();  
41.         } catch (Throwable th) {  
42.             th.printStackTrace();  
43.         }  
44.     }  
45.   
46.       
47.     private void checkSize() {  
48.         Log.i(TAG, "cache size=" + size + " length=" + cache.size());  
49.         if (size > limit) {  
50.             // 先遍历最近最少使用的元素  
51.             Iterator<Entry<String, Bitmap>> iter = cache.entrySet().iterator();  
52.             while (iter.hasNext()) {  
53.                 Entry<String, Bitmap> entry = iter.next();  
54.                 size -= getSizeInBytes(entry.getValue());  
55.                 iter.remove();  
56.                 if (size <= limit)  
57.                     break;  
58.             }  
59.             Log.i(TAG, "Clean cache. New size " + cache.size());  
60.         }  
61.     }  
62.   
63.     public void clear() {  
64.         cache.clear();  
65.     }  
66.   
67.       
68.     long getSizeInBytes(Bitmap bitmap) {  
69.         if (bitmap == null)  
70.             return 0;  
71.         return bitmap.getRowBytes() * bitmap.getHeight();  
72.     }  
73. }  

首先限制内存图片缓冲的堆内存大小，每次有图片往缓存里加时判断是否超过限制大小，超过的话就从中取出最少使用的图片并将其移除，当然这里如果不采用这种方式，换做软引用也是可行的，二者目的皆是最大程度的利用已存在于内存中的图片缓存，避免重复制造垃圾增加GC负担，OOM溢出往往皆因内存瞬时大量增加而垃圾回收不及时造成的。只不过二者区别在于LinkedHashMap里的图片缓存在没有移除出去之前是不会被GC回收的，而SoftReference里的图片缓存在没有其他引用保存时随时都会被GC回收。所以在使用LinkedHashMap这种LRU算法缓存更有利于图片的有效命中，当然二者配合使用的话效果更佳，即从LinkedHashMap里移除出的缓存放到SoftReference里，这就是内存的二级缓存，有兴趣的童鞋不凡一试。