一种基于文本内容的动态列表布局方法与流程

专利2022-06-29  86


本发明涉及电子文档技术领域,特别是一种基于文本内容的动态列表布局方法。



背景技术:

现有技术中,针对电子文档中元素列表的布局,通常有如图7~图9所示的不同形式。

图7是普通的垂直布局,大多时候会占用过多空间,所以很多时候会采用图8的布局形式。

图8是简单的横向布局,但是各列元素并没有对齐,稍显杂乱,图9是垂直对齐的效果,视觉上会比较整齐。但是想要做到图9的效果,需要通盘考虑所有列表元素的宽度和列表所在容器的宽度,通常都是设计师和工程师联合起来按照固定的元素实验出来的。当容器的宽度发生变化时,所有的元素都需要重新计算位置,由此造成运算量大。

综上所述,现有技术缺乏一个有效的动态排布机制。



技术实现要素:

本发明的主要目的在于提供一种基于文本内容的动态列表布局方法,包括步骤:

a、获取容纳文本的容器宽度,以及所述容器中各文本元素的顺序、宽度;

b、依据所述文本内容中各元素的宽度以及容纳文本的容器宽度,计算当前容器宽度下所容纳的最大列数及各列宽度;

c、基于步骤b所确定的最大列数及各列宽度,依照步骤a获取的所述排序填充所述各元素。

由上,将各元素的宽度和容器的宽度均设置为一个变量值,通过匹配二者的关系实现对于文本内容的动态布局,从而解决了现有技术中当容器的宽度发生变化时,所有的元素无法自动布局或者必须手工计算布局的弊端。

其中,步骤b包括以下子步骤:

b1:根据步骤a所获取的各元素的宽度,分别计算出所述容器所能容纳的最小列数和最大列数;

b2:在所述最小列数至最大列数所组成的区间内逐一取值,建立二维数组,将各元素依照所述排序依次置于所述二维数组内;

b3:当二维数组各行每个元素的宽度之和均小于所述容器宽度时,确定当前列数为所需列表布局。

由上,通过各元素的宽度确定在容器所容纳的范围内所能布设的最多列数和最少列数以确定边界。在该边界内,将可能存在的列数逐一建立二维数组,将各元素依照所述排序置于所述二维数组内。当各列元素的宽度之和大于所述容器宽度时,表示当前建立的二维数组不适合,则在所述边界内重新建立二维数组,直至各列元素的宽度之和均小于所述容器宽度,即表示所建立的二维数组为所需的列表布局。

其中,计算出最小列数包括cw/max(iw),式中cw表示所述容器宽度,max(iw)表示各元素的最大宽度;

计算出最小列数包括cw/min(iw),式中min(iw)表示各元素的最小宽度;

所述最小列数和最大列数取整数。

由上,通过各元素的宽度确定在容器所容纳的范围内所能布设的最多列数和最少列数,从而划定了动态列表布局的界限。

其中,所述各行每个元素的宽度包括:

该行中各元素所在列的最大宽度为该元素的宽度。

由上,各列以该列所包括的元素中的最大宽度为整体列宽,首先保证该列可以容纳所有元素,其次使得各列的排序整齐。

其中,步骤b2中所述将各元素依次置于所述二维数组内包括:将各元素的宽度、所在列和名称建立索引映射;

步骤c包括,基于所述映射填充各元素的文本内容。

由上,通过映射关系,在步骤b中仅以宽度表示各元素即可,从而方便进行各列元素的宽度之和与容器宽度的比较。在步骤c中,依照上述映射即可快速将各元素内容还原。

附图说明

图1为本发明流程图;

图2为渲染后各元素宽度及容器宽度的示意图;

图3为按6列进行排序的效果图;

图4为规格为6*6的二维数组示意图;

图5为规格为4*4的二维数组示意图;

图6为按4列进行排序的效果图;

图7为垂直布局示意图;

图8为横向布局示意图;

图9为以列为单位对齐的横向布局示意图。

具体实施方式

下面参见图1~图6对本发明所述的基于文本内容的动态列表布局方法进行详细说明。

如图1所示,本发明包括以下步骤:

s100:获取各元素的宽度。

通过对所有元素的渲染,可以获取到各元素的宽度,所述宽度表示为iw[]。

图2所示即为渲染后的效果图,图中共有10个元素,其序号分别对应为0、1、2、……、10。由此,各元素的宽度分别表示为iw[0]、iw[1]、……、iw[10]。为便于理解,在此以字符数表示各元素的宽度,即“北京市”的宽度为3,“新疆维吾尔自治区”的宽度为8。

本实施例中,所述对所有元素的渲染技术为本领域技术人员所获知的常规技术,在此不进行赘述。

s200:获取容器宽度。

采用与步骤s100相同的获取原则,获取容纳所有元素的容器宽度,表示为cw。

s300:基于各元素的宽度和容器宽度,计算当前容器宽度下布局的列数,及每一列的宽度。

具体的,本步骤包括以下子步骤:

s301:根据步骤s100所获取的各元素的宽度,分别计算出所述容器所能容纳的最小列数和最大列数。

例如,各元素的宽度中,最大宽度表示为max(iw),即对应图2中的“新疆维吾尔自治区”。极端情况下,该行存在多个宽度相同的元素,则当前容器宽度下所能容纳的最小列数采用表达式为cw/max(iw),将结果取整数,该行的最小列数表示为mincols。

同理,各元素的宽度中的最小宽度表示为min(iw),例如对应图2中的“北京市”、“上海市”等。则当前容器宽度下所能容纳的最大列数采用表达式cw/min(iw),将结果取整数,该行的最大列数表示为maxcols。

