listview优化（中）

1，对Imageview使用setTag()方法来解决图片错位问题，这个Tag中设置的是图片的url，然后在加载的时候取得这个url和要加载那position中的url对比，如果不相同就加载，相同就是复用以前的就不加载了

2，对于要加载的图片资源，先在内存缓存中找(原始的方法是使用SoftRefrence,最新的方法是使用android提供的Lrucache)，如果找不到，则在本地缓存(可以使用DiskLrucache类)中找(也就是读取原先下载过的本地图片)，还找不到，就开启异步线程去下载图片，下载以后，保存在本地，内存缓存也保留一份引用

3，在为imagview装载图片时，先测量需要的图片大小，按比例缩放

4，使用一个Map保存异步线程的引用，key->value为url->AsyncTask,这样可以避免已经开启了线程去加载图片，但是还没有加载完时，又重复开启线程去加载图片的情况

5，在快速滑动的时候不加载图片，取消所有图片加载线程，一旦停下来，继续可见图片的加载线程

下面都是我摘取的网上的一些例子，我分别介绍它们来说明上述的优化思路

第一个例子：

[java] view
plaincopy

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

也可以使用SoftReference，代码会简单很多，但是我推荐上面的方法。

[java] view
plaincopy

1. public class MemoryCache {
2. private Map<String, SoftReference<Bitmap>> cache = Collections
3. .synchronizedMap(new HashMap<String, SoftReference<Bitmap>>());
4. public Bitmap get(String id) {
5. if (!cache.containsKey(id))
6. return null;
7. SoftReference<Bitmap> ref = cache.get(id);
8. return ref.get();
9. }
10. public void put(String id, Bitmap bitmap) {
11. cache.put(id, new SoftReference<Bitmap>(bitmap));
12. }
13. public void clear() {
14. cache.clear();
15. }
16. }

下面是文件缓存类的代码FileCache.java:

[java] view
plaincopy

1. public class FileCache {
2. private File cacheDir;
3. public FileCache(Context context) {
4. // 如果有SD卡则在SD卡中建一个LazyList的目录存放缓存的图片
5. // 没有SD卡就放在系统的缓存目录中
6. if (android.os.Environment.getExternalStorageState().equals(
7. android.os.Environment.MEDIA_MOUNTED))
8. cacheDir = new File(
9. android.os.Environment.getExternalStorageDirectory(),
10. "LazyList");
11. else
12. cacheDir = context.getCacheDir();
13. if (!cacheDir.exists())
14. cacheDir.mkdirs();
15. }
16. public File getFile(String url) {
17. // 将url的hashCode作为缓存的文件名
18. String filename = String.valueOf(url.hashCode());
19. // Another possible solution
20. // String filename = URLEncoder.encode(url);
21. File f = new File(cacheDir, filename);
22. return f;
23. }
24. public void clear() {
25. File[] files = cacheDir.listFiles();
26. if (files == null)
27. return;
28. for (File f : files)
29. f.delete();
30. }
31. }

最后最重要的加载图片的类，ImageLoader.java:

[java] view
plaincopy

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

上面代码的思路是这样的，首先是一个MemoryCache类，用来缓存图片应用到内存。这个类包含一个Collectiosn.synchronizedMap(new LinkedHashMap<String,Bitmap>(10,1.5f,true))对象，这个对象就是用来保存url和对应的bitmap的，也就是缓存，最后一个参数设置为true的原因，是代表这个map里的元素将按照最近使用次数由少到多排列，即LRU。这样的好处是如果要将缓存中的元素替换，则先遍历出最近最少使用的元素来替换以提高效率 。

另外设置一个缓存的最大值limit,和一个初始值size=0。每次添加图片缓存，Size就增加相应大小，如果增加以后大小超过limit，就遍历LinkedHashMap清楚使用次数最少的缓存，同时减小size值，直到size<limit。

作者还举了一个使用SoftReference的例子，这样做的好处是android会自动替我们回收适当的bitmap缓存。

