当在Android中滚动ListView时，图像会重新加载。

Question

我在尝试编写一个新闻列表应用程序。我已经从服务器解析了JSON数据并创建了CustomListAdapter。在我的ListView中有三个TextView和ImageView。它工作得很好，图像被加载并设置到ImageView中。当滚动ListView时，图像会从服务器重新加载。这是我的片段代码：

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.news_fragment, container, false);
    this.drawerPosition = getArguments().getInt(ARG_PLANET_NUMBER);
    lv = (ListView) rootView.findViewById(R.id.listView);
    View v = inflater.inflate(R.layout.list_footer, null);
    lv.addFooterView(v);
    isLoading = true;
    Http.getLists(aContext, this.drawerPosition, pageNumber, resultHandler);
    lv.setOnScrollListener(new AbsListView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(AbsListView absListView, int i) {
        }

        @Override
        public void onScroll(AbsListView absListView, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
            int l = visibleItemCount + firstVisibleItem;
            if (l >= totalItemCount && !isLoading) {
                // It is time to add new data. We call the listener
                isLoading = true;
                Http.getLists(aContext, drawerPosition, pageNumber, appendHandler);
            }
        }
    });
    return rootView;
}

public void setListview() {
    listAdapter = new ListViewCustomAdapter(aContext, arrayList);
    lv.setAdapter(listAdapter);
}

AsyncHttpResponseHandler resultHandler = new AsyncHttpResponseHandler() {
    @Override
    public void onSuccess(int statusCode, Header[] headers, byte[] responseBody) {
        if (statusCode != 200)
            return;
        try {
            JSONObject json = new JSONObject(new String(responseBody));
            Log.d("JSON Result: ", json.toString());
            String result = json.getString("status");
            if (result.equalsIgnoreCase("complete")) {
                String pagenum = json.getString("pagenum");
                JSONArray items = json.getJSONArray("items");
                ArrayList<NewsList> s = new ArrayList<NewsList>();
                for (int i = 0; i < items.length(); i++) {
                    s.add(new NewsList(
                            Integer.parseInt(items.getJSONObject(i).getString("ID")),
                            items.getJSONObject(i).getString("post_date"),
                            items.getJSONObject(i).getString("category"),
                            items.getJSONObject(i).getString("post_title"),
                            items.getJSONObject(i).getString("image")
                    ));
                }
                arrayList = s;
                isLoading = false;
                pageNumber = Integer.valueOf(pagenum) + 1;
                setListview();
            }
        } catch (JSONException e) {
            e.printStackTrace();
        }
    }

    @Override
    public void onFailure(int statusCode, Header[] headers, byte[] responseBody, Throwable error) {
        String answ = error.getLocalizedMessage();
        Log.d("API", answ);
    }
};

这是我的自定义 ListView 适配器：

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    ViewHolder holder;

    if (convertView == null) {
        convertView = inflater.inflate(R.layout.row, null);

        holder = new ViewHolder();
        holder.nTitle = (TextView) convertView.findViewById(R.id.listTitle);
        holder.nDate = (TextView) convertView.findViewById(R.id.listDate);
        holder.nCategory = (TextView) convertView.findViewById(R.id.listCategory);
        holder.nImage = (ImageView) convertView.findViewById(R.id.listImage);
        convertView.setTag(holder);
    } else
        holder = (ViewHolder) convertView.getTag();


    if (newsList.get(position) != null) {
        holder.imageUrl = newsList.get(position).image;
        holder.nTitle.setText(newsList.get(position).title);
        holder.nCategory.setText(newsList.get(position).category);
        holder.nDate.setText(Base.getInstance(context).getDateString(newsList.get(position).date));
        if (holder.imageUrl != null && !holder.imageUrl.equals("null")) {
            String thumbUrl = holder.imageUrl.substring(0, holder.imageUrl.lastIndexOf('.')) + "-260x145" + holder.imageUrl.substring(holder.imageUrl.lastIndexOf('.'), holder.imageUrl.length());
            imageView = holder.nImage;
            setImage(thumbUrl);
        }
    }

    return convertView;
}

private static class ViewHolder {
    TextView nTitle;
    TextView nDate;
    TextView nCategory;
    ImageView nImage;
    String imageUrl;
}

public void setImage(String imageUrl) {
    AsyncHttpClient client = new AsyncHttpClient();
    client.get(imageUrl, null, fileHandler);
}

FileAsyncHttpResponseHandler fileHandler = new FileAsyncHttpResponseHandler(context) {
    @Override
    public void onFailure(int statusCode, Header[] headers, Throwable throwable,
                          File response) {
    }

    @Override
    public void onSuccess(int statusCode, Header[] headers, File response) {
        imageView.setImageBitmap(BitmapFactory.decodeFile(response.getPath()));
    }
};

- iProgrammer

---

那问题是什么？ - Gordak

你没有有效地使用视图持有者模式。每次ListView滚动时，都会创建新的ViewHolder对象，其中你的图像数据将不存在。这就是为什么在每次ListView滚动时图像会重新加载。请查看http://www.javacodegeeks.com/2013/09/android-viewholder-pattern-example.html教程。 - Dhaval Patel

Dhaval Patel，我阅读了这篇教程并更新了代码，但没有起到帮助作用。每次滚动时图像都会重新加载。 - iProgrammer

@iProgrammer 请更新您的代码，以便我们可以查看您的新代码。 - Dhaval Patel

我已经更新了新代码，请查看... - iProgrammer

Answer 1

尝试以下代码，它可能有助于解决您的问题。

public class ListViewCustomAdapter extends..{

   //Map to cache Image Bitmap. Key= imageUrl,value =Image Bitmap
   private Map<String, Bitmap> mBitmapCache = new HashMap<String, Bitmap>();    

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

      if (convertView == null) {
          convertView = inflater.inflate(R.layout.row, null);
          holder = new ViewHolder();
          holder.nTitle = (TextView) convertView.findViewById(R.id.listTitle);
          holder.nDate = (TextView) convertView.findViewById(R.id.listDate);
          holder.nCategory = (TextView) convertView.findViewById(R.id.listCategory);
          holder.nImage = (ImageView) convertView.findViewById(R.id.listImage);
          convertView.setTag(holder);
      } else {
          holder = (ViewHolder) convertView.getTag();
      } 

      if (newsList.get(position) != null) {
          holder.imageUrl = newsList.get(position).image;
          holder.nTitle.setText(newsList.get(position).title);
          holder.nCategory.setText(newsList.get(position).category);
          holder.nDate.setText(Base.getInstance(context).getDateString(newsList.get(position).date));
          if (holder.imageUrl != null && !holder.imageUrl.equals("null")) {
               String thumbUrl = holder.imageUrl.substring(0, holder.imageUrl.lastIndexOf('.')) + "-260x145" + holder.imageUrl.substring(holder.imageUrl.lastIndexOf('.'), holder.imageUrl.length());
               holder.setImage(thumbUrl);
          }
      }
      return convertView;
   }

   private static class ViewHolder {
        TextView nTitle;
        TextView nDate;
        TextView nCategory;
        ImageView nImage;
        String imageUrl;

        public void setImage(String imageUrl) {
           this.imageUrl = imageUrl;
           Bitmap imageBitmap = mBitmapCache.get(imageUrl);
           if(imageBitmap!=null){
               nImage.setImageBitmap(imageBitmap);
           } else {
               AsyncHttpClient client = new AsyncHttpClient();
               client.get(imageUrl, null, fileHandler);
           }
        }

        FileAsyncHttpResponseHandler fileHandler = new FileAsyncHttpResponseHandler(context) {
             @Override
             public void onFailure(int statusCode, Header[] headers, Throwable throwable,
                      File response) {
             }

             @Override
             public void onSuccess(int statusCode, Header[] headers, File response) {
                   Bitmap imageBitmap = BitmapFactory.decodeFile(response.getPath());
                   imageView.setImageBitmap(imageBitmap);
                   mBitmapCache.put(imageUrl, imageBitmap);         
             }
        };
    }
}

- Dhaval Patel

---

非常感谢。这真的帮了我很多。您写的是错误的imageBitmap.put(imageUrl, imageBitmap)。它必须是mBitmapCache.put(imageUrl, imageBitmap); - iProgrammer

Answer 2

您的代码在

public void setImage() {
    if (imageUrl != null && !imageUrl.equals("null") && !imageUrl.equals("")) {
        AsyncHttpClient client = new AsyncHttpClient();
        client.get(imageUrl, null, fileHandler);
    }
}

看起来可疑：任何有效的URL都会强制重新加载，因为它符合所有三个条件

    imageUrl != null && !imageUrl.equals("null") && !imageUrl.equals("")

例子： http://www.google.com/logo.png 不为 null，也不等于字符串 "null" 或字符串 ""，所以 if 语句总是为 true 并创建 AsyncLoader。 顺便说一下，仅在代码的其他位置明确使用 "null" 时才检查它才有意义。最可能的情况是您只想检查 null 值，而不是 "null" 字符串。

- Sebastian