CN113867862B - 列表页面布局方法及计算设备 - Google Patents
列表页面布局方法及计算设备 Download PDFInfo
- Publication number
- CN113867862B CN113867862B CN202111129266.2A CN202111129266A CN113867862B CN 113867862 B CN113867862 B CN 113867862B CN 202111129266 A CN202111129266 A CN 202111129266A CN 113867862 B CN113867862 B CN 113867862B
- Authority
- CN
- China
- Prior art keywords
- page element
- laid out
- layout
- element block
- column
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 45
- 238000004891 communication Methods 0.000 claims description 16
- 230000000694 effects Effects 0.000 abstract description 13
- 238000010586 diagram Methods 0.000 description 14
- 238000004590 computer program Methods 0.000 description 2
- 238000010276 construction Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000011022 operating instruction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Document Processing Apparatus (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种列表页面的布局方法及计算设备。该方法包括：遍历待布局的页面元素块；获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行；根据所述最小布局坐标值和所述目标列/行，确定所述待布局的页面元素块的布局位置；根据所述待布局的页面元素块的布局位置，在所述目标列/行对所述待布局的页面元素块进行布局。本发明实施例每一列/行的元素可以有序的错位排列，形成间隙整齐的布局呈现，改善了显示效果；能够有效、合理利用屏幕尺寸，使得内容简单的页面元素块用较小的屏幕区域来承载呈现，不必非要统一使用通屏的大区域承载呈现，提升了屏幕内容曝光的利用率。
Description
技术领域
本发明涉及移动应用技术领域，具体涉及一种列表页面布局方法及计算设备。
背景技术
列表页面布局是指对页面中的元素块(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的下侧均有较大的留白区域。
因此，现有技术的列表页面布局方式不能合理利用屏幕尺寸，影响了屏幕内容曝光的利用率，也影响了页面显示的效果。
发明内容
鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的列表页面的布局方法及计算设备。
根据本发明的一个方面，提供了一种列表页面的布局方法，包括：
遍历待布局的页面元素块；
获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行；
根据所述最小布局坐标值和所述目标列/行，确定所述待布局的页面元素块的布局位置；
根据所述待布局的页面元素块的布局位置，在所述目标列/行对所述待布局的页面元素块进行布局。
根据本发明的另一方面，提供了一种计算设备，包括：处理器、存储器、通信接口和通信总线，处理器、存储器和通信接口通过通信总线完成相互间的通信；
存储器用于存放至少一可执行指令，可执行指令使所述处理器具体执行以下操作：
遍历待布局的页面元素块；
获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行；
根据所述最小布局坐标值和所述目标列/行，确定所述待布局的页面元素块的布局位置；
根据所述待布局的页面元素块的布局位置，在所述目标列/行对所述待布局的页面元素块进行布局。
根据本发明的又一方面，提供了一种计算机存储介质，存储介质中存储有至少一可执行指令，可执行指令使处理器执行如上述列表页面的布局对应的操作。
本发明提供的方案，在对任一待布局的页面元素块进行布局之前，先获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行，根据最小布局坐标值和目标列/行，确定待布局的页面元素块的布局位置。本发明实施例每一列/行的元素可以有序的错位排列，形成间隙整齐的布局呈现，改善了显示效果；能够有效、合理利用屏幕尺寸，使得内容简单的页面元素块用较小的屏幕区域来承载呈现，不必非要统一使用通屏的大区域承载呈现，提升了屏幕内容曝光的利用率。
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1示出了现有技术中IOS系统框架实现的竖向滚动的列表页面布局的示意图；
图2示出了现有技术中IOS系统框架实现的横向滚动的列表页面布局的示意图；
图3示出了根据本发明一个实施例的列表页面的布局方法的流程示意图；
图4示出了根据本发明另一个实施例的列表页面的布局方法的流程示意图；
图5示出了本发明实施例中列表页面的按列布局效果的示意图；
图6示出了本发明实施例中列表页面的按行布局效果的示意图；
图7示出了根据本发明一个实施例的计算设备的结构示意图。
具体实施方式
下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。
由于现有技术中IOS系统框架的原生特性是将各个页面元素块进行通屏显示，造成页面中出现不同范围的留白区域。本发明实施例为了克服现有技术页面布局的缺陷，通过自定义的布局算法实现列表页面的多列/多行的页面布局。在应用于IOS系统中时，该自定义的布局算法继承布局基类“UICollectionViewLayout”，既实现系统“UICollectionViewFlowLayout”的特性，又实现了每一列/行的元素可以有序的错位排列，形成间隙整齐的布局呈现。
图3示出了根据本发明一个实施例的列表页面的布局方法的流程示意图。本方法用于对包含多个页面元素块的列表页面进行布局，其中列表页面具体为应用程序界面、H5页面等，可应用于电脑、手机、平板电脑等终端设备。如图1所示，该方法包括以下步骤：
步骤301，遍历待布局的页面元素块。
针对包含多个页面元素块的列表页面，遍历待布局的页面元素块。一种可选的方式中，列表页面中各个页面元素块具有预先设置的布局先后顺序，则本步骤具体为：依据页面元素块的布局先后顺序，依次遍历待布局的页面元素块。在另一种可选的方式中，列表页面中各个页面元素块不具有预先设置的布局先后顺序，则本步骤具体为：随机遍历待布局的页面元素块。
每个页面元素块对应为一组数据，用于记录页面元素块的布局参数以及每个页面元素块内页面元素内容、属性，其中页面元素块的布局参数包含：页面元素块的整体尺寸信息(包含页面元素块的整体高度和宽度等)以及块内各个页面元素的尺寸信息和相对位置数据。可选地，在布局过程中，如果任一页面元素块布局完成，可将该页面元素块的数据清空。这样，在遍历待布局的页面元素块时，可遍历各组数据，判断数据是否有值，如果无值，则遍历下一组数据；如果有值，则确定为该数据为待布局的页面元素块的数据。
步骤302，获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行。
为了实现错位排列、间隙整齐的布局呈现，在对任一待布局的页面元素块进行布局之前，本实施例先获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行。具体地，获取各列/行最后一个已布局的页面元素块在布局方向上的布局坐标值，选取各列/行布局坐标值的最小值，并确定最小值对应的目标列/行。
以竖向滚动的列表页面为例，页面元素块需进行多列布局，布局方向为竖向朝下，设屏幕竖向朝下为y轴正方向，本步骤获取各列已布局的页面元素块y轴坐标的最小值，取y轴坐标的最小值对应的列为目标列。
以横向滚动的列表页面为例，页面元素块需进行多行布局，布局方向为横向朝右，设屏幕横向朝右为x轴正方向，本步骤获取各行已布局的页面元素块x轴坐标的最小值，取x轴坐标的最小值对应的行为目标行。
如果存在多列或多行在布局方向上的最小布局坐标值相同，则可以在该多列或多行中任选一列/行作为目标列/行。
步骤303，根据最小布局坐标值和目标列/行，确定待布局的页面元素块的布局位置。
在目标列/行中，已布局的页面元素块在布局方向上具有最小布局坐标值，表明在当前情况下目标列/行相对于其它列/行具有留白区域，为了覆盖该留白区域，本实施例选择目标列/行的对应位置作为待布局的页面元素块的布局位置。例如，在最小布局坐标值上加上预先设置的间隙值，作为待布局的页面元素块的起始布局位置。其中间隙值为相邻页面元素块之间的间隙值。
步骤304，根据待布局的页面元素块的布局位置，在目标列/行对待布局的页面元素块进行布局。
本发明上述实施例提供的方案，在对任一待布局的页面元素块进行布局之前，先获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行，根据最小布局坐标值和目标列/行，确定待布局的页面元素块的布局位置。本发明实施例每一列/行的元素可以有序的错位排列，形成间隙整齐的布局呈现，改善了显示效果；能够有效、合理利用屏幕尺寸，使得内容简单的页面元素块用较小的屏幕区域来承载呈现，不必非要统一使用通屏的大区域承载呈现，提升了屏幕内容曝光的利用率。
图4示出了根据本发明另一个实施例的列表页面的布局方法的流程示意图。本实施例以竖向滚动的列表页面为例进行说明，呈现多列页面布局的效果。如图4所示，该方法包括以下步骤：
步骤400，预先配置列表页面的总列数，根据总列数计算各列的最大宽度值，以及设置任一列内相邻页面元素块之间的间隙值以及列边距值。
在页面布局之前，预先配置列表页面的总列数，该总列数表明页面以几列呈现页面元素块。可选地，本实施例可根据终端设备的屏幕尺寸和/或横竖屏显示模式，预先配置列表页面的总列数。具体地，获取终端设备的设备硬件信息，如：设备型号，根据设备硬件信息查询得到屏幕尺寸。另外，考虑到屏幕横竖屏展示时屏幕宽度的不同，结合屏幕尺寸和横竖屏显示模式来确定列表页面的总列数，可以最大限度的利用屏幕区域以显示更多的内容。
在配置了列表页面的总列数之后，根据总列数计算各列的最大宽度值，该最大宽度值限定了在一列显示的页面元素块的最大宽度。另外，还需设置任一列内相邻页面元素块之间的间隙值以及列边距值。其中间隙值限定了上下相邻的页面元素块中位置在上的页面元素块的下边缘与位置在下的页面元素块的上边缘之间的距离；列边距值限定了相邻两列页面元素块之间的距离以及页面元素块与屏幕边缘之间的边距。
步骤401，遍历待布局的页面元素块。
每个页面元素块对应为一组数据，用于记录页面元素块的布局参数以及每个页面元素块内页面元素内容、属性，其中页面元素块的布局参数包含：页面元素块的整体尺寸信息(包含页面元素块的整体高度和宽度等)以及块内各个页面元素的尺寸信息和相对位置数据。可选地，在布局过程中，如果任一页面元素块布局完成，可将该页面元素块的数据清空。这样，在遍历待布局的页面元素块时，可遍历各组数据，判断数据是否有值，如果无值，则遍历下一组数据；如果有值，则确定为该数据为待布局的页面元素块的数据。
一种可选的方式中，列表页面中各个页面元素块具有预先设置的布局先后顺序，则本步骤具体为：依据页面元素块的布局先后顺序，依次遍历待布局的页面元素块。在另一种可选的方式中，列表页面中各个页面元素块不具有预先设置的布局先后顺序，则本步骤具体为：随机遍历待布局的页面元素块。
步骤402，根据待布局的页面元素块的布局参数，判断待布局的页面元素块是否需要通屏显示，若是，则执行步骤403；若否，则执行步骤404。
本实施例不仅支持部分页面元素块的按列布局，还可兼容支持部分页面元素块的通屏布局，也即，在同一列表页面中，某些页面元素块以按列布局方式呈现，某些页面元素块以通屏布局方式呈现。针对每一待布局的页面元素块，判断该页面元素块是否需要通屏显示。
在一种可选的方式中，页面元素块的布局参数可包含是否通屏显示的标记参数，在布局设计时，设计人员可根据页面元素块的内容来设定该是否通屏显示的标记，若标记参数为是，则布局过程中判定该页面元素块需要通屏显示；若标记参数为否，则布局过程中判定该页面元素块不需要通屏显示。
在另一种可选的方式中，根据待布局的页面元素块的布局参数，判断待布局的页面元素块的宽度是否大于上述步骤400确定的各列的最大宽度值，若是，则判定待布局的页面元素块需要通屏显示；若否，则判定待布局的页面元素块不需要通屏显示。该方式可以根据页面元素块的宽度自适应地选择相应的布局方式，如果页面元素块的宽度较大(大于最大宽度值)，则选择通屏布局方式；如果页面元素块的宽度较小(小于或等于最大宽度值)，则选择按列布局方式。
步骤403，获取各列已布局的页面元素块在布局方向上的最大布局坐标值，根据最大布局坐标值，确定待布局的页面元素块的布局位置，对页面元素块进行通屏显示布局。
图5示出了本发明实施例中列表页面的按列布局效果的示意图。如图5所示，该列表页面为竖向滚动的列表页面，布局方向为竖向朝下，设屏幕竖向朝下为y轴正方向，屏幕横向朝右为x轴正方向。列表页面包含以按列布局方式呈现的页面元素块52、53、55、56、57、58以及以通屏布局方式呈现的页面元素块51、54。
由于页面元素块51是列表页面的第一个页面元素块，在布局页面元素块51时，各列已布局的页面元素块在布局方向上的最大布局坐标值视为0，直接根据页面元素块与屏幕边缘之间的边距设置，确定页面元素块51的布局起始位置(例如，51左上角的坐标)，实现对页面元素块51进行通屏显示布局。
在布局页面元素块54时，各列已布局的页面元素块在布局方向上的最大布局坐标值为y1，在y1基础上加上预先设置的间隙值得到页面元素块54的布局起始位置y坐标值，页面元素块54的布局起始位置x坐标值与已布局的页面元素块51的布局起始位置x坐标值相同，实现对页面元素块54进行通屏显示布局。
本发明实施例中，对页面元素块进行通屏显示布局可以通过调用IOS的通屏展示的接口实现，也可以自定义通屏展示的算法，调用自定义通屏展示的算法来实现，本发明对此不作限制。
步骤404，获取各列已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列。
步骤405，根据最小布局坐标值和目标列，确定待布局的页面元素块的布局位置。
步骤406，根据待布局的页面元素块的布局位置，在目标列对待布局的页面元素块进行布局。
图5的列表页面分两列进行布局，称为左列和右列。以图5中的页面元素块57的布局为例，分别获取各列最后一个已布局的页面元素块，左列为页面元素块55，右列为页面元素块56，这两个页面元素块55和56在布局方向上的布局坐标值为y2和y3，选取其中的最小值，即y2，确定最小值对应的目标列为右列。在y2基础上加上预先设置的间隙值得到页面元素块57的布局起始位置y坐标值，页面元素块57的布局起始位置x坐标值与已布局的位于右列的页面元素块的布局起始位置x坐标值相同，实现对页面元素块57进行通屏显示布局。
应当理解的是，按列布局方式呈现的页面元素块的布局起始位置x坐标值与页面元素块所在列有关，在上述步骤400中，在计算得到各列的最大宽度值之后，可以根据最大宽度值和列边距值预先确定各列页面元素块的布局起始位置x坐标值。
上述步骤401至步骤406为循环执行的步骤，直至列表页面的所有页面元素块均布局完成。
进一步的，在实际应用过程中，存在某种页面元素块，其宽度小于列的最大宽度值，但高度过高，这种页面元素块可以按列布局，但如果该种页面元素块的下一个页面元素块需要通屏布局，则会造成页面中出现大范围的留白区域。为了避免出现这样的问题，针对这种页面元素块，本发明实施例可采取拆分处理的方式，将其拆分为高度在预设阈值以内的小块，分别对拆分处理后的小块进行按列布局。具体实施方式为，在判断出待布局的页面元素块不需要通屏显示之后，在步骤404之前，本发明实施例还可以包括：判断待布局的页面元素块在布局方向上的长度(对于竖向滚动的列表页面，该长度为高度；对于横向滚动的列表页面，该长度为宽度)是否大于预设阈值；若是，则将待布局的页面元素块进行拆分处理；而后，针对拆分处理得到的每个页面元素块，执行步骤404至步骤406对其进行布局。
本发明上述实施例提供的方案，在对任一待布局的页面元素块进行布局之前，先判断该页面元素块是否需要通屏显示，若是，则对其进行通屏布局；若否，则对其进行按列布局。本发明实施例每一列的元素可以有序的错位排列，形成间隙整齐的布局呈现，改善了显示效果；能够有效、合理利用屏幕尺寸，使得内容简单的页面元素块用较小的屏幕区域来承载呈现，不必非要统一使用通屏的大区域承载呈现，提升了屏幕内容曝光的利用率。而且兼容通屏布局和按列布局两种方式，既改善了显示效果，又满足了内容丰富的页面元素块集中展示内容的需求。
图6示出了本发明实施例中列表页面的按行布局效果的示意图。该列表页面为横向滚动的列表页面，布局方向为横向朝右。列表页面包含以按行布局方式呈现的页面元素块62、63、65、66、67以及以通屏布局方式呈现的页面元素块61、64。在图6对应的实施例中，包括如下步骤：
预先配置列表页面的总行数，根据总行数计算各行的最大高度值，以及设置任一行内相邻页面元素块之间的间隙值以及行边距值；其中，根据终端设备的屏幕尺寸和/或横竖屏显示模式，预先配置列表页面的总行数；
遍历待布局的页面元素块；
根据待布局的页面元素块的布局参数，判断待布局的页面元素块是否需要通屏显示，若是，获取各行已布局的页面元素块在布局方向上的最大布局坐标值，根据最大布局坐标值，确定待布局的页面元素块的布局位置，对页面元素块进行通屏显示布局；若否，获取各行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标行，根据最小布局坐标值和目标列，确定待布局的页面元素块的布局位置，根据待布局的页面元素块的布局位置，在目标行对待布局的页面元素块进行布局。其中，根据待布局的页面元素块的布局参数，判断待布局的页面元素块的高度是否大于各行的最大高度值，若是，则判定待布局的页面元素块需要通屏显示；若否，则判定待布局的页面元素块不需要通屏显示。
本实施例按行布局的方式与上述按列布局的方式类似，具体过程不再赘述。
本发明上述实施例提供的方案，在对任一待布局的页面元素块进行布局之前，先判断该页面元素块是否需要通屏显示，若是，则对其进行通屏布局；若否，则对其进行按行布局。本发明实施例每一行的元素可以有序的错位排列，形成间隙整齐的布局呈现，改善了显示效果；能够有效、合理利用屏幕尺寸，使得内容简单的页面元素块用较小的屏幕区域来承载呈现，不必非要统一使用通屏的大区域承载呈现，提升了屏幕内容曝光的利用率。而且兼容通屏布局和按行布局两种方式，既改善了显示效果，又满足了内容丰富的页面元素块集中展示内容的需求。
本发明实施例还提供了一种非易失性计算机存储介质，计算机存储介质存储有至少一可执行指令，该计算机可执行指令可执行上述任意方法实施例中的列表页面的布局方法。
可执行指令具体可以用于使得处理器执行以下操作：
遍历待布局的页面元素块；
获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行；
根据所述最小布局坐标值和所述目标列/行，确定所述待布局的页面元素块的布局位置；
根据所述待布局的页面元素块的布局位置，在所述目标列/行对所述待布局的页面元素块进行布局。
在一种可选的实施方式中，所述可执行指令进一步使所述处理器执行以下操作：
根据所述待布局的页面元素块的布局参数，判断所述待布局的页面元素块是否需要通屏显示；
若是，则获取各列/行已布局的页面元素块在布局方向上的最大布局坐标值，根据所述最大布局坐标值，确定所述待布局的页面元素块的布局位置，对所述待布局的页面元素块进行通屏显示布局；
若否，则执行所述获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行的步骤。
在一种可选的实施方式中，所述可执行指令进一步使所述处理器执行以下操作：
预先配置列表页面的总列/行数；
根据总列数，计算各列的最大宽度值；或者，根据总行数，计算各行的最大高度值。
在一种可选的实施方式中，所述可执行指令进一步使所述处理器执行以下操作：
根据终端设备的屏幕尺寸和/或横竖屏显示模式，预先配置列表页面的总列/行数。
在一种可选的实施方式中，所述可执行指令进一步使所述处理器执行以下操作：
设置任一列/行内相邻页面元素块之间的间隙值以及列/行边距值。
在一种可选的实施方式中，所述可执行指令进一步使所述处理器执行以下操作：
根据所述待布局的页面元素块的布局参数，判断所述待布局的页面元素块的宽度是否大于所述各列的最大宽度值，若是，则判定所述待布局的页面元素块需要通屏显示；若否，则判定所述待布局的页面元素块不需要通屏显示；
或者，根据所述待布局的页面元素块的布局参数，判断所述待布局的页面元素块的高度是否大于所述各列的最大高度值，若是，则判定所述待布局的页面元素块需要通屏显示；若否，则判定所述待布局的页面元素块不需要通屏显示。
在一种可选的实施方式中，所述可执行指令进一步使所述处理器执行以下操作：
判断所述待布局的页面元素块在布局方向上的长度是否大于预设阈值；
若是，则将所述待布局的页面元素块进行拆分处理。
图7示出了根据本发明一个实施例的计算设备的结构示意图，本发明具体实施例并不对计算设备的具体实现做限定。
如图7所示，该计算设备可以包括：处理器(processor)702、通信接口(Communications Interface)704、存储器(memory)706、以及通信总线708。
其中：处理器702、通信接口704、以及存储器706通过通信总线708完成相互间的通信。
通信接口704，用于与其它设备比如客户端或其它服务器等的网元通信。
处理器702，用于执行程序710，具体可以执行上述列表页面的布局方法实施例中的相关步骤。
具体地，程序710可以包括程序代码，该程序代码包括计算机操作指令。
处理器702可能是中央处理器CPU，或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。计算设备包括的一个或多个处理器，可以是同一类型的处理器，如一个或多个CPU；也可以是不同类型的处理器，如一个或多个CPU以及一个或多个ASIC。
存储器706，用于存放程序710。存储器706可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。
程序具体可以用于使得处理器执行以下操作：
遍历待布局的页面元素块；
获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行；
根据所述最小布局坐标值和所述目标列/行，确定所述待布局的页面元素块的布局位置；
根据所述待布局的页面元素块的布局位置，在所述目标列/行对所述待布局的页面元素块进行布局。
在一种可选的实施方式中，程序进一步使所述处理器执行以下操作：
根据所述待布局的页面元素块的布局参数，判断所述待布局的页面元素块是否需要通屏显示；
若是，则获取各列/行已布局的页面元素块在布局方向上的最大布局坐标值，根据所述最大布局坐标值，确定所述待布局的页面元素块的布局位置，对所述待布局的页面元素块进行通屏显示布局；
若否，则执行所述获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行的步骤。
在一种可选的实施方式中，程序进一步使所述处理器执行以下操作：
预先配置列表页面的总列/行数；
根据总列数，计算各列的最大宽度值；或者，根据总行数，计算各行的最大高度值。
在一种可选的实施方式中，程序进一步使所述处理器执行以下操作：
根据终端设备的屏幕尺寸和/或横竖屏显示模式，预先配置列表页面的总列/行数。
在一种可选的实施方式中，程序进一步使所述处理器执行以下操作：
设置任一列/行内相邻页面元素块之间的间隙值以及列/行边距值。
在一种可选的实施方式中，程序进一步使所述处理器执行以下操作：
根据所述待布局的页面元素块的布局参数，判断所述待布局的页面元素块的宽度是否大于所述各列的最大宽度值，若是，则判定所述待布局的页面元素块需要通屏显示；若否，则判定所述待布局的页面元素块不需要通屏显示；
或者，根据所述待布局的页面元素块的布局参数，判断所述待布局的页面元素块的高度是否大于所述各列的最大高度值，若是，则判定所述待布局的页面元素块需要通屏显示；若否，则判定所述待布局的页面元素块不需要通屏显示。
在一种可选的实施方式中，程序进一步使所述处理器执行以下操作：
判断所述待布局的页面元素块在布局方向上的长度是否大于预设阈值；
若是，则将所述待布局的页面元素块进行拆分处理。
在此提供的算法或显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明实施例也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。
在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
类似地，应当理解，为了精简本发明并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明实施例的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。
本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外，本领域的技术人员能够理解，尽管在此的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。上述实施例中的步骤，除有特殊说明外，不应理解为对执行顺序的限定。
Claims (13)
1.一种列表页面的布局方法，包括：
遍历待布局的页面元素块；
根据所述待布局的页面元素块的布局参数，判断所述待布局的页面元素块是否需要通屏显示；
若是，则获取各列/行已布局的页面元素块在布局方向上的最大布局坐标值，根据所述最大布局坐标值确定所述待布局的页面元素块的布局位置，对所述待布局的页面元素块进行通屏显示布局；
若否，获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行；
根据所述最小布局坐标值和所述目标列/行，确定所述待布局的页面元素块的布局位置；
根据所述待布局的页面元素块的布局位置，在所述目标列/行对所述待布局的页面元素块进行布局。
2.根据权利要求1所述的方法，在所述遍历待布局的页面元素块之前，所述方法还包括：
预先配置列表页面的总列/行数；
根据总列数，计算各列的最大宽度值；或者，根据总行数，计算各行的最大高度值。
3.根据权利要求2所述的方法，所述预先配置列表页面的总列/行数具体为：根据终端设备的屏幕尺寸和/或横竖屏显示模式，预先配置列表页面的总列/行数。
4.根据权利要求2所述的方法，在所述预先配置列表页面的总列/行数之后，所述方法还包括：设置任一列/行内相邻页面元素块之间的间隙值以及列/行边距值。
5.根据权利要求2所述的方法，所述根据所述待布局的页面元素块的布局参数，判断所述页面元素块是否需要通屏显示进一步包括：
根据所述待布局的页面元素块的布局参数，判断所述待布局的页面元素块的宽度是否大于所述各列的最大宽度值，若是，则判定所述待布局的页面元素块需要通屏显示；若否，则判定所述待布局的页面元素块不需要通屏显示；
或者，根据所述待布局的页面元素块的布局参数，判断所述待布局的页面元素块的高度是否大于所述各列的最大高度值，若是，则判定所述待布局的页面元素块需要通屏显示；若否，则判定所述待布局的页面元素块不需要通屏显示。
6.根据权利要求1所述的方法，在判断出所述待布局的页面元素块不需要通屏显示之后，所述方法还包括：
判断所述待布局的页面元素块在布局方向上的长度是否大于预设阈值；
若是，则将所述待布局的页面元素块进行拆分处理。
7.一种计算设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；
所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器具体执行以下操作：
遍历待布局的页面元素块；
根据所述待布局的页面元素块的布局参数，判断所述待布局的页面元素块是否需要通屏显示；
若是，则获取各列/行已布局的页面元素块在布局方向上的最大布局坐标值，根据所述最大布局坐标值确定所述待布局的页面元素块的布局位置，对所述待布局的页面元素块进行通屏显示布局；
若否，获取各列/行已布局的页面元素块在布局方向上的最小布局坐标值，并确定最小布局坐标值对应的目标列/行；
根据所述最小布局坐标值和所述目标列/行，确定所述待布局的页面元素块的布局位置；
根据所述待布局的页面元素块的布局位置，在所述目标列/行对所述待布局的页面元素块进行布局。
8.根据权利要求7所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：
预先配置列表页面的总列/行数；
根据总列数，计算各列的最大宽度值；或者，根据总行数，计算各行的最大高度值。
9.根据权利要求8所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：根据终端设备的屏幕尺寸和/或横竖屏显示模式，预先配置列表页面的总列/行数。
10.根据权利要求8所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：设置任一列/行内相邻页面元素块之间的间隙值以及列/行边距值。
11.根据权利要求8所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：
根据所述待布局的页面元素块的布局参数，判断所述待布局的页面元素块的宽度是否大于所述各列的最大宽度值，若是，则判定所述待布局的页面元素块需要通屏显示；若否，则判定所述待布局的页面元素块不需要通屏显示；
或者，根据所述待布局的页面元素块的布局参数，判断所述待布局的页面元素块的高度是否大于所述各列的最大高度值，若是，则判定所述待布局的页面元素块需要通屏显示；若否，则判定所述待布局的页面元素块不需要通屏显示。
12.根据权利要求7所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：
判断所述待布局的页面元素块在布局方向上的长度是否大于预设阈值；
若是，则将所述待布局的页面元素块进行拆分处理。
13.一种计算机存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令使处理器执行如权利要求1-6中任一项所述的列表页面的布局方法对应的操作。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111129266.2A CN113867862B (zh) | 2021-09-26 | 2021-09-26 | 列表页面布局方法及计算设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111129266.2A CN113867862B (zh) | 2021-09-26 | 2021-09-26 | 列表页面布局方法及计算设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113867862A CN113867862A (zh) | 2021-12-31 |
| CN113867862B true CN113867862B (zh) | 2024-04-26 |
Family
ID=78994467
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111129266.2A Active CN113867862B (zh) | 2021-09-26 | 2021-09-26 | 列表页面布局方法及计算设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113867862B (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114528063B (zh) * | 2022-04-21 | 2022-07-12 | 苏州万店掌网络科技有限公司 | 一种页面显示方法、装置、设备及存储介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2015101161A1 (zh) * | 2013-12-31 | 2015-07-09 | 北京百度网讯科技有限公司 | 一种用于生成与目标系统对应的用户页面方法和装置 |
| CN112579241A (zh) * | 2020-12-22 | 2021-03-30 | 广州博冠信息科技有限公司 | 页面布局方法和装置、计算机可读存储介质、电子设备 |
| CN113138827A (zh) * | 2021-04-29 | 2021-07-20 | 北京百度网讯科技有限公司 | 展示数据的方法、装置、电子设备和介质 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8578267B2 (en) * | 2006-09-28 | 2013-11-05 | Hewlett-Packard Development Company, L.P. | Graphic assembly layout with maximum page coverage and minimum content removal |
-
2021
- 2021-09-26 CN CN202111129266.2A patent/CN113867862B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2015101161A1 (zh) * | 2013-12-31 | 2015-07-09 | 北京百度网讯科技有限公司 | 一种用于生成与目标系统对应的用户页面方法和装置 |
| CN112579241A (zh) * | 2020-12-22 | 2021-03-30 | 广州博冠信息科技有限公司 | 页面布局方法和装置、计算机可读存储介质、电子设备 |
| CN113138827A (zh) * | 2021-04-29 | 2021-07-20 | 北京百度网讯科技有限公司 | 展示数据的方法、装置、电子设备和介质 |
Non-Patent Citations (1)
| Title |
|---|
| 支持语义耦合的设备自适应网页布局算法;尹建伟;张璇;尹瑛;董金祥;罗尚虎;;浙江大学学报(工学版);20090915(第09期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113867862A (zh) | 2021-12-31 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7853883B2 (en) | Content aggregation view layout based on weights | |
| CN107526592B (zh) | 一种页面适配方法和装置 | |
| CN113010252B (zh) | 应用页面的展示方法、电子设备及存储介质 | |
| CN104794116A (zh) | 一种页面中元素的布局方法和装置 | |
| CN105787402A (zh) | 一种信息展示方法及装置 | |
| CN113867862B (zh) | 列表页面布局方法及计算设备 | |
| US20190073091A1 (en) | Dynamic display layout systems and methods | |
| CN111857704A (zh) | 一种布局关系的代码生成方法及装置 | |
| US11620503B2 (en) | Neural network processing | |
| CN115237522A (zh) | 页面自适应展示方法及装置 | |
| CN107766528B (zh) | 瀑布流页面的数据加载方法、终端和计算机可读存储介质 | |
| CN107122104B (zh) | 数据显示方法及装置 | |
| CN107391148B (zh) | 视图元素保存方法、装置、电子设备及计算机存储介质 | |
| CN109871517B (zh) | 文字块排序方法、装置、存储介质及电子设备 | |
| CN111553847A (zh) | 图像处理方法及装置 | |
| CN116185545A (zh) | 一种页面渲染的方法及装置 | |
| CN109388680B (zh) | 一种提高浏览器端gis点数据渲染效率的方法和装置 | |
| CN115390976A (zh) | 界面设计的布局方法、界面的展示方法及相关设备 | |
| EP2530640B1 (en) | Image copying method and device | |
| CN105278896A (zh) | 一种图像显示方法、装置及终端设备 | |
| CN110321405B (zh) | 模型匹配方法、装置、计算机可读存储介质和计算机设备 | |
| EP3929871A1 (en) | Picture processing method, picture set processing method, computer device, and storage medium | |
| CN106462600A (zh) | 一种显示照片的方法及设备 | |
| CN112800357A (zh) | Web页面呈现方法、装置、设备及存储介质 | |
| CN111399963B (zh) | 一种显示界面配置方法、系统、设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |