复用机制
listview 的item会创建至少是一屏幕可显示的数量,新的item会复用之前的旧item,大大提高效率,具体通过如下的convertView来实现。
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
// 判断是否缓存
if (convertView == null) {
holder = new ViewHolder();
// 通过LayoutInflater实例化布局
convertView = mInflater.inflate(R.layout.notify_item, null);
holder.img = (ImageView) convertView.findViewById(R.id.imageView);
holder.title = (TextView) convertView.findViewById(R.id.textView);
convertView.setTag(holder);
} else {
// 通过tag找到缓存的布局
holder = (ViewHolder) convertView.getTag();
}
// 设置布局中控件要显示的视图
holder.img.setBackgroundResource(R.drawable.ic_launcher);
holder.title.setText(mData.get(position));
return convertView;
}
public final class ViewHolder {
public ImageView img;
public TextView title;
}
异步加载图片防止错位
listview 异步加载图片之所以错位的根本原因是重用了 convertView 且有异步操作.如果不重用 convertView 不会出现错位现象, 重用 convertView 但没有异步操作也不会有问题。
-
分析:
当重用 convertView 时,最初一屏显示 7 条记录, getView 被调用 7 次,创建了 7 个 convertView.当 Item1 划出屏幕, Item8 进入屏幕时,这时没有为 Item8 创建新的 view 实例, Item8 复用的是Item1 的 view 如果没有异步不会有任何问题,虽然 Item8 和 Item1 指向的是同一个 view,但滑到Item8 时刷上了 Item8 的数据,这时 Item1 的数据和 Item8 是一样的,因为它们指向的是同一块内存,但 Item1 已滚出了屏幕你看不见。当 Item1 再次可见时这块 view 又涮上了 Item1 的数据。
但当有异步下载时就有问题了,假设 Item1 的图片下载的比较慢,Item8 的图片下载的比较快,你滚上去使 Item8 可见,这时 Item8 先显示它自己下载的图片没错,但等到 Item1 的图片也下载完时你发现Item8 的图片也变成了 Item1 的图片,因为它们复用的是同一个 view。 如果 Item1 的图片下载的比Item8 的图片快, Item1 先刷上自己下载的图片,这时你滑下去,Item8 的图片还没下载完, Item8会先显示 Item1 的图片,因为它们是同一快内存,当 Item8 自己的图片下载完后 Item8 的图片又刷成了自己的,你再滑上去使 Item1 可见, Item1 的图片也会和 Item8 的图片是一样的,因为它们指向的是同一块内存。
-
解决办法
给 ImageView 设置一个 tag, 并预设一个图片。当 Item1 比 Item8 图片下载的快时, 你滚下去使 Item8 可见,这时 ImageView 的 tag 被设成了Item8 的 URL, 当 Item1 下载完时,由于 Item1 不可见现在的 tag 是 Item8 的 URL,所以不满足条件,虽然下载下来了但不会设置到 ImageView 上, tag 标识的永远是可见 view 中图片的 URL。 -
关键代码
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
final String url = getItem(position);
View view;
if (convertView == null)
{
view = LayoutInflater.from(getContext()).inflate(R.layout.photo_layout, null);
} else
{
view = convertView;
}
final ImageView imageView = (ImageView) view.findViewById(R.id.photo);
// 给ImageView设置一个Tag,保证异步加载图片时不会乱序
imageView.setTag(url);
// 预设一个图片
imageView.setImageResource(R.drawable.ic_launcher);
// 异步加载图片
new LoadImgTask(imageView).execute(url);
return view;
}
- 异步加载图片中需要注意的
// 异步任务中通过判断 tag 来防止图片错位
if (imageView.getTag() != null && imageView.getTag().equals(imageUrl)) {
imageView.setImageBitmap(result);
}
-
总结
当第一页的imageview开启异步线程加载图片时候,listview下翻,新的item会复用之前恩item,而且setTag会覆盖之前的tag。当第一屏的ItemView的图片下载完成后,如果直接findViewByTag然后设置图片会显示在第二屏上,就混乱了,所以一般在显示前都会判断photo.getTag().equals(url);确定了再显示。也就是说第一屏的ItemView图片下载完了,但是Tag被覆盖了,所以即使下载完成了,也不会有任何显示。
listview回收利用时,里面的item内容会跟回收的item内容一样(保留被回收item的内容),所以,如果回收前图片已经加载好(holder.img.setTag(imgUrl调用前),新的图片加载需要时间,还是会出现图片重复错位,所以需要回收来后马上设置一张默认图片,或者清除回收前的图片(setBackgroundResource(0))。
网友评论