图像在 ListView 中重复

Question

我已经实现了应该从服务器下载图像并在 ListView 中显示它们的 android 应用程序，但是在图像下载时会发生非常有趣的事情

正如您在视频中看到的，尚未下载的图片由已下载的图片表示。这怎么可能发生？我已经考虑了差不多两天了。

http://www.youtube.com/watch?v=lxY-HAuJO0o&feature=youtu.be

这是我的 ListView 适配器代码。

public class MoviesAdapter extends ArrayAdapter<ParkCinema> {
        private ArrayList<ParkCinema> movieDataItems;   
        private Activity context;

        public MoviesAdapter(Activity context, int textViewResourceId, ArrayList<ParkCinema> movieDataItems) {
            super(context, textViewResourceId, movieDataItems);
            this.context = context;
            this.movieDataItems = movieDataItems;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) { 
            if (convertView == null) {
                LayoutInflater vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = vi.inflate(R.layout.movie_data_row, null);
                }

            ParkCinema movie = movieDataItems.get(position);

            if (movie!=null){
                        ImageView imageView = (ImageView) convertView.findViewById(R.id.movie_thumb_icon);
                        String url = movie.poster();

                         if (url!=null) {
                            Bitmap bitmap = fetchBitmapFromCache(url);
                            if (bitmap==null) { 
                                new BitmapDownloaderTask(imageView).execute(url);
                            }
                            else {
                                imageView.setImageBitmap(bitmap);
                            } 
                        } 
            }
            return convertView;
        }

        private LinkedHashMap<String, Bitmap> bitmapCache = new LinkedHashMap<String, Bitmap>();

        private void addBitmapToCache(String url, Bitmap bitmap) {
            if (bitmap != null) {
                synchronized (bitmapCache) {
                    bitmapCache.put(url, bitmap);
                }
            }
        }

        private Bitmap fetchBitmapFromCache(String url) {

            synchronized (bitmapCache) {
                final Bitmap bitmap = bitmapCache.get(url);
                 if (bitmap != null) {
                    return bitmap;
                } 
            }

            return null;

        }


    private class BitmapDownloaderTask extends AsyncTask<String, Void, Bitmap> {

            private String url;
            private final WeakReference<ImageView> imageViewReference;

            public BitmapDownloaderTask(ImageView imageView) {
                imageViewReference = new WeakReference<ImageView>(imageView);
            }

            @Override
            protected Bitmap doInBackground (String... source) {
                url = source[0];
                Bitmap image;
                try{
                    image = BitmapFactory.decodeStream(new URL(url).openConnection().getInputStream());
                    return image;
                    }
                catch(Exception e){Log.e("Error", e.getMessage()); e.printStackTrace();}
                return null;
                } 


            @Override
            protected void onPostExecute(Bitmap bitmap) {       
                addBitmapToCache(url, bitmap);
                imageViewReference.get().setImageBitmap(bitmap);               
            }
        }
    }

编辑 3：

public View getView(int position, View convertView, ViewGroup parent) { 
    if (convertView == null) {
        LayoutInflater vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
        convertView = vi.inflate(R.layout.movie_data_row, null);
        }
    ParkCinema movie = movieDataItems.get(position);
    ImageView imageView = (ImageView) convertView.findViewById(R.id.movie_thumb_icon);
    if (movie!=null){
                String url = movie.poster();

                    if (url != null) {
                        Bitmap bitmap = fetchBitmapFromCache(url);
                        if (bitmap == null) {
                            imageView.setImageResource(R.drawable.no_image);
                            new BitmapDownloaderTask(imageView).execute(url);
                        }
                        else {
                            imageView.setImageBitmap(bitmap);
                        }
                    }
                    else {
                        imageView.setImageResource(R.drawable.no_image);
                    }
                }
                else {
                    imageView.setImageResource(R.drawable.no_image);
                } 

    return convertView;

}

Answer 1

啊哈！我想我可能知道这个问题。现在，您的 getView 方法将您的 ImageView 设置为：

1. 获取电影对象的位置
2. 拉出电影的缩略图网址
3. 使用该 url，它会尝试在缓存中查找图像
4. 如果找到图像，则设置它
5. 如果找不到图像，它会启动一个异步网络请求去获取它，并在下载后设置它。