接下来是文件缓存，如果有SD卡则在SD卡中建一个LazyList的目录存放缓存的图片，没有SD卡就放在系统的缓存目录中，将url的hashCode作为缓存的文件名。这个类只是根据url名创建并返回了一个File类，没有真正的缓存图片，图片缓存在ImageLoader类中，不过这个类要获取FileCache返回的File来做FileOutputStream的目的地.

最后是负责的ImageLoader，这个类有一个线程池，用于管理下载线程。另外有一个WeakHashMap<ImageView, String>用于保存imageview引用和记录Tag，用于图片更新。它先检查缓存，没有则开启一个线程去下载，下载以后图片保存到缓存（内存，文件），然后缩放图像比例，返回一个合适大小的bitmap，最后开启一个线程去跟新UI（方式是imagview.getContext()获取对应的context,然后context调用runOnUIThread()方法）。

另外，在下载线程开启前，图片下载完成后，跟新UI前，都通过WeakHashMap<ImageView, String>获取下载图片的Tag与对应要设置图片imageview的tag比较，防止图片错位。

上述代码完成了基本的优化思路，甚至使用了一个自己定义的缓存类MemoryCache，使管理变得更加清晰，同时有文件缓存，也通过imagview->url的方式避免了图片错位，还开启了异步线程下载图片，但是又开启了一个UI线程去跟新UI。

缺点是开启了UI线程去更新UI，浪费了资源，其实这个可以使用定义一个回调接口实现。另外也没有考虑到重复开启下载线程的问题。

第二个例子：

先贴上主方法的代码：

[java] view
plaincopy

1. package cn.wangmeng.test;
2. import java.io.IOException;
3. import java.io.InputStream;
4. import java.lang.ref.SoftReference;
5. import java.net.MalformedURLException;
6. import java.net.URL;
7. import java.util.HashMap;
8. import android.graphics.drawable.Drawable;
9. import android.os.Handler;
10. import android.os.Message;
11. public class AsyncImageLoader {
12. private HashMap<String, SoftReference<Drawable>> imageCache;
13. public AsyncImageLoader() {
14. imageCache = new HashMap<String, SoftReference<Drawable>>();
15. }
16. public Drawable loadDrawable(final String imageUrl, final ImageCallback imageCallback) {
17. if (imageCache.containsKey(imageUrl)) {
18. SoftReference<Drawable> softReference = imageCache.get(imageUrl);
19. Drawable drawable = softReference.get();
20. if (drawable != null) {
21. return drawable;
22. }
23. }
24. final Handler handler = new Handler() {
25. public void handleMessage(Message message) {
26. imageCallback.imageLoaded((Drawable) message.obj, imageUrl);
27. }
28. };
29. new Thread() {
30. @Override
31. public void run() {
32. Drawable drawable = loadImageFromUrl(imageUrl);
33. imageCache.put(imageUrl, new SoftReference<Drawable>(drawable));
34. Message message = handler.obtainMessage(0, drawable);
35. handler.sendMessage(message);
36. }
37. }.start();
38. return null;
39. }
40. public static Drawable loadImageFromUrl(String url) {
41. URL m;
42. InputStream i = null;
43. try {
44. m = new URL(url);
45. i = (InputStream) m.getContent();
46. } catch (MalformedURLException e1) {
47. e1.printStackTrace();
48. } catch (IOException e) {
49. e.printStackTrace();
50. }
51. Drawable d = Drawable.createFromStream(i, "src");
52. return d;
53. }
54. public interface ImageCallback {
55. public void imageLoaded(Drawable imageDrawable, String imageUrl);
56. }
57. }

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

几个辅助类文件：

[java] view
plaincopy

1. package cn.wangmeng.test;
2. public class ImageAndText {
3. private String imageUrl;
4. private String text;
5. public ImageAndText(String imageUrl, String text) {
6. this.imageUrl = imageUrl;
7. this.text = text;
8. }
9. public String getImageUrl() {
10. return imageUrl;
11. }
12. public String getText() {
13. return text;
14. }
15. }

[java] view
plaincopy

