CN101382887A - 一种调整界面布局的方法及装置 - Google Patents

Abstract

本发明提供了一种调整界面布局的方法及装置，所述方法包括：生成与当前界面对应的第一表格，并根据所述第一表格生成当前界面的控件列表，然后调整所述列表中控件的先后顺序和所占列数，再生成与调整后的控件列表对应的第二表格。运用本发明的方法，可以将当前的界面转换为控件列表，所述控件列表按照界面逐行从左到右读取控件的顺序显示控件，因此，用户可以通过调节控件列表中的列表的先后顺序以及所占列数，以实现对当前界面布局的调整，因为列表的每一列都对应第二表格中的每一个格子，因此控件之间不会出现重叠或者交叉的现象，进一步，控件的先后顺序也可以根据用户的需求或者控件的重要程度进行调整，更能满足用户在实际中的不同需求。

Description

一种调整界面布局的方法及装置

技术领域

本发明涉及软件开发领域，特别是涉及一种调整界面布局的方法及装置。

背景技术

界面是用户与计算机系统交互的桥梁，在软件开发过程中，研发人员经常需要开发不同的界面。对于一些专门开发企业信息系统的研发人员来说，更是进行大量的界面开发工作，如果全部人工去做，将占用整个软件项目很大的工作量，因此研发人员在界面布局的调整过程中，可以使用相应的界面设计器，以提高界面开发的工作效率。在界面设计器中，用户可以对界面上的控件进行布局，即对界面上控件的位置和大小信息根据自己的需要进行调整，从而实现调整整个界面布局的目的。

现有技术中，有一种以界面设计器为平台，以绝对位置进行布局的调整界面布局的方法，该方法的实现过程为：用户使用鼠标对界面上的控件进行拖拽操作，把控件摆放在预定的目标位置，就可以调整控件位置，从而对界面布局也进行了相应的调整；进一步的，用户还可以在界面上控件的属性框的属性列表中，直接设置控件的属性名称和值，通过修改控件的属性来调整界面上的控件位置，以调整界面的整体布局。

但是该方法同时存在缺点：以绝对位置对界面进行布局，是通过拖拽和属性值设置的方式进行的，在这种界面布局的方式下，研发人员调整的是某个控件在整个界面上的位置，并没有注重界面中控件与控件之间的关系，在调整界面布局的时候，容易引起控件之间重叠或交叉的问题，进一步的，还需要研发人员精确设置控件的位置和大小等属性的值，才能达到界面相对规范的效果，易用性比较差。

总之，目前需要本领域技术人员迫切解决的一个技术问题就是：如何能够提出一种调整界面布局的方法，用以解决现有技术中调整界面布局时容易引起控件之间重叠或者交叉的问题。

发明内容

本发明所要解决的技术问题是提供一种调整界面布局的方法，用以解决现有技术中调整界面布局时容易引起控件之间重叠或者交叉的问题。

本发明的另一个目的是将上述构思应用于具体的应用环境中，提供一种调整界面布局的装置，从而保证该方法的实现和应用。

为解决上述技术问题，本发明实施例提供了一种调整界面布局的方法，包括：

生成与当前界面对应的第一表格；

根据所述第一表格生成当前界面的控件列表；

调整所述列表中控件的先后顺序和所占列数；

生成与调整后的控件列表对应的第二表格。

优选的，所述生成与当前界面对应的第一表格，具体包括：

创建一个零行零列的空表格，并依次读取当前界面上控件的位置和大小信息；

根据所述位置和大小信息，将控件添加至所述空表格中的相应位置。

优选的，所述根据所述位置和大小信息，将控件添加至所述空表格中的相应位置，具体包括：

获取控件的横坐标和纵坐标信息；

根据控件位置的纵坐标值，获取控件在表格中的行信息，当获取不到时，在表格中添加控件所在的行；

根据控件位置的横坐标值，获取控件在表格中的列信息，当获取不到时，在表格中添加控件所在的列；

