ListView在视图中一个接一个地加载图像

Question

这个简单的应用程序从用户那里获得一个标签，并在ListView中显示与该标签匹配的前10个闪烁图像。 我使用了这个简单的教程，我只是对其进行了修改，以便它可以与闪烁搜索一起使用，而不是硬编码的链接。 它可以工作，但是在某些视图中以某种方式将图像彼此加载。 因此用户可以看到视图中的图像发生了一段时间的变化。 如果用户滚动，它将再次重新加载它们。 如果是指针问题，我将无法解决。 我将静态ViewHolder更改为非静态类，但未进行任何更改。 为什么会发生，我该如何解决？

主班：

public class FlickerSearchMain extends AppCompatActivity implements AdapterView.OnItemClickListener, View.OnClickListener{
        private EditText tag;
        private Button send;
        private ListView listView;
        ArrayList<ListItem> listData;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_flicker_search_main);

            send = (Button) findViewById(R.id.send_button);
            send.setOnClickListener(this);  
            tag = (EditText) findViewById(R.id.tag_input);

            //ArrayList<ListItem> listData = getListData();
            listView = (ListView) findViewById(R.id.list);
            listView.setOnItemClickListener(this);


        }

        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

            int itemPosition = position;
            Toast.makeText(getApplicationContext(),
                    "Position :"+ itemPosition, Toast.LENGTH_SHORT)
                    .show();
        }


        @Override
        public void onClick(View v) {
            if(v == send){
                String input = tag.getText().toString();
                new FlickerRequest(this).execute(input);
            }
        }


        private class FlickerRequest extends AsyncTask<String, Void, ArrayList<ListItem>>{
            ArrayList<ListItem> elements_list;
            Context context;

            public FlickerRequest(Context context){
                this.context = context;
                this.elements_list = new ArrayList<ListItem>();

            }

            @Override
            protected ArrayList<ListItem> doInBackground(String... params) {
                String tag = params[0];

                int SIZE = 10;
                URL flicker;
                URLConnection urlcon;
                BufferedReader in = null;

                try {
                    flicker = new URL("https://api.flickr.com/services/feeds/photos_public.gne?tags="
                            + tag + "&format=json");
                    urlcon = flicker.openConnection();
                    in = new BufferedReader(new InputStreamReader(urlcon.getInputStream()));

                    String inputLine;
                    StringBuilder strbuilder = new StringBuilder();

                    in.skip(15);

                    while ((inputLine = in.readLine()) != null)
                        strbuilder.append(inputLine);

                    in.close();

                    JSONObject job = new JSONObject(strbuilder.toString());
                    JSONArray items = job.getJSONArray("items");

                    for(int i=0; i<SIZE; i++) {
                        JSONObject item = items.getJSONObject(i);
                        ListItem  newdata = new ListItem();
                        newdata.setHeadline(item.getString("title"));
                        newdata.setAuthor(item.getString("author"));
                        newdata.setDate(item.getString("date_taken"));
                        newdata.setUrl(item.getJSONObject("media").getString("m"));

                        elements_list.add(newdata);
                    }

                } catch (MalformedURLException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                } catch (JSONException e) {
                    e.printStackTrace();
                }

                return elements_list;
            }

            protected void onPostExecute(ArrayList<ListItem> result) {
                if(listData == null) {
                    listData = result;
                    listView.setAdapter(new FlickerAdapter(context, listData));
                }
                else{
                    listData = result;
                    ((BaseAdapter) listView.getAdapter()).notifyDataSetChanged();
                }

            }

        }
    }

适配器类别：

    public class FlickerAdapter extends BaseAdapter {
        private ArrayList<ListItem> listData;
        private LayoutInflater layoutInflater;

        public FlickerAdapter(Context context, ArrayList<ListItem> listData) {
            this.listData = listData;
            layoutInflater = LayoutInflater.from(context);
        }

        @Override
        public int getCount() {
            return listData.size();
        }

        @Override
        public Object getItem(int position) {
            return listData.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder holder;
            if (convertView == null) {
                convertView = layoutInflater.inflate(R.layout.list_row_layout, null);
                holder = new ViewHolder();
                holder.headlineView = (TextView) convertView.findViewById(R.id.title);
                holder.authorView = (TextView) convertView.findViewById(R.id.author);
                holder.dateView = (TextView) convertView.findViewById(R.id.date);
                holder.imageView = (ImageView) convertView.findViewById(R.id.image);
                convertView.setTag(holder);

            } else {
                holder = (ViewHolder) convertView.getTag();
            }

            ListItem newsItem = listData.get(position);
            holder.headlineView.setText(newsItem.getHeadline());
            holder.authorView.setText("By, " + newsItem.getAuthor());
            holder.dateView.setText(newsItem.getDate());

            if (holder.imageView != null) {
                new ImageDownloaderTask(holder.imageView).execute(newsItem.getUrl());
            }

            return convertView;
        }

        static class ViewHolder {
            TextView headlineView;
            TextView authorView;
            TextView dateView;
            ImageView imageView;
        }
    }

AsynTask ImageLoader类

    class ImageDownloaderTask extends AsyncTask<String, Void, Bitmap> {
        private final WeakReference<ImageView> imageViewReference;

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

        @Override
        protected Bitmap doInBackground(String... params) {
            return downloadBitmap(params[0]);
        }



        @Override
        protected void onPostExecute(Bitmap bitmap) {
            if (isCancelled()) {
                bitmap = null;
            }

            if (imageViewReference != null) {
                ImageView imageView = imageViewReference.get();
                if (imageView != null) {
                    if (bitmap != null) {
                        imageView.setImageBitmap(bitmap);
                    } else {
                        //Drawable placeholder = imageView.getContext().getResources().getDrawable(R.drawable.penguin);
                        //imageView.setImageDrawable(placeholder);
                    }
                }

            }
        }

        private Bitmap downloadBitmap(String url) {
            HttpURLConnection urlConnection = null;
            try {
                URL uri = new URL(url);
                urlConnection = (HttpURLConnection) uri.openConnection();

                int statusCode = urlConnection.getResponseCode();
                if (statusCode != HttpURLConnection.HTTP_OK) {
                    return null;
                }

                InputStream inputStream = urlConnection.getInputStream();
                if (inputStream != null) {
                    Bitmap bitmap = BitmapFactory.decodeStream(inputStream);
                    return bitmap;
                }
            } catch (Exception e) {
                urlConnection.disconnect();
                Log.w("ImageDownloader", "Error downloading image from " + url);
            } finally {
                if (urlConnection != null) {
                    urlConnection.disconnect();
                }
            }
            return null;
        }
    }

Answer 1

你必须确保被填充任务ImageView是，最当前任务ImageView ，因为任务可能无法完成，直到之后ImageView已被回收。

这是我所做的：

        if (holder.imageView != null) {
            Drawable placeholder = holder.imageView.getContext().getResources().getDrawable(R.drawable.penguin);
            holder.imageView.setImageDrawable(placeholder);

            ImageDownloaderTask task = new ImageDownloaderTask(holder.imageView);
            holder.imageView.setTag(R.id.tag_key, task);
            task.execute(newsItem.getUrl());
        }

...

    @Override
    protected void onPostExecute(Bitmap bitmap) {
        if (isCancelled()) {
            bitmap = null;
        }

        if (bitmap != null && imageViewReference != null) {
            ImageView imageView = imageViewReference.get();
            if (imageView != null && imageView.getTag(R.id.tag_key) == this) {
                imageView.setImageBitmap(bitmap);
                imageView.setTag(R.id.tag_key, null);
            }
        }
    }

在您的资源中：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="tag_key" type="id" />
</resources>