Android进阶：ListView性能优化异步加载图片 使滑动效果流畅

ListView 是一种可以显示一系列项目并能进行滚动显示的 View，每一行的Item可能包含复杂的结构，可能会从网络上获取icon等的一些图标信息，就现在的网络速度要想保持ListView运行的很好滚动流畅是做不到的

所以这里就需要把这些信息利用多线程实现异步加载

实现这样功能的类

1. public class AsyncImageLoader {
2. private HashMap<String, SoftReference<Drawable>> imageCache;
3. public AsyncImageLoader() {
4. imageCache = new HashMap<String, SoftReference<Drawable>>();
5. }
6. public Drawable loadDrawable(final String imageUrl, final ImageCallback imageCallback) {
7. if (imageCache.containsKey(imageUrl)) {
8. SoftReference<Drawable> softReference = imageCache.get(imageUrl);
9. Drawable drawable = softReference.get();
10. if (drawable != null) {
11. return drawable;
12. }
13. }
14. final Handler handler = new Handler() {
15. @Override
16. public void handleMessage(Message message) {
17. imageCallback.imageLoaded((Drawable) message.obj, imageUrl);
18. }
19. };
20. new Thread() {
21. @Override
22. public void run() {
23. Drawable drawable = loadImageFromUrl(imageUrl);
24. imageCache.put(imageUrl, new SoftReference<Drawable>(drawable));
25. Message message = handler.obtainMessage(0, drawable);
26. handler.sendMessage(message);
27. }
28. }.start();
29. return null;
30. }
31. public static Drawable loadImageFromUrl(String url) {
32. // ...
33. }
34. public interface ImageCallback {
35. public void imageLoaded(Drawable imageDrawable, String imageUrl);
36. }
37. }

注意这里使用了 SoftReference来缓存图片，允许 GC在需要的时候可以对缓存中的图片进行清理。它这样工作：

·         调用 loadDrawable(ImageUrl, imageCallback)，传入一个匿名实现的 ImageCallback接口

·         如果图片在缓存中不存在的话，图片将从单一的线程中下载并在下载结束时通过 ImageCallback回调

·         如果图片确实存在于缓存中，就会马上返回，不会回调 ImageCallback

然后我们还可以根据09google I/0开发者大会提到的方式来继续优化Adapter 使用ViewHolder来减少一些比较费时的操作，譬如inflate XML 和 findViewById()等操作

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

这里我们没有加载完iamge之后直接设定到相应的ImageView上 ，而是通过Tag查找，这里我们重用的View 这里有个listView的引用来通过Tag查找 可见 CallBack的实现

1. ImageView imageViewByTag = (ImageView) listView.findViewWithTag(imageUrl);
2. if (imageViewByTag != null) {
3. imageViewByTag.setImageDrawable(imageDrawable);
4. }

这里通过ViewCatch来减少了 findViewById的使用

1. public class ViewCache {
2. private View baseView;
3. private TextView textView;
4. private ImageView imageView;
5. public ViewCache(View baseView) {
6. this.baseView = baseView;
7. }
8. public TextView getTextView() {
9. if (textView == null) {
10. textView = (TextView) baseView.findViewById(R.id.text);
11. }
12. return titleView;
13. }
14. public ImageView getImageView() {
15. if (imageView == null) {
16. imageView = (ImageView) baseView.findViewById(R.id.image);
17. }
18. return imageView;
19. }
20. }

总结 ：这里主要做了三点优化

• 在单一线程里加载图片

• 重用列表中行

• 缓存行中的 View