根据所述行和列的信息，将控件添加至表格中的相应位置。

优选的，所述根据所述第一表格生成当前界面的控件列表，具体包括：

按照从左到右的顺序，依次读取所述第一表格中各行的控件；

把当前读取到的所述第一表格中的每一个控件，按照从上到下的顺序，添加至列表中。

优选的，所述生成与调整后的控件列表对应的第二表格，具体包括：

按照从上到下的顺序，读取控件列表中的控件；

根据读取到的控件的先后顺序，重新设置控件在表格中的位置；

根据所述控件的位置，生成第二表格。

本发明实施例还提供了一种调整界面布局的装置，包括：

创建子模块，用于创建一个零行零列的空表格；

第一读取子模块，用于依次读取当前界面上控件的位置和大小信息；

第一添加子模块，用于根据所述位置和大小信息，将控件添加至所述空表格中的相应位置。

优选的，所述第一添加子模块包括：

第二获取子模块，用于获取控件的横坐标和纵坐标信息；

添加行子模块，用于根据控件位置的纵坐标值，获取控件在表格中的行信息，当获取不到时，在表格中添加控件所在的行；

添加列子模块，用于根据控件位置的横坐标值，获取控件在表格中的列信息，当获取不到时，在表格中添加控件所在的列；

添加控件子模块，用于根据所述行和列的信息，将控件添加至表格中的相应位置。

优选的，所述第二生成模块具体包括：

第三读取子模块，按照从左到右的顺序，依次读取所述第一表格中各行的控件；

第二添加子模块，用于把当前读取到的所述第一表格中的一个控件，按照从上到下的顺序，添加至列表中。

优选的，所述第三生成模块包括：

第四读取子模块，用于按照从上到下的顺序，读取控件列表中的控件；

重新设置子模块，用于根据读取到的控件的先后顺序，重新设置控件在表格中的位置；

生成子模块，用于根据所述控件的位置，生成第二表格。

优选的，所述装置还包括：

界面显示模块，用于将所述第二表格转换为界面显示。

与现有技术相比，本发明具有以下优点：

本发明通过首先生成与当前界面对应的第一表格，并根据所述第一表格生成当前界面的控件列表，然后调整所述列表中控件的先后顺序和所占列数，再生成与调整后的控件列表对应的第二表格，可以看出，本发明将当前的界面可以转换为控件列表显示，所述控件列表按照界面逐行从左到右读取控件的顺序显示控件，因此，用户可以通过调节控件列表中的列表的先后顺序以及所占列表，以实现对当前界面布局的调整，因为列表的每一列都对应第二表格中的每一个格子，因此控件之间不会出现重叠或者交叉的现象，进一步，控件的先后顺序也可以根据用户的需求或者控件的重要程度进行调整，更能满足用户在实际中的不同需求。

附图说明

图1是本发明的一种调整界面布局的方法实施例1的流程图；

图2是本发明的一种调整界面布局的方法实施例2的流程图；

图3是本发明的方法实施例2中的界面示意图；

图4是本发明的方法实施例2中联系人标签控件的示意图；

图5是本发明的方法实施例2中联系人内容控件的示意图；

图6是本发明的方法实施例2中第一表格的示意图；

图7是本发明的方法实施例2中调整前的控件列表示意图；

图8是本发明的方法实施例2中调整后的控件列表示意图；

图9是本发明的方法实施例2中的第二表格示意图；

图10是本发明的一种调整界面布局的装置实施例的结构框图；

图11是本发明的一种调整界面布局的装置优选实施例的结构框图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

本发明可用于众多通用或专用的计算系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、包括以上任何系统或设备的分布式计算环境等等。

本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本发明，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

参考图1，示出了本发明的一种调整界面布局的方法实施例1的流程图，可以包括以下步骤：

步骤101：生成与当前界面对应的第一表格；

步骤102：根据所述第一表格生成当前界面的控件列表；

