CN110134486A - 一种ListView异步加载图片的方法及装置 - Google Patents

Abstract

本发明公开了一种ListView异步加载图片的方法，包括：当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取第一ListViewTask；当检测到所述目标图片被移出所述当前屏幕时，获取第二ListViewTask；判断所述第一ListViewTask与所述第二ListViewTask是否相同；若否，将与所述第二ListViewTask对应的待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。上述的方法，在加载新图片之前对第一ListViewTask和第二ListViewTask进行判断，确定新图片是否需要加载，避免了出现图片乱序的情况。

Description

一种ListView异步加载图片的方法及装置

技术领域

本发明涉及安卓技术领域，尤其涉及一种ListView异步加载图片的方法及装置。

背景技术

在Android开发的过程中，ListView是经常使用的控件，以列表的形式展示具体的内容，包括图片、文字、数据等多种不同类型的内容，并且可以根据数据的长度自适应显示。

在ListView使用异步方式加载图片，每当有新的元素进入界面时就会回调getView()方法，而在getView()方法中会开启异步请求从网络上获取图片，网络操作都是比较耗时的，也就是说当我们快速滑动ListView的时候就很有可能出现这样一种情况，某一个位置上的元素进入屏幕后开始从网络上请求图片，但是还没等图片下载完成，它就又被移出了屏幕。根据ListView的工作原理，被移出屏幕的控件将会很快被新进入屏幕的元素重新利用起来，而如果在这个时候刚好前面发起的图片请求有了响应，就会将刚才位置上的图片显示到当前位置上，因为虽然它们位置不同，但都是共用的同一个ImageView实例，导致出现了图片乱序的情况。

发明内容

有鉴于此，本发明提供了一种ListView异步加载图片的方法及装置，用以解决现有技术中根据ListView的工作原理，被移出屏幕的控件将会很快被新进入屏幕的元素重新利用起来，而如果在这个时候刚好前面发起的图片请求有了响应，就会将刚才位置上的图片显示到当前位置上，因为虽然它们位置不同，但都是共用的同一个ImageView实例，导致出现了图片乱序的问题。具体方案如下：

一种ListView异步加载图片的方法，包括：

当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取所述目标ImageView控件的第一ListViewTask；

当检测到所述目标图片被移出所述当前屏幕时，获取所述目标ImageView控件的第二ListViewTask；

判断所述第一ListViewTask与所述第二ListViewTask是否相同；

若否，将与所述第二ListViewTask对应的待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。

上述的方法，可选的，还包括：

若是，在所述目标ImageView控件继续显示所述目标图片。

上述的方法，可选的，当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取所述目标ImageView控件的第一ListViewTask，包括：

当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取与所述目标ImageView控件对应的预设的弱引用关联；

依据所述预设的弱引用关联，获取所述目标ImageView控件的第一ListViewTask。

上述的方法，可选的，判断所述第一ListViewTask与所述第二ListViewTask是否相同，包括：

获取所述第一ListViewTask的第一标识；

获取所述第二ListViewTask的第二标识；

将所述第一标识与所述第二标识进行比较。

上述的方法，可选的，将与所述第二ListViewTask对应的待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置，包括：

在所述第二ListViewTask中获取所述待加载图片的URL；

依据所述URL，在预设的图片数据源中查找与所述URL匹配的所述待加载图片；

依据所述预设的弱引用关联，确定与所述第二ListViewTask对应的目标ImageView控件；

将所述待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。

一种ListView异步加载图片的装置，包括：

第一获取模块，用于当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取所述目标ImageView控件的第一ListViewTask；

第二获取模块，用于当检测到所述目标图片被移出所述当前屏幕时，获取所述目标ImageView控件的第二ListViewTask；

判断模块，用于判断所述第一ListViewTask与所述第二ListViewTask是否相同；

加载模块，用于若否，将与所述第二ListViewTask对应的待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。

上述的装置，可选的，还包括：

继续显示模块，用于若是，在所述目标ImageView控件继续显示所述目标图片。

上述的装置，可选的，所述第一获取模块包括：

第一获取单元，用于当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取与所述目标ImageView控件对应的预设的弱引用关联；