您的问题出现是因为ListView 重用了其行的Views。当第一个 View 滚动到屏幕外而不是膨胀一个新的时，ListView 将现在屏幕外行的 View 传递为 convertView 供您重复使用（这是为了提高效率）。

当您的getView 获得一个正在重复使用的convertView 时，它的ImageView 已经从之前拥有它的行中设置，因此您可以从屏幕外行的View 中看到旧图像。使用您当前的getView 进程，您检查新行的图像，但它在缓存中找不到它，它开始请求下载它。在下载过程中，您会看到旧图像，直到获得新图像。

要解决此问题，您需要确保立即设置行的View 中的每个字段，以确保您没有任何Views 显示陈旧数据。我建议您在等待网络下载获取图像时将ImageView 设置为默认的drawable 资源（您已在R.layout.movie_data_row 中设置）。

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    if (convertView == null) {
        LayoutInflater vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = vi.inflate(R.layout.movie_data_row, null);
    }

    ParkCinema movie = movieDataItems.get(position);
    ImageView imageView = (ImageView) convertView.findViewById(R.id.movie_thumb_icon);
    if (movie != null) {
        String url = movie.poster();

        if (url != null) {
            Bitmap bitmap = fetchBitmapFromCache(url);
            if (bitmap == null) {
                // Set the movie thumbnail to the default icon while we load
                // the real image
                imageView.setImageResource(R.drawable.movie_thumb_icon);
                new BitmapDownloaderTask(imageView).execute(url);
            }
            else {
                // Set the image to the bitmap we get from the cache
                imageView.setImageBitmap(bitmap);
            }
        }
        else {
            // Set the movie thumbnail to the default icon, since it doesn't
            // have a thumbnail URL
            imageView.setImageResource(R.drawable.movie_thumb_icon);
        }
    }
    else {
        // Set the movie thumbnail to the default icon, since there's no
        // movie data for this row
        imageView.setImageResource(R.drawable.movie_thumb_icon);
    }

-编辑-

使用您的drawable 更新为更加强大。您的BitmapDownloaderTask 也有问题，它不处理错误/空值。也尝试添加它。

@Override
protected void onPostExecute(Bitmap bitmap) { 
    addBitmapToCache(url, bitmap);
    if (bitmap == null) {
        // Set the movie thumbnail to the default icon, since an error occurred while downloading
        imageViewReference.get().setImageResource(R.drawable.movie_thumb_icon);
    }
    else {
        imageViewReference.get().setImageBitmap(bitmap);
    }            
}

Answer 2

我遇到了这个问题并实现了 lruCache ...我相信您需要 api 12 及更高版本或使用兼容性 v4 库。 lurCache 是快速内存，但它也有预算，所以如果您担心可以使用磁盘缓存...这里都描述了 http://developer.android.com/training/displaying-bitmaps/cache-bitmap.html

我现在将提供我的实现，它是我从任何地方调用的单例，如下所示：

//第一个是字符串，另一个是要加载的图像视图

DownloadImageTask.getInstance().loadBitmap(avatarURL, iv_avatar); 

这是理想的缓存代码，然后在检索网络图像时在适配器的 getView 中调用上述代码：

 public class DownloadImageTask {

private LruCache<String, Bitmap> mMemoryCache;

/* create a singleton class to call this from multiple classes */

private static DownloadImageTask instance = null;

public static DownloadImageTask getInstance() {
    if (instance == null) {
        instance = new DownloadImageTask();
    }
    return instance;
}

//lock the constructor from public instances
private DownloadImageTask() {

    // Get max available VM memory, exceeding this amount will throw an
    // OutOfMemory exception. Stored in kilobytes as LruCache takes an
    // int in its constructor.
    final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024);

    // Use 1/8th of the available memory for this memory cache.
    final int cacheSize = maxMemory / 8;

    mMemoryCache = new LruCache<String, Bitmap>(cacheSize) {
        @Override
        protected int sizeOf(String key, Bitmap bitmap) {
            // The cache size will be measured in kilobytes rather than
            // number of items.
            return bitmap.getByteCount() / 1024;
        }
    };

}

public void loadBitmap(String avatarURL, ImageView imageView) {
    final String imageKey = String.valueOf(avatarURL);

    final Bitmap bitmap = getBitmapFromMemCache(imageKey);
    if (bitmap != null) {
        imageView.setImageBitmap(bitmap);
    } else {
        imageView.setImageResource(R.drawable.ic_launcher);

        new DownloadImageTaskViaWeb(imageView).execute(avatarURL);
    }
}

