Android ListView滑动过程中图片显示重复错位闪烁问题解决

主要分析Android ListView滚动过程中图片显示重复、错乱、闪烁的原因及解决方法,顺带提及ListView的缓存机制。
1、原因分析
ListView item缓存机制
:为了使得性能更优,ListView会缓存行item(某行对应的View)。ListView通过adapter的getView函数获得每行的item。滑动过程中,

a. 如果某行item已经滑出屏幕,若该item不在缓存内,则put进缓存,否则更新缓存;
b. 获取滑入屏幕的行item之前会先判断缓存中是否有可用的item,如果有,做为convertView参数传递给adapter的getView。
更具体可见源代码ListView.obtainView

 

这样,如下的getView写法就可以充分利用缓存大大提升ListView的性能。即便上万个行item,最多inflate的次数为n,n为一屏最多显示ListView 行item的个数。

这样提升了性能,但同时也会造成另外一些问题:

a. 行item图片显示重复
这个显示重复是指当前行item显示了之前某行item的图片。
比如ListView滑动到第2行会异步加载某个图片,但是加载很慢,加载过程中listView已经滑动到了第14行,且滑动过程中该图片加载结束,第2行已不在屏幕内,根据上面介绍的缓存原理,第2行的view可能被第14行复用,这样我们看到的就是第14行显示了本该属于第2行的图片,造成显示重复。

 

b. 行item图片显示错乱
这个显示错乱是指某行item显示了不属于该行item的图片。
比如ListView滑动到第2行会异步加载某个图片,但是加载很慢,加载过程中listView已经滑动到了第14行,第2行已不在屏幕内,根据上面介绍的缓存原理,第2行的view可能被第14行复用,第14行显示了第2行的View,这时之前的图片加载结束,就会显示在第14行,造成错乱。

 

c. 行item图片显示闪烁
上面b的情况,第14行图片又很快加载结束,所以我们看到第14行先显示了第2行的图片,立马又显示了自己的图片进行覆盖造成闪烁错乱。

 

2、解决方法
通过上面的分析我们知道了出现错乱的原因是异步加载及对象被复用造成的,如果每次getView能给对象一个标识,在异步加载完成时比较标识与当前行item的标识是否一致,一致则显示,否则不做处理即可。
下面以使用ImageCache为ListView提供图片获取缓存为例,ListView中强烈推荐使用ImageCache
首先在listview adapter的getView中添加

其中setTag表示设置标识,方便下面进行标志比对

Cache.ICON_CACHE为ImageCache的实例,表示如果不在缓存内则设置drawable为null(当然你可以可以设置为你自己的默认资源),防止显示了之前某个行item的图片,解决了a. 行item图片显示重复问题。

 

在ImageCache的OnImageCallbackListener的onGetSuccess函数中添加

在上面用String imageUrlTag = (String)imageView.getTag();取得之前设置的tag,然后和当前的url进行比较,如果相等则显示,解决了b. 行item图片显示错乱,c. 行item图片显示错乱的两个问题。其中ObjectUtils可见ObjectUtils@Github.

其他异步加载过程解决原理类似。

PS:介绍ImageCache

Android ImageCache图片缓存,使用简单,支持预取,支持多种缓存算法,支持不同网络类型,扩展性强

主要介绍一个支持图片自动预取、支持多种缓存算法、支持二级缓存、支持数据保存和恢复的图片缓存的使用、功能及网友反馈的常见问题解答

 

与Android LruCache相比主要特性:(1). 使用简单  (2). 轻松获取及预取新图片  (3). 包含二级缓存  (4). 可选择多种缓存算法(FIFO、LIFO、LRU、MRU、LFU、MFU等13种)或自定义缓存算法  (5). 可方便的保存及初始化恢复数据  (6). 支持文件sd卡保存及自定义文件名规则 (7).  省流量性能佳(有且仅有一个线程获取图片)  (8). 支持不同类型网络处理  (9). 可根据系统配置初始化缓存  (10). 扩展性强  (11). 支持等待队列  (12). 包含map的大多数接口。

 

