[发明专利]列表页面布局方法及计算设备

说明书

本发明公开了一种列表页面的布局方法及计算设备。该方法包括：遍历待布局的页面元素块；获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行；根据所述最小布局坐标值和所述目标列/行，确定所述待布局的页面元素块的布局位置；根据所述待布局的页面元素块的布局位置，在所述目标列/行对所述待布局的页面元素块进行布局。本发明实施例每一列/行的元素可以有序的错位排列，形成间隙整齐的布局呈现，改善了显示效果；能够有效、合理利用屏幕尺寸，使得内容简单的页面元素块用较小的屏幕区域来承载呈现，不必非要统一使用通屏的大区域承载呈现，提升了屏幕内容曝光的利用率。

技术领域

本发明涉及移动应用技术领域，具体涉及一种列表页面布局方法及计算设备。

背景技术

列表页面布局是指对页面中的元素块(cell)依照列表形式进行排布和设计。现有技术中，IOS平台为列表页面布局提供了系统框架“UICollectionView.framework”，该框架可以通过配置其“UICollectionViewFlowLayout”实现瀑布流布局。

图1示出了现有技术中IOS系统框架实现的竖向滚动的列表页面布局的示意图，图2示出了现有技术中IOS系统框架实现的横向滚动的列表页面布局的示意图。如图1和图2所示，IOS的上述系统框架的原生特性是将各个页面元素块进行通屏显示，所谓通屏显示是指cell的显示区域占据屏幕的一侧到屏幕另一侧的整体区域。在图1中，页面元素块11和13是宽度较宽的cell，页面元素块12、14、15是宽度较窄的cell，由于IOS的原生特性是通屏显示，每一个页面元素块都独占自身高度的屏幕区间，导致宽度较窄的页面元素块12、14、15的右侧均有较大的留白区域。同样的，在图2中，页面元素块21和23是高度较高的cell，页面元素块22、24、25是高度较低的cell，页面元素块22、24、25的下侧均有较大的留白区域。

因此，现有技术的列表页面布局方式不能合理利用屏幕尺寸，影响了屏幕内容曝光的利用率，也影响了页面显示的效果。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的列表页面的布局方法及计算设备。

根据本发明的一个方面，提供了一种列表页面的布局方法，包括：

遍历待布局的页面元素块；

获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行；

根据所述最小布局坐标值和所述目标列/行，确定所述待布局的页面元素块的布局位置；

根据所述待布局的页面元素块的布局位置，在所述目标列/行对所述待布局的页面元素块进行布局。

根据本发明的另一方面，提供了一种计算设备，包括：处理器、存储器、通信接口和通信总线，处理器、存储器和通信接口通过通信总线完成相互间的通信；

存储器用于存放至少一可执行指令，可执行指令使所述处理器具体执行以下操作：

遍历待布局的页面元素块；

获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行；

根据所述最小布局坐标值和所述目标列/行，确定所述待布局的页面元素块的布局位置；

根据所述待布局的页面元素块的布局位置，在所述目标列/行对所述待布局的页面元素块进行布局。

根据本发明的又一方面，提供了一种计算机存储介质，存储介质中存储有至少一可执行指令，可执行指令使处理器执行如上述列表页面的布局对应的操作。