安卓ListView图片异步加载错位的处理

处理方法

我们知道了产生问题出在复用convertview时候。convertview中，我们的Imagview控件的数量是有限的，但是获取到的url却是很多的。

我们需要明确当前的ImageView中用到的是哪张图片。图片的获取是异步的，这个时间差让我们不容易根据图片本身来判断其应该放在哪里。

我觉得对于这种异步线程问题的处理，我们必须找到一些标志，就像网上很多资料说的加tag，但是具体tag怎么加，加到哪里呢？

首先明确我们的imageview数量是固定的，当imageview显示的时候，有一张图片和它对应，而一个图片又对应一个url地址。也就是说，imageview在显示的时候，其实可以对应一个图片url地址。当其移出屏幕时，由于我们对convertview的复用，这个时候imageview必须对应另外一个url，但是此时我们的异步任务还在为这个imageview加载上一个url中的图片。这样就可能出现乱序的或者闪烁的问题。

可见，我们必须明确imageview中，当前应该对应哪一个url。这个tag也就是应该设置给imagview，而tag的内容就是url，这样就建立起了imagview和url的关系，当我们发现下载图片使用的url和imageview中存储的url不是一个值的时候，说明convertview已经复用，改变了imageview中的tag。此时图片和iamgeview已经不对应了，如果显示这张图片，就会造成错位。

自建异步图片加载类

/**
* 图片异步加载类
* @author vonchenchen
*
*/
public class AsyncImageLoader {

private static final boolean DEBUG = true;

private static final String TAG = "AsyncImageLoader";
/** 创建一个线程池 */
private static ExecutorService fixedThreadPool = Executors.newFixedThreadPool(5);

final Handler handler = new Handler();
private LruCache<String, Bitmap> imageCache;

public AsyncImageLoader() {
//获取当前程序可用内存大小
int maxMemory = (int)(Runtime.getRuntime().maxMemory()/1024);
// 计算缓存大小
int cacheSize = maxMemory/8;
imageCache = new LruCache<String, Bitmap>(cacheSize){
@Override
protected int sizeOf(String key, Bitmap bitmap) {

return bitmap.getByteCount()/1024;
}
};
}

/**
* 获取图片成功后回调接口
*/
public interface ImageViewCallback {
public void onImageLoad(ImageView iv, Bitmap Bitmap, String url);

public void onError(String t);
}

/**
* 开启线程，加载图片
*
* 图片控件需要与对应的url绑定,防止在listview中使用时由于convertview复用而出错
* @param iv           图片控件
* @param imageUrl     图片url
* @param imageViewCallback
* @return
*/
public Drawable loadDrawable(final ImageView iv, final String imageUrl,
final ImageViewCallback imageViewCallback) {

//将当前url和当前图片控件绑定
iv.setTag(imageUrl);

fixedThreadPool.execute(new Runnable() {

@Override
public void run() {
loadImg(iv, imageUrl, imageViewCallback);
}
});

return null;
}

/**
* 根据url加载图片
* @param url
* @return
* @throws IOException
*/
public static Bitmap loadImageFromUrl(String url) throws IOException {
URL m;
InputStream i = null;
m = new URL(url);
i = (InputStream) m.getContent();

Drawable d = Drawable.createFromStream(i, "src");
BitmapDrawable bd = (BitmapDrawable) d;
Bitmap bm = bd.getBitmap();
return bm;
}

/**
* 加载图片   先从lru缓存中寻找图片  如果lru中的图片被回收，则请求网络
* @param iv
* @param imageUrl
* @param imageViewCallback
*/
private void loadImg(final ImageView iv, final String imageUrl,
final ImageViewCallback imageViewCallback) {

if (imageCache.get(imageUrl) != null) {

Log.i(TAG, "**************catch*****************");

Bitmap bitmap = imageCache.get(imageUrl);
final Bitmap bitmapTmp = bitmap;
if (bitmapTmp != null) {
//放到主线程执行ui操作
handler.post(new Runnable() {
@Override
public void run() {
//imageViewCallback.onImageLoad(iv, bitmapTmp, imageUrl);
setImageView(iv, bitmapTmp, imageUrl);
}
});
return;
}
}else{

// 尝试从URL中加载
try {
Log.i(TAG, "**************url*****************"+imageUrl);
final Bitmap bitmap = loadImageFromUrl(imageUrl);
//将图片存入lru缓存中
if (bitmap != null) {
imageCache.put(imageUrl, bitmap);
}
handler.post(new Runnable() {
@Override
public void run() {

setImageView(iv, bitmap, imageUrl);
}
});
} catch (IOException e) {

e.printStackTrace();
}
}
}

private void setImageView(ImageView iv, Bitmap bitmap, String url){
//确保当前图片加载控件是显示控件  (而不是复用了原先的)

//当前图片控件对应的是这个图片控件中应该使用的url才加载
//如果convertview被复用，iv中的tag会变为其他值，和原先url不匹配，则不加载这个图片
if(iv.getTag().equals(url)){
iv.setBackgroundColor(0x00000000);
iv.setImageBitmap(bitmap);
}
}
}

具体思路是

1.建立一块lru缓存

2.建立一个线程池

3.调用loadDrawable 传入控件和图片url，绑定imageview控件和url的关系，开启线程。先寻找lrucache中是否有图片内容，url中没有则从网络获取，使用drawable的createFromStream方法从网络获取图片。

4.判断下载图片使用的url与imagview中tag中保存的是否为一个值，如果是，说明当前imagview加载的是其需要的图片，可以加载，否则加载的是乱序的图片，跳过不去加载。

调用方法

我们以在baseAdapter中的getView方法中为例。

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

ListItem item = getItem(position);
ViewHolder viewHolder = null;
if(convertView == null){
convertView = LayoutInflater.from(getContext()).inflate(myResourceId,
null);
viewHolder = new ViewHolder();

viewHolder.appLogo = (ImageView) convertView.findViewById(R.id.iv);
convertView.setTag(viewHolder);
}else{
viewHolder = (ViewHolder) convertView.getTag();
}

asyncImageLoader.loadDrawable(viewHolder.appLogo,item.getImgUrl(), null);

return convertView;
}
class ViewHolder{
ImageView appLogo;
}