适用:获取图片较多的应用,如新浪微博、twitter、微信头像、美丽说、蘑菇街、花瓣、淘宝等等。

本文以用ImageCache实现瀑布流为例,示例代码地址见ImageCacheDemo,效果图如下:

示例APK可从这些地址下载:Google Play,  360手机助手,  百度手机助手,  小米应用商店,  豌豆荚

1、使用

(1)引入公共库

引入TrineaAndroidCommon@Github(欢迎star和fork^_^)作为你项目的library(如何拉取代码及添加公共库),或是自己抽取其中的ImageCache@Github部分使用。

 

(2)调用

仅需简单三步:

a. AndroidManifest.xml中添加权限

 

b. 定义缓存和回调接口

基本使用:只对ImageView加载图片有效,定义只需要一条语句

 

高级使用:自定义图片获取成功的回调接口,如下:

 

c. 需要加载图片的地方调用get(String imageUrl, View view)异步加载图片

 

上面代码中new ImageCache()用来定义图片缓存,默认会根据系统内存设置缓存大小。默认缓存算法为LFU(Least Frequently Used),最近最少使用先删除。

 

setOnImageCallbackListener(imageCallBack);设置图片获取成功回调接口,其中onPreGet为图片获取前的回调函数,onGetSuccess为图片获取成功的回调函数,onGetFailed为图片获取失败的回调函数。

 

可以在程序退出(比如”退出确认对话框”点击确认)时调用saveDataToDb(Context context, String tag)保存数据,在程序启动(比如Application的onCreate函数)时调用initData(Context context, String tag)初始化恢复数据。其中tag为此ImageCache的标识。

 

get(imageUrl, imageView)异步获取图片,在图片获取成功后会自动调用onGetSuccess将参数传入。
get(String imageUrl,List<String> urlList, View view)异步获取图片,并且会自动预取urlList中的图片。

 

上面是最简单的实现。
第2部分会介绍支持的其他功能,包括网络类型设置、预取个数设置、多种缓存算法、保存及初始化恢复数据、等待队列开关、图片源读取方式设置、读取图片http设置、缓存有效时间、命中率及大部分map接口。

 

2、功能介绍
(1) 多种构造函数,可根据系统配置初始化缓存

public ImageCache()
public ImageCache(int primaryCacheMaxSize)
public ImageCache(int primaryCacheMaxSize, int secondaryCacheMaxSize)

public ImageCache(int primaryCacheMaxSize, int primaryCacheThreadPoolSize, int secondaryCacheMaxSize, int secondaryCacheThreadPoolSize)
支持四种构造函数,支持一级和二级缓存大小及获取图片线程池大小的设置。默认会根据系统可用内存大小设置缓存大小,根据系统Cpu个数设置线程池大小。

 

(2)、获取图片及自动预取
get(String imageUrl, View view)
异步获取图片,在图片获取成功后自动调用OnImageCallbackListener的onGetSuccess函数,返回是否已在缓存中
get(String imageUrl, List<String> urlList, View view)异步获取图片,在图片获取成功后自动调用OnImageCallbackListener的onGetSuccess函数,并且根据imageUrl在urlList中的位置向前向后预取图片,返回是否已在缓存中。

 

public void setForwardCacheNumber(int forwardCacheNumber) 向前预取图片个数设置,默认为PreloadDataCache#DEFAULT_FORWARD_CACHE_NUMBER

public void setBackwardCacheNumber(int backwardCacheNumber)向后预取图片个数设置默认,默认为PreloadDataCache#DEFAULT_BACKWARD_CACHE_NUMBER

 

public CacheObject<V> get(K key)
public CacheObject<V> get(K key, List<K> keyList)
两个接口是直接同步获取图片,且获取成功后不会调用OnImageCallbackListener的onGetSuccess函数

 

(3)、设置缓存算法
setCacheFullRemoveType
(CacheFullRemoveType<Bitmap> cacheFullRemoveType)
设置缓存算法,缓存算法即为缓存满时为了插入新数据,删除旧数据的规则。

 

目前包括FIFO、LIFO、LRU、MRU、LFU、MFU、优先级低先删除、优先级高先删除、数据小先删除、数据大先删除、图片小先删除、图片大先删除、永不删除。还可以通过实现CacheFullRemoveType来自定义缓存算法。。默认为RemoveTypeUsedCountSmall,即LRU使用频率低先删除。下面详细介绍各个算法:

RemoveTypeEnterTimeFirst FIFO先进先出,先进入先删除
RemoveTypeEnterTimeLast LIFO后进先出,后进入先删除
RemoveTypeLastUsedTimeFirst LRU(Least Recently User),最先使用先删除
RemoveTypeLastUsedTimeLast MRU(Most Recently Used),最近使用先删除
RemoveTypeUsedCountSmall LFU(Least Frequently Used),使用频率低先删除
RemoveTypeUsedCountBig MRU(Most Frequently Used),使用频率高先删除
RemoveTypePriorityLow 优先级低先删除
RemoveTypePriorityHigh 优先级低先删除
RemoveTypeBitmapSmall 图片小的先删除
RemoveTypeBitmapLarge 图片大的先删除

RemoveTypeDataBig 数据大先删除,根据缓存数据的compareTo函数决定
RemoveTypeDataSmall 数据小先删除,根据缓存数据的compareTo函数决定
RemoveTypeNotRemove 不删除,缓存满时不再允许插入新数据

 

自定义缓存算法只需要实现CacheFullRemoveType的compare方法即可。比较结果小于0表示会被先删除

 

(4)、保存及初始化恢复数据
public boolean saveDataToDb(Context context, String tag)
保存数据到数据库,可在程序退出时调用,不建议在每个activity onDestrory时调用,而是整个程序退出(比如”退出确认对话框”点击确认)时,见本文3.1常见问题解答。

public void initData(Context context, String tag)

初始化恢复数据,可在程序刚开始加载时调用,不建议在每个activity oncreate调用,而是整个程序初始化(比如Application的onCreate函数)时,见本文3.1常见问题解答。

 

(5)、是否启用队列
setOpenWaitingQueue
(boolean isOpenWaitingQueue)
当不同view通过get函数获取图片时,是否开启等待队列。

若开启,保存所有view,图片获取成功后依次调用OnImageCallbackListener的onGetSuccess函数;否则仅保存最后调用get的view,图片获取成功后调用OnImageCallbackListener的onGetSuccess函数
默认开启队列等待。如果希望最优性能且场景满足,可设置为false。

 

(6)、设置图片获取方式接口
setOnGetDataListener(OnGetDataListener<String, Bitmap> onGetDataListener)

设置图片获取的方式。缓存通过该接口获取图片及预取图片。默认为ImageCache中getDefaultOnGetImageListener,通过url获取图片。你可以重写该方法将图片缓存改为本地图片文件缓存等等。

 

(7)、优化图片读取
a. 设置图片读取http超时

public void setHttpReadTimeOut(int readTimeOutMillis)
若readTimeOutMillis小于0表示不设置超时,默认不设置,单位为毫秒

b. 设置无网络不读取
public void setContext(Context context)
设置context,网络连接失败不会新建线程请求图片。

c. 支持不同网络类型的处理
public void setAllowedNetworkTypes(int allowedNetworkTypes)
设置允许的网络类型,可选择PreloadDataCache#NETWORK_MOBILE、PreloadDataCache#NETWORK_WIFI或两者都允许。默认两者都允许。
注意:这个接口生效必须先setContext(Context context)

d. 设置读取图片http请求属性
public void setRequestProperties(Map<String, String> requestProperties)

