在使用ListView时，很多情况下由于某些数据的加载不能立刻完成，为了防止UI线程的阻塞我们通常会采用异步加载数据的方式。这时就会产生一个问题：数据加载错位！
原因分析
造成ListView的数据加载错位是由于我们同时使用convertView和异步加载引起的。
- 图一：假设我们屏幕上一开始显示了5个完整的Item，针对这5个Item convertView都为null。
- 图二：当第1个Item有一半移出屏幕，第6个Item有一半移入屏幕时，屏幕上显示的Item条目数最多。也即我们拥有6个不同的convertView。
- 图三：当第1个Item完全滑出屏幕之后，如果第7个Item进入屏幕，则此时会复用与第1个Item相关联的convertView。
Paste_Image.png
假设我们的第一个Item的数据加载需要较长的时间，我们采用了异步加载的方式。想像一下当我们已经启动了异步加载线程，但是在数据还没有完全加载完成的时候，我们的ListView的状态已经由图一变成了图三。此时如果加载完毕，由于数据加载线程并不知道ListView已经发生了改变，依旧会将数据更新至与Item1相关联的convertView上。此时Item7就会显示Item1的数据!!这就是所谓的ListView加载错位。
问题解决
追根究底加载错位的问题出在加载线程在数据加载完毕之后不知道ListView已经发生了改变，从这一点考虑我们可以通过以下步骤进行解决：
- 在启动加载线程之前给每个Item的控件设定与当前Item关联的Tag.
- 在数据加载完毕之后通过从控件中getTag()的方法判断是否为“正确”的关联控件。
核心代码实现：
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View v;
final ViewHolder viewHolder;
final TypeInfo typeInfo = getItem(position);
Log.d("MyAdapter", "convertView:"+convertView+" position="+position);
if(convertView == null){
v= mInflater.inflate(mLayoutId, parent, false);
viewHolder = new ViewHolder();
viewHolder.tv_title = (TextView)v.findViewById(R.id.title);
viewHolder.iv_pic = (ImageView)v.findViewById(R.id.pic);
v.setTag(viewHolder);
}
else{
v = convertView;
viewHolder = (ViewHolder)v.getTag();
}
viewHolder.tv_title.setText(typeInfo.typeTitle);
// ------1.不添加以下代码则会造成图片错位
viewHolder.iv_pic.setTag(typeInfo.typeTitle);
// ------
if(position == 0){
viewHolder.iv_pic.setImageDrawable(new BitmapDrawable());
// 模拟网络、文件加载图片的时间，这里假设加载用了3s
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
//注意这里的typeInfo.typeTitle是在启动线程的时候就已经获取到值了,而不是run到此处时才获取到的值
Log.d("MyAdapter", "tag:"+typeInfo.typeTitle);
//运行到此处时模拟加载已经完成
// ------2.不添加以下代码则会造成图片错位
Log.d("MyAdapter","tag:"+viewHolder.iv_pic.getTag());
if(viewHolder.iv_pic.getTag() == null)
return;
if(!viewHolder.iv_pic.getTag().equals(typeInfo.typeTitle))//不是真正的pos0的imageView控件
return;//do nothing
// ------
viewHolder.iv_pic.setImageResource(typeInfo.typePic);
}
}, 3000);
}else{
viewHolder.iv_pic.setImageResource(typeInfo.typePic);
}
return v;
}