第二获取单元，用于依据所述预设的弱引用关联，获取所述目标ImageView控件的第一ListViewTask。

上述的装置，可选的，所述判断模块包括：

第一标识获取单元，用于获取所述第一ListViewTask的第一标识；

第二标识获取单元，用于获取所述第二ListViewTask的第二标识；

比较单元，用于将所述第一标识与所述第二标识进行比较。

上述的装置，可选的，所述加载模块包括：

第三获取单元，用于在所述第二ListViewTask中获取所述待加载图片的URL；

查找单元，用于依据所述URL，在预设的图片数据源中查找与所述URL匹配的所述待加载图片；

确定单元，用于依据所述预设的弱引用关联，确定与所述第二ListViewTask对应的目标ImageView控件；

加载单元，用于将所述待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。

与现有技术相比，本发明包括以下优点：

本发明公开了一种ListView异步加载图片的方法，包括：当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取第一ListViewTask；当检测到所述目标图片被移出所述当前屏幕时，获取第二ListViewTask；判断所述第一ListViewTask与所述第二ListViewTask是否相同；若否，将与所述第二ListViewTask对应的待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。上述的方法，在加载新图片之前对第一ListViewTask和第二ListViewTask进行判断，确定新图片是否需要加载，避免了出现图片乱序的情况。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例公开的一种ListView异步加载图片的方法流程图；

图2为本发明实施例公开的一种ListView异步加载图片的方法又一流程图；

图3为本发明实施例公开的一种ListView异步加载图片的方法又一流程图；

图4为本发明提供的一种ListView异步加载图片的装置结构框图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明公开了一种ListView异步加载图片的方法及装置，应用在基于安卓系统的移动终端中ListView控件中异步加载图片的过程中，其中，Android系统是一种基于Linux的自由及开放源代码的操作系统。主要应用于移动设备，如智能手机和平板电脑等，在Android开发的过程中，ListView是经常使用的控件，以列表的形式展示具体的内容，包括图片、文字、数据等多种不同类型的内容，并且可以根据数据的长度自适应显示。在ListView中使用异步方式加载图片，会出现错位乱序的情况。在ListView适配器的getView()方法中开启异步请求，从网络上获取图片，当图片获取成功就后就将图片显示到ImageView上面。当滑动ListView的时候，图片会自动变来变去，而且图片显示的位置也不正确。因此，本发明提供了一种ListView异步加载图片的方法，所述方法的执行流程如图1所示，包括步骤：

S101、当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取所述目标ImageView控件的第一ListViewTask；

本发明实施例中，所述当前屏幕是由ListView控件构建的，新建ListViewActivity类，其中，所述ListViewActivity类属于界面类，创建activity_list_view.xml布局文件，创建ListView控件，用来展示列表图片数据。其中，所述目标ImageView控件是显示目标图片的控件，可以通过定义ListView中每一个子View的布局，新建item_list_view.xml布局文件，创建所述目标ImageView控件，显示所述目标图片。

当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取所述目标ImageView控件的第一ListViewTask，其中，所述ImageView控件是复用的，其中，所述ListViewTask对应一个异步加载图片的任务。新建一个ListViewAdapter作为ListView的适配器。开启了一个ListViewTask异步任务来加载图片。在ListViewActivity的onCreate()方法中，初始化控件和数据，为ListView设定适配器。

ImageView控件与ListViewTask之间遵循生产者消费者模式，当检测到目标ImageView控件中的目标图片处于所述目标屏幕中时，获取与所述目标ImageView控件对应的预设的弱引用关联；依据所述预设的弱引用关联，获取所述目标ImageView控件的第一ListViewTask，其中，所述第一ListViewTask是在所述目标图片加载至所述目标ImageView控件时开启的异步任务。

S102、当检测到所述目标图片被移出所述当前屏幕时，获取所述目标ImageView控件的第二ListViewTask；

本发明实施例中，当所述目标ImageView控件中的目标图片由于操作者对当前屏幕的上下滑动而移出所述当前屏幕时，此时，会出现两种情况包括：没有对所述目标ImageView控件开启新的异步加载图片任务；已经对所述所述目标ImageView控件开启新的异步加载图片任务，由于所述目标ImageView控件和ListViewTask遵循生产者消费者模式，获取所述目标ImageView控件的第二ListViewTask。

