android - ListView 数据图像在快速向下滚动时重复

Question

我有这个适配器，我从互联网加载数据。如果我快速向下滚动，它会在一瞬间显示错误的图像，然后再显示正确的图像。然而，图像旁边的相应文本不会这样做。当它即时下载更多数据时，这一点更加明显。请帮我调试一下。这是 ListView 的样子:

categoryAdapter 使用仅包含 textview 数据的数据列表进行初始化。当调用 categoryAdapter 的 getView() 时，它通过 asynctask 从 url 下载图像。当到达 ListView 的底部时，OnScrollListener 会再下载 12 篇文章(同样只是文本)。这是 getView()。请注意，我认为回收旧 View 是问题所在，所以我尝试在将 ImageView 的可绘制对象更改为新图像之前快速将图像设置为空，这样我就看不到旧图像了。如果我快速向上滚动，这对看不到错误有效，但如果我快速向下滚动，则不会。可能是什么问题？

class CategoryAdapter extends BaseAdapter{...
@Override
public View getView(int i, View view, final ViewGroup viewGroup){
    // crate a new rowItem object here
    LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View row;

    if (view == null) row = inflater.inflate(R.layout.single_row, viewGroup, false);
    else row = view;

    // Get the description, image and title of the row item
    TextView title = (TextView) row.findViewById(R.id.textView);
    TextView description = (TextView) row.findViewById(R.id.textView2);
    ImageView image = (ImageView) row.findViewById(R.id.imageView);
    ProgressBar pb = (ProgressBar) row.findViewById(R.id.progressBarSingleRow);

    /* On getting view, set this to invisible until loaded. (issue before: old image seen
       before new image on fast scroll) Mostly fixed by this, but on fast scroll down, still
       shows a little */
    image.setImageDrawable(null);

    // Set the values of the rowItem
    SingleRow rowTemp = articles.get(i);
    title.setText(rowTemp.title);
    description.setText(rowTemp.description);

    String s = "null";
    if (rowTemp.image != null) s = "not null";
    Log.e("ImageLog", "Item " + Integer.toString(i) + ", is " + s);

    // Load image into row element
    if (rowTemp.image == null) {    // download
        // Prepare prepped row objects in single holder object for fetchCategoryImageTask
        AdapterObject holder = new AdapterObject();
        holder.title = title;
        holder.description = description;
        holder.image = image;
        holder.pb = pb;

        new FetchCategoryImageTask(rowTemp, holder).execute();
    }
    else {                          // set saved image
        // Cropping image to preserve aspect ratio
        image.setScaleType(ImageView.ScaleType.CENTER_CROP);
        image.setCropToPadding(true);
        image.setImageBitmap(rowTemp.image);
    }

    return row;
}

以防万一，这里有一些 fetchCategoryImageTask()

@Override
protected void onPreExecute() {
    image.setVisibility(ImageView.INVISIBLE);
}

@Override
protected Bitmap doInBackground(Void... params) {
    return (sr.imageURL != null) ? downloadBitmap(sr.imageURL) : null;
}

@Override
protected void onPostExecute(final Bitmap b) {
    // imageView image
    // Preserve aspect ratio of image
    image.setScaleType(ImageView.ScaleType.CENTER_CROP);
    image.setCropToPadding(true);
    image.setImageBitmap(b);

    // Make image visible
    image.setVisibility(ImageView.VISIBLE);

    // Save image to SingleRow object for categoryAdapter's getView()
    sr.image = b;
}

Answer 1

这里发生的是 ListViews 重用 View 。所以它重用了一个已经有图像的 View 。我推荐你使用 Volley 库或 ImageLoader 库来解决这个问题，很容易定义一个占位符来在下载图像时显示。

所以不要使用 Asynctask，而是使用下面的代码:

private void showImage(View view, String imageUrl) {
        DisplayImageOptions options = new DisplayImageOptions.Builder()//
                .showImageOnFail(R.drawable.image_placeholder) 
                .showImageOnLoading(R.drawable.image_placeholder) 
                .showImageForEmptyUri(R.drawable.image_placeholder) 
                .cacheInMemory(true) 
                .cacheOnDisk(true) 
                .build();
        ImageLoader.getInstance().displayImage(imageUrl, imageViewType, options);
    }

通用图像加载器库:https://github.com/nostra13/Android-Universal-Image-Loader