ListView之解决加载错位

在使用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已经发生了改变，从这一点考虑我们可以通过以下步骤进行解决：

1. 在启动加载线程之前给每个Item的控件设定与当前Item关联的Tag.
2. 在数据加载完毕之后通过从控件中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;
}