Android ListView异步加载图片错位、重复、闪烁分析以及解决方案

一、原因分析：

我们在使用ListView异步加载图片的时候，在快速滑动或者网络不好的情况下，会出现图片错位、重复、闪烁等问题，其实这些问题总结起来就是一个问题，我们需要对这些问题进行ListView的优化。

比如ListView上有100个Item，一屏只显示10个Item，我们知道getView()中convertView是用来复用View对象的，因为一个Item的对应一个View对象，而ImageView控件就是View对象通过findViewById()获得的，而我们在复用View对象时，同时这个ImageView对象也被复用了。比如第11个Item的View复用了第1个Item View对象，那么ImageView就同时被复用了，所以当图片没下载出来，这个ImageView（第11个Item）显示的数据就是复用（第1个Item）的数据。

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

    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();
        }
    }

    private static class ViewHolder {
        ImageView appIcon;
        TextView appName;
        TextView appInfo;
    }

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

1：Item图片显示重复

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

比如ListView滑动到第2行会异步加载某个图片，但是加载很慢，加载过程中ListView已经滑动到了第14行，且滑动过程中该图片加载结束。第2行已不在屏幕内，根据上面介绍的缓存原理，第2行的View对象可能被第14行复用，这样我们看到的就是第14行显示了本该属于第2行的图片，造成显示重复。

2. Item图片显示错乱
这个显示错乱是指某行Item显示了不属于该行Item的图片。
跟上面的原因一样。

3. Item图片显示闪烁
上面介绍的另外一种情况，如果第14行图片又很快加载结束，所以我们看到第14行先显示了复用的第2行的图片，立马又显示了自己的图片进行覆盖造成闪烁错乱。

 

二、解决方案：

通过上面的分析我们知道了出现错乱的原因是异步加载及对象被复用造成的，如果每次getView能给对象一个标识，在异步加载完成时比较标识与当前行Item的标识是否一致，一致则显示，否则不做处理即可。
原理：首先给ImageView设置一个Tag，这个Tag中设置的是图片的url，然后在加载的时候取得这个url和要加载那position中的url对比，如果不相同就加载，相同就是复用以前的就不加载了。

大致代码如下：（每次加载之前先对比一下URL是否已经存在于图片缓存里了）

@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();
	}

	……
	// add tag for image, to compare it when image loaded finish
	imageView.setTag(imageUrl);
	// if in hashmap, restore default
	if (myHashMap.get(imageUrl)) {
		imageView.setImageDrawable(null);
	}
}