步骤103：调整所述列表中控件的先后顺序和所占列数；

步骤104：生成与调整后的界面对应的第二表格。

在本实施例中，首先根据当前界面的控件布局情况，将界面布局区域转换为一个多行多列的第一表格，所述第一表格按照控件的信息被划分为多个格子区域，当前界面中的每个控件都位于所述第一表格中不同的格子区域，并根据大小信息，占据一个或多个格子；然后再将该表格转换为控件列表，在控件列表中，用户可以调整控件的先后顺序和所占的列数，从而通过调整先后顺序，可以改变控件在界面中的布局；

可以看出，这种生成控件列表的方法，可以形象地将控件以列表的形式展示给用户，可以使用户通过调整列表中控件的先后顺序，就可以实现对界面上控件布局进行调整的目的，用户无需精确地设置控件位置，或者大小等属性的值，即可布局出规范整齐的界面，不会引起控件之间的重叠或者交叉的问题，进一步的，这种控件列表的形式，更满足用户根据控件的重要程度来调整先后顺序的需求，可以将用户需要的重要控件信息调整至列表的前面，从而使用户获得更好的使用体验。

参考图2，示出了本发明的一种调整界面布局的方法实施例2的流程图，可以包括以下步骤：

步骤201：创建一个零行零列的空表格，并依次读取当前界面上控件的位置和大小信息；

在本实施例中，首先需要创建一个空表格，所述空表格可以在后续的操作过程中放入界面上的所有控件，然后依次读取当前界面的控件位置和大小信息，其中，当前界面可以参考图3所示；

步骤202：根据所述位置和大小信息，将控件添加至所述空表格中的相应位置；

优选的，所述步骤202具体可以包括以下子步骤：

子步骤2021：获取控件的横坐标和纵坐标信息；

在本实施例中，假设获取到的联系人标签控件的坐标信息为(20，20)，获取到的联系人内容控件的坐标信息为(80，20)，其中，80为横坐标信息，20为纵坐标信息；

子步骤2022：根据控件位置的纵坐标值，获取控件在表格中的行信息，当获取不到时，在表格中添加控件所在的行；

根据联系人标签控件的纵坐标值20，在表格中获取行信息，因为是空表格，所以当获取不到时，在表格中添加控件所在的行，将控件放入表格；其中，在表格中添加联系人标签控件后的表格，可以参考图4所示；可以理解的是，根据联系人内容控件的纵坐标值为20，可以得知和联系人标签控件应该在同一行；

子步骤2023：根据控件位置的横坐标值，获取控件在表格中的列信息，当获取不到时，在表格中添加控件所在的列；

因为联系人内容控件的横坐标值为80，在表格中找不到相应的列信息，因此在表格中新增一列放入联系人内容控件，可以参考图5所示；

子步骤2024：依次根据所述行和列的信息，将控件添加至表格中的相应位置；

依次读取当前界面上其他控件的坐标信息，并根据上述方法，将所有的控件都一一放入表格的相应位置上，则依据图3所示的界面生成的第一表格可以参考图6所示；

步骤203：按照从左到右的顺序，依次读取所述第一表格中各行的控件；

首先读取所述第一表格中第一行的控件信息，并将读取到的各控件依次从上到下地放入控件列表中；

步骤204：把当前读取到的所述第一表格中的每一个控件，按照从上到下的顺序，添加至列表中；

读取第一表格中的第一行之后，继续读取第二行的控件信息，当第一表格中所有行的控件都读取完之后，控件列表就已经生成，可以参考图7所示；

步骤205：调整所述列表中控件的先后顺序和所占列数；

用户可以对列表中的控件排列顺序进行调整，调整时，可以根据用户需求，将相对重要的控件放置到列表的第一行，或者前几行，当用户调整了其中某一个控件的位置后，其他控件的位置顺序可以自动变化，并且用户还可以根据内容控件的需求内容，设置其所占列数，所占列数越多，在后续生成表格时该内容控件就会越长；其中，调整后的控件列表可以参考图8所示；