其中，所述目标图片被移出所述当前屏幕的判定可以为完全移出，也可以是所述目标图片的移出比例满足预设的百分比，其中，所述预设的百分比可以依据经验值进行设定，也可以依据具体情况进行设定。

S103、判断所述第一ListViewTask与所述第二ListViewTask是否相同；

本发明实施例中，获取所述第一ListViewTask的第一标识，获取所述第二ListViewTask的第二标识，将所述第一标识与所述第二标识进行比较，判断所述第一标识与所述第二标识是否相同，其中，所述第一标识和所述第二标识可以是按一定规则排列的编号、数字、字母或者其它优选的标识。

S104、将与所述第二ListViewTask对应的待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置；

本发明实施例中，若所述第一标识与所述第二标识不同，说明所述目标ImageView控件已经对应有新的异步加载图片任务，将与所述第二ListViewTask对应的待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。

S105、在所述目标ImageView控件继续显示所述目标图片。

本发明实施例中，若所述第一标识与所述第二标识相同，说明所述目标ImageView控件并未产生新的异步加载图片任务，可以在在所述目标ImageView控件继续显示所述目标图片。

本发明公开了一种ListView异步加载图片的方法，包括：当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取第一ListViewTask；当检测到所述目标图片被移出所述当前屏幕时，获取第二ListViewTask；判断所述第一ListViewTask与所述第二ListViewTask是否相同；若否，将与所述第二ListViewTask对应的待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。上述的方法，在加载新图片之前对第一ListViewTask和第二ListViewTask进行判断，确定新图片是否需要加载，避免了出现图片乱序的情况。

本发明实施例中，所述预设的弱引用关联的建立过程的方法流程图如图2所示，包括步骤：

S201、建立ListViewTask指向ImageView的弱引用关联；

本发明实施例中，针对ListViewTask指向ImageView的弱引用关联，在ListViewTask中加入一个构造函数，并在构造函数中要求传入ImageView这个参数，持有ImageView的弱引用。

S202、建立ImageView指向ListViewTask的弱引用关联。

本发明实施例中，针对ImageView指向ListViewTask的弱引用关联，自定义了一个ListViewDrawable类并让它继承自BitmapDrawable，然后重写了ListViewDrawable的构造函数，在构造函数中要求把ListViewTask传入，在ListViewAdapter中的getView()方法当中，调用了ImageView的setImageDrawable()方法把ListViewDrawable设置进去，这样ImageView指向ListViewTask的弱引用关联也成功建立。

本发明实施例中，将与所述第二ListViewTask对应的待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置的方法流程如图3所示，包括步骤：

S301、在所述第二ListViewTask中获取所述待加载图片的URL；

本发明实施例中，在所述第二ListViewTask中通过getImageView()方法获取所述待加载图片的URL。

S302、依据所述URL，在预设的图片数据源中查找与所述URL匹配的所述待加载图片。

本发明实施例中，所述预设的图片数据源是预先上传到服务器上的，优选的，所述预设的数据源中包含图片与URL地址的对应关系，新建一个ImageUrl类，建立imageUrls数组，存储所述预设的数据源中的图片URL地址。遍历所述预设的图片数据源，查找与所述URL相同的目标URL，所述目标URL对应的图片为所述待加载图片。

S303、依据所述预设的弱引用关联，确定与所述第二ListViewTask对应的目标ImageView控件；

本发明实施例中，依据所述预设弱引用关联中ListViewTask指向ImageView的弱引用关联，确定与所述第二ListViewTask对应的目标ImageView控件。

S304、将所述待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。

本发明实施例中，上述的方法，是通过编写代码来实现的，主要包括以下步骤：

S1：准备数据源，准备许多图片上传到服务器，新建ImageUrl类，建立imageUrls数组，存储图片URL地址。

S2：新建ListViewActivity类，创建activity_list_view.xml布局文件，创建ListView控件，用来展示列表图片数据。

