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

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

【技术实现步骤摘要】
一种实现界面控件跨层级水平等距移动的方法及其系统


[0001]本专利技术涉及界面控件制作
，特别是一种实现界面控件跨层级水平等距移动的方法及其系统。

技术介绍

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

技术实现思路

[0004]为克服上述问题，本专利技术的目的是提供一种实现界面控件跨层级水平等距移动的方法，能对用户界面上的控件进行跨层级设置水平等距，方便对界面控件进行排列放置，且排列精确。
[0005]本专利技术采用以下方案实现：一种实现界面控件跨层级水平等距移动的方法，所述方法包括如下步骤：
[0006]步骤S1、在界面上选择多个需要进行水平等距处理的控件；
[0007]步骤S2、将所选控件在场景中的相对坐标全部转换为世界坐标，并多个控件根据世界坐标位置进行排序；
[0008]步骤S3、选择排序后的最前两个控件，并获得两个控件的间距值；
[0009]步骤S4、遍历选择的所有控件，依次确定两个控件的下一个控件的位置；
[0010]步骤S5、根据获得的下一个控件的新坐标位置，移动界面控件到新坐标位置，实现水平等距移动。
[0011]进一步的，所述步骤S2进一步具体为：获取所选控件在场景中的相对坐标位置，其中，界面控件使用的都是相对坐标位置，相对坐标位置由对应的比例值和偏移量表示；所述比例值为当前控件相对于其父控件的比例；所述偏移量为当前控件相对于其父控件的比例后，还存在需要偏移的像素值；将所选控件的相对坐标全部转换为世界坐标，根据这些所选择控件的世界坐标位置，进行从左到右排序；将位于最左边位置的控件设为第一个控件，以此类推设置第二个控件，第三个控件，直至最后一个控件。
[0012]进一步的，所述将所选控件的相对坐标全部转换为世界坐标具体为：根据比例值和偏移量通过计算得到，计算方式为：如果ParentWidth表示当前控件的父控件的宽度,Scale 表示当前控件相对于父控件的比例值，Offset表示当前控件偏移的像素值，则当前控件的世界横坐标PosX为：PosX＝ParentWidth*Scale+Offset，由于进行水平移动，则控件的纵坐标位置是一直保持不变的。
[0013]进一步的，所述步骤S3进一步具体为：选择排序后的最左边的两个控件，即第一个控件和第二个控件，然后计算出两个控件的水平间距值，水平间距值为两个控件的横坐标的差值减去第一个控件的宽度值；计算方式为：设置Space代表间距值，FirstPosX代表第一个控件的横坐标位置，SecondPosX代表第二个控件的横坐标位置，FirstWidth代表第一个控件的宽度，则两个控件的间距值为：Space＝SecondPosX
‑
FirstPosX
‑ꢀ
FirstWidth。
[0014]进一步的，所述步骤S4进一步具体为：遍历界面中选择的所有控件，根据前两个控件的间距值，依次确定下一个控件的世界横坐标位置，下一个控件的世界横坐标位置计算方法为：
[0015](1)设置CurrentPosX代表当前控件的横坐标位置，CurrentWidth代表当前控件的宽度，Space代表两个控件的间距值，则下一个控件的移动后的世界横坐标位置 NextNewPosX为：
[0016]NextNewPosX＝CurrentPosX+CurrentWidth+Space；当前控件指需要计算的下一个控件的前面一个控件；
[0017](2)NextOldPosX代表下一个控件未移动前的横坐标位置，下一个控件移动前后位置的差值用Diff代表，则Diff为：Diff＝NextNewPosX
‑
NextOldPosX；
[0018](3)由于控件移动的方式有两种，只改变控件位置的偏移量，或者只改变控件位置的比例值；则通过计算后的横坐标位置和原先的纵坐标位置即能得出最后控件移动后的坐标位置；若保持控件偏移量即偏移量OffSet不变，只改变控件比例值Scale，则进行水平等距后的控件的横坐标位置NextNewAbsPosX计算方式为：Scale＝(NextNewAbsPosX
‑ꢀ
OffSet)/ParentWidth；NextNewAbsPosX＝ParentWidth*Scale+Offset；
[0019]2)若保持控件比例值即比例值Scale不变，只改变控件偏移量Offset，则进行水平等距后的控件的横坐标位置NextNewAbsPosX计算方式如下：
[0020]NextNewAbsPosX＝ParentWidth*Scale+Offset+Diff。
[0021]进一步的，所述步骤S5进一步具体为：根据获得的下一个控件的新坐标位置，按顺序依次移动界面控件到其对应的位置，实现界面控件跨层级水平等距处理，由于使用的都是世界坐标位置，无论是同一层级，还是不同层级的控件，都能实现等距功能。
[0022]本专利技术还提供了一种实现界面控件跨层级水平等距移动的系统，所述系统包括选择模块、坐标转换模块、控件间距获取模块、位置确认模块、以及移动模块；
[0023]所述选择模块，用于在界面上选择多个需要进行水平等距处理的控件；
[0024]所述坐标转换模块，用于将所选控件在场景中的相对坐标全部转换为世界坐标，并多个控件根据世界坐标位置进行排序；
[0025]所述控件间距获取模块，选择排序后的最前两个控件，并获得两个控件的间距值；
[0026]所述位置确认模块，遍历选择的所有控件，依次确定两个控件的下一个控件的位置；
[0027]所述移动模块，根据获得的下一个控件的新坐标位置，移动界面控件到新坐标位置，实现水平等距移动。
[0028]进一步的，所述坐标转换模块的实现方式进一步具体为：获取所选控件在场景中的相对坐标位置，其中，界面控件使用的都是相对坐标位置，相对坐标位置由对应的比例值和偏移量表示；所述比例值为当前控件相对于其父控件的比例；所述偏移量为当前控件相对于其父控件的比例后，还存在需要偏移的像素值；将所选本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种实现界面控件跨层级水平等距移动的方法，其特征在于：所述方法包括如下步骤：步骤S1、在界面上选择多个需要进行水平等距处理的控件；步骤S2、将所选控件在场景中的相对坐标全部转换为世界坐标，并多个控件根据世界坐标位置进行排序；步骤S3、选择排序后的最前两个控件，并获得两个控件的间距值；步骤S4、遍历选择的所有控件，依次确定两个控件的下一个控件的位置；步骤S5、根据获得的下一个控件的新坐标位置，移动界面控件到新坐标位置，实现水平等距移动。2.根据权利要求1所述的一种实现界面控件跨层级水平等距移动的方法，其特征在于：所述步骤S2进一步具体为：获取所选控件在场景中的相对坐标位置，其中，界面控件使用的都是相对坐标位置，相对坐标位置由对应的比例值和偏移量表示；所述比例值为当前控件相对于其父控件的比例；所述偏移量为当前控件相对于其父控件的比例后，还存在需要偏移的像素值；将所选控件的相对坐标全部转换为世界坐标，根据这些所选择控件的世界坐标位置，进行从左到右排序；将位于最左边位置的控件设为第一个控件，以此类推设置第二个控件，第三个控件，直至最后一个控件。3.根据权利要求2所述的一种实现界面控件跨层级水平等距移动的方法，其特征在于：所述将所选控件的相对坐标全部转换为世界坐标具体为：根据比例值和偏移量通过计算得到，计算方式为：如果ParentWidth表示当前控件的父控件的宽度,Scale表示当前控件相对于父控件的比例值，Offset表示当前控件偏移的像素值，则当前控件的世界横坐标PosX为：PosX＝ParentWidth*Scale+Offset，由于进行水平移动，则控件的纵坐标位置是一直保持不变的。4.根据权利要求2所述的一种实现界面控件跨层级水平等距移动的方法，其特征在于：所述步骤S3进一步具体为：选择排序后的最左边的两个控件，即第一个控件和第二个控件，然后计算出两个控件的水平间距值，水平间距值为两个控件的横坐标的差值减去第一个控件的宽度值；计算方式为：设置Space代表间距值，FirstPosX代表第一个控件的横坐标位置，SecondPosX代表第二个控件的横坐标位置，FirstWidth代表第一个控件的宽度，则两个控件的间距值为：Space＝SecondPosX
‑
FirstPosX
‑
FirstWidth。5.根据权利要求4所述的一种实现界面控件跨层级水平等距移动的方法，其特征在于：所述步骤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。6.根据权利要求1所述的一种实现界面控件跨层级水平等距移动的方法，其特征在于：所述步骤S5进一步具体为：根据获得的下一个控件的新坐标位置，按顺序依次移动界面控件到其对应的位置，实现界面控件跨层级水平等距处理，由于使用的都是世界坐标位置，无论是同一层级，还是不同层级的控件，都能实现等距功能。7.一种实现界面控件跨层级水平等距移动的系统，其特征在于：所述系统包括选择模块、坐标转换模...

【专利技术属性】
技术研发人员：刘德建，柳旭辉，李佳，
申请(专利权)人：福建天晴在线互动科技有限公司，
类型：发明
国别省市：