需要说明的是，对于用户来讲，可以设置“移到最前”、“移到最后”、“上移一位”和“下移一位”等简便操作的功能，该功能可以以按钮的形式设置，也可以以右键快捷属性的方式设置，本发明对此不作限定；

步骤206：按照从上到下的顺序，读取控件列表中的控件；

调整列表的顺序之后，需要将调整顺序后的控件列表，再生成响应的表格，以通过调整列表中的控件顺序达到调整界面布局的目的，首先，按照从上到下的顺序，读取控件列表中已经经过顺序调整的控件；

步骤207：根据读取到的控件的先后顺序，重新设置控件在表格中的位置；

因为控件的先后顺序在列表中进行过调整，所以控件再重新生成表格时，控件在表格中的相对位置也发生了变化，需要根据读取到的控件的先后顺序，重新设置控件在表格中的位置；

步骤208：根据所述控件的位置，生成第二表格。

根据所述控件列表中的控件顺序或者位置，生成与调整后的控件列表相对应的第二表格，可以参考图9所示。

优选的，本实施例还可以进一步包括：

步骤209：将所述第二表格转换为界面显示。

在本实施例中，还可以将步骤2010中生成的第二表格，转换为界面向用户展示出来。

对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。

参考图10，示出了本发明的一种调整界面布局的装置实施例的结构框图，可以包括以下模块：

第一生成模块1001，用于生成与当前界面对应的第一表格；

第二生成模块1002，用于根据所述第一表格生成当前界面的控件列表；

调整模块1003，用于调整所述列表中控件的先后顺序和所占列数；

第三生成模块1004，用于生成与调整后的界面对应的第二表格。

需要说明的是，在本实施例中，可以通过调整模块调整列表上控件的先后顺序和所占列数，形成新的列表，然后根据调整后的新列表，根据控件在表格中应该占有的格子位置信息，第三生成模块生成与之对应的第二表格，可以实现对界面重新布局的目的，使得用户只需要调整控件列表中控件的先后顺序，就可以完成对界面的调整布局，并且，更能满足用户对于将重要的业务信息放到前面的需求，调整模块调整了其中一个控件的先后顺序之后，其他控件的顺序也会随之改变，不仅使得控件不会重叠和交叉，也使得调整界面布局的方法更为简单易行。

参考图11，示出了本发明的一种调整界面布局的装置优选实施例的结构框图，可以包括以下模块：

创建子模块1101，用于创建一个零行零列的空表格；

第一读取子模块1102，用于依次读取当前界面上控件的位置和大小信息；

第一添加子模块1103，用于根据所述位置和大小信息，将控件添加至所述空表格中的相应位置；

优选的，所述第一添加子模块具体可以包括：

第二获取子模块11031，用于获取控件的横坐标和纵坐标信息；

添加行子模块11032，用于根据控件位置的纵坐标值，获取控件在表格中的行信息，当获取不到时，在表格中添加控件所在的行；

添加列子模块11033，用于根据控件位置的横坐标值，获取控件在表格中的列信息，当获取不到时，在表格中添加控件所在的列；

添加控件子模块11034，用于根据所述行和列的信息，将控件添加至表格中的相应位置；

第三读取子模块1104，按照从左到右的顺序，依次读取所述第一表格中各行的控件；

第二添加子模块1105，用于把当前读取到的所述第一表格中的一个控件，按照从上到下的顺序，添加至列表中；

调整模块1106，用于调整所述列表中控件的先后顺序和所占列数；

第四读取子模块1107，用于按照从上到下的顺序，读取控件列表中的控件；

重新设置子模块1108，用于根据读取到的控件的先后顺序，重新设置控件在表格中的位置；

生成子模块1109，用于根据所述控件的位置，生成第二表格。

优选的，本实施例还可以包括：

