前言
在日常的项目开发中，类似于下面的列表页一般是采用ListView或RecyclerView去实现，有时候会出现其条目上的图片或文字错位的情况，而解决错位的常用方法是为错位的控件设置标识数据，比如当点击时候再将其标识的数据取出进行操作，可以说"设置标识"的方法基本可以解决大多列表页中错位的情况。
1.jpg
2.jpg
上面 "设置标识" 的方法虽然可以解决大多数列表页错位的情况,但总有特殊情况. 前几天在项目开发中也遇到列表页错位的情况，主要是App里的通讯录的头像错位了，尝试"设置Tag"的方法却得不到解决，所以当遇到问题的时候就得针对所遇到的问题进行分析，找到发生该问题的原因，才能更好的找到解决的方法.下面将分析、问题缘由以及如何解决等步骤总结记录下.
Ⅰ.总结，才能更好的提升
分析：
通讯录列表页的头像发生错位是属于偶然性的，事出反常必有因，接连测试发现:" 当进入通讯录页面立即对列表页进行快速滑动，当滑动停下来的时候，图片错位就随之发生了 " .
缘由：
由于滑动过程中滑动的速度快于图片从网络加载的速度，而在适配器的getView方法里是使用条目复用的方式，对ListView进行性能优化. 如果是使用RecyclerView控件默认就带有复用的效果，还拥有持有控件的ViewHolder类.
假设从条目A快速滑动到条目H，再假设条目H是复用了条目A的，这时条目H对应的图片还未从网络加载完成，所以没法显示在图片控件上，所以显示的依旧是条目A的图片，而当我们滑动停下来的时候，条目H的图片就发生错位的现象.
解决：
由于项目中使用的是Picasso框架加载图片，该框架是有对图片错位做了处理的，那么也方便解决：
//对ListView的滚动状态进行监听
listView.setOnScrollListener(new AbsListView.OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
switch(scrollState){//正常情况是 1===>2====>0
case AbsListView.OnScrollListener.SCROLL_STATE_IDLE :
Picasso.with(Global.getContext()).resumeTag((Context)mActivity);
break;
case AbsListView.OnScrollListener.SCROLL_STATE_TOUCH_SCROLL:
Picasso.with(Global.getContext()).pauseTag((Context)mActivity);
break;
}
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
}
});
//在适配器的getView方法中对图片设置Tag
Picasso.with(this.context).load(url).placeholder(R.drawable.photo)
.error(R.drawable.photo)
.tag(context)
.into(viewholder.iv_icon);
思路：
主要是在列表页滑动的时候取消对图片的加载，当列表页停止滑动的时候才进行加载图片，这样就可以避免图片错位的发生.
Ⅱ.总结
- 1.Picasso框架已经解决了列表页的图片加载错位的问题，只需要实现相应的api；
- 2.设置Tag的方式并不能解决上面滑动导致的错位问题，使其图片在列表页滑动时不加载，列表页停止时才加载的方式就可以解决错位问题；
- 3.根据之前解决列表页错位的思路总结，设置Tag的方式比较适合将数据绑定于控件上，在某个时段(比如点击事件时，通过控件取出数据)再取出来对其数据操作；
- 4.Glide框架更优于Picasso框架，还等待着前去探索；
- 5.明天周六，早起的鸟儿有虫吃，晚起的虫儿被鸟吃 ~~ Bye
网友评论