一种实现界面控件跨层级水平等距移动的方法及其系统

摘要

本发明提供了一种实现界面控件跨层级水平等距移动的方法，该方法为：步骤S1、在界面上选择多个需要进行水平等距处理的控件；步骤S2、将所选控件在场景中的相对坐标全部转换为世界坐标，并多个控件根据世界坐标位置进行排序；步骤S3、选择排序后的最前两个控件，并获得两个控件的间距值；步骤S4、遍历选择的所有控件，依次确定两个控件的下一个控件的位置；步骤S5、根据获得的下一个控件的新坐标位置，移动界面控件到新坐标位置，实现水平等距移动。本发明能对用户界面上的控件进行跨层级设置水平等距，方便对界面控件进行排列放置。

说明书

技术领域

本发明涉及界面控件制作技术领域，特别是一种实现界面控件跨层级水平等距移动的方法及其系统。

背景技术

在用户界面编辑时，控件位置的排列对齐是比较重要的功能，往往需要将多个按钮控件、图片控件或者文本控件进行排列放置。在进行控件排列对齐的时候，一般都需要保持各个控件的间距是相等的。通常都是设置界面布局(例如水平布局或者垂直布局)来进行保持各控件间距一致。但是这种方法，存在着一定的局限性。首先，如果使用水平布局来保持各控件水平等距的话，必须将这些控件放在同一个布局容器中，但是有可能这些控件是分属于不同的布局容器，跟原先的界面布局设计存在冲突。另外，所选择的控件如果是不同层级的，目前的很多程序都不支持，都只支持同一层级的控件水平等距功能。

现有技术主要存在以下缺点：现有技术主要是通过水平布局功能来实现界面上多个控件水平等距功能，并且只支持同一层级的控件进行等距排列，很难对不同层级上的多个控件实现等距功能，如果需要实现不同层级上的控件的等距功能，都得需要进行手工计算位置来实现，比较繁琐。

发明内容

为克服上述问题，本发明的目的是提供一种实现界面控件跨层级水平等距移动的方法，能对用户界面上的控件进行跨层级设置水平等距，方便对界面控件进行排列放置，且排列精确。

本发明采用以下方案实现：一种实现界面控件跨层级水平等距移动的方法，所述方法包括如下步骤：

步骤S1、在界面上选择多个需要进行水平等距处理的控件；

步骤S2、将所选控件在场景中的相对坐标全部转换为世界坐标，并多个控件根据世界坐标位置进行排序；

步骤S3、选择排序后的最前两个控件，并获得两个控件的间距值；

步骤S4、遍历选择的所有控件，依次确定两个控件的下一个控件的位置；

步骤S5、根据获得的下一个控件的新坐标位置，移动界面控件到新坐标位置，实现水平等距移动。

进一步的，所述步骤S2进一步具体为：获取所选控件在场景中的相对坐标位置，其中，界面控件使用的都是相对坐标位置，相对坐标位置由对应的比例值和偏移量表示；所述比例值为当前控件相对于其父控件的比例；所述偏移量为当前控件相对于其父控件的比例后，还存在需要偏移的像素值；将所选控件的相对坐标全部转换为世界坐标，根据这些所选择控件的世界坐标位置，进行从左到右排序；将位于最左边位置的控件设为第一个控件，以此类推设置第二个控件，第三个控件，直至最后一个控件。

进一步的，所述将所选控件的相对坐标全部转换为世界坐标具体为：根据比例值和偏移量通过计算得到，计算方式为：如果ParentWidth表示当前控件的父控件的宽度,Scale 表示当前控件相对于父控件的比例值，Offset表示当前控件偏移的像素值，则当前控件的世界横坐标PosX为：PosX＝ParentWidth*Scale+Offset，由于进行水平移动，则控件的纵坐标位置是一直保持不变的。

进一步的，所述步骤S3进一步具体为：选择排序后的最左边的两个控件，即第一个控件和第二个控件，然后计算出两个控件的水平间距值，水平间距值为两个控件的横坐标的差值减去第一个控件的宽度值；计算方式为：设置Space代表间距值，FirstPosX代表第一个控件的横坐标位置，SecondPosX代表第二个控件的横坐标位置，FirstWidth代表第一个控件的宽度，则两个控件的间距值为：Space＝SecondPosX-FirstPosX- FirstWidth。

