CN103544253B - 一种以瀑布流方式显示图片的实现方法及系统 - Google Patents

Abstract

本发明公开一种以瀑布流方式显示图片的实现方法及系统，其中，方法包括步骤：从服务端获取需要显示的图片的图片对象列表；选取预先设置好的显示模板，并根据选取的显示模板的属性和图片对象列表中图片的尺寸，计算出每张需要显示的图片在显示模板上对应的坐标；将图片对象列表中的图片对象添加到图片显示列表，并根据图片在显示模板上对应的坐标获取图片加载在屏幕上的位置信息；根据图片显示列表中图片的位置信息，依次将图片显示列表中图片加载到屏幕对应的位置进行显示。

Description

一种以瀑布流方式显示图片的实现方法及系统

技术领域

本发明涉及图片显示技术领域，尤其涉及一种以瀑布流方式显示图片的实现方法及系统。

背景技术

目前在Android终端（例如电视或手机）的显示技术领域中，当一个页面需要呈现大量的图片内容，并且图片数量不固定时，往往通过Android的默认的gridview（网格视图）或是listview（列表视图）来呈现，但这种显示方式非常刻板和单调，而瀑布流的显示方式则生动绚丽得多，在显示时，图片像瀑布一样倾泻而下，这种显示方式活泼动感。

然而，一般的瀑布流的显示方式效率不高，并且其实现过程中会对图片进行限制，其采用定宽的模式，这种显示方式在遇到图片比例不同、大小差异很大时，其缩放比例就会有较大差异，导致图片容易失真。

因此，现有技术还有待于改进和发展。

发明内容

鉴于上述现有技术的不足，本发明的目的在于提供一种以瀑布流方式显示图片的实现方法及系统，旨在解决现有的瀑布流显示方式易使图片失真的问题。

本发明的技术方案如下：

一种以瀑布流方式显示图片的实现方法，其中，包括步骤：

A、从服务端获取需要显示的图片的图片对象列表；

B、选取预先设置好的显示模板，并根据选取的显示模板的属性和图片对象列表中图片的尺寸，计算出每张需要显示的图片在显示模板上对应的坐标；

C、将图片对象列表中的图片对象添加到图片显示列表，并根据图片在显示模板上对应的坐标获取图片加载在屏幕上的位置信息；

D、根据图片显示列表中图片的位置信息，依次将图片显示列表中图片加载到屏幕对应的位置进行显示。

所述的以瀑布流方式显示图片的实现方法，其中，所述步骤A中，所述图片对象列表中包括了图片对象的尺寸及地址信息。

所述的以瀑布流方式显示图片的实现方法，其中，所述步骤B具体包括：

B1、根据需要显示的图片的尺寸以及屏幕大小，预先定制若干个显示模板；

B2、随机选取一显示模板，为每张图片对应显示模板上的一加载框；

B3、根据加载框的位置计算出每张图片在显示模板上的坐标。

所述的以瀑布流方式显示图片的实现方法，其中，所述步骤C具体包括:

C1、定义一图片显示列表；

C2、将图片对象列表中的图片对象添加到图片显示列表；

C3、根据图片显示列表中图片在显示模板上的坐标计算出图片在屏幕上的绝对位置。

所述的以瀑布流方式显示图片的实现方法，其中，所述步骤D具体包括：

D1、根据图片显示列表中图片的位置信息及大小信息，动态生成图片控件；

D2、通过图片的地址信息直接进行图片的异步加载。

一种以瀑布流方式显示图片的实现系统，其中，包括：

图片对象列表获取模块，用于从服务端获取需要显示的图片的图片对象列表；

相对位置计算模块，用于选取预先设置好的显示模板，并根据选取的显示模板的属性和图片对象列表中图片的尺寸，计算出每张需要显示的图片在显示模板上对应的坐标；

绝对位置计算模块，用于将图片对象列表中的图片对象添加到图片显示列表，并根据图片在显示模板上对应的坐标获取图片加载在屏幕上的位置信息；

图片加载模块，用于根据图片显示列表中图片的位置信息，依次将图片显示列表中图片加载到屏幕对应的位置进行显示。

所述的以瀑布流方式显示图片的实现系统，其中，所述相对位置计算模块包括：

显示模板定制单元，用于根据需要显示的图片的尺寸以及屏幕大小，预先定制若干个显示模板；

加载框对应单元，用于随机选取一显示模板，为每张图片对应显示模板上的一加载框；

坐标计算单元，用于根据加载框的位置计算出每张图片在显示模板上的坐标。

