正文

Android ListView只加载当前屏幕内的图片（解决list滑动时加载卡顿）

IP云
IP云V管理员/10 阅读
06/21
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近在做ListView分页显示，其中包括图片 和文字（先下载解析文字内容，再异步加载图片）发现每次点击下一页后，文字内容加载完毕，马上向下滑动，由于这时后台在用线程池异步下载图片，我每页有20条，也就是20张图片，会导致listview滑动卡顿！

这是用户不想看到的，我参考了网易新闻和电子市场等应用，发现它们都是只加载屏幕内的图片，不现实的不加载,于是我也仿照做了一个。我是菜鸟，我承认 呵呵，虽然不见得完全和他们的一样，但是确实解决了翻页时那一刻的卡顿现象。

因为未发现网上有相关文章，希望对朋友们有用~

下面是相关代码（分页的就没放）：

  1. /**
  2. * list滚动监听
  3. */
  4. listView.setOnScrollListener(new OnScrollListener() {
  5. @Override
  6. public void onScrollStateChanged(AbsListView view, int scrollState) {
  7. // TODO Auto-generated method stub
  8. // 异步加载图片
  9. if (scrollState == OnScrollListener.SCROLL_STATE_IDLE) {//list停止滚动时加载图片
  10. pageImgLoad(_start_index, _end_index);
  11. }
  12. }
  13. @Override
  14. public void onScroll(AbsListView view, int firstVisibleItem,
  15. int visibleItemCount, int totalItemCount) {
  16. // TODO Auto-generated method stub
  17. //设置当前屏幕显示的起始index和结束index
  18. _start_index = firstVisibleItem;
  19. _end_index = firstVisibleItem + visibleItemCount;
  20. if (_end_index >= totalItemCount) {
  21. _end_index = totalItemCount - 1;
  22. }
  23. }
  24. });
  1. /**
  2. * list滚动监听
  3. */
  4. listView.setOnScrollListener(new OnScrollListener() {
  5. @Override
  6. public void onScrollStateChanged(AbsListView view, int scrollState) {
  7. // TODO Auto-generated method stub
  8. // 异步加载图片
  9. if (scrollState == OnScrollListener.SCROLL_STATE_IDLE) {//list停止滚动时加载图片
  10. pageImgLoad(_start_index, _end_index);
  11. }
  12. }
  13. @Override
  14. public void onScroll(AbsListView view, int firstVisibleItem,
  15. int visibleItemCount, int totalItemCount) {
  16. // TODO Auto-generated method stub
  17. //设置当前屏幕显示的起始index和结束index
  18. _start_index = firstVisibleItem;
  19. _end_index = firstVisibleItem + visibleItemCount;
  20. if (_end_index >= totalItemCount) {
  21. _end_index = totalItemCount - 1;
  22. }
  23. }
  24. });
  1. /**
  2. * 只加载from start_index to end_index 的图片
  3. * @param start_index
  4. * @param end_index
  5. */
  6. private void pageImgLoad(int start_index, int end_index) {
  7. for (; start_index < end_index; start_index++) {
  8. HashMap<String, Object> curr_item = adapter.getItem(start_index);
  9. if (curr_item.get(Constant.NEWS_ICON_URL) != null
  10. && curr_item.get(Constant.NEWS_ICON) == null) {
  11. loadImage(curr_item);
  12. }
  13. }
  14. }
  1. /**
  2. * 只加载from start_index to end_index 的图片
  3. * @param start_index
  4. * @param end_index
  5. */
  6. private void pageImgLoad(int start_index, int end_index) {
  7. for (; start_index < end_index; start_index++) {
  8. HashMap<String, Object> curr_item = adapter.getItem(start_index);
  9. if (curr_item.get(Constant.NEWS_ICON_URL) != null
  10. && curr_item.get(Constant.NEWS_ICON) == null) {
  11. loadImage(curr_item);
  12. }
  13. }
  14. }

异步加载图片代码，这里我之前使用的是AsyncTask，但是继承AsyncTask后不能被执行多次，所以我改用了线程呼叫handler更新UI：

  1. /**
  2. * 异步加载图片
  3. * @param curr_item
  4. */
  5. private void loadImage(final HashMap<String, Object> curr_item) {
  6. executorService.submit(new Runnable() {
  7. public void run() {
  8. try {
  9. Drawable curr_icon = null;
  10. String icon_URL = (String) curr_item
  11. .get(Constant.NEWS_ICON_URL);
  12. String newsId = (String) curr_item.get(Constant.NEWS_ID);
  13. if (imageCache.containsKey(icon_URL)) {//软引用
  14. SoftReference<Drawable> softReference = imageCache
  15. .get(icon_URL);
  16. curr_icon = softReference.get();
  17. System.out.println("CASE USING SoftReference!!!!!!!!!!!!!!!!!!!!");
  18. }
  19. if (curr_icon == null) {
  20. HttpUtils hu = new HttpUtils();
  21. FileUtils fu = new FileUtils();
  22. if (hu.is_Intent(Home_Activity.this)) {
  23. fu.write2LocalFromIS(Home_Activity.this, newsId
  24. + Constant.SAVE_NEWS_ICON_NAME
  25. + Constant.SAVE_IMG_SUFFIX,
  26. hu.getISFromURL(icon_URL));
  27. }
  28. // 从本地加载图片 如果没网则直接加载本地图片
  29. curr_icon = fu.readDrawableFromLocal(
  30. Home_Activity.this, newsId
  31. + Constant.SAVE_NEWS_ICON_NAME
  32. + Constant.SAVE_IMG_SUFFIX);
  33. imageCache.put(icon_URL, new SoftReference<Drawable>(
  34. curr_icon));
  35. }
  36. curr_item.put(Constant.NEWS_ICON, curr_icon);
  37. // UI交给handler更新
  38. Message msg = _viewHandler.obtainMessage();
  39. msg.arg1 = Constant.MSG_LIST_IMG_OK;
  40. msg.sendToTarget();
  41. } catch (Exception e) {
  42. throw new RuntimeException(e);
  43. }
  44. }
  45. });
  46. }
  1. /**
  2. * 异步加载图片
  3. * @param curr_item
  4. */
  5. private void loadImage(final HashMap<String, Object> curr_item) {
  6. executorService.submit(new Runnable() {
  7. public void run() {
  8. try {
  9. Drawable curr_icon = null;
  10. String icon_URL = (String) curr_item
  11. .get(Constant.NEWS_ICON_URL);
  12. String newsId = (String) curr_item.get(Constant.NEWS_ID);
  13. if (imageCache.containsKey(icon_URL)) {//软引用
  14. SoftReference<Drawable> softReference = imageCache
  15. .get(icon_URL);
  16. curr_icon = softReference.get();
  17. System.out.println("CASE USING SoftReference!!!!!!!!!!!!!!!!!!!!");
  18. }
  19. if (curr_icon == null) {
  20. HttpUtils hu = new HttpUtils();
  21. FileUtils fu = new FileUtils();
  22. if (hu.is_Intent(Home_Activity.this)) {
  23. fu.write2LocalFromIS(Home_Activity.this, newsId
  24. + Constant.SAVE_NEWS_ICON_NAME
  25. + Constant.SAVE_IMG_SUFFIX,
  26. hu.getISFromURL(icon_URL));
  27. }
  28. // 从本地加载图片 如果没网则直接加载本地图片
  29. curr_icon = fu.readDrawableFromLocal(
  30. Home_Activity.this, newsId
  31. + Constant.SAVE_NEWS_ICON_NAME
  32. + Constant.SAVE_IMG_SUFFIX);
  33. imageCache.put(icon_URL, new SoftReference<Drawable>(
  34. curr_icon));
  35. }
  36. curr_item.put(Constant.NEWS_ICON, curr_icon);
  37. // UI交给handler更新
  38. Message msg = _viewHandler.obtainMessage();
  39. msg.arg1 = Constant.MSG_LIST_IMG_OK;
  40. msg.sendToTarget();
  41. } catch (Exception e) {
  42. throw new RuntimeException(e);
  43. }
  44. }
  45. });
  46. }
  1. handler代码：
  1. handler代码：
  1. Handler _viewHandler = new Handler() {
  1. Handler _viewHandler = new Handler() {
  1. @Override
  2. public void handleMessage(Message msg) {
  3. switch (msg.arg1) {
  4. case Constant.MSG_LIST_IMG_OK:
  5. // 更新UI
  6. adapter.notifyDataSetChanged();
  7. break;
  8. }
  9. super.handleMessage(msg);
  10. }
  11. };
  1. @Override
  2. public void handleMessage(Message msg) {
  3. switch (msg.arg1) {
  4. case Constant.MSG_LIST_IMG_OK:
  5. // 更新UI
  6. adapter.notifyDataSetChanged();
  7. break;
  8. }
  9. super.handleMessage(msg);
  10. }
  11. };

上个图吧：

转自：http://blog.csdn.net/fengkuanghun/article/details/6922131