ImageViewをListViewにロードしてから、画面に表示されます。

Question

9gagと同様のアプリを開発しています。 https://play.google.com/store/apps/details?id=com.ninegag.android.app&hl=en

私はすでにほとんど実装していますが、アプリケーションを実行すると、インターネットからロードされた画像は画面に表示されるまでImageViewに読み込まれません。私はListViewがリサイクルでどのように動作するのか知っていますが、画面上に表示されるたびに各リストアイテムがイメージをロードするのを待たなければならないので、スムーズに見えません。

この問題を改善するにはどうすればよいですか？

マイ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に表示するデータを知っているので、デバイスに画像をダウンロードしてください（たとえば、answerのようなアプリのcache-dir）。 ListViewのエントリのすべてのイメージを熱心にダウンロードする必要はありません。ユーザーのスクロール状況を把握し、次の数枚の画像のダウンロードを開始するだけです。

ImageViewを初期化するときに、イメージソースをanswerのようにローカルファイルに設定します。