public void setRequestProperty(String field, String newValue)
设置获取图片时的http request属性,如

setRequestProperty(“User-Agent”, “TrineaAndroidCommon/4.0 (Android 4.0) MI_2S”);设置User-Agent头信息
setRequestProperty(“Connection”, “false”);设置connection keep alive为false,默认为true

 

(8)、缓存命中率

setCompressListener(CompressListener compressListener)

设置图片压缩比例,防止内存溢出

 

(9)、缓存元素有效时间

setValidTime(long validTime)
设置缓存元素有效时间,小于0表示不会失效,此时仅根据CacheFullRemoveType在缓存满时替换元素
通过protected boolean isExpired(K key)判断某key是否过期

 

(10)、缓存命中率
getHitRate()、getHitCount()、getMissCount()分别表示缓存命中率、命中次数、未命中次数

 

(11)、其他与map类似接口
public boolean containsKey(K key) 缓存中是否包含该key
public CacheObject<V> remove(K key) 从缓存中删除某个key
public void clear() 清空缓存
public Set<K> keySet() 缓存中key集合
public Set<Map.Entry<K, CacheObject<V>>> entrySet() 缓存中key,value键值对集合
public Collection<CacheObject<V>> values() 缓存中元素集合
public CacheObject<V> put(K key, V value) 手动插入某个元素
public CacheObject<V> put(K key, CacheObject<V> value) 手动插入某个元素
public CacheObject<V> get(K key) 得到某个key
public int getSize() 得到缓存中有效元素个数
public int getMaxSize() 得到缓存中元素最大个数

 

(12)得到设置
上面的set几乎都可以通过对应的get得到相应value
使用getOnGetDataListener()得到获取图片的方法
getForwardCacheNumber()得到自动向前缓存的个数
getBackCacheNumber()得到自动向后缓存的个数
getMaxSize()得到缓存最大容量
getValidTime()得到有效时间,以毫秒计
getCacheFullRemoveType()得到cache满时删除元素类型

 

3、常见问题解答
1、是每个Activity一个ImageCache还是整个程序共用一个?

建议ImageCache缓存整个app用同一个实例,而不是每个activity一个。在程序启动(比如Application的onCreate函数)时initData初始化图片缓存,退出(比如”退出确认对话框”点击确认)时saveDataToDb保存图片缓存。因为:
a. 你的程序总不能就一个activity需要图片缓存,缓存本身就该应该所有页面共用
b. 每次进activity新建一个缓存只会增加系统消耗,没有必要
c. 这个缓存不会占用太多内存,所以程序运行期间一直存在也不会对性能有多大影响

 

2、为什么应用退出后会重新获取图片?为什么应用退出后无网络情况下之前缓存的图片不会自己加载?

在程序退出(比如”退出确认对话框”点击确认)时调用saveDataToDb(Context context, String tag)保存数据,在程序启动(比如Application的onCreate函数)时调用initData(Context context, String tag)初始化数据。其中tag为此ImageCache的标识。

 

3、为什么无法加载图片?
可通过OnImageCallbackListener中的onGetFailed函数FailedReason参数判断失败原因。目前错误原因包括sdcard保存出错(请确保存在外部sdcard)和网络出错。

 

4、能否直接加载sdcard中已经存在的图片,即数据源为本地sdcard而不是网络?
可以通过setOnGetDataListener(OnGetDataListener<String, Bitmap> onGetDataListener)设置图片获取方式。如

注意这种方式compressListener是无效的,如果希望利用compressListener,可以如下设置:

 

5、内存溢出OOM问题?

通过setCompressListener接口压缩图片,getCompressSize返回值为图片长宽缩放比例,同BitmapFactory.Options#inSampleSize

还可见 图片OutOfMemory异常bitmap size exceeds VM budget的原因及解决方法

 

5、其他

ListView滑动过程中图片显示重复错乱闪烁问题解决


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值