所述的以瀑布流方式显示图片的实现系统，其中，所述绝对位置计算模块包括：

图片显示列表定义单元，用于定义一图片显示列表；

图片对象添加单元，用于将图片对象列表中的图片对象添加到图片显示列表；

绝对位置计算单元，用于根据图片显示列表中图片在显示模板上的坐标计算出图片在屏幕上的绝对位置。

所述的以瀑布流方式显示图片的实现系统，其中，所述图片加载模块包括：

图片控件生成单元，用于根据图片显示列表中图片的位置信息及大小信息，动态生成图片控件；

图片加载单元，用于通过图片的地址信息直接进行图片的异步加载。

有益效果：本发明对瀑布流图片实现方式进行改进，采用显示模板的方式来加载图片，根据图片的大小定制合适的显示模板，使得在图片加载时，能够根据图片各自属性（例如大小）和显示模板加载框的的属性（例如大小与位置）来个性化显示图片，从而使图片显示时缩放比例不至于过大或过小，图片不会失真，图片显示也更加自然、生动，提升了用户的使用体验。

附图说明

图1为本发明以瀑布流方式显示图片的实现方法较佳实施例的流程图。

图2为本发明中图片加载的显示模板的结构示意图。

图3为本发明以瀑布流方式显示图片的实现方法另一实施例的流程图。

图4为本发明以瀑布流方式显示图片的实现系统较佳实施例的结构框图。

具体实施方式

本发明提供一种以瀑布流方式显示图片的实现方法及系统，为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

请参阅图1，图1为本发明一种以瀑布流方式显示图片的实现方法较佳实施例的流程图，如图所示，其包括步骤：

S101、从服务端获取需要显示的图片的图片对象列表；

S102、选取预先设置好的显示模板，并根据选取的显示模板的属性和图片对象列表中图片的尺寸，计算出每张需要显示的图片在显示模板上对应的坐标；

S103、将图片对象列表中的图片对象添加到图片显示列表，并根据图片在显示模板上对应的坐标获取图片加载在屏幕上的位置信息；

S104、根据图片显示列表中图片的位置信息，依次将图片显示列表中图片加载到屏幕对应的位置进行显示。

首先，在步骤S101中，移动终端先从服务端获取图片对象列表getImageList，在服务端，其存储有各种类型的图片，不同图片有不同的尺寸，例如200×200或者400×400等等，不同图片也有不同的地址信息，例如url信息。

移动终端获取需要显示的图片对象列表中，包含了图片对象的尺寸及地址信息，即包含了需要显示的图片的尺寸及地址信息。根据这些信息才可设置图片的显示大小，并从相应的地址加载图片。

在步骤S102中，需要预先定制好显示模板，然后计算出需要显示的图片在显示模板上的坐标即在显示模板上的相对位置，具体来说，其包括步骤：

S201、根据需要显示的图片的尺寸以及屏幕大小，预先定制若干个显示模板；

显示模板的规格可根据屏幕的大小来定制，例如将显示模板的规格设置为宽度与屏幕宽度一致，高度为屏幕高度三倍，如图2所示。模板中可根据图片的尺寸设置多个用于加载图片的加载框（1,2,3…42），显示模板中相邻加载框之间的左右距离和上下距离优选设置为定值（图2中加载框的大小及位置仅为示意，在具体设置时，可将相邻加载框之间的左右距离和上下距离设置为定值），这样能更方便计算各个加载框的位置从而获得加载图片的显示位置坐标参数，并且显示的图片也更加自然、协调。显示模板的数量可根据需要显示的图片来设定，例如定制3到5种显示模板，即可以包括多个所述的显示模板。

值得说明的是，图2中的模板的高度并没有限制为特定值，需要根据显示的图片的数量来确定，比如可以设置为屏幕高度的倍数n，n的大小根据图片的数量来确定。图片可以上下滚动，并且未填充，或者加载未成功的空加载框不显示或者显示。

S202、随机选取一显示模板，为每张图片对应显示模板上的一加载框；

此步骤是先从预先定制的模板中随机选取一个显示模板，然后为每张图片对应一个加载框。当需要显示的图片较多时，图片数量超出一个显示模板的可显示数量时还可返回此步骤重新再选取一个显示模板，即通过多个显示模板进行显示。

S203、根据加载框的位置计算出每张图片在显示模板上的坐标。

由于模板中各加载框的位置是确定的，所以根据加载框的位置即可计算出每张图片在显示模板上的相对位置坐标。

