Android在ListView显示图片（重复错乱闪烁问题）

最新推荐文章于 2021-05-27 14:45:49 发布

menglele1314

最新推荐文章于 2021-05-27 14:45:49 发布

阅读量3k

点赞数

分类专栏： android ListView 文章标签： android bitmap 图片处理位图

本文链接：https://blog.csdn.net/menglele1314/article/details/46442287

版权

android ListView 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Android在ListView显示图片（重复错乱闪烁问题）

1、原因分析

ListView item缓存机制：

为了使得性能更优，ListView会缓存行item(某行对应的View)。

ListView通过adapter的getView函数获得每行的item。

滑动过程中

a. 如果某行item已经滑出屏幕，若该item不在缓存内，则put进缓存，否则更新缓存；

b. 获取滑入屏幕的行item之前会先判断缓存中是否有可用的item，如果有，做为convertView参数传递给adapter的getView。

这样，如下的getView写法就可以充分利用缓存大大提升ListView的性能。即便上万个行item，最多inflate的次数为n，

n为一屏最多显示ListView 行item的个数。

 
  @Override 
 
  public 
   View getView (  
  int 
   position , View convertView , ViewGroup parent ) { 
 
  ViewHolder holder ; 
 
  if 
  ( convertView == 
  null 
  ) { 
 
  convertView = inflater . inflate ( R . layout . list_item , 
  null 
  ) ; 
 
  holder = 
  new 
  ViewHolder ( ) ; 
 
  …… 
 
  convertView . setTag ( holder ) ; 
 
  } 
  else 
  { 
 
  holder = ( ViewHolder ) convertView . getTag ( ) ; 
 
  } 
 
  }

这样提升了性能，但同时也会造成另外一些问题：

a. 行item图片显示重复

这个显示重复是指当前行item显示了之前某行item的图片。

比如ListView滑动到第2行会异步加载某个图片，但是加载很慢，加载过程中listView已经滑动到了第14行，且滑动过程中该图片加载结束，

第2行已不在屏幕内，根据上面介绍的缓存原理，第2行的view可能被第14行复用，这样我们看到的就是第14行显示了本该属于第2行的图片，

造成显示重复。

b. 行item图片显示错乱

这个显示错乱是指某行item显示了不属于该行item的图片。

比如ListView滑动到第2行会异步加载某个图片，但是加载很慢，加载过程中listView已经滑动到了第14行，第2行已不在屏幕内，根据上面介绍的缓存原理，第2行的view可能被第14行复用，第14行显示了第2行的View，这时之前的图片加载结束，就会显示在第14行，造成错乱。

c. 行item图片显示闪烁

上面b的情况，第14行图片又很快加载结束，所以我们看到第14行先显示了第2行的图片，立马又显示了自己的图片进行覆盖造成闪烁错乱。

2、解决方法

通过上面的分析我们知道了出现错乱的原因是异步加载及对象被复用造成的，如果每次getView能给对象一个标识，在异步加载完成时比较标识与当前行item的标识是否一致，一致则显示，否则不做处理即可。

andbase中的实现代码：

 
  /** 
 
  * 显示这个图片,解决了列表问题. 
 
  * 列表问题：滑动过程中，getView的imageView会重复利用，导致图片会串位 
 
  * @param imageView 显得的View 
 
  * @param url the url 
 
  * @return 
 
  */ 
 
  public 
  void 
  display( 
  final 
  ImageView imageView,String url) { 
 
  if 
  (AbStrUtil.isEmpty(url)){ 
 
  if 
  (noImage != 
  null 
  ){ 
 
  if 
  (loadingView != 
  null 
  ){ 
 
  loadingView.setVisibility(View.INVISIBLE); 
 
  imageView.setVisibility(View.VISIBLE); 
 
  } 
 
  imageView.setImageDrawable(noImage); 
 
  } 
 
  return 
  ; 
 
  } 
 
  //设置下载项 
 
  final 
  AbImageDownloadItem item = 
  new 
  AbImageDownloadItem(); 
 
  //设置显示的大小 
 
  item.width = width; 
 
  item.height = height; 
 
  //设置为缩放 
 
  item.type = type; 
 
  item.imageUrl = url; 
 
  final 
  String cacheKey = AbImageCache 
 
  .getCacheKey(item.imageUrl, item.width, item.height, item.type); 
 
  item.bitmap =  AbImageCache.getBitmapFromCache(cacheKey); 
 
  //if(D) Log.d(TAG, "缓存中获取的"+cacheKey+":"+item.bitmap); 
 
  //设置标记 
 
  imageView.setTag(url); 
 
  if 
  (item.bitmap == 
  null 
  ){ 
 
  //先显示加载中 
 
  if 
  (loadingView!= 
  null 
  ){ 
 
  loadingView.setVisibility(View.VISIBLE); 
 
  imageView.setVisibility(View.INVISIBLE); 
 
  } 
  else 
  if 
  (loadingImage != 
  null 
  ){ 
 
  imageView.setImageDrawable(loadingImage); 
 
  } 
 
  //下载完成后更新界面 
 
  item.setListener( 
  new 
  AbImageDownloadListener() { 
 
  @Override 
 
  public 
  void 
  update(Bitmap bitmap, String imageUrl) { 
 
  //未设置加载中的图片，并且设置了隐藏的View 
 
  if 
  (loadingView != 
  null 
  && imageUrl.equals(imageView.getTag())){ 
 
  loadingView.setVisibility(View.INVISIBLE); 
 
  imageView.setVisibility(View.VISIBLE); 
 
  } 
 
  //要判断这个imageView的url有变化，如果没有变化才set， 
 
  //有变化就取消，解决列表的重复利用View的问题 
 
  if(bitmap!=null&& imageUrl.equals(imageView.getTag())){ 
 
  if 
  (D) Log.d(TAG, 
  "图片下载，设置:" 
  +imageUrl); 
 
  imageView.setImageBitmap(bitmap); 
 
  } 
  else 
  { 
 
  if 
  (errorImage != 
  null 
  && imageUrl.equals(imageView.getTag())){ 
 
  imageView.setImageDrawable(errorImage); 
 
  } 
 
  } 
 
  } 
 
  }); 
 
  if 
  (D) Log.d(TAG, 
  "图片下载，执行:" 
  +url); 
 
  mAbImageDownloadPool.execute(item); 
 
  } 
  else 
  { 
 
  if 
  (loadingView != 
  null 
  ){ 
 
  loadingView.setVisibility(View.INVISIBLE); 
 
  imageView.setVisibility(View.VISIBLE); 
 
  } 
 
  imageView.setImageBitmap(item.bitmap); 
 
  } 
 
  }