进一步的，所述步骤S4进一步具体为：遍历界面中选择的所有控件，根据前两个控件的间距值，依次确定下一个控件的世界横坐标位置，下一个控件的世界横坐标位置计算方法为：

(1)设置CurrentPosX代表当前控件的横坐标位置，CurrentWidth代表当前控件的宽度，Space代表两个控件的间距值，则下一个控件的移动后的世界横坐标位置NextNewPosX为：

NextNewPosX＝CurrentPosX+CurrentWidth+Space；当前控件指需要计算的下一个控件的前面一个控件；

(2)NextOldPosX代表下一个控件未移动前的横坐标位置，下一个控件移动前后位置的差值用Diff代表，则Diff为：Diff＝NextNewPosX-NextOldPosX；

(3)由于控件移动的方式有两种，只改变控件位置的偏移量，或者只改变控件位置的比例值；则通过计算后的横坐标位置和原先的纵坐标位置即能得出最后控件移动后的坐标位置；若保持控件偏移量即偏移量OffSet不变，只改变控件比例值Scale，则进行水平等距后的控件的横坐标位置NextNewAbsPosX计算方式为：Scale＝(NextNewAbsPosX-OffSet)/ParentWidth；NextNewAbsPosX＝ParentWidth*Scale+Offset；

2)若保持控件比例值即比例值Scale不变，只改变控件偏移量Offset，则进行水平等距后的控件的横坐标位置NextNewAbsPosX计算方式如下：

NextNewAbsPosX＝ParentWidth*Scale+Offset+Diff。

进一步的，所述步骤S5进一步具体为：根据获得的下一个控件的新坐标位置，按顺序依次移动界面控件到其对应的位置，实现界面控件跨层级水平等距处理，由于使用的都是世界坐标位置，无论是同一层级，还是不同层级的控件，都能实现等距功能。

本发明还提供了一种实现界面控件跨层级水平等距移动的系统，所述系统包括选择模块、坐标转换模块、控件间距获取模块、位置确认模块、以及移动模块；

所述选择模块，用于在界面上选择多个需要进行水平等距处理的控件；

所述坐标转换模块，用于将所选控件在场景中的相对坐标全部转换为世界坐标，并多个控件根据世界坐标位置进行排序；

所述控件间距获取模块，选择排序后的最前两个控件，并获得两个控件的间距值；

所述位置确认模块，遍历选择的所有控件，依次确定两个控件的下一个控件的位置；

所述移动模块，根据获得的下一个控件的新坐标位置，移动界面控件到新坐标位置，实现水平等距移动。

进一步的，所述坐标转换模块的实现方式进一步具体为：获取所选控件在场景中的相对坐标位置，其中，界面控件使用的都是相对坐标位置，相对坐标位置由对应的比例值和偏移量表示；所述比例值为当前控件相对于其父控件的比例；所述偏移量为当前控件相对于其父控件的比例后，还存在需要偏移的像素值；将所选控件的相对坐标全部转换为世界坐标，根据这些所选择控件的世界坐标位置，进行从左到右排序；将位于最左边位置的控件设为第一个控件，以此类推设置第二个控件，第三个控件，直至最后一个控件。

进一步的，所述将所选控件的相对坐标全部转换为世界坐标具体为：根据比例值和偏移量通过计算得到，计算方式为：如果ParentWidth表示当前控件的父控件的宽度,Scale 表示当前控件相对于父控件的比例值，Offset表示当前控件偏移的像素值，则当前控件的世界横坐标PosX为：PosX＝ParentWidth*Scale+Offset，由于进行水平移动，则控件的纵坐标位置是一直保持不变的。

进一步的，所述控件间距获取模块的实现方式进一步具体为：选择排序后的最左边的两个控件，即第一个控件和第二个控件，然后计算出两个控件的水平间距值，水平间距值为两个控件的横坐标的差值减去第一个控件的宽度值；计算方式为：设置Space代表间距值，FirstPosX代表第一个控件的横坐标位置，SecondPosX代表第二个控件的横坐标位置，FirstWidth代表第一个控件的宽度，则两个控件的间距值为：Space＝SecondPosX-FirstPosX-FirstWidth。

进一步的，所述位置确认模块的实现方式进一步具体为：遍历界面中选择的所有控件，根据前两个控件的间距值，依次确定下一个控件的世界横坐标位置，下一个控件的世界横坐标位置计算方法为：