S3：定义ListView中每一个子View的布局，新建item_list_view.xml布局文件，创建ImageView控件，显示图片。

S4：新建ListViewAdapter作为ListView的适配器。在getView()方法中首先根据当前的位置获取到图片的URL地址，然后使用inflate()方法加载item_list_view.xml这个布局，并获取到ImageView控件的实例，接下来开启了一个ListViewTask异步任务来从网络上加载图片，最终将加载好的图片设置到ImageView上面。

S5：在ListViewActivity的onCreate()方法中，初始化控件和数据，为ListView设定适配器，代码如下：

S6：ListViewTask指向ImageView的弱引用关联，在ListViewTask中加入一个构造函数，并在构造函数中要求传入ImageView这个参数，使用WeakReference，持有ImageView的弱引用，代码如下：

S7：ImageView指向ListViewTask的弱引用关联，自定义了一个ListViewDrawable类并让它继承自BitmapDrawable，然后重写了ListViewDrawable的构造函数，在构造函数中要求把ListViewTask传入，然后在这里给它包装了一层弱引用。在ListViewAdapter中的getView()方法当中，调用了ImageView的setImageDrawable()方法把ListViewDrawable设置了进去，那么ImageView就可以通过getDrawable()方法获取到和它关联的ListViewDrawable，然后再借助ListViewDrawable就可以获取到ListViewTask了。这样ImageView指向ListViewTask的弱引用关联也成功建立，代码如下：

S8：新建getListViewTask()方法，这个方法可以根据传入的ImageView来获取到它对应的ListViewTask，内部的逻辑就是先获取ImageView对应的ListViewDrawable，再获取ListViewDrawable对应的ListViewTask，代码如下：

S9：新建getImageView()方法，这个方法会获取当前ListViewTask所关联的ImageView，然后调用getListViewTask()方法来获取该ImageView所对应的ListViewTask，如果获取到的ListViewTask等于this，也就是当前的ListViewTask，那么就将ImageView返回，否则就返回null。在ListViewTask的onPostExecute()方法当中，只需要使用getImageView()方法获取到的ImageView来显示图片，代码如下：

S10：某个图片被移出了屏幕，它的ImageView被另外一个新进入屏幕的图片重用了，那么就会给这个ImageView关联一个新的ListViewTask，这种情况下，上一个ListViewTask和新的ListViewTask肯定就不相等了，这时getImageView()方法会返回null，而我们又判断ImageView等于null的话是不会设置图片的，因此就不会出现图片乱序的情况了。

基于上述的一种ListView异步加载图片的方法，本发明实施例中还提供了一种ListView异步加载图片的装置，所述装置的结构框图如图4所示，包括：

第一获取模块401、第二获取模块402、判断模块403和加载模块404。

其中，

所述第一获取模块401，用于当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取所述目标ImageView控件的第一ListViewTask；

所述第二获取模块402，用于当检测到所述目标图片被移出所述当前屏幕时，获取所述目标ImageView控件的第二ListViewTask；

所述判断模块403，用于判断所述第一ListViewTask与所述第二ListViewTask是否相同；

所述加载模块404，用于若否，将与所述第二ListViewTask对应的待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。

本发明公开了一种ListView异步加载图片的装置，包括：当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取第一ListViewTask；当检测到所述目标图片被移出所述当前屏幕时，获取第二ListViewTask；判断所述第一ListViewTask与所述第二ListViewTask是否相同；若否，将与所述第二ListViewTask对应的待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。上述的装置，在加载新图片之前对第一ListViewTask和第二ListViewTask进行判断，确定新图片是否需要加载，避免了出现图片乱序的情况。

本发明实施例中，所述装置还包括：继续显示模块405。

其中，

所述继续显示模块405，用于若是，在所述目标ImageView控件继续显示所述目标图片。

本发明实施例中，所述第一获取模块401包括：

第一获取单元406和第二获取单元407。

其中，

所述第一获取单元406，用于当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取与所述目标ImageView控件对应的预设的弱引用关联；

所述第二获取单元407，用于依据所述预设的弱引用关联，获取所述目标ImageView控件的第一ListViewTask。

本发明实施例中，所述判断模块403包括：

