ListAdapter使命不可能吗?将ImageViews和Animations结合在一个?

时间:2011-07-18 16:39:20

标签: android android-layout android-listview android-animation android-imageview

我有一个列表适配器,其中图像加载旋转进度动画,直到它们从网络中获取。当我在listView中向下滚动时,似乎动画旋转了前一个图像......这是一个 非常奇怪 和不良影响。唯一应该旋转的是进度动画。

我使用一个名为ImageLoader的类来异步地提取图像:

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;
}

}

2 个答案:

答案 0 :(得分:3)

此处的问题是ImageView与您的DisplayImage功能之间的竞争。当列表向上或向下滚动时,行会被重用,因此当远程图像到达时,经常发生其目标视图已经属于不同的行。唯一可行的方法是让你自己的类RemoteImageView extends ImageView处理内部提取图像。然后RemoteImageView可以进行适当的同步。

让您的queuePhoto方法采用RemoteLoadListener代替ImageView,如下所示:

public interface RemoteLoadListener {
    void onLoadFail(String url);
    void onLoadSuccess(String url, Bitmap bmp);
}

然后让你的RemoteImageView成为RemoteLoadListener并在内部完成所有内容:

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);

更新

首先尝试降低系统的复杂性。我已经删除了您的照片队列和缓存,并将其替换为从网上下载图像(此部分基于您的代码)。我没有运行此代码,我只是键入它。但它应该给你一个明确的想法。

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();
    }
}

PS:在使用流时注意try - finally块。

答案 1 :(得分:0)

我遇到了同样的问题。我花了一天多的时间,最后我发现了一个简单的解决方案。 我只是在类扩展BaseAdapter上的getView()函数中删除“if else”条件,如下所示......

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

    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);
    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);
        }