(1)设置CurrentPosX代表当前控件的横坐标位置，CurrentWidth代表当前控件的宽度，Space代表两个控件的间距值，则下一个控件的移动后的世界横坐标位置NextNewPosX为：

NextNewPosX＝CurrentPosX+CurrentWidth+Space；当前控件指需要计算的下一个控件的前面一个控件；

(2)NextOldPosX代表下一个控件未移动前的横坐标位置，下一个控件移动前后位置的差值用Diff代表，则Diff为：Diff＝NextNewPosX-NextOldPosX；

(3)由于控件移动的方式有两种，只改变控件位置的偏移量，或者只改变控件位置的比例值；则通过计算后的横坐标位置和原先的纵坐标位置即能得出最后控件移动后的坐标位置；若保持控件偏移量即偏移量OffSet不变，只改变控件比例值Scale，则进行水平等距后的控件的横坐标位置NextNewAbsPosX计算方式为：Scale＝(NextNewAbsPosX-OffSet)/ParentWidth；NextNewAbsPosX＝ParentWidth*Scale+Offset；

2)若保持控件比例值即比例值Scale不变，只改变控件偏移量Offset，则进行水平等距后的控件的横坐标位置NextNewAbsPosX计算方式如下：

NextNewAbsPosX＝ParentWidth*Scale+Offset+Diff。

进一步的，所述移动模块的实现方式进一步具体为：根据获得的下一个控件的新坐标位置，按顺序依次移动界面控件到其对应的位置，实现界面控件跨层级水平等距处理，由于使用的都是世界坐标位置，无论是同一层级，还是不同层级的控件，都能实现等距功能。

本发明的有益效果在于：本发明通过计算场景中所有选中控件经过水平等距后的世界位置(正常的控件都是相对位置，需要将这些相对位置转换为世界位置)，然后再根据这些控件的起始的世界位置和控件宽度，计算出该控件需要移动的距离。因为都是计算在界面上的世界位置，并不是相对位置，所以无论是同一层级，还是不同层级，经过控件移动后的距离都可以保持在世界位置上的水平等距功能；对用户界面上的控件进行跨层级设置水平等距，方便对界面控件进行排列放置，有助于提高用户编辑界面的效率。

附图说明

图1是本发明的方法流程示意图。

图2是本发明的系统原理框图。

图3是本发明一实施例中控件ABCD跨层等距效果的示意图。

具体实施方式

下面结合附图对本发明做进一步说明。

如图1所示，本发明的一种实现界面控件跨层级水平等距移动的方法，所述方法包括如下步骤：

步骤S1、在界面上选择多个需要进行水平等距处理的控件；

步骤S2、将所选控件在场景中的相对坐标全部转换为世界坐标，并多个控件根据世界坐标位置进行排序；

步骤S3、选择排序后的最前两个控件，并获得两个控件的间距值；

步骤S4、遍历选择的所有控件，依次确定两个控件的下一个控件的位置；

步骤S5、根据获得的下一个控件的新坐标位置，移动界面控件到新坐标位置，实现水平等距移动。

下面结合一具体实施例对本发明做进一步说明：

本发明在界面上需要选中三个以上的控件，然后将他们的场景位置坐标从相对坐标转换为世界坐标，再根据这些世界坐标，进行排序，获取前两个界面控件。接着，通过前两个界面控件的世界坐标的位置，获取两个控件之间的距离值，然后通过递归计算后面所有控件经过水平等距后的世界坐标位置，计算得出每个控件需要移动的距离进行移动，最后实现界面控件的跨层级水平等距功能。

本发明的一种实现界面控件跨层级水平等距移动的方法，该方法为：

1.在界面上选择需要进行水平等距的控件，需要至少选择三个控件；

首先，在界面上选择需要进行水平等距的控件，至少需要选择三个控件，因为需要两个控件来确定两个控件的水平间距值，而第三个以及后面的控件则根据该间距值进行移动位置，以达到所有的界面控件水平间距一致的目的。

2.将所选控件的场景相对坐标全部转换为世界坐标，并根据这些世界坐标位置从左到右的顺序进行排序。

