在android中的Listview上延迟加载图像（初学者级别）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2912054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Lazy Load images on Listview in android(Beginner Level)?
提问by Praveen
Possible Duplicate:
Android - How do I do a lazy load of images in ListView
I am working on the listview with the custom adapter. I want to load the images and text view on it. The images are load from the internet urls. I just want to show the images which are visible list item to hte user. I refered the Shelves opensource project example from romainguy, but its to complicated to understand the code. For a beginner level, I just want to know how to handle the tag between the adapter and activity. From the commonswareexampleI can set the tag on adapter, but can't show the corresponding image at the idle state of the listview. Please help me with your ideas. Sample codes are more understandable.
我正在使用自定义适配器处理列表视图。我想在其上加载图像和文本视图。图片是从互联网网址加载的。我只想向 hte 用户显示可见列表项的图像。我参考了romainguy的Shelves 开源项目示例，但理解代码很复杂。对于初学者，我只想知道如何处理适配器和活动之间的标签。从commonsware示例中，我可以在适配器上设置标签，但无法在列表视图的空闲状态下显示相应的图像。请帮助我提出您的想法。示例代码更易于理解。
Thanks.
谢谢。
EDIT:
编辑：
The combination of Efficientand SlowAdapter in ApiDemos is more helpful to understand.
ApiDemos中Efficient和SlowAdapter 的结合更有助于理解。
changes done on efficient adapter example like this:
在像这样的高效适配器示例上所做的更改：
public class List14 extends ListActivity implements ListView.OnScrollListener {
// private TextView mStatus;
private static boolean mBusy = false;
static ViewHolder holder;
public static class EfficientAdapter extends BaseAdapter {
private LayoutInflater mInflater;
private Bitmap mIcon1;
private Bitmap mIcon2;
public EfficientAdapter(Context context) {
// Cache the LayoutInflate to avoid asking for a new one each time.
mInflater = LayoutInflater.from(context);
// Icons bound to the rows.
mIcon1 = BitmapFactory.decodeResource(context.getResources(),
R.drawable.icon48x48_1);
mIcon2 = BitmapFactory.decodeResource(context.getResources(),
R.drawable.icon48x48_2);
}
/**
* The number of items in the list is determined by the number of
* speeches in our array.
*
* @see android.widget.ListAdapter#getCount()
*/
public int getCount() {
return DATA.length;
}
/**
* Since the data comes from an array, just returning the index is
* sufficent to get at the data. If we were using a more complex data
* structure, we would return whatever object represents one row in the
* list.
*
* @see android.widget.ListAdapter#getItem(int)
*/
public Object getItem(int position) {
return position;
}
/**
* Use the array index as a unique id.
*
* @see android.widget.ListAdapter#getItemId(int)
*/
public long getItemId(int position) {
return position;
}
/**
* Make a view to hold each row.
*
* @see android.widget.ListAdapter#getView(int, android.view.View,
* android.view.ViewGroup)
*/
public View getView(int position, View convertView, ViewGroup parent) {
// A ViewHolder keeps references to children views to avoid
// unneccessary calls
// to findViewById() on each row.
// When convertView is not null, we can reuse it directly, there is
// no need
// to reinflate it. We only inflate a new View when the convertView
// supplied
// by ListView is null.
if (convertView == null) {
convertView = mInflater.inflate(R.layout.list_item_icon_text,
null);
// Creates a ViewHolder and store references to the two children
// views
// we want to bind data to.
holder = new ViewHolder();
holder.text = (TextView) convertView.findViewById(R.id.text);
holder.icon = (ImageView) convertView.findViewById(R.id.icon);
convertView.setTag(holder);
} else {
// Get the ViewHolder back to get fast access to the TextView
// and the ImageView.
holder = (ViewHolder) convertView.getTag();
}
if (!mBusy) {
holder.icon.setImageBitmap(mIcon1);
// Null tag means the view has the correct data
holder.icon.setTag(null);
} else {
holder.icon.setImageBitmap(mIcon2);
// Non-null tag means the view still needs to load it's data
holder.icon.setTag(this);
}
holder.text.setText(DATA[position]);
// Bind the data efficiently with the holder.
// holder.text.setText(DATA[position]);
return convertView;
}
static class ViewHolder {
TextView text;
ImageView icon;
}
}
private Bitmap mIcon1;
private Bitmap mIcon2;
@Override
public void onCreate(Bundle savedInstanceState) {
mIcon1 = BitmapFactory.decodeResource(this.getResources(),
R.drawable.icon48x48_1);
mIcon2 = BitmapFactory.decodeResource(this.getResources(),
R.drawable.icon48x48_2);
super.onCreate(savedInstanceState);
setListAdapter(new EfficientAdapter(this));
getListView().setOnScrollListener(this);
}
public void onScroll(AbsListView view, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {
}
public void onScrollStateChanged(AbsListView view, int scrollState) {
switch (scrollState) {
case OnScrollListener.SCROLL_STATE_IDLE:
mBusy = false;
int first = view.getFirstVisiblePosition();
int count = view.getChildCount();
for (int i = 0; i < count; i++) {
holder.icon = (ImageView) view.getChildAt(i).findViewById(
R.id.icon);
if (holder.icon.getTag() != null) {
holder.icon.setImageBitmap(mIcon1);
holder.icon.setTag(null);
}
}
// mStatus.setText("Idle");
break;
case OnScrollListener.SCROLL_STATE_TOUCH_SCROLL:
mBusy = true;
// mStatus.setText("Touch scroll");
break;
case OnScrollListener.SCROLL_STATE_FLING:
mBusy = true;
// mStatus.setText("Fling");
break;
}
}
private static final String[] DATA = { "Abbaye de Belloc",
"Abbaye du Mont des Cats", "Abertam", "Abondance", "Ackawi",
"Acorn", "Adelost", "Affidelice au Chablis", "Afuega'l Pitu"};
}
It works fine now. But when the scrolling state its not reloading the image properly. some interval of items not shows the images2. that is the correct order of the images are loading. But not in all items of list. Mismatches happening between solid item intervals. how to correct it?
它现在工作正常。但是当滚动状态时它没有正确重新加载图像。某些项目间隔不显示图像2。这是加载图像的正确顺序。但并非在列表的所有项目中。实体项目间隔之间发生不匹配。如何纠正？
采纳答案by jwadsack
Praveen -
普拉文 -
As you already found my blog post on this, I just wanted to push it back to Stackoverflow so that others can use it.
正如您已经找到我的博客文章，我只是想将它推回 Stackoverflow，以便其他人可以使用它。
Here's the basic discussion: http://ballardhack.wordpress.com/2010/04/05/loading-remote-images-in-a-listview-on-android/
这是基本讨论：http: //ballardhack.wordpress.com/2010/04/05/loading-remote-images-in-a-listview-on-android/
And there's a class I documented later that uses a thread and a callback to load the images:
我稍后记录了一个类，它使用一个线程和一个回调来加载图像：
Update:To address your specific exception, I think that view returned in the list from getChildAtis not an ImageView-- it's whatever layout view you are using to hold the image and text.
更新：为了解决您的特定异常，我认为从列表中返回的视图getChildAt不是ImageView- 它是您用来保存图像和文本的任何布局视图。
Update to include relevant code: (Per @george-stocker's recommendation)
更新以包含相关代码：（根据@george-stocker 的建议）
Here is the adapter I was using:
这是我使用的适配器：
public class MediaItemAdapter extends ArrayAdapter<MediaItem> {
private final static String TAG = "MediaItemAdapter";
private int resourceId = 0;
private LayoutInflater inflater;
private Context context;
private ImageThreadLoader imageLoader = new ImageThreadLoader();
public MediaItemAdapter(Context context, int resourceId, List<MediaItem> mediaItems) {
super(context, 0, mediaItems);
this.resourceId = resourceId;
inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
this.context = context;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View view;
TextView textTitle;
TextView textTimer;
final ImageView image;
view = inflater.inflate(resourceId, parent, false);
try {
textTitle = (TextView)view.findViewById(R.id.text);
image = (ImageView)view.findViewById(R.id.icon);
} catch( ClassCastException e ) {
Log.e(TAG, "Your layout must provide an image and a text view with ID's icon and text.", e);
throw e;
}
MediaItem item = getItem(position);
Bitmap cachedImage = null;
try {
cachedImage = imageLoader.loadImage(item.thumbnail, new ImageLoadedListener() {
public void imageLoaded(Bitmap imageBitmap) {
image.setImageBitmap(imageBitmap);
notifyDataSetChanged(); }
});
} catch (MalformedURLException e) {
Log.e(TAG, "Bad remote image URL: " + item.thumbnail, e);
}
textTitle.setText(item.name);
if( cachedImage != null ) {
image.setImageBitmap(cachedImage);
}
return view;
}
}
回答by Praveen
I got it. This is the perfect code I want. Lazy loading works to custom adapter just visible list item's icons. Hope it helps to the beginners
我知道了。这是我想要的完美代码。延迟加载适用于自定义适配器，仅可见列表项的图标。希望对初学者有所帮助
public class List14 extends ListActivity implements ListView.OnScrollListener {
// private TextView mStatus;
private static boolean mBusy = false;
static ViewHolder holder;
public static class EfficientAdapter extends BaseAdapter {
private LayoutInflater mInflater;
private Bitmap mIcon1;
private Bitmap mIcon2;
private Context mContext;
public EfficientAdapter(Context context) {
// Cache the LayoutInflate to avoid asking for a new one each time.
mInflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
mContext = context;
// Icons bound to the rows.
mIcon1 = BitmapFactory.decodeResource(context.getResources(),
R.drawable.icon48x48_1);
mIcon2 = BitmapFactory.decodeResource(context.getResources(),
R.drawable.icon48x48_2);
}
/**
* The number of items in the list is determined by the number of
* speeches in our array.
*
* @see android.widget.ListAdapter#getCount()
*/
public int getCount() {
return DATA.length;
}
/**
* Since the data comes from an array, just returning the index is
* sufficent to get at the data. If we were using a more complex data
* structure, we would return whatever object represents one row in the
* list.
*
* @see android.widget.ListAdapter#getItem(int)
*/
public Object getItem(int position) {
return position;
}
/**
* Use the array index as a unique id.
*
* @see android.widget.ListAdapter#getItemId(int)
*/
public long getItemId(int position) {
return position;
}
/**
* Make a view to hold each row.
*
* @see android.widget.ListAdapter#getView(int, android.view.View,
* android.view.ViewGroup)
*/
public View getView(int position, View convertView, ViewGroup parent) {
// A ViewHolder keeps references to children views to avoid
// unneccessary calls
// to findViewById() on each row.
// When convertView is not null, we can reuse it directly, there is
// no need
// to reinflate it. We only inflate a new View when the convertView
// supplied
// by ListView is null.
if (convertView == null) {
convertView = mInflater.inflate(R.layout.list_item_icon_text,
parent, false);
// Creates a ViewHolder and store references to the two children
// views
// we want to bind data to.
holder = new ViewHolder();
holder.text = (TextView) convertView.findViewById(R.id.text);
holder.icon = (ImageView) convertView.findViewById(R.id.icon);
convertView.setTag(holder);
} else {
// Get the ViewHolder back to get fast access to the TextView
// and the ImageView.
holder = (ViewHolder) convertView.getTag();
}
if (!mBusy) {
holder.icon.setImageBitmap(mIcon1);
// Null tag means the view has the correct data
holder.icon.setTag(null);
} else {
holder.icon.setImageBitmap(mIcon2);
// Non-null tag means the view still needs to load it's data
holder.icon.setTag(this);
}
holder.text.setText(DATA[position]);
// Bind the data efficiently with the holder.
// holder.text.setText(DATA[position]);
return convertView;
}
static class ViewHolder {
TextView text;
ImageView icon;
}
}
private Bitmap mIcon1;
private Bitmap mIcon2;
@Override
public void onCreate(Bundle savedInstanceState) {
mIcon1 = BitmapFactory.decodeResource(this.getResources(),
R.drawable.icon48x48_1);
mIcon2 = BitmapFactory.decodeResource(this.getResources(),
R.drawable.icon48x48_2);
super.onCreate(savedInstanceState);
setListAdapter(new EfficientAdapter(this));
getListView().setOnScrollListener(this);
}
public void onScroll(AbsListView view, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {
}
public void onScrollStateChanged(AbsListView view, int scrollState) {
switch (scrollState) {
case OnScrollListener.SCROLL_STATE_IDLE:
mBusy = false;
int first = view.getFirstVisiblePosition();
int count = view.getChildCount();
for (int i = 0; i < count; i++) {
holder.icon = (ImageView) view.getChildAt(i).findViewById(
R.id.icon);
if (holder.icon.getTag() != null) {
holder.icon.setImageBitmap(IMAGE[first+i]);// this is the image url array.
holder.icon.setTag(null);
}
}
// mStatus.setText("Idle");
break;
case OnScrollListener.SCROLL_STATE_TOUCH_SCROLL:
mBusy = true;
// mStatus.setText("Touch scroll");
break;
case OnScrollListener.SCROLL_STATE_FLING:
mBusy = true;
// mStatus.setText("Fling");
break;
}
}
private static final String[] DATA = { "Abbaye de Belloc",
"Abbaye du Mont des Cats", "Abertam", "Abondance", "Ackawi",
"Acorn", "Adelost", "Affidelice au Chablis", "Afuega'l Pitu",
"Yarra Valley Pyramid", "Yorkshire Blue", "Zamorano",
"Zanetti Grana Padano", "Zanetti Parmigiano Reggiano" };
}
回答by Fedor
As far as I understand you need to update your list after scrolling is finished. That's easy. Here's the fixed code for you:
据我了解，您需要在滚动完成后更新您的列表。这很容易。这是您的固定代码：
EfficientAdapter adapter;
@Override
public void onCreate(Bundle savedInstanceState) {
mIcon1 = BitmapFactory.decodeResource(this.getResources(),
R.drawable.icon48x48_1);
mIcon2 = BitmapFactory.decodeResource(this.getResources(),
R.drawable.icon48x48_2);
super.onCreate(savedInstanceState);
adapter=new EfficientAdapter(this);
setListAdapter(adapter);
getListView().setOnScrollListener(this);
}
public void onScroll(AbsListView view, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {
}
public void onScrollStateChanged(AbsListView view, int scrollState) {
switch (scrollState) {
case OnScrollListener.SCROLL_STATE_IDLE:
mBusy = false;
adapter.notifyDataSetChanged()
break;
case OnScrollListener.SCROLL_STATE_TOUCH_SCROLL:
mBusy = true;
// mStatus.setText("Touch scroll");
break;
case OnScrollListener.SCROLL_STATE_FLING:
mBusy = true;
// mStatus.setText("Fling");
break;
}
}
notifyDataSetChanged will tell the adapter to re-display all visible items, so they'll be displayed with image2.
notifyDataSetChanged 将告诉适配器重新显示所有可见项目，因此它们将与 image2 一起显示。
回答by Charles Merriam
Ah, check your logcat to make sure your app isn't being killed and restarted. Most handsets limit your total application size to 16mb or 24mb. It's easy to load up a bunch of images, run over, get killed, restart, and have your onPause not load big data off screen. It's poor man's garabage collection.
啊，检查您的 logcat 以确保您的应用程序没有被杀死并重新启动。大多数手机将您的总应用程序大小限制为 16mb 或 24mb。加载一堆图像很容易，跑过，被杀死，重新启动，并且让你的 onPause 不加载屏幕外的大数据。这是穷人的垃圾收集。
回答by Ben L.
As far as I can see, the static ViewHolderisn't helping anything. Try putting the entire onScrollStateChangedfunction between /*and */, removing the static ViewHolderline, and changing holder = new ViewHolder();to ViewHolder holder = new ViewHolder();.
据我所知，静电ViewHolder没有任何帮助。尝试将整个onScrollStateChanged函数放在/*和之间*/，删除该static ViewHolder行，然后更改holder = new ViewHolder();为ViewHolder holder = new ViewHolder();。
