【Android】ListView、RecyclerView异步加载图片引起错位问题

今天在RecyclerView列表里遇到一个情况，它包含300条数据，每项包含一个图片，发现在首次载入时，由于本地没图，请求网络的时候；快速滑动导致了图片错位、闪烁的问题。

原理的话有一篇已经说的很清楚了，大家可以参考下

下面是讲讲实际使用中，是怎么解决错位的问题。

一般错位都是发生在耗时的http请求上面，因此，针对每次图片请求

发起前

1：先将图片预设为本地一个占位图片。（重要！很多错位情况在于复用了其他位置的图片缓存，而当前图片迟迟加载不出来，导致当前图片错位。所以解决之道是先用本地占位图片，快速刷新当前图片。等加载完毕之后，就可以替换掉占位图片了。）

2：通过ImageView.setTag，把url记录在图片内部。

3：把url放进一个请求队列，（这是避免图片很大，请求耗时很长，重复发起url请求）

发起中

1：如果请求队列存在url，则将老的url对应图片控件，替换为本次请求图片控件，返回

发起后

如果当前url和第一步ImageView.getTag一致，则用新的数据源更新图片。

否则返回。

如果是重复使用的图片，最好就是访问之后，写入到本地存储上，避免耗时网络请求。

贴上优化过的图片功能类，供各位参考

package zhexian.app.smartcall.lib;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Point;
import android.os.AsyncTask;
import android.util.Log;
import android.util.LruCache;
import android.widget.ImageView;

import java.io.FileOutputStream;
import java.io.IOException;
import java.util.HashMap;

import zhexian.app.smartcall.R;
import zhexian.app.smartcall.base.BaseApplication;
import zhexian.app.smartcall.tools.Utils;

