CN103577057A - 一种在终端上横向布局列表部件的方法及装置 - Google Patents

Abstract

本发明公开了一种在终端上横向布局列表部件的方法及装置，包括：在加载列表部件之后，配置横向滚动的打底层；在所述打底层中配置横向排布列表项的列表层；在每个所述列表项的列表子项中加载对应的样式和数据；显示得到的横向布局列表部件。本发明在终端横向显示时，列表部件横向布局，可以充分发挥整个页面的空间，可以显示更多的内容；从代码编写角度来说，横向布局列表部件比纵向布局列表部件的代码实现方便；通过用户个性化设置，可以打造不同样式、风格的横向列表部件，例如古风古色的书简或卷轴等效果，外观新颖，可以显著区别于千篇一律的纵向列表；而且，横向布局的列表部件也符合人们的操作习惯。

Description

一种在终端上横向布局列表部件的方法及装置

技术领域

本发明涉及终端应用显示技术领域，特别是涉及一种在终端上横向布局列表部件的方法及装置。

背景技术

目前，无论在浏览器侧还是手机端的相关的列表部件（list）几乎都是纵向布局，即每个列表的子项都是一行一行纵向罗列在一起，这样虽然符合人们的操作习惯，但是有些千篇一律，容易造成视觉疲劳，而且在开发的过程中，纵向布局的开发过程较为复杂。目前，终端的显示屏幕大多都是长方形，存在横向显示和纵向显示的功能。横向显示时，相关的列表部件（list）仍然是纵向布局，即每个列表的子项都是一行一行纵向排列在一起，列表子项的滚动方向依然是上下方向，因此，显示的内容较少。

例如，手机上的列表布局（如电话本）均为纵向模式，只适用于纵屏（竖屏）显示状态，如今的智能手机大都支持横屏/竖屏模式，但是如果把手机旋转90°，变为竖屏模式，设想一下，如果List还是以纵向布局出现，显示的信息量明显减少。

因此，一种既符合人们的操作习惯，又可以丰富当前的列表布局，而且易于操作的列表部件，成为了当前的一种设计需求。

发明内容

本发明要解决的技术问题是提供一种在终端上横向布局列表部件的方法及装置，用以解决现有技术需求一种新的列表部件的问题。

为解决上述技术问题，一方面，本发明提供一种在终端上横向布局列表部件的方法，包括：

在加载列表部件之后，配置横向滚动的打底层；在所述打底层中配置横向排布列表项的列表层；在每个所述列表项的列表子项中加载对应的样式和数据；

显示得到的横向布局列表部件。

进一步，在显示得到的横向布局列表部件之前，还包括：

将每个列表子项需要实现的功能、事件效果、动画效果与对应的列表子项进行绑定。

进一步，当所述列表子项被点击后，延伸该列表子项，覆盖所述终端的整个屏幕。

进一步，在加载列表部件之后，还包括：

判断用户是否上传了个性化样式参数，如果是，则配置所述个性化样式参数，得到列表部件的加载样式；如果否，则以默认的参数进行配置，得到列表部件的加载样式。

进一步，在加载列表部件之前，还包括：

判断所述终端显示是否进行横屏显示；如果是，则加载列表部件，如果否，则通过纵屏模式进行加载显示，流程结束。

另一方面，本发明还提供一种在终端上横向布局列表部件的装置，包括：

处理模块，用于在加载列表部件之后，配置横向滚动的打底层；在所述打底层中配置横向排布列表项的列表层；在每个所述列表项的列表子项中加载对应的样式和数据；

显示模块，用于显示得到的横向布局列表部件。

进一步，所述装置还包括：

绑定模块，用于在显示得到的横向布局列表部件之前，将每个列表子项需要实现的功能、事件效果、动画效果与对应的列表子项进行绑定。

进一步，所述装置还包括：

列表子项处理模块，用于当所述列表子项被点击后，延伸该列表子项，覆盖所述终端的整个屏幕。

进一步，所述装置还包括：

配置模块，用于在加载列表部件之后，判断用户是否上传了个性化样式参数，如果是，则配置所述个性化样式参数，得到列表部件的加载样式；如果否，则以默认的参数进行配置，得到列表部件的加载样式。

进一步，所述装置还包括：

判断模块，用于在加载列表部件之前，判断所述终端显示是否进行横屏显示；如果是，则加载列表部件，如果否，则通过纵屏模式进行加载显示。

本发明有益效果如下：

本发明实施例在终端横向显示时，列表部件横向布局，可以充分发挥整个页面的空间，可以显示更多的内容；从代码编写角度来说，横向布局列表部件比纵向布局列表部件的代码实现方便；通过用户个性化设置，可以打造不同样式、风格的横向列表部件，例如古风古色的书简或卷轴等效果，外观新颖，可以显著区别于千篇一律的纵向列表；而且，横向布局的列表部件也符合人们的操作习惯。

附图说明

图1是本发明实施例中一种在终端上横向布局列表部件的方法的流程图；