第一标识获取单元408、第二标识获取单元409和比较单元410。

其中，

所述第一标识获取单元408，用于获取所述第一ListViewTask的第一标识；

所述第二标识获取单元409，用于获取所述第二ListViewTask的第二标识；

所述比较单元410，用于将所述第一标识与所述第二标识进行比较。

本发明实施例中，所述加载模块404包括：

第三获取单元411、查找单元412、确定单元413和加载单元414。

其中，

所述第三获取单元411，用于在所述第二ListViewTask中获取所述待加载图片的URL；

所述查找单元412，用于依据所述URL，在预设的图片数据源中查找与所述URL匹配的所述待加载图片。

所述确定单元413，用于依据所述预设的弱引用关联，确定与所述第二ListViewTask对应的目标ImageView控件；

所述加载单元414，用于将所述待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上对本发明所提供的一种ListView异步加载图片的方法及装置进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种ListView异步加载图片的方法，其特征在于，包括：

当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取所述目标ImageView控件的第一ListViewTask；

当检测到所述目标图片被移出所述当前屏幕时，获取所述目标ImageView控件的第二ListViewTask；

判断所述第一ListViewTask与所述第二ListViewTask是否相同；

若否，将与所述第二ListViewTask对应的待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。

2.根据权利要求1所述的方法，其特征在于，还包括：

若是，在所述目标ImageView控件继续显示所述目标图片。

3.根据权利要求1所述的方法，其特征在于，当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取所述目标ImageView控件的第一ListViewTask，包括：

当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取与所述目标ImageView控件对应的预设的弱引用关联；

依据所述预设的弱引用关联，获取所述目标ImageView控件的第一ListViewTask。

4.根据权利要求1所述的方法，其特征在于，判断所述第一ListViewTask与所述第二ListViewTask是否相同，包括：

获取所述第一ListViewTask的第一标识；

获取所述第二ListViewTask的第二标识；

将所述第一标识与所述第二标识进行比较。

5.根据权利要求3所述的方法，其特征在于，将与所述第二ListViewTask对应的待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置，包括：

在所述第二ListViewTask中获取所述待加载图片的URL；

依据所述URL，在预设的图片数据源中查找与所述URL匹配的所述待加载图片；

依据所述预设的弱引用关联，确定与所述第二ListViewTask对应的目标ImageView控件；

将所述待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。

6.一种ListView异步加载图片的装置，其特征在于，包括：

第一获取模块，用于当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取所述目标ImageView控件的第一ListViewTask；

第二获取模块，用于当检测到所述目标图片被移出所述当前屏幕时，获取所述目标ImageView控件的第二ListViewTask；

判断模块，用于判断所述第一ListViewTask与所述第二ListViewTask是否相同；

加载模块，用于若否，将与所述第二ListViewTask对应的待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。

7.根据权利要求6所述的装置，其特征在于，还包括：

继续显示模块，用于若是，在所述目标ImageView控件继续显示所述目标图片。

8.根据权利要求6所述的装置，其特征在于，所述第一获取模块包括：

第一获取单元，用于当检测到目标图片显示在当前屏幕的目标ImageView控件中时，获取与所述目标ImageView控件对应的预设的弱引用关联；

第二获取单元，用于依据所述预设的弱引用关联，获取所述目标ImageView控件的第一ListViewTask。

9.根据权利要求6所述的装置，其特征在于，所述判断模块包括：

第一标识获取单元，用于获取所述第一ListViewTask的第一标识；

第二标识获取单元，用于获取所述第二ListViewTask的第二标识；

比较单元，用于将所述第一标识与所述第二标识进行比较。

10.根据权利要求8所述的装置，其特征在于，所述加载模块包括：

第三获取单元，用于在所述第二ListViewTask中获取所述待加载图片的URL；

查找单元，用于依据所述URL，在预设的图片数据源中查找与所述URL匹配的所述待加载图片；

确定单元，用于依据所述预设的弱引用关联，确定与所述第二ListViewTask对应的目标ImageView控件；

加载单元，用于将所述待加载图片加载至所述当前屏幕中所述目标ImageView控件所在位置。