private void addBitmapToMemoryCache(String key, Bitmap bitmap) {
    if (getBitmapFromMemCache(key) == null) {
        mMemoryCache.put(key, bitmap);
    }
}

private Bitmap getBitmapFromMemCache(String key) {
    return mMemoryCache.get(key);
}

/* a background process that opens a http stream and decodes a web image. */

class DownloadImageTaskViaWeb extends AsyncTask<String, Void, Bitmap> {
    ImageView bmImage;

    public DownloadImageTaskViaWeb(ImageView bmImage) {
        this.bmImage = bmImage;
    }

    protected Bitmap doInBackground(String... urls) {

        String urldisplay = urls[0];
        Bitmap mIcon = null;
        try {
            InputStream in = new java.net.URL(urldisplay).openStream();
            mIcon = BitmapFactory.decodeStream(in);

        } catch (Exception e) {
            Log.e("Error", e.getMessage());
            e.printStackTrace();
        }

        addBitmapToMemoryCache(String.valueOf(urldisplay), mIcon);

        return mIcon;
    }

    /* after decoding we update the view on the mainUI */
    protected void onPostExecute(Bitmap result) {
        bmImage.setImageBitmap(result);

    }

}

}

Answer 3

视图被重用以提高适配器的性能。您应该使用另一种方法。 你必须有一个重用你的观点的班级持有者。在您的情况下，您的课程应该是这样的：

   public class MoviesAdapter extends ArrayAdapter<ParkCinema> {
    private ArrayList<ParkCinema> movieDataItems;   
    private Activity context;

    public MoviesAdapter(Activity context, int textViewResourceId,       ArrayList<ParkCinema> movieDataItems) {
        super(context, textViewResourceId, movieDataItems);
        this.context = context;
        this.movieDataItems = movieDataItems;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) { 
        if (convertView == null) {
            LayoutInflater vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = vi.inflate(R.layout.movie_data_row, null);

                holder = new ViewHolder();

                holder.imageView = (BarImageView) convertView.findViewById(R.id.movie_thumb_icon);
              } else {
                        holder = (ViewHolder) convertView.getTag();

                  }

        ParkCinema movie = movieDataItems.get(position);

        if (movie!=null){

                    String url = movie.poster();

                     if (url!=null) {
                        Bitmap bitmap = fetchBitmapFromCache(url);
                        if (bitmap==null) { 
                            new BitmapDownloaderTask(imageView).execute(url);
                        }
                        else {
                            imageView.setImageBitmap(bitmap);
                        } 
                    } 
        }
        return convertView;
    }

    private LinkedHashMap<String, Bitmap> bitmapCache = new LinkedHashMap<String, Bitmap>();

    private void addBitmapToCache(String url, Bitmap bitmap) {
        if (bitmap != null) {
            synchronized (bitmapCache) {
                bitmapCache.put(url, bitmap);
            }
        }
    }

    private Bitmap fetchBitmapFromCache(String url) {

        synchronized (bitmapCache) {
            final Bitmap bitmap = bitmapCache.get(url);
             if (bitmap != null) {
                return bitmap;
            } 
        }

        return null;


public static class ViewHolder {


        ImageView imageView; 


    }

    }

Answer 4

我也花了几个小时试图解决这个问题...感谢 Steven Byle 的解决方案... 当用户从列表中选择一个项目时，这是我对类似问题的解决方案：

adapter.setSelectedIndex(position);

然后在自定义适配器中：

public void setSelectedIndex(int ind)
{
    selectedIndex = ind;
    notifyDataSetChanged();
}

然后最后在适配器的getView方法中：

if(selectedIndex!= -1 && position == selectedIndex)
         {
             holder.tab.setBackgroundColor(Color.BLACK);
         }
         else{
             holder.tab.setBackgroundColor(Color.DKGRAY);
         }

因此，总而言之，请确保您分配默认值

Answer 5

在我的例子中，我使用 Picasso 库而不是 AsyncTask 来下载图像。 enter link description here

还要写 if else 条件，即如果 url 不可用则设置为 null 为 image

Answer 6

每次都创建一个新视图，而不是使用 convertview 对象。

View localView = ((LayoutInflater)parentscreen.getSystemService("layout_inflater")).inflate(R.layout.activity_list_row, null);

通过上述膨胀。