ListView之图片闪烁问题

ListView性能优化的最重要的一条就是对convertView的复用，但也就是这个复用会出现一个问题，对于异步的耗时操作（如异步加载网络图片）会出现条目混乱，下面我就来分析一下。

所谓的复用就是新出现的item会直接使用已经滑出屏幕的旧Item，这样就保证了item能够被重复利用，降低了item数量以实现优化，如上图所示（图为盗用...若有侵权告知必删）。

但复用会对异步加载图片这种耗时操作造成问题，Item1还没有加载完图片已经被滑出屏幕从而被新出现的Item8拿去使用了，这时候同一个Item出现了两个不同的图片请求操作，于是便会造成了重复或者闪烁。

如何解决这个问题呢？首先要模拟耗时加载图片的情况

public class MyAdapter extends BaseAdapter {

    private Context mContext;

    private LayoutInflater mInflater;
    private Bitmap mBitmap;
    private Handler mHandler;
    public MyAdapter(Context context){

        this.mContext = context;

        mInflater = LayoutInflater.from(context);
        mHandler = new Handler();
        mBitmap = BitmapFactory.decodeResource(context.getResources(),R.mipmap.head);
    }

    @Override
    public int getCount() {
        return 50;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {

        ViewHolder holder = null;

        if(convertView == null){
            convertView = mInflater.inflate(R.layout.item_listview,null);
            holder = new ViewHolder();
            holder.imageView = (ImageView) convertView.findViewById(R.id.item_img);
            holder.textView = (TextView) convertView.findViewById(R.id.item_tv);
            convertView.setTag(holder);
        }else {
            holder = (ViewHolder) convertView.getTag();
        }

        holder.textView.setText(position+"");
        final ImageView imageView = holder.imageView;
        //前两个显示图片
        if(position < 2) {
            //模仿耗时操作，延迟1秒
            mHandler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    imageView.setImageBitmap(mBitmap);
                }
            }, 1000);
        }

        return convertView;
    }

    static class ViewHolder{
        TextView textView;
        ImageView imageView;
    }

}

注意，代码中我们只有前两个Item才有图片的，我们这时运行滑动一下，可以看到下图：

可以看到第5，第12个Item已经混乱了，重复了Item1,Item2的图片。如果用两张不同的图片还可以发现会出现图片闪烁的问题，这里就不演示了。接下来我们讨论一下如何解决这类问题。

由于组件是复用的，所以我们首先要避免图片被复用，setImageDrawable(null)可以使之前的图片清空。

其次经过我们分析，这类问题的主要原因就是由于组件复用导致了同一个item有着不同图片的加载，解决这个也很简单，只需要做一个判断，仅对该位置的组件的操作进行加载图片，其余的操作直接忽视掉，这样就不会发生混乱的情况了。这里我们用setTag()进行标识，代码为：

public class MyAdapter extends BaseAdapter {

    private Context mContext;

    private LayoutInflater mInflater;
    private Bitmap mBitmap;
    private Handler mHandler;
    public MyAdapter(Context context){

        this.mContext = context;

        mInflater = LayoutInflater.from(context);
        mHandler = new Handler();
        mBitmap = BitmapFactory.decodeResource(context.getResources(),R.mipmap.head);
    }

    @Override
    public int getCount() {
        return 50;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {

        ViewHolder holder = null;

        if(convertView == null){
            convertView = mInflater.inflate(R.layout.item_listview,null);
            holder = new ViewHolder();
            holder.imageView = (ImageView) convertView.findViewById(R.id.item_img);
            holder.textView = (TextView) convertView.findViewById(R.id.item_tv);
            convertView.setTag(holder);
        }else {
            holder = (ViewHolder) convertView.getTag();
        }

        holder.textView.setText(position+"");
        final ImageView imageView = holder.imageView;
        imageView.setTag(position+"");
        imageView.setImageDrawable(null);
        //前两个显示图片
        if(position < 2) {
            //模仿耗时操作，延迟1秒
            mHandler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    //获得组件当前的tag，与传入的内容比较，一直的才能显示
                    if(imageView.getTag().equals(position+"")) {
                        imageView.setImageBitmap(mBitmap);
                    }
                }
            }, 1000);
        }

        return convertView;
    }

    static class ViewHolder{
        TextView textView;
        ImageView imageView;
    }

}

这样就解决了图片闪烁问题，运行滑动一下，如下图，问题不存在了。