界面显示模块11010，用于将所述第二表格转换为界面显示。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置实施例而言，由于其基本相应于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个......”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上对本发明所提供的一种调整界面布局的方法及调整界面布局的装置进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (12)

1、一种调整界面布局的方法，其特征在于，包括:

生成与当前界面对应的第一表格；

根据所述第一表格生成当前界面的控件列表；

调整所述列表中控件的先后顺序和所占列数；

生成与调整后的控件列表对应的第二表格。

2、如权利要求1所述的方法，其特征在于，所述生成与当前界面对应的第一表格，具体包括:

创建一个零行零列的空表格，并依次读取当前界面上控件的位置和大小信息；

根据所述位置和大小信息，将控件添加至所述空表格中的相应位置。

3、如权利要求2所述的方法，其特征在于，所述根据所述位置和大小信息，将控件添加至所述空表格中的相应位置，具体包括:

获取控件的横坐标和纵坐标信息；

根据控件位置的纵坐标值，获取控件在表格中的行信息，当获取不到时，在表格中添加控件所在的行；

根据控件位置的横坐标值，获取控件在表格中的列信息，当获取不到时，在表格中添加控件所在的列；

根据所述行和列的信息，将控件添加至表格中的相应位置。

4、如权利要求1所述的方法，其特征在于，所述根据所述第一表格生成当前界面的控件列表，具体包括:

按照从左到右的顺序，依次读取所述第一表格中各行的控件；

把当前读取到的所述第一表格中的每一个控件，按照从上到下的顺序，添加至列表中。

5、如权利要求1所述的方法，其特征在于，所述生成与调整后的控件列表对应的第二表格，具体包括:

按照从上到下的顺序，读取控件列表中的控件；

根据读取到的控件的先后顺序，重新设置控件在表格中的位置；

根据所述控件的位置，生成第二表格。

6、如权利要求1所述的方法，其特征在于，还包括:

将所述第二表格转换为界面显示。

7、一种调整界面布局的装置，其特征在于，包括:

第一生成模块，用于生成与当前界面对应的第一表格；

第二生成模块，根据所述第一表格生成当前界面的控件列表；

调整模块，用于调整所述列表中控件的先后顺序和所占列数；

第三生成模块，用于生成与调整后的界面对应的第二表格。

8、如权利要求7所述的装置，其特征在于，所述第一生成模块具体包括:

创建子模块，用于创建一个零行零列的空表格；

第一读取子模块，用于依次读取当前界面上控件的位置和大小信息；

第一添加子模块，用于根据所述位置和大小信息，将控件添加至所述空表格中的相应位置。

9、如权利要求8所述的装置，其特征在于，所述第一添加子模块包括:

第二获取子模块，用于获取控件的横坐标和纵坐标信息；

添加行子模块，用于根据控件位置的纵坐标值，获取控件在表格中的行信息，当获取不到时，在表格中添加控件所在的行；

添加列子模块，用于根据控件位置的横坐标值，获取控件在表格中的列信息，当获取不到时，在表格中添加控件所在的列；

添加控件子模块，用于根据所述行和列的信息，将控件添加至表格中的相应位置。

10、如权利要求7所述的装置，其特征在于，所述第二生成模块具体包括:

第三读取子模块，按照从左到右的顺序，依次读取所述第一表格中各行的控件；

第二添加子模块，用于把当前读取到的所述第一表格中的一个控件，按照从上到下的顺序，添加至列表中。

11、如权利要求7所述的装置，其特征在于，所述第三生成模块包括:

第四读取子模块，用于按照从上到下的顺序，读取控件列表中的控件；

重新设置子模块，用于根据读取到的控件的先后顺序，重新设置控件在表格中的位置；

生成子模块，用于根据所述控件的位置，生成第二表格。

12、如权利要求7所述的装置，其特征在于，所述装置还包括:

界面显示模块，用于将所述第二表格转换为界面显示。

Images