1. package cn.wangmeng.test;
2. import android.view.View;
3. import android.widget.ImageView;
4. import android.widget.TextView;
5. public class ViewCache {
6. private View baseView;
7. private TextView textView;
8. private ImageView imageView;
9. public ViewCache(View baseView) {
10. this.baseView = baseView;
11. }
12. public TextView getTextView() {
13. if (textView == null) {
14. textView = (TextView) baseView.findViewById(R.id.text);
15. }
16. return textView;
17. }
18. public ImageView getImageView() {
19. if (imageView == null) {
20. imageView = (ImageView) baseView.findViewById(R.id.image);
21. }
22. return imageView;
23. }
24. }

ViewCache是辅助获取adapter的子元素布局

[java] view
plaincopy

1. package cn.wangmeng.test;
2. import java.util.List;
3. import cn.wangmeng.test.AsyncImageLoader.ImageCallback;
4. import android.app.Activity;
5. import android.graphics.drawable.Drawable;
6. import android.view.LayoutInflater;
7. import android.view.View;
8. import android.view.ViewGroup;
9. import android.widget.ArrayAdapter;
10. import android.widget.ImageView;
11. import android.widget.ListView;
12. import android.widget.TextView;
13. public class ImageAndTextListAdapter extends ArrayAdapter<ImageAndText> {
14. private ListView listView;
15. private AsyncImageLoader asyncImageLoader;
16. public ImageAndTextListAdapter(Activity activity, List<ImageAndText> imageAndTexts, ListView listView) {
17. super(activity, 0, imageAndTexts);
18. this.listView = listView;
19. asyncImageLoader = new AsyncImageLoader();
20. }
21. public View getView(int position, View convertView, ViewGroup parent) {
22. Activity activity = (Activity) getContext();
23. // Inflate the views from XML
24. View rowView = convertView;
25. ViewCache viewCache;
26. if (rowView == null) {
27. LayoutInflater inflater = activity.getLayoutInflater();
28. rowView = inflater.inflate(R.layout.image_and_text_row, null);
29. viewCache = new ViewCache(rowView);
30. rowView.setTag(viewCache);
31. } else {
32. viewCache = (ViewCache) rowView.getTag();
33. }
34. ImageAndText imageAndText = getItem(position);
35. // Load the image and set it on the ImageView
36. String imageUrl = imageAndText.getImageUrl();
37. ImageView imageView = viewCache.getImageView();
38. imageView.setTag(imageUrl);
39. Drawable cachedImage = asyncImageLoader.loadDrawable(imageUrl, new ImageCallback() {
40. public void imageLoaded(Drawable imageDrawable, String imageUrl) {
41. ImageView imageViewByTag = (ImageView) listView.findViewWithTag(imageUrl);
42. if (imageViewByTag != null) {
43. imageViewByTag.setImageDrawable(imageDrawable);
44. }
45. }
46. });
47. if (cachedImage == null) {
48. imageView.setImageResource(R.drawable.default_image);
49. }else{
50. imageView.setImageDrawable(cachedImage);
51. }
52. // Set the text on the TextView
53. TextView textView = viewCache.getTextView();
54. textView.setText(imageAndText.getText());
55. return rowView;
56. }
57. }

上述代码的思路是这样的：AsyncImageLoader类里面，使用了一个HashMap<String, SoftReference<Drawable>>用来缓存，然后有一个异步下载线程，还有一个方法内部的handler，线程下载完成后，会发消息给handler，然后handler调用回调接口imageCallback的imageLoaded()方法，这个方法是在adapter里面实现的，所以也就是在主线程跟新UI了。

而ViewCache类的作用其实就是ViewHolder，ImageAndText是一个bean类。

在adapter中，使用mageView.setTag(imageUrl)为imageview提供一个唯一标识Url,所以先图片下载完成以后，imageCallback的imageLoaded()方法中，就可以调用listview的findViewWithTag(imageUrl)来找到对应的imageview,从而不用担心错误的问题，这个方法比较巧妙。

缺点是没有实现文件缓存，另外也没有解决出现多个线程下载同一张图片的问题。