public class ZImage {

/**
* 超过就不走内存缓存了。可以走磁盘缓存
*/
private static final int MAX_CACHED_IMAGE_SIZE = 200 * 1024;
private static final int CACHED_MEMORY_SIZE = 20 * 1024 * 1024;
private static ZImage mZImage;
LruCache<String, Bitmap> mMemoryCache;
private HashMap<String, ImageView> imageRequestList;

private BaseApplication mApp;
private Point screenSize;
private Bitmap placeHolderBitmap;

public ZImage(Activity activity) {
mApp = (BaseApplication) activity.getApplication();
screenSize = new Point();
placeHolderBitmap = BitmapFactory.decodeResource(activity.getResources(), R.drawable.user_default);
imageRequestList = new HashMap<>();

mMemoryCache = new LruCache<String, Bitmap>(CACHED_MEMORY_SIZE) {
protected int sizeOf(String key, Bitmap bitmap) {
return bitmap.getByteCount();
}
};
}

public static void Init(Activity activity) {
if (mZImage == null)

synchronized (ZImage.class) {
if (mZImage == null)
mZImage = new ZImage(activity);
}
}

public static ZImage getInstance() {
if (mZImage == null) {
Log.d("图片模块未初始化", "调用Init来初始化");
}
return mZImage;
}

public void loadEmpty(ImageView imageView) {
imageView.setImageBitmap(placeHolderBitmap);
}

/**
* 加载图片到内存中
*
* @param url          地址
* @param imageView    图片
* @param width        宽度
* @param height       高度
* @param isCache      是否缓存到磁盘与内存中
* @param canQueryHttp 如果找不到本地文件，是否可以通过网络获取
*/
public void load(String url, ImageView imageView, int width, int height, boolean isCache, boolean canQueryHttp) {
//L1 内存
Bitmap bitmap = getFromMemoryCache(url);

if (bitmap != null) {
imageView.setImageBitmap(bitmap);
return;
}

loadEmpty(imageView);

//L2 磁盘
String cachedUrl = ZString.getFileCachedDir(url, mApp.getFilePath());

if (ZIO.isExist(cachedUrl)) {
bitmap = Utils.getScaledBitMap(cachedUrl, width, height);

if (bitmap != null) {
imageView.setImageBitmap(bitmap);

if (isCache)
putToMemoryCache(url, bitmap);

return;
}
}
//L3 网络
if (canQueryHttp) {

if (imageRequestList.containsKey(url)) {
ImageView oldImageView = imageRequestList.remove(url);
oldImageView.setTag("");
imageView.setTag(url);
imageRequestList.put(url, imageView);
return;
}

imageView.setTag(url);
imageRequestList.put(url, imageView);
new ImageLoadTask().execute(new ImageEntity(url, imageView, width, height, isCache));
} else
loadEmpty(imageView);
}

public void saveToCache(String url) {
saveToCache(url, screenSize.x, screenSize.y);
}

public void saveToCache(String url, int width, int height) {
String cachedUrl = ZString.getFileCachedDir(url, mApp.getFilePath());

if (ZIO.isExist(cachedUrl) == false)
new ImageSaveCacheTask().execute(new ImageCachedEntity(url, cachedUrl, width, height));
}

public void saveToCache(Bitmap bitmap, String url) {
String cachedUrl = ZString.getFileCachedDir(url, mApp.getFilePath());
saveBitmapToCache(bitmap, cachedUrl);
}

private void saveBitmapToCache(Bitmap bitmap, String cachedUrl) {
ZIO.createFile(cachedUrl);
FileOutputStream fos = null;
try {
fos = new FileOutputStream(cachedUrl);
Bitmap.CompressFormat format = cachedUrl.toLowerCase().indexOf("jpeg") > 0 ? Bitmap.CompressFormat.JPEG : Bitmap.CompressFormat.PNG;

if (fos != null && bitmap != null && bitmap.getByteCount() > 0) {
bitmap.compress(format, 100, fos);
fos.flush();
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
fos.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}

Bitmap getFromMemoryCache(String url) {
return mMemoryCache.get(url);
}

void putToMemoryCache(String url, Bitmap bitmap) {
if (bitmap != null && bitmap.getByteCount() < MAX_CACHED_IMAGE_SIZE)
mMemoryCache.put(url, bitmap);
}

class ImageCachedEntity {
String url;
String cachedUrl;
int width;
int height;

public ImageCachedEntity(String url, String cachedUrl, int width, int height) {
this.url = url;
this.cachedUrl = cachedUrl;
this.width = width;
this.height = height;
}
}

class ImageEntity {
String url;
ImageView imageView;
int width;
int height;
boolean isCache;

public ImageEntity(String url, ImageView imageView, int width, int height, boolean isCache) {
this.url = url;
this.imageView = imageView;
this.width = width;
this.height = height;
this.isCache = isCache;
}
}

class ImageSaveCacheTask extends AsyncTask<ImageCachedEntity, Void, Bitmap> {
ImageCachedEntity entity;

@Override
protected Bitmap doInBackground(ImageCachedEntity... imageEntities) {
entity = imageEntities[0];
return ZHttp.getBitmap(entity.url, entity.width, entity.height);
}

@Override
protected void onPostExecute(Bitmap bitmap) {
saveBitmapToCache(bitmap, entity.cachedUrl);
}
}

class ImageLoadTask extends AsyncTask<ImageEntity, Void, Bitmap> {
String url;
boolean isCache = false;

@Override
protected Bitmap doInBackground(ImageEntity... imageEntities) {
ImageEntity imageEntity = imageEntities[0];
url = imageEntity.url;
isCache = imageEntity.isCache;
return ZHttp.getBitmap(imageEntity.url, imageEntity.width, imageEntity.height);
}

@Override
protected void onPostExecute(Bitmap bitmap) {
ImageView imageView = imageRequestList.remove(url);
String originalUrl = (String) imageView.getTag();

if (originalUrl != null && originalUrl.equals(url))
imageView.setImageBitmap(bitmap);

if (isCache) {
saveToCache(bitmap, url);

if (getFromMemoryCache(url) == null)
putToMemoryCache(url, bitmap);
}
}
}
}