获取到所有的选择控件的坐标位置，将所选控件的相对坐标全部转换为世界坐标。根据这些所选择控件的坐标位置，进行从左到右排序。将位于最左边位置的控件设为第一个控件，以此类推设置第二个控件，第三个控件，直至最后一个控件。由于界面控件要满足不同场景分辨率的设置(即场景分辨率改变，对应界面下的控件位置也要按比例改变)，所以界面控件使用的都是相对坐标位置，可以直接一开始就获取到对应的相对坐标位置(相对坐标位置由对应的比例值和偏移量表示，可以直接获取)。而控件的世界坐标位置是根据比例值(即当前控件相对于其父控件的比例)和偏移量(即当前控件相对于其父控件的比例后，还存在需要偏移的像素值)通过计算得出来的。计算方式如下所示：

如果ParentWidth代表当前控件的父控件的宽度,Scale当前控件相对于父控件的比例值，Offset代表当前控件偏移的像素值，则当前控件的世界横坐标(PosX)为：

PosX＝ParentWidth*Scale+Offset；

3.选择排序后的最左边的两个控件，计算出两个控件的间距值

选择排序后的最左边的两个控件，即第一个控件和第二个控件，然后计算出两个控件的水平间距值。水平间距值为两个控件的横坐标的差值减去第一个控件的宽度值。如下所示：

如果Space代表间距值，FirstPosX代表第一个控件的横坐标位置，SecondPosX代表第二个控件的横坐标位置(即根据PosX的方式能得到第一个控件的横坐标位置FirstPosX，第二个控件的横坐标位置SecondPosX)，FirstWidth代表第一个控件的宽度，则计算的两个控件的间距值为：Space＝SecondPosX-FirstPosX-FirstWidth。

4.遍历选择的所有控件，依次确定下一个控件的位置

遍历界面中选择的所有控件，根据前两个控件的间距值，依次确定下一个控件的位置。下一个控件的位置计算方法如下：

(1)若CurrentPosX代表当前控件(当前控件指的是需要计算的下一个控件的前面一个控件。就比如要算第三个控件的横坐标位置，则当前控件就是第二个控件，以此类推)的横坐标位置，CurrentWidth代表当前控件的宽度，Space代表两个控件的间距值，则下一个控件的新的横坐标(用NextNewPosX代表)位置为：

NextNewPosX＝CurrentPosX+CurrentWidth+Space；

(2)NextOldPosX代表下一个控件的原先横坐标位置，下一个控件前后位置的差值(用Diff代表)为：

Diff＝NextNewPosX-NextOldPosX

(3)因为控件移动的方式有两种，可以只改变控件位置的偏移量，或者只改变控件位置的比例值。由于是水平等距，所以控件的纵坐标位置是一直保持不变的，所以只需要计算移动后的控件横坐标即可求出控件的坐标位置。通过计算后的横坐标位置和原先的纵坐标位置就可以得出最后控件移动后的坐标位置。

1)若保持控件偏移量(Offset不变)，只改变控件比例值(Scale)，则进行水平等距后的控件的横坐标位置计算方式如下：

Scale＝(NextNewAbsPosX-OffSet)/ParentWidth；

NextNewAbsPosX＝ParentWidth*Scale+Offset；

2)若保持控件比例值(Scale不变)，只改变控件偏移量(Offset)，则进行水平等距后的控件的横坐标位置计算方式如下：

NextNewAbsPosX＝ParentWidth*Scale+Offset+Diff；

5.根据计算出的新控件的位置，移动界面控件到指定位置，实现水平等距

最后，根据上一步计算出的控件的绝对位置，按顺序依次移动界面控件到其对应的位置，实现界面控件跨层级水平等距。因为使用的都是绝对位置，无论是同一层级，还是不同层级，都是可以实现等距功能。

如图2所示，本发明还提供了一种实现界面控件跨层级水平等距移动的系统，所述系统包括选择模块、坐标转换模块、控件间距获取模块、位置确认模块、以及移动模块；

所述选择模块，用于在界面上选择多个需要进行水平等距处理的控件；

所述坐标转换模块，用于将所选控件在场景中的相对坐标全部转换为世界坐标，并多个控件根据世界坐标位置进行排序；

所述控件间距获取模块，选择排序后的最前两个控件，并获得两个控件的间距值；

所述位置确认模块，遍历选择的所有控件，依次确定两个控件的下一个控件的位置；

所述移动模块，根据获得的下一个控件的新坐标位置，移动界面控件到新坐标位置，实现水平等距移动。

