我有一个列表适配器，其中的图像加载一个旋转的进程动画，直到他们是从网上取回。当我在ListView中向下滚动时，动画似乎会旋转上一个图像…这是一个非常奇怪且不受欢迎的效果。唯一应该旋转的是进程动画。
我使用名为imageloader的类异步netfetch图像：
final int stub_id=R.drawable.progress;
public void DisplayImage(String url, Activity activity, ImageView imageView,int size)
{
//Log.d("ImageLoader" , url);
this.size=size;
if(cache.containsKey(url)) {
//If this works, then why do the OLD images still spin??
imageView.clearAnimation();
//imageView.setBackgroundDrawable(null);
//imageView.setImageDrawable(null);
imageView.setImageBitmap(cache.get(url));
}
else
{
rotation = AnimationUtils.loadAnimation(activity, R.drawable.progress);
rotation.setRepeatCount(Animation.INFINITE);
imageView.startAnimation(rotation);
queuePhoto(url, activity, imageView);
//imageView.setImageResource(stub_id);
//imageView.setBackgroundResource(stub_id);
}
Resources r = activity.getResources();
int dip = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, size, r.getDisplayMetrics());
LayoutParams layoutParams = imageView.getLayoutParams();
layoutParams.height = dip;
layoutParams.width = dip;
imageView.setLayoutParams(layoutParams);
}
现在你可能会问，queuephoto是做什么的？这是唯一一个动画开始的地方。
//Used to display bitmap in the UI thread
class BitmapDisplayer implements Runnable
{
Bitmap bitmap;
ImageView imageView;
public BitmapDisplayer(Bitmap b, ImageView i){bitmap=b;imageView=i;}
public void run()
{
if(bitmap!=null) {
imageView.clearAnimation();
imageView.setImageBitmap(bitmap);
}
else {
imageView.clearAnimation();
rotation = AnimationUtils.loadAnimation(context, R.drawable.progress);
rotation.setRepeatCount(Animation.INFINITE);
imageView.startAnimation(rotation);
//imageView.setImageResource(stub_id);
}
}
}
现在是列表适配器getview的一部分：
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if( convertView == null ){
vi = inflater.inflate(R.layout.trending_item, null);
holder=new ViewHolder();
holder.img1 = (ImageView) vi.findViewById(R.id.t_item_1);
holder.img2 = (ImageView) vi.findViewById(R.id.t_item_2);
holder.img3 = (ImageView) vi.findViewById(R.id.t_item_3);
vi.setTag(holder);
} else {
holder=(ViewHolder)vi.getTag();
}
JSONObject t1= ts.get(1);
if(t1 !=null) {
holder.img1.setTag(t1.getString("image_small"));
imageLoader.DisplayImage(t1.getString("image_small"), act, holder.img1,IMAGE_SIZE);
holder.img1.setTag(TAG_T t1.getString("id"));
holder.img1.setOnClickListener(ocl);
} else {
holder.img1.setImageDrawable(null);
holder.img1.setBackgroundDrawable(null);
holder.img1.setTag(null);
holder.img1.setTag(TAG_T, null);
}
更新
我实现了jbm提出的解决方案，但我无法让它工作，他建议在ui线程上运行。
public class RemoteImageView extends ImageView implements RemoteLoadListener {
final int stub_id=R.drawable.progress;
int size;
private HashMap<String, Bitmap> cache=new HashMap<String, Bitmap>();
Animation rotation;
private File cacheDir;
public RemoteImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public RemoteImageView(Context context, AttributeSet attrs) {
super(context, attrs);
//Make the background thead low priority. This way it will not affect the UI performance
photoLoaderThread.setPriority(Thread.NORM_PRIORITY-1);
//Find the dir to save cached images
if (android.os.Environment.getExternalStorageState().equals(android.os.Environment.MEDIA_MOUNTED))
cacheDir=new File(android.os.Environment.getExternalStorageDirectory(),context.getString(R.string.app_name));
else
cacheDir=context.getCacheDir();
if(!cacheDir.exists())
cacheDir.mkdirs();
}
public RemoteImageView(Context context) {
super(context);
}
public void displayRemoteImage(String url, Activity activity, int size)
{
this.myUrl = url;
this.size=size;
Resources r = activity.getResources();
int dip = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, size, r.getDisplayMetrics());
LayoutParams layoutParams = this.getLayoutParams();
layoutParams.height = dip;
layoutParams.width = dip;
this.setLayoutParams(layoutParams);
if(cache.containsKey(url)) {
this.clearAnimation();
setImageBitmap(cache.get(url));
}
else
{
rotation = AnimationUtils.loadAnimation(activity, R.drawable.progress);
rotation.setRepeatCount(Animation.INFINITE);
this.startAnimation(rotation);
queuePhoto(url, activity, this);
}
}
@Override
public void onLoadSuccess(String url, Bitmap bmp) {
if (url.equals(myUrl)) {
setImageBitmap(bmp);
} else {
/* the arrived bitmap is stale. do nothing. */
}
}
@Override
public void onLoadFail(String url) {
if (url.equals(myUrl)) {
setImageBitmap(((BitmapDrawable)getResources().getDrawable(stub_id)).getBitmap());
} else {
/* the failed bitmap is stale. do nothing. */
}
}
String myUrl;
private void queuePhoto(String url, Activity activity, ImageView imageView)
{
//This ImageView may be used for other images before. So there may be some old tasks in the queue. We need to discard them.
photosQueue.Clean(imageView);
PhotoToLoad p=new PhotoToLoad(url, imageView);
synchronized(photosQueue.photosToLoad){
photosQueue.photosToLoad.push(p);
photosQueue.photosToLoad.notifyAll();
}
//start thread if it's not started yet
if(photoLoaderThread.getState()==Thread.State.NEW)
photoLoaderThread.start();
}
PhotosQueue photosQueue=new PhotosQueue();
public void stopThread()
{
photoLoaderThread.interrupt();
}
//stores list of photos to download
class PhotosQueue
{
private Stack<PhotoToLoad> photosToLoad=new Stack<PhotoToLoad>();
//removes all instances of this ImageView
public void Clean(ImageView image)
{
for(int j=0 ;j<photosToLoad.size();){
if(photosToLoad.get(j).imageView==image)
photosToLoad.remove(j);
else
++j;
}
}
}
//Task for the queue
private class PhotoToLoad
{
public String url;
public ImageView imageView;
public PhotoToLoad(String u, ImageView i){
url=u;
imageView=i;
}
}
class PhotosLoader extends Thread {
public void run() {
try {
while(true)
{
//thread waits until there are any images to load in the queue
if(photosQueue.photosToLoad.size()==0)
synchronized(photosQueue.photosToLoad){
photosQueue.photosToLoad.wait();
}
if(photosQueue.photosToLoad.size()!=0)
{
PhotoToLoad photoToLoad;
synchronized(photosQueue.photosToLoad){
photoToLoad=photosQueue.photosToLoad.pop();
}
Bitmap bmp=getBitmap(photoToLoad.url);
cache.put(photoToLoad.url, bmp);
Object tag=photoToLoad.imageView.getTag();
if(tag!=null && ((String)tag).equals(photoToLoad.url)){
BitmapDisplayer bd=new BitmapDisplayer(bmp, photoToLoad.imageView);
Activity a=(Activity)photoToLoad.imageView.getContext();
a.runOnUiThread(bd);
}
}
if(Thread.interrupted())
break;
}
} catch (InterruptedException e) {
//allow thread to exit
}
}
}
PhotosLoader photoLoaderThread=new PhotosLoader();
//Used to display bitmap in the UI thread
class BitmapDisplayer implements Runnable
{
Bitmap bitmap;
ImageView imageView;
public BitmapDisplayer(Bitmap b, ImageView i){bitmap=b;imageView=i;}
public void run()
{
if(bitmap!=null) {
imageView.clearAnimation();
imageView.setImageBitmap(bitmap);
}
else {
imageView.clearAnimation();
imageView.setImageResource(stub_id);
}
}
}
private Bitmap getBitmap(String url)
{
System.out.println("GET: " +url);
if(url== null) {
return null;
}
//I identify images by hashcode. Not a perfect solution, good for the demo.
String filename=String.valueOf(url.hashCode());
File f=new File(cacheDir, filename);
//from SD cache
Bitmap b = decodeFile(f);
if(b!=null)
return b;
//from web
try {
Bitmap bitmap=null;
InputStream is=new URL(url).openStream();
OutputStream os = new FileOutputStream(f);
Utils.CopyStream(is, os);
os.close();
bitmap = decodeFile(f);
return bitmap;
} catch (Exception ex){
ex.printStackTrace();
return null;
}
}
//decodes image and scales it to reduce memory consumption
private Bitmap decodeFile(File f){
try {
//decode image size
BitmapFactory.Options o = new BitmapFactory.Options();
o.inJustDecodeBounds = true;
BitmapFactory.decodeStream(new FileInputStream(f),null,o);
//Find the correct scale value. It should be the power of 2.
int width_tmp=o.outWidth, height_tmp=o.outHeight;
int scale=1;
while(true){
if(width_tmp/2<size || height_tmp/2<size)
break;
width_tmp/=2;
height_tmp/=2;
scale*=2;
}
//decode with inSampleSize
BitmapFactory.Options o2 = new BitmapFactory.Options();
o2.inSampleSize=scale;
return BitmapFactory.decodeStream(new FileInputStream(f), null, o2);
} catch (FileNotFoundException e) {
Log.d("ImageLoader",e.getMessage(),e);
}
return null;
}
}
最佳答案
这里的问题是ImageView和DisplayImage函数之间的竞争。当列表向上或向下滚动时，行将被重用，因此当远程图像到达时，常常会发生其目标视图已属于另一行的情况。唯一可靠的方法是创建自己的类RemoteImageView extends ImageView，该类处理内部获取图像。然后remoteimageview可以执行正确的同步。
让queuePhoto方法采用RemoteLoadListener而不是imageview，如下所示：
public interface RemoteLoadListener {
void onLoadFail(String url);
void onLoadSuccess(String url, Bitmap bmp);
}
然后让你的
RemoteImageViewaRemoteLoadListener内部完成所有工作：public class RemoteImageView extends ImageView implements RemoteLoadListener {
final int static stub_id=R.drawable.progress;
public void displayImage(String url, Activity activity, int size)
{
myUrl = url;
if(cache.containsKey(url)) {
...
setImageBitmap(cache.get(url));
}
else
{
...
imageView.startAnimation(rotation);
queuePhoto(url, activity, this);
}
}
@Override
public void onLoadSuccess(String url, Bitmap bmp) {
if (url.equals(myUrl)) {
setImageBitmap(bmp);
} else {
/* the arrived bitmap is stale. do nothing. */
}
}
@Override
public void onLoadFail(String url) {
if (url.equals(myUrl)) {
setImageBitmap(placeholder);
} else {
/* the failed bitmap is stale. do nothing. */
}
}
}
因此，在
getView方法中，您只需执行以下操作：holder.img1.displayImage(t1.getString("image_small"), act, IMAGE_SIZE);
更新
首先尝试降低系统的复杂性。我已经删除了您的照片队列和缓存，并将其替换为从Web下载图像（这篇文章基于您的代码）。我没有运行这个代码，我只是键入它。但它应该给你一个清晰的概念。
public class RemoteImageView extends ImageView implements RemoteLoadListener {
public RemoteImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public RemoteImageView(Context context) {
super(context);
}
public void displayRemoteImage(String url, Activity activity, int size)
{
this.myUrl = url;
this.size=size;
Resources r = activity.getResources();
int dip = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, size, r.getDisplayMetrics());
LayoutParams layoutParams = this.getLayoutParams();
layoutParams.height = dip;
layoutParams.width = dip;
this.setLayoutParams(layoutParams);
{
rotation = AnimationUtils.loadAnimation(activity, R.drawable.progress);
rotation.setRepeatCount(Animation.INFINITE);
this.startAnimation(rotation);
queuePhoto(url, activity, this);
}
}
@Override
public void onLoadSuccess(String url, Bitmap bmp) {
if (url.equals(myUrl)) {
setImageBitmap(bmp);
} else {
/* the arrived bitmap is stale. do nothing. */
}
}
@Override
public void onLoadFail(String url) {
if (url.equals(myUrl)) {
setImageBitmap(((BitmapDrawable)getResources().getDrawable(stub_id)).getBitmap());
} else {
/* the failed bitmap is stale. do nothing. */
}
}
String myUrl;
private void queuePhoto(final String url, final RemoteLoadListener listener)
{
new AsyncTask<Void, Void, Bitmap>() {
@Override
protected Bitmap doInBackground(Void... params) {
//from web
Bitmap bitmap = null;
InputStream is = null;
OutputStream os = null;
try {
is = new URL(url).openStream();
os = new FileOutputStream(f);
Utils.CopyStream(is, os);
bitmap = decodeFile(f);
} catch (Exception ex){
bitmap = null;
} finally {
if (is != null) try { is.close(); } catch (IOException e) { /* ignore */ };
if (os != null) try { os.close(); } catch (IOException e) { /* ignore */ };
}
return bitmap;
}
@Override
protected void onPostExecute(Bitmap result) {
if (result != null) {
listener.onLoadSuccess(url, result);
} else {
listener.onLoadFail(url);
}
};
}.execute();
}
}
注：使用流时请注意
try - finally块。