在ListView中加载ImageView中的图像，然后再显示在屏幕上

Question

我正在开发一个类似于9gag正在做的应用程序。https://play.google.com/store/apps/details?id=com.ninegag.android.app& hl = en

我已经实现了它的大部分，但当我运行应用程序，从互联网上加载的图像不加载在ImageView，直到它出现在屏幕上。我知道这就是ListView的回收工作方式，但它似乎并不顺利，因为我必须等待每个列表项每次在屏幕上显示时加载其图像。

你认为我可以做些什么来改善这个问题?

My CustomAdapter类:

public class CustomAdapter extends BaseAdapter implements ResultsListener{
Context context;
Holder holder;
int postItemsLength=0;
ArrayList<PostItem> postItems;
PlaceholderFragment activity;
private static LayoutInflater inflater=null;
public CustomAdapter(PlaceholderFragment activity, ArrayList<PostItem> postItems) {
    // TODO Auto-generated constructor stub
    this.activity=activity;
    this.context=activity.getContext();
    this.postItems = postItems;
    inflater = ( LayoutInflater )context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    Log.d("FOUND","entered constructor");

}
@Override
public int getCount() {
    // TODO Auto-generated method stub
    return postItems.size();
}
@Override
public Object getItem(int position) {
    // TODO Auto-generated method stub
    return position;
}
@Override
public long getItemId(int position) {
    // TODO Auto-generated method stub
    return position;
}
@Override
public void onResultsSucceeded(Bitmap image, int position) {
    holder.img.setImageBitmap(image);
    CustomAdapter.this.notifyDataSetChanged();
    holder.progressBar.setVisibility(View.GONE);
}
public class Holder
{
    TextView tv;
    TextView imgName;
    ImageView img;
    WebView wView;
    TextView likes;
    TextView comments;
    TextView op;
    ProgressBar progressBar;
    FrameLayout webViewLayout;
}

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
    final Holder holder;
    Log.d("FOUND","entered GetView");
    // Check if the item's view is recycled
    if(convertView == null)
    {
        Log.d("FOUND","convertView is not null");
        // The item's view doesn't exist
        // Create the item's view
        LayoutInflater inflater = ((Activity) context).getLayoutInflater();
        convertView = inflater.inflate(R.layout.list_item, parent, false);
        holder = new Holder(); // Create the holder
        holder.tv=(TextView) convertView.findViewById(R.id.titleTextView);
        holder.img=(ImageView) convertView.findViewById(R.id.imageView);
        holder.likes=(TextView) convertView.findViewById(R.id.likeNumTextView);
        holder.comments=(TextView) convertView.findViewById(R.id.commentNumTextView);
        holder.imgName = (TextView) convertView.findViewById(R.id.imageNameTextView);
        holder.op=(TextView) convertView.findViewById(R.id.opTextView);
        holder.webViewLayout = (FrameLayout) convertView.findViewById(R.id.webViewLayout);
        holder.progressBar = (ProgressBar) convertView.findViewById(R.id.progressBar);
        // Store the holder with the view.
        convertView.setTag(holder);
    }
    else
    {
        // The item's view already exist
        // Retrieve the older
        holder = (Holder) convertView.getTag();
        Log.d("FOUND","alreay exists");
    }
    holder.img.setImageResource(R.drawable.empty_img);
    holder.tv.setText(postItems.get(position).getTitle());
    holder.imgName.setText(postItems.get(position).getImageName());
    holder.op.setText(postItems.get(position).getUploader());
    holder.likes.setText(postItems.get(position).getLikeNum()+"");
    holder.comments.setText(postItems.get(position).getCommentNum()+"");
    LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(getDpWidth(), adjustHeight(postItems.get(position).getWidth(), postItems.get(position).getHeight()));
    holder.webViewLayout.setLayoutParams(lp);

    DownloadImageTask dTask = new DownloadImageTask(holder.img);
    dTask.setOnResultsListener(CustomAdapter.this);
    dTask.execute("http://torifi.net/images/" + postItems.get(position).getImageName());
    Log.d("FOUND","entered");
    //holder.likes.setText(likeNum.get(position));
     //    holder.comments.setText(commentNum.get(position));
    /*
    convertView.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            // TODO impl
        }
    });
*/
    return convertView;
}
public int getDpWidth()
{
    DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
    return Math.round(displayMetrics.widthPixels);// / displayMetrics.density);
}
public int adjustHeight (float imageWidth, float imageHeight)
{
    DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
    float dpHeight = displayMetrics.heightPixels;// / displayMetrics.density;
    float dpWidth = displayMetrics.widthPixels;// / displayMetrics.density;
    return Math.round((imageHeight/imageWidth)*dpWidth);
}
}

Answer 1

使用Glide加载你的图片，它缓存你的图片，直到他们的uri改变，并提供非常快速和平稳的加载体验。

你可以像下面的例子一样简单的加载图片。

ImageView imageView = (ImageView) findViewById(R.id.my_image_view);
Glide.with(this).load("image url").into(imageView);

Answer 2

我认为最好的解决方案是将下载和视图创建分开。

你知道要在ListView中显示的数据，所以将图像下载到设备上(例如，像这个答案中所示的那样下载到应用程序的cache-dir中)。您不必急于下载所有ListViews条目的图像。只需跟踪用户的滚动状态，并开始下载接下来的几个图像。

初始化ImageView时，将Image-Source设置为本地文件，如下图所示。