在步骤S103中，需先定义一图片显示列表showImageList，然后将图片对象添加到该图片显示列表中，最后计算出需显示的图片在屏幕上的绝对位置，其具体包括：

S301、定义一图片显示列表；

S302、将图片对象列表中的图片对象添加到图片显示列表；添加到图片显示列表中的图片对象含有其尺寸信息和地址信息。

S303、根据图片显示列表中图片在显示模板上的坐标计算出图片在屏幕上的绝对位置。由于显示模板的规格（尺寸）在定制时已经获取，所以显示模板的尺寸与屏幕的尺寸关系也可得到，例如前述的显示模板的尺寸为：宽度与屏幕宽度一致，高度为屏幕高度三倍。那么根据图片在显示模板上的相对位置即可计算出图片在屏幕上的绝对位置，在接下来的步骤中，只需根据绝对位置将图片加载到该绝对位置即可。

在步骤S104中，需根据图片的位置信息，将图片加载到显示模板上进行显示。其具体包括步骤：

S401、根据图片显示列表中图片的位置信息及大小信息，动态生成图片控件；根据此图片控件ImageView可控制图片适合其大小，即对图片进行拉伸、缩放、调整显示位置等等操作。

S402、通过图片的地址信息直接进行图片的异步加载。最后在显示的时候，只需根据图片的url进行图片异步加载到生成的图片控件上，即可实现将图片加载到屏幕上的目的。

下面通过一具体实施例来对本发明的过程进行具体说明。

如图3所示，其包括步骤：

S501、从服务端获取图片对象列表getImageList；

S502、随机选定显示模板，由于系统可以包括多个显示模板，这里可在可选择的范围内，随机选定显示模板；

S503、根据选定的显示模板和图片对象列表，计算出每个图片在显示模板上的对应坐标；

S504、定义或者获取当前图片显示列表showImageList；

S505、将图片对象列表中的图片对象添加到图片显示列表，并获取本次图片的加载的初始位置beginIndex（初始为0）；

S506、获取布局父节点，从初始位置开始，根据图片显示列表中对象的坐标和长宽动态生成ImageView，并显示在屏幕上；

S507、判断是否显示到图片显示列表ShowImageList中的最后一个；具体可通过向上滑屏或者向下移动焦点，并根据滑屏或者焦点的移动加载图片显示列表的图片，并判断屏幕上是否显示到图片显示列表的最后一个，当否时，则转入步骤S502，即再随机选定显示模板，然后再进入到步骤S503重新计算，否则进入到步骤S508。同时在上下滚动时，可将没有显示的图片销毁以释放内存。

S508、判断是否还有网络数据；当是时，则转入到步骤S501，继续获取需要显示的图片，否则进入步骤S509。

S509、结束。

基于上述方法，本发明还提供一种以瀑布流方式显示图片的实现系统，如图4所示，其包括：

图片对象列表获取模块100，用于从服务端获取需要显示的图片的图片对象列表；

相对位置计算模块200，用于选取预先设置好的显示模板，并根据选取的显示模板的属性和图片对象列表中图片的尺寸，计算出每张需要显示的图片在显示模板上对应的坐标；

绝对位置计算模块300，用于将图片对象列表中的图片对象添加到图片显示列表，并根据图片在显示模板上对应的坐标获取图片加载在屏幕上的位置信息；

图片加载模块400，用于根据图片显示列表中图片的位置信息，依次将图片显示列表中图片加载到屏幕对应的位置进行显示。

进一步，所述相对位置计算模块200包括：

显示模板定制单元，用于根据需要显示的图片的尺寸以及屏幕大小，预先定制若干个显示模板；

加载框对应单元，用于随机选取一显示模板，为每张图片对应显示模板上的一加载框；

坐标计算单元，用于根据加载框的位置计算出每张图片在显示模板上的坐标。

进一步，所述绝对位置计算模块包括：

图片显示列表定义单元，用于定义一图片显示列表；

图片对象添加单元，用于将图片对象列表中的图片对象添加到图片显示列表；

绝对位置计算单元，用于根据图片显示列表中图片在显示模板上的坐标计算出图片在屏幕上的绝对位置。

进一步，所述图片加载模块包括：

图片控件生成单元，用于根据图片显示列表中图片的位置信息及大小信息，动态生成图片控件；

图片加载单元，用于通过图片的地址信息直接进行图片的异步加载。

关于上述功能模块的技术细节在前面的方法中已有详述，故不再赘述。

综上所述，本发明对瀑布流图片实现方式进行改进，采用显示模板化的方式来加载图片，根据图片的大小定制合适的显示模板，使得在图片加载时，能够根据图片大小和显示模板加载框的大小来设置图片，从而使图片显示时缩放比例不至于过大或过小，图片不会失真，图片显示也更加自然、生动，提升了用户的使用体验。

应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。

Claims (9)

1.一种以瀑布流方式显示图片的实现方法，其特征在于，包括步骤：

A、从服务端获取需要显示的图片的图片对象列表；

B、选取预先设置好的显示模板，并根据选取的显示模板的属性和图片对象列表中图片的尺寸，计算出每张需要显示的图片在显示模板上对应的坐标；

C、将图片对象列表中的图片对象添加到图片显示列表，并根据图片在显示模板上对应的坐标获取图片加载在屏幕上的位置信息；

D、根据图片显示列表中图片的位置信息，依次将图片显示列表中图片加载到屏幕对应的位置进行显示；

所述步骤D包括：

通过向上滑屏或者向下移动焦点，并根据滑屏或者焦点的移动加载图片显示列表的图片，并判断屏幕上是否显示到图片显示列表的最后一个，在上下滚动时，将没有显示的图片销毁以释放内存。

2.根据权利要求1所述的以瀑布流方式显示图片的实现方法，其特征在于，所述步骤A中，所述图片对象列表中包括了图片对象的尺寸及地址信息。

3.根据权利要求1所述的以瀑布流方式显示图片的实现方法，其特征在于，所述步骤B具体包括：

B1、根据需要显示的图片的尺寸以及屏幕大小，预先定制若干个显示模板；

B2、随机选取一显示模板，为每张图片对应显示模板上的一加载框；

B3、根据加载框的位置计算出每张图片在显示模板上的坐标。

4.根据权利要求1所述的以瀑布流方式显示图片的实现方法，其特征在于，所述步骤C具体包括:

C1、定义一图片显示列表；

C2、将图片对象列表中的图片对象添加到图片显示列表；

C3、根据图片显示列表中图片在显示模板上的坐标计算出图片在屏幕上的绝对位置。

5.根据权利要求1所述的以瀑布流方式显示图片的实现方法，其特征在于，所述步骤D具体包括：

D1、根据图片显示列表中图片的位置信息及大小信息，动态生成图片控件；

D2、通过图片的地址信息直接进行图片的异步加载。

6.一种以瀑布流方式显示图片的实现系统，其特征在于，包括：

图片对象列表获取模块，用于从服务端获取需要显示的图片的图片对象列表；

相对位置计算模块，用于选取预先设置好的显示模板，并根据选取的显示模板的属性和图片对象列表中图片的尺寸，计算出每张需要显示的图片在显示模板上对应的坐标；

绝对位置计算模块，用于将图片对象列表中的图片对象添加到图片显示列表，并根据图片在显示模板上对应的坐标获取图片加载在屏幕上的位置信息；

图片加载模块，用于根据图片显示列表中图片的位置信息，依次将图片显示列表中图片加载到屏幕对应的位置进行显示；

所述图片加载模块通过向上滑屏或者向下移动焦点，并根据滑屏或者焦点的移动加载图片显示列表的图片，并判断屏幕上是否显示到图片显示列表的最后一个，在上下滚动时，将没有显示的图片销毁以释放内存。

7.根据权利要求6所述的以瀑布流方式显示图片的实现系统，其特征在于，所述相对位置计算模块包括：

显示模板定制单元，用于根据需要显示的图片的尺寸以及屏幕大小，预先定制若干个显示模板；

加载框对应单元，用于随机选取一显示模板，为每张图片对应显示模板上的一加载框；

坐标计算单元，用于根据加载框的位置计算出每张图片在显示模板上的坐标。

8.根据权利要求6所述的以瀑布流方式显示图片的实现系统，其特征在于，所述绝对位置计算模块包括：

图片显示列表定义单元，用于定义一图片显示列表；

图片对象添加单元，用于将图片对象列表中的图片对象添加到图片显示列表；

绝对位置计算单元，用于根据图片显示列表中图片在显示模板上的坐标计算出图片在屏幕上的绝对位置。

9.根据权利要求6所述的以瀑布流方式显示图片的实现系统，其特征在于，所述图片加载模块包括：

图片控件生成单元，用于根据图片显示列表中图片的位置信息及大小信息，动态生成图片控件；

图片加载单元，用于通过图片的地址信息直接进行图片的异步加载。