一种图形界面的元素平铺方法、装置及终端与流程

本发明涉及通信技术领域，特别是指一种图形界面的组件平铺方法、装置及终端。

背景技术：

现在的软件中大部分都提供gui(graphicaluserinterface，图形用户界面)与用户交互，包括b/s架构(browser/server，浏览器/服务器模式)的互联网web页面。而gui在与用户交互中，为了更好的展示数据给用户，常使用平铺的方式进行展示。

但是，在使用传统的平铺方式进行展示数据时，又总会出现平铺出的元素异常凌乱的问题，尤其在无法对元素的尺寸进行排序的场景下尤为严重。

技术实现要素：

本发明的目的是提供一种图形界面的元素平铺方法、装置及终端，对每个元素进行修正，得到更加整齐的平铺效果，提升用户使用体验。

为达到上述目的，本发明的实施例提供了一种图形界面的元素平铺方法，包括：

根据预设的对齐方向，获取终端图形界面上所有元素在所述对齐方向上的位置信息；

根据所述位置信息，修正每个元素在所述对齐方向上的长度并进行重新平铺，其中，修正后的元素在所述对齐方向上的长度以及相邻元素之间的间隙长度的总和是修正前的所有元素在所述对齐方向上的长度中的最小长度以及相邻元素之间的间隙长度的总和的整数倍。

其中，所述根据所述位置信息，修正每个元素在所述对齐方向上的长度并进行重新平铺的步骤包括：

根据所述位置信息，选择一修正策略；

根据所述修正策略，逐一确定每个元素修正后在所述对齐方向上的长度；

根据已确定的长度，平铺所有元素。

其中，所述根据所述修正策略，逐一确定每个元素修正后在所述对齐方向上的长度的步骤包括：

根据第一公式，确定满足所述第一公式的最小的修正参数n，其中，所述第一公式为f(n)*(minlength+horgap)≥length+horgap，f(n)为修正策略且n为正整数，length为待修正元素在所述对齐方向上的第一长度，minlength为所有元素的第一长度的最小值，horgap为在所述对齐方向上相邻元素之间的间隙长度；

根据第二公式，确定待修正元素在所述对齐方向上修正的第二长度newlength，其中，所述第二公式为newlength＝f(n)*(minlength+horgap)-horgap。

其中，所述根据已确定的长度，平铺所有元素的步骤包括：

根据所有元素在所述对齐方向上修正后的第二长度以及在所述对齐方向上相邻元素之间的间隙长度，依次进行重新平铺。

其中，所述根据所有元素在所述对齐方向上修正后的第二长度以及在所述对齐方向上相邻元素之间的间隙长度，依次进行重新平铺的步骤包括：

获取所述图形界面当前在所述对齐方向上剩余的第三长度；

在所述第三长度小于所述第二长度时，将当前元素在下一个所述对齐方向的起始位置进行平铺。

其中，所述位置信息包括：在所述对齐方向上的第一长度以及在所述对齐方向上相邻元素之间的间隙长度；

相应的，所述根据所述位置信息，选择一修正策略的步骤包括：

获取所有元素的第一长度的最小值；

将每个元素的第一长度分别与最小值的第一长度进行比较，得到一比较结果；

按照比较结果的大小，统计比较结果的数量；

在所述数量大于或等于一阈值时选择第一修正策略，在所述数量小于所述阈值时，选择第二修正策略。

其中，所述第一修正策略为f1(n)＝2ⁿ，所述第二修正策略为f2(n)＝m*n，其中第二修正策略的参数m的取值为数量最多的比较结果。

其中，所述预设的对齐方向是根据接收到的用户选择的对齐方向或者默认设置的对齐方向确定的。

为达到上述目的，本发明的实施例还提供了一种图形界面的元素平铺装置，包括：

获取模块，用于根据预设的对齐方向，获取终端图形界面上所有元素在所述对齐方向上的位置信息；