s302:判断最大宽度是否大于容器宽度,若是则列数为1,列宽设定为容器宽度,执行步骤s400;

若最大宽度小于容器宽度,则执行步骤s303。

本步骤中,所述列数表示为coln,列宽表示为colw[]。

s303:将列数进行排序。

将列数按照由最大列数至最小列数的顺序进行排序。结合图3所示,假设计算出的最大列数为6,最小列数为4,则列数按照6、5、4进行排序。

实际操作过程中,也可将列数按照由最小列至最大列的顺序排序,在此不进行限定。

s304:依据步骤s303的排序建立二维数组。

基于步骤s303的排序,逐行将表示各元素宽度的数字按照初始次序一一放置。

较佳的,在本步骤中,将各元素的宽度、所在列和元素名称建立索引映射。

如图4所示,按照步骤s303的排序,建立行、列相等的二维数组,即6*6二维数组,将各元素按照图2的出现顺序依次置于所述6*6二维数组的每一项。其中,各项的内容为表示该元素宽度的数值。若为0则表示没有元素。

进一步的,也可建立非行、列相等的二维数组,但所建立的二维数组需满足最大列数,而行数则只需与各元素的数量匹配即可。例如图2的的元素数量为10,最大列数为6,则只需建立6*2的二维数组即可。

s305:计算步骤s304排序后各列的最大宽度。

本步骤中,各列的最大宽度表示为colw[]。所述最大宽度即为该列的宽度,即如果一列中分别包括“北京市”、“黑龙江省”和“内蒙古自治区”,则该列的宽度以“内蒙古自治区”为准,最大宽度的取值为6。基于此,各列以该列所包括的所有元素中的最大宽度为列宽,首先保证该列可以容纳所有元素,其次使得各列的排序整齐。

s306:验算步骤s304所建立的结果,若通过验算则进入步骤s400,否则返回步骤s304,按照其他列数重新建立二维数组。

本步骤的验算包括逐行计算各元素的宽度和,若小于容器宽度则表示验算通过。反之,若大于容器宽度,则表示如此排序不合理,返回步骤s304,即在步骤s304中按照其他列数重新建立二维数组,基于前述例子,如果6*6的二维数组验算不通过,则改为列数为5排序,建立5*5的二维数组。

具体到本实施例,如图5所示,直至建立4*4的二维数组后,各行中元素的宽度之和才通过验算。基于此,本步骤中布局的列数为4,各列的宽度分别为8、7、6、5。

s400:基于所述索引映射,结合各列的最大宽度将所述各列的名称置于二维数组中,完成布局。

如图6所示即为基于索引映射所还原的布局效果示意图。

本发明将各元素的宽度和容器的宽度均设置为一个变量值,通过匹配二者的关系实现对于文本内容的动态布局,从而解决了现有技术中当容器的宽度发生变化时,所有的元素(宽度)都需要重新计算位置,由此造成运算量大的弊端。

以上所述仅为本发明的较佳实施例,并不用以限制本发明,凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。


技术特征:

1.一种基于文本内容的动态列表布局方法,其特征在于,包括步骤:

a、获取容纳文本的容器宽度,以及所述容器中各文本元素的顺序、宽度;

b、依据所述文本内容中各元素的宽度以及容纳文本的容器宽度,计算当前容器宽度下所容纳的最大列数及各列宽度;

c、基于步骤b所确定的最大列数及各列宽度,依照步骤a获取的所述排序填充所述各元素。

2.根据权利要求1所述的方法,其特征在于,步骤b包括以下子步骤:

b1:根据步骤a所获取的各元素的宽度,分别计算出所述容器所能容纳的最小列数和最大列数;

b2:在所述最小列数至最大列数所组成的区间内逐一取值,以建立二维数组,将各元素依照步骤a所述排序依次置于所述二维数组内;

b3:当二维数组各行每个元素的宽度之和均小于所述容器宽度时,确定当前列数为所需列表布局。

3.根据权利要求2所述的方法,其特征在于,计算出最小列数包括cw/max(iw),式中cw表示所述容器宽度,max(iw)表示各元素的最大宽度;

计算出最小列数包括cw/min(iw),式中min(iw)表示各元素的最小宽度;

所述最小列数和最大列数取整数。

4.根据权利要求2所述的方法,其特征在于,所述各行每个元素的宽度包括:

该行中各元素所在列的最大宽度为该元素的宽度。

5.根据权利要求2所述的方法,其特征在于,步骤b2中所述将各元素依照步骤a所述排序依次置于所述二维数组内包括:将各元素的宽度、所在列和名称建立索引映射;

步骤c包括,基于所述映射填充各元素的文本内容。

技术总结
本发明提供了一种基于文本内容的动态列表布局方法,包括步骤:A、获取容纳文本的容器宽度,以及所述容器中各文本元素的顺序、宽度;B、依据所述文本内容中各元素的宽度以及容纳文本的容器宽度,计算当前容器宽度下所容纳的最大列数及各列宽度;C、基于步骤B所确定的最大列数及各列宽度,依照步骤A获取的所述排序填充所述各元素。由上,将各元素的宽度和容器的宽度均设置为一个变量值,通过匹配二者的关系实现对于文本内容的动态布局,从而解决了现有技术中当容器的宽度发生变化时,所有的元素无法自动布局或者必须手工计算布局的弊端。

技术研发人员:罗立刚;张旸;林青;闫寅雪
受保护的技术使用者:零氪科技(北京)有限公司
技术研发日:2018.11.15
技术公布日:2020.06.09

转载请注明原文地址: https://bbs.8miu.com/read-19771.html

最新回复(0)