图2是本发明实施例中一种在终端上横向布局列表部件的装置的结构示意图；

图3是本发明实施例中另一种在终端上横向布局列表部件的装置的结构示意图；

图4是终端采用横向布局列表与纵向布局列表的显示对比图。

具体实施方式

为了解决现有技术需求一种新的列表部件的问题，本发明提供了一种在终端上横向布局列表部件的方法及装置，以下结合附图以及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不限定本发明。

本实施例中的终端是指具有横向显示功能的终端，例如智能手机、平板电脑等设备。终端的列表部件横屏显示是指列表在终端屏幕上左右排列进行显示，通过左右滚动控制显示。终端的列表部件纵屏显示是指列表在终端屏幕上上下排列进行显示，通过上下滚动控制显示。

如图1所示，本发明实施例涉及一种在终端上横向布局列表部件的方法，包括：

步骤S101，在加载列表部件之后，配置横向滚动的打底层；在所述打底层中配置横向排布列表项的列表层；在每个所述列表项的列表子项中加载对应的样式和数据；

本步骤中，列表部件被需要的应用加载，例如，通讯录加载列表部件。

本步骤中，对列表部件进行绘制，即首先绘制出打底层；打底层：列表的最底部显示层，是列表要绘制在的最底层布局，当列表项超出界限时，可以根据列表项的长度进行横向的滚动。然后根据配置在打底层中绘制出列表层；列表层为要加载的列表项通过功能处理，进行横向排列，即：将列表的每个子项进行处理，横向排布。同时点击每一列表子项，如果有数据内容，则进行弹性缩放，显示内容。子项层负责显示处理每个子项（ListItem）中的显示和布局，即为列表项放开后，里面要加载布局项，根据上传的个性化样式参数进行处理和控制（处理每个子项要加载的样式以及要显示数据）。当绘制完列表层后，会根据每个子项层进行具体的样式和数据加载。例如，小说需要加载的为文字文本，而电话本的名片夹可能需要加载图片及其他信息。

步骤S102，显示得到的横向布局列表部件。

本步骤中，当横向列表部件的每个部分都绘制和加载完毕后，就会完整的显现出来。

另外，当打底层、列表层、子项层都基本配置完毕后，为了达到更好的技术效果，还需要将要实现的功能，事件效果，动画效果与每个相应的对象（对应的列表子项）进行绑定。例如，点击一个子项，可以延伸该子项从而覆盖整个屏幕，这就是一个与子项绑定的事件；另外，同时是动态的延伸，还是一瞬间的就覆盖到整个屏幕，这就涉及到了动画效果的绑定。点击某个列表子项以后(ListItem)，可以对该项进行扩展和收缩，在收缩过程中，进行数据的加载。

上述方法中，为了显示列表部件的个性化，在加载列表部件之后，还需要判断应用是否需要个性化列表部件，即，判断是否上传有个性化样式参数，如果传入参数，则在列表部件里，根据个性化样式参数进行相关的参数替换和配置；如果没有传入个性化样式参数，则在列表部件中，会用默认的参数和数据进行配置。其中默认的参数和数据是指列表部件设计者或开发者在列表部件中自带的参数和数据。根据前置的功能，逻辑处理，并结合传入的参数、数据，进行进一步的功能处理，来达到用户自定义列表部件的目的。

另外，目前终端通常具有横向显示和纵向显示的功能，为了兼容二者，上述步骤中，还需要判断终端的显示模式，首先会判断当前的终端显示模式是横屏模式还是纵屏模式，如果是横屏模式，则加载列表部件，进入步骤S101，采用横版布局列表部件进行显示；如果是纵屏模式，则采用传统的纵向列表模式进行加载。而且，每当终端进行旋转，导致当前屏幕模式进行切换时，会重新判断当前屏幕的显示模式。

如图2所示，本发明实施例还涉及一种实现上述方法的在终端上横向布局列表部件的装置，包括：

处理模块201，用于在加载列表部件之后，配置横向滚动的打底层；在所述打底层中配置横向排布列表项的列表层；在每个所述列表项的列表子项中加载对应的样式和数据。处理模块201还用于对要显示的列表部件进行功能和逻辑上的处理，保证列表可以横向排布，可以响应弹性伸缩等动态效果，同时可以根据上层传来的参数进行个性化配置。其中，处理模块201对要显示的列表部件进行功能和逻辑上的处理，与现有的纵向显示进行的处理相同，只是进行相应的坐标变换，本实施例不再详细描述。

显示模块202，用于显示得到的横向布局列表部件。

为达更佳技术效果，如图3所示，本发明实施例还涉及一种实现上述方法的在终端上横向布局列表部件的装置，包括：

处理模块304，用于在加载列表部件之后，配置横向滚动的打底层；在所述打底层中配置横向排布列表项的列表层；在每个所述列表项的列表子项中加载对应的样式和数据。处理模块304还用于对要显示的列表部件进行功能和逻辑上的处理，保证列表可以横向排布，可以响应弹性伸缩等动态效果，同时可以根据上层传来的参数进行个性化配置。