处理模块，用于根据所述位置信息，修正每个元素在所述对齐方向上的长度并进行重新平铺，其中，修正后的元素在所述对齐方向上的长度以及相邻元素之间的间隙长度的总和是修正前的所有元素在所述对齐方向上的长度中的最小长度以及相邻元素之间的间隙长度的总和的整数倍。

其中，所述处理模块包括：

选择子模块，用于根据所述位置信息，选择一修正策略；

确定子模块，用于根据所述修正策略，逐一确定每个元素修正后在所述对齐方向上的长度；

平铺子模块，用于根据已确定的长度，平铺所有元素。

其中，所述确定子模块包括：

第一确定单元，用于根据第一公式，确定满足所述第一公式的最小的修正参数n，其中，所述第一公式为f(n)*(minlength+horgap)≥length+horgap，f(n)为修正策略且n为正整数，length为待修正元素在所述对齐方向上的第一长度，minlength为所有元素的第一长度的最小值，horgap为在所述对齐方向上相邻元素之间的间隙长度；

第二确定单元，用于根据第二公式，确定待修正元素在所述对齐方向上修正的第二长度newlength，其中，所述第二公式为newlength＝f(n)*(minlength+horgap)-horgap。

其中，所述平铺子模块进一步用于根据所有元素在所述对齐方向上修正后的第二长度以及在所述对齐方向上相邻元素之间的间隙长度，依次进行重新平铺。

其中，所述平铺子模块包括：

第一获取单元，用于获取所述图形界面当前在所述对齐方向上剩余的第三长度；

平铺单元，用于在所述第三长度小于所述第二长度时，将当前元素在下一个所述对齐方向的起始位置进行平铺。

其中，所述位置信息包括：在所述对齐方向上的第一长度以及在所述对齐方向上相邻元素之间的间隙长度；

相应的，所述选择子模块包括：

第二获取单元，用于获取所有元素的第一长度的最小值；

比较单元，用于将每个元素的第一长度分别与最小值的第一长度进行比较，得到一比较结果；

统计单元，用于按照比较结果的大小，统计比较结果的数量；

选择单元，用于在所述数量大于或等于一阈值时选择第一修正策略，在所述数量小于所述阈值时，选择第二修正策略。

其中，所述第一修正策略为f1(n)＝2ⁿ，所述第二修正策略为f2(n)＝m*n，其中第二修正策略的参数m的取值为数量最多的比较结果。

其中，所述预设的对齐方向是根据接收到的用户选择的对齐方向或者默认设置的对齐方向确定的。

为达到上述目的，本发明的实施例还提供了一种终端，包括如上所述的图形界面的元素平铺装置。

本发明的上述技术方案的有益效果如下：

本发明实施例的图形界面的元素平铺方法，首先根据预设的对齐方向，获取终端图形界面上所有元素在该对齐方向上的位置信息，作为进行修正的依据和基础；然后根据该位置信息对每个元素在该对齐方向上的长度进行修正并进行平铺，通过修正得到修正后的元素在该对齐方向上的长度以及相邻元素之间的间隙长度的总和是修正前的所有元素在该对齐方向上的长度中的最小长度以及相邻元素之间的间隙长度的总和的整数倍，从而实现修正后平铺的元素在对齐方向上的边界得到较佳的对齐效果，不会出现视觉上的凌乱，提升了用户的使用体验。

附图说明

图1为本发明实施例的图形界面的元素平铺方法的步骤流程图；

图2为长度修正原理示意图；

图3为本发明实施例的图形界面的元素平铺方法的具体步骤示意图一；

图4为本发明实施例的图形界面的元素平铺方法的具体步骤示意图二；

图5为本发明实施例的图形界面的元素平铺方法选择第一修正策略重铺前后的对比示意图；

图6为本发明实施例的图形界面的元素平铺方法选择第二修正策略重铺前后的对比示意图；

图7为本发明实施例的图形界面的元素平铺方装置的结构示意图。

具体实施方式