其中，所述坐标转换模块的实现方式进一步具体为：获取所选控件在场景中的相对坐标位置，其中，界面控件使用的都是相对坐标位置，相对坐标位置由对应的比例值和偏移量表示；所述比例值为当前控件相对于其父控件的比例；所述偏移量为当前控件相对于其父控件的比例后，还存在需要偏移的像素值；将所选控件的相对坐标全部转换为世界坐标，根据这些所选择控件的世界坐标位置，进行从左到右排序；将位于最左边位置的控件设为第一个控件，以此类推设置第二个控件，第三个控件，直至最后一个控件。

所述将所选控件的相对坐标全部转换为世界坐标具体为：根据比例值和偏移量通过计算得到，计算方式为：如果ParentWidth表示当前控件的父控件的宽度,Scale表示当前控件相对于父控件的比例值，Offset表示当前控件偏移的像素值，则当前控件的世界横坐标PosX为：PosX＝ParentWidth*Scale+Offset，由于进行水平移动，则控件的纵坐标位置是一直保持不变的。

所述控件间距获取模块的实现方式进一步具体为：选择排序后的最左边的两个控件，即第一个控件和第二个控件，然后计算出两个控件的水平间距值，水平间距值为两个控件的横坐标的差值减去第一个控件的宽度值；计算方式为：设置Space代表间距值，FirstPosX 代表第一个控件的横坐标位置，SecondPosX代表第二个控件的横坐标位置，FirstWidth 代表第一个控件的宽度，则两个控件的间距值为：Space＝SecondPosX-FirstPosX- FirstWidth。

所述位置确认模块的实现方式进一步具体为：遍历界面中选择的所有控件，根据前两个控件的间距值，依次确定下一个控件的世界横坐标位置，下一个控件的世界横坐标位置计算方法为：

(1)设置CurrentPosX代表当前控件的横坐标位置，CurrentWidth代表当前控件的宽度，Space代表两个控件的间距值，则下一个控件的移动后的世界横坐标位置NextNewPosX为：

NextNewPosX＝CurrentPosX+CurrentWidth+Space；当前控件指需要计算的下一个控件的前面一个控件；

(2)NextOldPosX代表下一个控件未移动前的横坐标位置，下一个控件移动前后位置的差值用Diff代表，则Diff为：Diff＝NextNewPosX-NextOldPosX；

(3)由于控件移动的方式有两种，只改变控件位置的偏移量，或者只改变控件位置的比例值；则通过计算后的横坐标位置和原先的纵坐标位置即能得出最后控件移动后的坐标位置；若保持控件偏移量即偏移量OffSet不变，只改变控件比例值Scale，则进行水平等距后的控件的横坐标位置NextNewAbsPosX计算方式为：Scale＝(NextNewAbsPosX-OffSet)/ParentWidth；NextNewAbsPosX＝ParentWidth*Scale+Offset；

2)若保持控件比例值即比例值Scale不变，只改变控件偏移量Offset，则进行水平等距后的控件的横坐标位置NextNewAbsPosX计算方式如下：

NextNewAbsPosX＝ParentWidth*Scale+Offset+Diff。

所述移动模块的实现方式进一步具体为：根据获得的下一个控件的新坐标位置，按顺序依次移动界面控件到其对应的位置，实现界面控件跨层级水平等距处理，由于使用的都是世界坐标位置，无论是同一层级，还是不同层级的控件，都能实现等距功能。

本发明的应用场景为：

首先，在界面上选择需要进行水平等距的控件，至少需要选择三个控件，因为需要两个控件来确定两个控件的水平间距值，而第三个以及后面的则根据该间距值进行移动位置，以达到所有的界面控件水平间距一致的目的。如图3所示，就比如选择四个界面控件，分别是控件A、控件B、控件C和控件D，如果要让所有界面控件水平间距一致的话，并且控件位置是从A到D排列的话，则最后的目的是要让控件A到控件B的距离等于控件B到控件C的距离，并等于控件C到控件D的距离。

然后，获取到所有的选择控件的坐标位置，将所选控件的横坐标全部转换为世界横坐标。根据所选择控件的世界坐标位置，进行从左到右排序。将位于最左边位置的控件设为第一个控件，以此类推设置第二个控件，第三个控件，直至最后一个控件。例如可以把上面的控件A设置为第一个控件，控件B设为第二个控件，控件C设为第三个控件，控件D 设为第四个控件。由于界面控件要满足不同场景分辨率的设置(即场景分辨率改变，对应界面下的控件位置也要按比例改变)，所以界面控件使用的是相对坐标位置，可以直接一开始获取到对应的相对坐标位置。而控件的世界坐标位置是根据比例值(即当前控件相对于其父控件的比例)和偏移量(即当前控件相对于其父控件的比例后，还存在需要偏移的像素值)通过计算得出来的。计算方式如下所示：

如果ParentWidth代表当前控件的父控件的宽度,Scale当前控件相对于父控件的比例值，Offset代表当前控件偏移的像素值，则当前控件的世界横坐标(PosX)为：

PosX＝ParentWidth*Scale+Offset；

接着，选择排序后的最左边的两个控件，即控件A和控件B，然后计算出两个控件的水平间距值。水平间距值为两个控件的横坐标的差值减去第一个控件的宽度值，即控件A和控件B的水平间距值为控件B的横坐标减去控件A的横坐标，再减去控件A的宽度值。如果Space代表间距值，A_PosX代表第一个控件的世界横坐标位置，B_PosX代表第二个控件的世界横坐标位置，A_Width代表第一个控件的宽度，则计算的两个空间的间距值为：

Space＝A_PosX-B_PosX-A_Width；

计算完前两个控件的间距值后，则需要遍历界面中选择的所有控件，根据前两个控件的间距值，依次确定下一个控件的位置。

下一个控件的位置计算方法如下：

(1)若CurrentPosX代表当前控件(当前控件指的是需要计算的下一个控件的前面一个控件。就比如要算第三个控件的横坐标位置，则当前控件就是第二个控件，以此类推)的横坐标位置，CurrentWidth代表当前控件的宽度，Space代表两个控件的间距值，则下一个控件的新的横坐标(用NextNewPosX代表)位置为：

NextNewPosX＝CurrentPosX+CurrentWidth+Space；

即控件C经过水平等距后的横坐标位置(用C_New_PosX表示)为：

C_New_PosX＝B_PosX+B_Width+Space；

控件D经过水平等距后的横坐标位置(用D_New_PosX表示)为：

D_New_PosX＝C_PosX+C_Width+Space；

(2)NextOldPosX代表下一个控件的原先横坐标位置，下一个控件前后位置的差值(用Diff代表)为：

Diff＝NextNewPosX-NextOldPosX；

若C_PosX表示控件C原先的位置，控件C前后位置的差值(用C_Diff表示)则为：

C_Diff＝C_New_PosX-C_PosX；

若D_PosX表示控件D原先的位置，控件D前后位置的差值(用D_Diff表示)则为：

D_Diff＝D_New_PosX-D_PosX；

(3)因为控件移动的方式有两种，可以只改变控件位置的偏移量，或者只改变控件位置的比例值。由于是水平等距，所以控件的纵坐标位置是一直保持不变的，所以只需要计算移动后的控件横坐标即可求出控件的坐标位置。通过计算后的横坐标位置和原先的纵坐标位置就可以得出最后控件移动后的坐标位置。

1)若保持控件偏移量(Offset不变)，只改变控件比例值(Scale)，则进行水平等距后的控件的横坐标位置计算方式如下：

Scale＝(Next_New_PosX-OffSet)/ParentWidth；

Next_New_PosX＝ParentWidth*Scale+Offset；

即控件C等距后的比例值(用C_New_Scale表示)为：

C_New_Scale＝(C_New_PosX-C_Offset)/ParentWidth；

控件C等距移动后的横坐标位置为：

C_New_PosX＝C_New_Scale*ParentWidth+C_Offset；

2)若保持控件比例值(Scale不变)，只改变控件偏移量(Offset)，则进行水平等距后的控件的横坐标位置计算方式如下：

NextNewAbsPosX＝ParentWidth*Scale+Offset+Diff；

即控件C等距移动后的横坐标位置为：

C_New_PosX＝C_Scale*ParentWidth+C_Offset+C_Diff；

最后，根据上一步计算出的控件的绝对位置，按顺序依次移动界面控件到其对应的位置，实现界面控件跨层级水平等距。因为使用的都是绝对位置，无论是同一层级，还是不同层级，都是可以实现等距功能。图3表示的是有4个控件，分别是控件A、控件B、控件C和控件D，控件A、控件B、控件D同一层级，控件C位于控件D的里面一层，选中控件A、控件B和控件C，然后实现其等距，因为控件A和控件B距离为80，则等距后的控件C和控件B也保持80的距离。

以上所述仅为本发明的较佳实施例，凡依本发明申请专利范围所做的均等变化与修饰，皆应属本发明的涵盖范围。