显示模块306，用于显示得到的横向布局列表部件；另外还用于进行核心代码的计算和处理，同时根据配置模块传来的各种参数，来对列表进行个性化配置。

绑定模块303，用于在显示得到的横向布局列表部件之前，将每个列表子项需要实现的功能、事件效果、动画效果与对应的列表子项进行绑定。

列表子项处理模块305，用于点击所述列表子项，延伸该列表子项，覆盖所述终端的整个屏幕。

配置模块302，用于在加载列表部件之后，判断用户是否上传了个性化样式参数，如果是，则配置所述个性化样式参数，得到列表部件的加载样式；如果否，则以默认的参数进行配置，得到列表部件的加载样式。配置模块302就是给上层开发者或者用户的一套接口，用户可以通过接口，一方面来对列表样式或者效果进行配置，例如，可以对列表的样式（比如颜色、尺寸、边框、形状等显示属性）和特效（比如列表子项的伸缩效果等动态属性）进行配置；另一方面可以来给列表的每个列表子项加载数据。

判断模块301，用于在加载列表部件之前，判断所述终端显示是否进行横屏显示；如果是，则加载列表部件，如果否，则通过纵屏模式进行加载显示。

由于本发明实施例提供的是一种横向多级列表的部件，所以不仅包含列表布局，及与纵向常规列表布局之间的切换，也包含了横向列表的设计方法和思路，可以作为同种横向列表的模板存在。同时本发明可以但不局限于用javascript实现，例如在Android上可以用java实现，ios上可以用Objective-C来实现等。以javascript语言为例。

由上述实施例可以看出，如图4所示，本发明实施例在终端横向显示时，列表部件横向布局，可以充分发挥整个页面的空间，可以显示更多的内容；从代码编写角度来说，横向布局列表部件比纵向布局列表部件的代码实现方便；通过用户个性化设置，可以打造不同样式、风格的横向列表部件，例如古风古色的书简或卷轴等效果，外观新颖，可以显著区别于千篇一律的纵向列表；而且，横向布局的列表部件也符合人们的操作习惯。

尽管为示例目的，已经公开了本发明的优选实施例，本领域的技术人员将意识到各种改进、增加和取代也是可能的，因此，本发明的范围应当不限于上述实施例。

Claims (10)

1.一种在终端上横向布局列表部件的方法，其特征在于，包括：

在加载列表部件之后，配置横向滚动的打底层；在所述打底层中配置横向排布列表项的列表层；在每个所述列表项的列表子项中加载对应的样式和数据；

显示得到的横向布局列表部件。

2.如权利要求1所述的在终端上横向布局列表部件的方法，其特征在于，在显示得到的横向布局列表部件之前，还包括：

将每个列表子项需要实现的功能、事件效果、动画效果与对应的列表子项进行绑定。

3.如权利要求2所述的在终端上横向布局列表部件的方法，其特征在于，当所述列表子项被点击后，延伸该列表子项，覆盖所述终端的整个屏幕。

4.如权利要求1所述的在终端上横向布局列表部件的方法，其特征在于，在加载列表部件之后，还包括：

判断用户是否上传了个性化样式参数，如果是，则配置所述个性化样式参数，得到列表部件的加载样式；如果否，则以默认的参数进行配置，得到列表部件的加载样式。

5.如权利要求1~4任一项所述的在终端上横向布局列表部件的方法，其特征在于，在加载列表部件之前，还包括：

判断所述终端显示是否进行横屏显示；如果是，则加载列表部件，如果否，则通过纵屏模式进行加载显示，流程结束。

6.一种在终端上横向布局列表部件的装置，其特征在于，包括：

处理模块，用于在加载列表部件之后，配置横向滚动的打底层；在所述打底层中配置横向排布列表项的列表层；在每个所述列表项的列表子项中加载对应的样式和数据；

显示模块，用于显示得到的横向布局列表部件。

7.如权利要求6所述的在终端上横向布局列表部件的装置，其特征在于，所述装置还包括：

绑定模块，用于在显示得到的横向布局列表部件之前，将每个列表子项需要实现的功能、事件效果、动画效果与对应的列表子项进行绑定。

8.如权利要求7所述的在终端上横向布局列表部件的装置，其特征在于，所述装置还包括：

列表子项处理模块，用于当所述列表子项被点击后，延伸该列表子项，覆盖所述终端的整个屏幕。

9.如权利要求6所述的在终端上横向布局列表部件的装置，其特征在于，所述装置还包括：

配置模块，用于在加载列表部件之后，判断用户是否上传了个性化样式参数，如果是，则配置所述个性化样式参数，得到列表部件的加载样式；如果否，则以默认的参数进行配置，得到列表部件的加载样式。

10.如权利要求6~9任一项所述的在终端上横向布局列表部件的装置，其特征在于，所述装置还包括：

判断模块，用于在加载列表部件之前，判断所述终端显示是否进行横屏显示；如果是，则加载列表部件，如果否，则通过纵屏模式进行加载显示。

Images