使用动态加载的图像滚动列表视图会混合图像顺序

时间:2014-02-16 12:04:09

标签: android listview

在我的Android应用程序中,我有一个用户项目列表。 使用自定义适配器显示它们,覆盖GetView方法。

从一本书中我将WebImageView转换为延迟加载图像并对其进行了一些定制。

问题在于,当我打开列表视图并向上和向下滚动时,图像会不断混淆

以下是一些代码:

@Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = layoutInflater.inflate(R.layout.item_adapterable_my_profile_item, parent, false);
        }
        iMyItemsFeedItemImage = (ImageWebView) convertView.findViewById(R.id.iMyItemsFeedItemImage);
        tvMyItemsFeedItemName = (TextView) convertView.findViewById(R.id.tvMyItemsFeedItemName);


        tvMyItemsFeedItemName.setText(itemNames.get(position));


        iMyItemsFeedItemImage.setPlaceholderImage(R.drawable.images_default_product);
        iMyItemsFeedItemImage.setVisibility(View.VISIBLE);
        iMyItemsFeedItemImage.setImageUrl(C.API.WEB_ADDRESS + C.API.IMAGES_ITEMS_FOLDER_THUMBNAIL + itemImages.get(position));


        return convertView;

    } // End of getView

和ImageWebView类:

public class ImageWebView extends ImageView implements OnDownloadImageListener {

    private Drawable mPlaceholder;
    private Drawable mImage;
    private Bitmap cachedBitmap;
    private boolean imageBitmapCached = false;

    public ImageWebView(Context context) {
        this(context, null);
    }

    public ImageWebView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ImageWebView(Context context, AttributeSet attrs, int defaultStyle) {
        super(context, attrs, defaultStyle);
    }

    public void setPlaceholderImage(Drawable drawable) {
        mPlaceholder = drawable;
        if (mImage == null) {
            setImageDrawable(mPlaceholder);
        }
    }

    public void setPlaceholderImage(int resid) {
        mPlaceholder = getResources().getDrawable(resid);
        if (mImage == null) {
            setImageDrawable(mPlaceholder);
        }
    }

    public void setImageUrl(String url) {
        if (imageBitmapCached) {
            setImageBitmap(cachedBitmap);
        } else {
            new DownloadImage(this, url).execute();
        }

    }

    @Override
    public void onDownloadImageSuccess(Bitmap image) {
        setImageBitmap(image);
        cachedBitmap = image;
        imageBitmapCached = true;
    }

    @Override
    public void onDownloadImageFailure() {

    };

} // End of Class

名称保持不变,按照他们最初的顺序,但图像混淆

2 个答案:

答案 0 :(得分:3)

ListView是回收视图,这意味着一旦向下滚动,您为列表项触发的下载可能不再适用,因为相同的列表项视图已用于显示列表底部的项目,应该有不同的形象。

您需要做的是,在setImageUrl方法中将图像的URL设置为ImageWebView的标记,然后在onImageDownloaded中,检查标记中的Url是否仍然与您刚刚下载的Url相同。如果不是,则表示您的ImageWebView已用于新的列表项,您不应该设置图像。为此,您还应将下载的图像Url作为参数添加到onImageDownloaded方法中。所以完整的解决方案是:

public void setImageUrl(String url) {
    setTag(url);
    if (imageBitmapCached) {
        setImageBitmap(cachedBitmap);
    } else {
        new DownloadImage(this, url).execute();
    }

}

@Override
public void onDownloadImageSuccess(Bitmap image, String url) {
    if(url.equals.((String) getTag())){
        setImageBitmap(image);
        cachedBitmap = image;
        imageBitmapCached = true;
    }
}

编辑:

我会改变你的整个ImageWebView类:

public class ImageWebView extends ImageView implements OnDownloadImageListener {

public ImageWebView(Context context) {
    this(context, null);
}

public ImageWebView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public ImageWebView(Context context, AttributeSet attrs, int defaultStyle) {
    super(context, attrs, defaultStyle);
}

public void setImageUrl(String url, int placeholderResId) {
    String oldUrl = (String) getTag();
    setTag(url);
    if (!url.equals(oldUrl)) {
        setImageResource(placeholderResId);
        new DownloadImage(this, url).execute();
    }

}

@Override
public void onDownloadImageSuccess(Bitmap image, String url) {
    if(url.equals((String) getTag())){
        setImageBitmap(image);
    }
}

在你的适配器中,只是不要调用setPlaceholderImage,只需调用新版本的setImageUrl即可。使用占位符资源ID:

iMyItemsFeedItemImage.setImageUrl(C.API.WEB_ADDRESS + C.API.IMAGES_ITEMS_FOLDER_THUMBNAIL + itemImages.get(position), R.drawable.images_default_product);

答案 1 :(得分:1)

您应该使用shutterbug库来显示来自Url的图片。它简单有效。