为使本发明要解决的技术问题、技术方案和优点更加清楚，下面将结合附图及具体实施例进行详细描述。

本发明针对现有的平铺方式中总会出现元素异常凌乱的问题，提供了一种图形界面的元素平铺方法，对每个元素进行修正，得到更加整齐的平铺效果，提升用户使用体验。

如图1所示，本发明实施例的一种图形界面的元素平铺方法，包括：

步骤101，根据预设的对齐方向，获取终端图形界面上所有元素在所述对齐方向上的位置信息；

步骤102，根据所述位置信息，修正每个元素在所述对齐方向上的长度并进行重新平铺，其中，修正后的元素在所述对齐方向上的长度以及相邻元素之间的间隙长度的总和是修正前的所有元素在所述对齐方向上的长度中的最小长度以及相邻元素之间的间隙长度的总和的整数倍。

对于二维平面的图形界面，对齐方向可以是水平对齐或者垂直对齐。通过上述步骤，终端首先会根据预设的对齐方向，获取终端图形界面上所有元素在该对齐方向上的位置信息，作为进行修正的依据和基础。如预设的对齐方向为水平对齐，那么该位置信息包括所有元素在水平方向的位置信息。

然后即可根据该位置信息对每个元素在该对齐方向上的长度进行修正并 进行平铺。本发明实施例修正后的元素在该对齐方向上的长度以及相邻元素之间的间隙长度的总和是修正前的所有元素在该对齐方向上的长度中的最小长度以及相邻元素之间的间隙长度的总和的整数倍，这样，修正后平铺的元素在对齐方向上的边界得到较佳的对齐效果，不会出现视觉上的凌乱，提升了用户的使用体验。

其中，相邻元素之间的间隙长度也是在该对齐方向上的，该间隙长度往往是系统设定的，不随着修正发生改变。

如图2所示，预设的对齐方向为水平方向，在修正前，元素a“陈陈”是水平方向上长度最小的元素，其长度加上相邻元素之间的间隙长度的总和为l1，而元素b“陈陈陈陈”在水平方向上的长度加上相邻元素之间的间隙长度的总和为l2。通过修正后，元素b在水平方向上的长度加上相邻元素之间的间隙长度总和为l3，且l3是l1的2倍。因此，重新平铺后，上下两行的边界对齐较修正前达到了更佳的效果。

应该了解的是，终端系统一般会默认设置一对齐方向，并且为了适应用户的个性化需求还会向用户提供对齐方向的选择，因此，在本发明的实施例中，所述预设的对齐方向是根据接收到的用户选择的对齐方向或者默认设置的对齐方向确定的。

将用户选择的对齐方向作为预设的对齐方向进行修正，更适应用户需求，实现了平铺针对用户的个性化，而当用户没有进行自主选择时，则直接将默认设置的对齐方向作为预设的对齐方向。具体的，在本发明上述实施例的图形界面的元素平铺方法中，如图3所示，步骤102包括：

步骤1021，根据所述位置信息，选择一修正策略；

步骤1022，根据所述修正策略，逐一确定每个元素修正后在所述对齐方向上的长度；

步骤1023，根据已确定的长度，平铺所有元素。

由于平铺中总是存在多个元素，而随着元素的不同，图形界面初始平铺总会得到多样的平铺结果，因此，为了实现更佳的最终平铺效果，修正时就需要选择更适用的修正策略，如步骤1021，根据位置信息，选择一修正策略。之后，如步骤1022和1023，根据该修正策略逐一确定每个元素修正后在该对齐 方向上的长度，根据该长度，平铺所有元素。

还应该知道的是，上述步骤1022和步骤1023仅是说明具体的实现方式，并不限定步骤执行的先后顺序。在实际应用中，可以是先确定所有元素修正后在对齐方向上的长度，然后统一进行平铺；也可以在确定一元素修正后在该对齐方向上的长度时，先确定该元素的平铺位置平铺后，再确定下一元素修正后在该对齐方向上的长度进行平铺，直至完成所有元素的平铺。

在上述实施例中，所述位置信息包括：在所述对齐方向上的第一长度以及在所述对齐方向上相邻元素之间的间隙长度；

相应的，如图4所示，步骤1021包括：

步骤10211，获取所有元素的第一长度的最小值；

步骤10212，将每个元素的第一长度分别与最小值的第一长度进行比较，得到一比较结果；

步骤10213，按照比较结果的大小，统计比较结果的数量；

步骤10214，在所述数量大于或等于一阈值时选择第一修正策略，在所述数量小于所述阈值时，选择第二修正策略。

因此可知，第一长度是元素修正前在对齐方向上的长度。通过上述步骤10211-10214，先获取所有元素的第一长度的最小值，之后，将每个元素的第一长度分别与该最小值的第一长度进行比较，得到一比较结果。通过比较，每个元素都会对应一个比较结果，如10个元素会有10个比较结果，但一个比较结果则可能会对应多个元素，如在上述10个比较结果中2个为c1，3个为c2，1个为c3，4个为c4。然后按照比较结果的大小，统计比较结果的数量，如在上述10个元素的比较结果(c1，c2，c3，c4)中，比较结果的数量为4。最后根据该数量，选择修正策略，在数量大于或等于一阈值时选择第一修正策略，在数量小于所述阈值时，选择第二修正策略。

其中，比较的具体方式可以采用公式r＝ceiling(当前元素的第一长度/最小值的第一长度)来进行，r为比较结果。

优选的，所述第一修正策略为f1(n)＝2ⁿ，所述第二修正策略为f2(n)＝m*n，其中第二修正策略的参数m的取值为数量最多的比较结果。

比较结果的数量小于该阈值，比较结果比较集中，第二修正策略f2(n) ＝m*n有效，反之，则第一修正策略为f1(n)＝2ⁿ的修正效果较佳。沿用上述示例，比较结果的数量为4，当阈值为5时，4<5，选择第二修正策略f2(n)＝m*n，此时，m＝c4。

当然，本发明实施例的修正策略不仅限于上述的两种修正策略，在此不再一一列举。而位置信息也不仅限于上述的元素在对齐方向上的第一长度以及在对齐方向上相邻元素之间的间隙长度，还可包括元素在初始平铺中的位置坐标等。

经步骤1021，选择了修正策略后，即可使用该修正策略对元素在对齐方向上的长度进行修正，具体的，步骤1022包括：

步骤10221，根据第一公式，确定满足所述第一公式的最小的修正参数n，其中，所述第一公式为f(n)*(minlength+horgap)≥length+horgap，f(n)为修正策略且n为正整数，length为待修正元素在所述对齐方向上的第一长度，minlength为所有元素的第一长度的最小值，horgap为在所述对齐方向上相邻元素之间的间隙长度；

步骤10222，根据第二公式，确定待修正元素在所述对齐方向上修正的第二长度newlength，其中，所述第二公式为newlength＝f(n)*(minlength+horgap)-horgap。

修正元素在对齐方向上的长度时，不仅要考虑达到修正后的元素在该对齐方向上的长度以及相邻元素之间的间隙长度的总和是修正前的所有元素在该对齐方向上的长度中的最小长度以及相邻元素之间的间隙长度的总和的整数倍，还要结合其本身所需的长度，因此，首先确定满足第一公式的最小修正参数n，然后由第二公式确定待修正元素在对齐方向上修正的第二长度，可知，第二长度是元素修正后在对齐方向上的长度。

在确定了待修正元素修正后在对齐方向上的长度后，就可以进行重新平铺，步骤1023包括：

根据所有元素在所述对齐方向上修正后的第二长度以及在所述对齐方向上相邻元素之间的间隙长度，依次进行重新平铺。

然而，在元素重新平铺过程中，可能当前显示区域在对齐方向上的剩余长度不足以平铺该元素，所以，所述根据所有元素在所述对齐方向上修正后的第 二长度以及在所述对齐方向上相邻元素之间的间隙长度，依次进行重新平铺的步骤包括：

获取所述图形界面当前在所述对齐方向上剩余的第三长度；

在所述第三长度小于所述第二长度时，将当前元素在下一个所述对齐方向的起始位置进行平铺。

通过上述的步骤，对元素是否能够在当前位置进行平铺进行了确认，在当前对齐方向上剩余的第三长度小于第二长度，也就是不能在当前位置对元素进行平铺时，将元素在下一个对齐方向的起始位置进行平铺。若对齐方向是水平方向时，即将元素进行换行，在下一行第一个进行平铺。

采用本发明实施例的图形界面的元素平铺方法，选择第一修正策略f1(n)＝2ⁿ，在水平方向对齐的修正前后平铺对比，如图5所示；选择第二修正策略f2(n)＝n，在水平方向对齐的修正前后平铺对比，如图6所示。

综上所述，本发明实施例的图形界面的元素平铺方法，能够实现在元素平铺凌乱时的修正以及重新平铺，在最大程度上使得预设对齐方向的元素边界对齐，得到较佳的对齐效果，不会出现视觉上的凌乱，提升了用户的使用体验。

如图7所示，本发明的实施例还提供了一种图形界面的元素平铺装置，包括：

获取模块701，用于根据预设的对齐方向，获取终端图形界面上所有元素在所述对齐方向上的位置信息；

处理模块702，用于根据所述位置信息，修正每个元素在所述对齐方向上的长度并进行重新平铺，其中，修正后的元素在所述对齐方向上的长度以及相邻元素之间的间隙长度的总和是修正前的元素在所述对齐方向上的长度以及相邻元素之间的间隙长度的总和的整数倍。

其中，所述处理模块包括：

选择子模块，用于根据所述位置信息，选择一修正策略；

确定子模块，用于根据所述修正策略，逐一确定每个元素修正后在所述对齐方向上的长度；

平铺子模块，用于根据已确定的长度，平铺所有元素。

其中，所述确定子模块包括：

第一确定单元，用于根据第一公式，确定满足所述第一公式的最小的修正参数n，其中，所述第一公式为f(n)*(minlength+horgap)≥length+horgap，f(n)为修正策略且n为正整数，length为待修正元素在所述对齐方向上的第一长度，minlength为所有元素的第一长度的最小值，horgap为在所述对齐方向上相邻元素之间的间隙长度；

第二确定单元，用于根据第二公式，确定待修正元素在所述对齐方向上修正的第二长度newlength，其中，所述第二公式为newlength＝f(n)*(minlength+horgap)-horgap。

其中，所述平铺子模块进一步用于根据所有元素在所述对齐方向上修正后的第二长度以及在所述对齐方向上相邻元素之间的间隙长度，依次进行重新平铺。

其中，所述平铺子模块包括：

第一获取单元，用于获取所述图形界面当前在所述对齐方向上剩余的第三长度；

平铺单元，用于在所述第三长度小于所述第二长度时，将当前元素在下一个所述对齐方向的起始位置进行平铺。

其中，所述位置信息包括：在所述对齐方向上的第一长度以及在所述对齐方向上相邻元素之间的间隙长度；

相应的，所述选择子模块包括：

第二获取单元，用于获取所有元素的第一长度的最小值；

比较单元，用于将每个元素的第一长度分别与最小值的第一长度进行比较，得到一比较结果；

统计单元，用于按照比较结果的大小，统计比较结果的数量；

选择单元，用于在所述数量大于或等于一阈值时选择第一修正策略，在所述数量小于所述阈值时，选择第二修正策略。

其中，所述第一修正策略为f1(n)＝2ⁿ，所述第二修正策略为f2(n)＝m*n，其中第二修正策略的参数m的取值为数量最多的比较结果。

其中，所述预设的对齐方向是根据接收到的用户选择的对齐方向或者默认 设置的对齐方向确定的。

