从服务器下载图像时带有 ViewHolder 模式的“闪烁图像”

Question

我想创建一个视图列表，其中每个视图中显示的图像是在您滚动列表时从服务器下载的（延迟加载）。这是我目前得到的代码：

public class CustomAdapter extends ArrayAdapter<Component> {

    private final List<Component> components;
    private final Activity activity;

    public CustomAdapter(Activity context, List<Component> components) {
        super(context, android.R.layout.simple_list_item_1, components);
        this.components = components;
        this.activity = context;
    }

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

        ViewHolder viewHolder;

        if (convertView == null) {
            LayoutInflater inflater = activity.getLayoutInflater();
            convertView = inflater.inflate(R.layout.item, null, false);

            viewHolder = new ViewHolder();
            viewHolder.imageView = (ImageView) convertView.findViewById(R.id.image);

            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder)convertView.getTag();
        }

        Component component = components.get(position);
        // Don't show any image before the correct one is downloaded
        viewHolder.imageView.setImageBitmap(null);

        if (component.getImage() == null) { // Image not downloaded already
            new DownloadImageTask(viewHolder.imageView).execute(component);
        } else {
            viewHolder.imageView.setImageBitmap(component.getImage());
        }

        return convertView;
    }

    private class ViewHolder {
        ImageView imageView;
    }

    private class DownloadImageTask extends AsyncTask<Component, Void, Component> {

        private ImageView imageView;

        public DownloadImageTask(ImageView imageView) {
            this.imageView = imageView;
        }

        @Override
        protected Component doInBackground(Component... params) {
            String url = params[0].getImageURL();
            Component component = params[0];
            // Download the image using the URL address inside found in component
            Bitmap image = ImageDownloader.getImage(url);
            // Set the Bitmap image to the component so we don't have to download it again
            component.setImage(image);
            return component;
        }

        @Override
        protected void onPostExecute(Component component) {
            // Update the ImageView with the downloaded image and play animation
            imageView.setImageBitmap(component.getImage());
            Animation animation = AnimationUtils.loadAnimation(activity, R.anim.fade_in);
            imageView.startAnimation(animation);
        }
    }
}

基本上，当 getView() 运行时，它会从组件（用于缓存项目的数据）中获取数据（在本例中为位图），除非没有数据。在这种情况下，它会执行 DownloadImageTask，它将下载图像并将其存储在组件中。存储后，它会将图像放入 ImageView。

我的问题是，当使用 ImageViews 的 ViewHolder 模式时，而不是“错误的方式”（每次调用 findViewById()），滚动列表会使错误的 ImageViews 获取下载的位图。这个 gif 显示了它的外观：

Preview

显然，我希望图像只出现在它们应该出现的地方。有什么好方法可以使这项工作按预期进行吗？

Answer 1

我使用 Glide 解决了这个问题。感谢大家告诉我，已经存在如此美妙的事物！

做（几乎）同样的事情就像：

public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder viewHolder;
    if (convertView == null) {
        LayoutInflater inflater = activity.getLayoutInflater();
        convertView = inflater.inflate(R.layout.item, null, false);

        viewHolder = new ViewHolder();
        viewHolder.imageView = (ImageView) convertView.findViewById(R.id.image);

        convertView.setTag(viewHolder);
    } else {
        viewHolder = (ViewHolder) convertView.getTag();
    }

    String url = components.get(position).getImageURL();
    Glide.with(activity).load(url).crossFade().into(viewHolder.imageView);

    return convertView;
}

Answer 2

虽然其他人认为有许多库可以为您处理这个问题是正确的，但如果您真的愿意，也可以按照您最初尝试的方式进行操作。您只需要确保在回收项目视图时取消 AsyncTasks。您可以通过将 AsyncTask 添加到您的 ViewHolder 类来执行此操作，这样您就可以查看是否有某些东西正在运行并在开始新的之前取消它。

private class ViewHolder {
    ImageView imageView;
    AsyncTask<?,?,?> task;
}

然后在你的 getView() 中：

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

    ...

    // Don't show any image before the correct one is downloaded
    viewHolder.imageView.setImageBitmap(null);

    if (viewHolder.task != null) { // Existing task may be executing
        viewHolder.task.cancel(true);
        viewHolder.task = null;
    }

    if (component.getImage() == null) { // Image not downloaded already
        AsyncTask<?,?,?> task = new DownloadImageTask(viewHolder.imageView);
        viewHolder.task = task;
        task.execute(component);
    } else {
        viewHolder.imageView.setImageBitmap(component.getImage());
    }

    return convertView;
}