本发明实施例的图形界面的元素平铺装置，通过获取模块获取到终端图形界面上所有元素在对齐方向上的位置信息，然后依据位置信息修正每个元素在对齐方向上的长度并进行重新平铺，实现了在元素平铺凌乱时的修正以及重新平铺，在最大程度上使得预设对齐方向的元素边界对齐，得到较佳的对齐效果，不会出现视觉上的凌乱，提升了用户的使用体验。

需要说明的是，该装置是应用了上述图形界面的元素平铺方法的装置，上述图形界面的元素平铺方法实施例的实现方式适用于该装置，也能够达到相同的技术效果。

本发明的实施例还提供了一种终端，包括如上所述的图形界面的元素平铺装置。

本发明实施例的终端通过上述的图形界面的元素平铺装置，实现了在元素平铺凌乱时的修正以及重新平铺，在最大程度上使得预设对齐方向的元素边界对齐，得到较佳的对齐效果，不会出现视觉上的凌乱，提升了用户的使用体验。

需要说明的是，该终端是包括了上述图形界面的元素平铺装置的终端，上述图形界面的元素平铺装置实施例的实现方式适用于该终端，也能够达到相同的技术效果。

进一步需要说明的是，此说明书中所描述的终端包括但不限于智能手机、平板电脑等，且所描述的许多功能部件都被称为模块，以便更加特别地强调其实现方式的独立性。

本发明实施例中，模块可以用软件实现，以便由各种类型的处理器执行。举例来说，一个标识的可执行代码模块可以包括计算机指令的一个或多个物理或者逻辑块，举例来说，其可以被构建为对象、过程或函数。尽管如此，所标识模块的可执行代码无需物理地位于一起，而是可以包括存储在不同位里上的不同的指令，当这些指令逻辑上结合在一起时，其构成模块并且实现该模块的规定目的。

实际上，可执行代码模块可以是单条指令或者是许多条指令，并且甚至可以分布在多个不同的代码段上，分布在不同程序当中，以及跨越多个存储器设备分布。同样地，操作数据可以在模块内被识别，并且可以依照任何适当的形 式实现并且被组织在任何适当类型的数据结构内。所述操作数据可以作为单个数据集被收集，或者可以分布在不同位置上(包括在不同存储设备上)，并且至少部分地可以仅作为电子信号存在于系统或网络上。

在模块可以利用软件实现时，考虑到现有硬件工艺的水平，所以可以以软件实现的模块，在不考虑成本的情况下，本领域技术人员都可以搭建对应的硬件电路来实现对应的功能，所述硬件电路包括常规的超大规模集成(vlsi)电路或者门阵列以及诸如逻辑芯片、晶体管之类的现有半导体或者是其它分立的元件。模块还可以用可编程硬件设备，诸如现场可编程门阵列、可编程阵列逻辑、可编程逻辑设备等实现。

范例性实施例是参考该些附图来描述于下。许多不同的形式和实施例是可行而不偏离本发明精神及教示，因此，本揭示不应被建构成为在此所提出范例性实施例的限制。更确切地说，这些范例性实施例被提供以使得本揭示会是完善又完整，且会将本发明范围传达给那些熟知此项技术的人士。在该些图式中，组件尺寸及相对尺寸也许基于清晰起见而被夸大。在此所使用的术语只是基于描述特定范例性实施例目的，并无意成为限制用。如在此所使用地，除非该内文清楚地另有所指，否则该单数形式“一”、“一个”和“该”是意欲将该些多个形式也纳入。会进一步了解到该些术语“包含”及/或“包括”在使用于本说明书时，表示所述特征、整数、步骤、操作、构件及/或组件的存在，但不排除一或更多其它特征、整数、步骤、操作、构件、组件及/或其族群的存在或增加。除非另有所示，陈述时，一值范围包含该范围的上下限及其间的任何子范围。

以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明所述原理的前提下，还可以作出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。