用于生成界面布局约束的方法及装置与流程

本发明涉及界面布局领域，具体地，涉及一种用于生成界面布局约束的方法及装置。

控件操作界面技术

在进行程序界面开发时，为了使界面能够适应多种分辨率，可以通过控件与控件之间的相对位置来约束界面布局。例如，在IOS开发过程中，程序员通常使用Storyboard工具来完成界面部分，通过在Storyboard工具中设置约束条件来约束界面布局。

然而，设置约束条件是一项非常复杂的工作，约束条件互相制约，一个约束条件错误或者删除某一个控件，都将影响整体约束条件的设置。程序员经常会浪费大量的工作时间在做约束条件的设置上，导致界面开发难度较大，界面开发效率较低。

技术实现要素：

有鉴于此，本发明的目的是提供一种用于生成界面布局约束的方法及装置，以降低界面开发难度的目的。

在本发明的一个方面中，提供了一种用于生成界面布局约束的方法。该方法包括：根据预置的参照控件查找条件，在控件操作界面中查找出参照控件，所述控件操作界面中包含至少两个控件，计算出所述参照控件在所述控件操作界面中的绝对位置和/或绝对大小，计算出所述控件操作界面中任意其他控件相对所述参照控件的相对位置和/或相对大小，根据所述参照控件在所述控件操作界面中的绝对位置和/或绝对大小，以及，所述任意其他控件相对所述参照控件的相对位置和/或相对大小，生成用于约束所述参照控件以及所述任意其他控件位置和/或大小关系的程序代码和/或约束条件。

可选地，所述根据预置的参照控件查找条件，在控件操作界面中查找出参照控件包括：查找所述控件操作界面中，是否存在水平居中的控件；在存在水平居中的控件的情况下，将水平居中的控件中，距离所述控件操作界面左顶点最近的控件作为所述参照控件；在不存在水平居中的控件的情况下，查找所述控件操作界面中，是否存在垂直居中的控件；在存在垂直居中的控件的情况下，将垂直居中的控件中，距离所述控件操作界面左顶点最近的控件作为所述参照控件；在不存在垂直居中的控件的情况下，将距离所述控件操作界面左顶点最近的控件作为所述参照控件。

可选地，所述计算出所述控件操作界面中任意其他控件相对所述参照控件的相对位置包括：在所述任意其他控件与所述参照控件具有居中关系的情况下，得到所述任意其他控件相对所述参照控件居中的居中属性描述，其中，所述相对位置包括所述居中属性描述；在所述任意其他控件与所述参照控件不具有居中关系的情况下，计算出所述任意其他控件相对于所述参照控件的相对高度以及相对宽度，其中，所述相对位置包括所述相对高度以及所述相对宽度。

可选地，所述计算出所述参照控件在所述控件操作界面中的绝对大小包括：计算出所述参照控件的长宽比例。所述计算出所述控件操作界面中任意其他控件相对所述参照控件的相对大小包括：根据所述任意其他控件相对于所述参照控件的大小倍数，计算出所述任意其他控件的长宽比例。

可选地，所述方法还包括：响应于接收到导入所述至少两个控件的指令，将所述至少两个控件显示在所述控件操作界面中；接收对所述至少两个控件的移动指令；根据所述移动指令，在所述控件操作界面中相应移动所述至少两个控件；在接收到生成指令时，进入所述根据预置的参照控件查找条件，在控件操作界面中查找出参照控件的步骤。

在本发明的另一个方面中，提供了一种用于生成界面布局约束的装置。该装置包括：参照控件查找模块，被配置为根据预置的参照控件查找条件，在控件操作界面中查找出参照控件，所述控件操作界面中包含至少两个控件。第一获取模块，被配置为计算出所述参照控件在所述控件操作界面中的绝对位置和/或绝对大小。第二获取模块，被配置为计算出所述控件操作界面中任意其他控件相对所述参照控件的相对位置和/或相对大小。约束生成模块，被配置为根据所述参照控件在所述控件操作界面中的绝对位置和/或绝对大小，以及，所述任意其他控件相对所述参照控件的相对位置和/或相对大小，生成用于约束所述参照控件以及所述任意其他控件位置和/或大小关系的程序代码和/或约束条件。

可选地，所述参照控件查找模块包括：水平居中查找子模块，被配置为查找所述控件操作界面中，是否存在水平居中的控件。参照控件确定子模块，被配置为在所述水平居中查找子模块查找出存在水平居中的控件的情况下，将水平居中的控件中，距离所述控件操作界面左顶点最近的控件作为所述参照控件。垂直居中查找子模块，被配置为在所述水平居中查找子模块查找出不存在水平居中的控件的情况下，查找所述控件操作界面中，是否存在垂直居中的控件。所述参照控件确定子模块，被配置为在所述垂直居中查找子模块查找出存在垂直居中的控件的情况下，将垂直居中的控件中，距离所述控件操作界面左顶点最近的控件作为所述参照控件，在所述垂直居中查找子模块查找出不存在垂直居中的控件的情况下，将距离所述控件操作界面左顶点最近的控件作为所述参照控件。

可选地，所述第二获取模块包括：居中位置获取子模块，被配置为在所述任意其他控件与所述参照控件具有居中关系的情况下，得到所述任意其他控件相对所述参照控件居中的居中属性描述，其中，所述相对位置包括所述居中属性描述。位置参数获取子模块，被配置为在所述任意其他控件与所述参照控件不具有居中关系的情况下，计算出所述任意其他控件相对于所述参照控件的相对高度以及相对宽度，其中，所述相对位置包括所述相对高度以及所述相对宽度。

可选地，所述第一获取模块，被配置为计算出所述参照控件的长宽比例。所述第二获取模块，被配置为根据所述任意其他控件相对于所述参照控件的相对大小，计算出所述任意其他控件的长宽比例。

可选地，所述装置还包括：导入接收模块，被配置为响应于接收到导入所述至少两个控件的指令，将所述至少两个控件显示在所述控件操作界面中。移动指令接收模块，被配置为接收对所述至少两个控件的移动指令。移动指令执行模块，被配置为根据所述移动指令，在所述控件操作界面中相应移动所述至少两个控件。生成指令接收模块，被配置为在接收到生成指令时，触发所述参照控件查找模块进入所述根据预置的参照控件查找条件，在控件操作界面中查找出参照控件的步骤。

由于本发明根据预置的参照控件查找条件，在控件操作界面中查找出参照控件，计算出所述参照控件在所述控件操作界面中的绝对位置和/或绝对大小，计算出所述控件操作界面中任意其他控件相对所述参照控件的相对位置和/或相对大小，根据所述参照控件在所述控件操作界面中的绝对位置和/或绝对大小，以及，所述任意其他控件相对所述参照控件的相对位置和/或相对大小，生成了用于约束所述参照控件以及所述任意其他控件位置和/或大小关系的程序代码和/或约束条件，用户直接利用该程序代码或约束条件即可完成界面布局约束，从而降低了界面开发的难度，提高了界面开发效率。

本发明的其他特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

附图是用来提供对本发明的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本发明，但并不构成对本发明的限制。在附图中：

图1是根据一示例性实施例示出的实施环境示意图。

图2是根据本发明的一示例性实施例示出的一种用于生成界面布局约束的方法的流程图。

图3是根据本发明的另一示例性实施例示出的一种用于生成界面布局约束的方法的流程图。

图4是根据本发明的又一示例性实施例示出的一种用于生成界面布局约束的方法的流程图。

图5是根据本发明的一示例性实施例示出的一种用于生成界面布局约束的装置的框图。

图6是根据本发明的另一示例性实施例示出的一种用于生成界面布局约束的装置的框图。

具体实施方式

以下结合附图对本发明的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明，并不用于限制本发明。

图1是根据一示例性实施例示出的实施环境示意图。该实施环境包括：计算机101。其中，计算机101应用了本发明实施例提供的用于生成界面布局约束的方法。本发明实施例一种可能的实施方式中，还提供了如图1所示的控件操作界面1011。用户可以将控件1012、1013、1014导入控件操作界面1011。其中，本发明实施例所述参照控件以及所述任意其他控件可以是对数据和方法的封装，具体到控件操作界面上可以表现为图片。其中，在控件操作界面导入表现为图片的控件之后，还可以设置图片实际显示尺寸和图片尺寸的比例，并自动为图片命名，或者，由用户人工命名。例如，可以自动按数字递增方式的为图片命名，例如，自动命名的范围可以为“ctrl0001～ctrl9999”。另外，在表现为图片的控件导入控件操作界面之后，用户可以在控件操作界面中任意摆放图片，对图片的位置进行调整或进行删除等编辑操作。例如，控件操作界面中可以鼠标拖拽图片，上下箭头移动图片，按下ctrl键多选图片，按下shift+方向键微调图片位置，按下delete键删除图片、等等。

可以理解的是，图1所示实施环境仅用于示意本发明实施例提供的方法，并不构成对本发明实施例的限制。

图2是根据本发明的一示例性实施例示出的一种用于生成界面布局约束的方法的流程图。该方法可以应用于如图1所示的计算机101。该方法可以包括：

在步骤210中，根据预置的参照控件查找条件，在控件操作界面中查找出参照控件，所述控件操作界面中包含至少两个控件。

一种可能的实施方式中，应用本发明实施例提供的方法的计算机101可以响应于接收到导入至少两个控件的指令，将所述至少两个控件显示在控件操作界面中，接收对所述至少两个控件的移动指令，根据所述移动指令，在所述控件操作界面中相应移动所述至少两个控件，在接收到生成指令时，进入步骤210，根据预置的参照控件查找条件，在控件操作界面中查找出参照控件。

需要说明的是，本发明实施例对所述参照控件查找条件并不进行限制，可以根据实际需要进行设置。例如，一种可能的实施方式中，所述参照控件查找条件可以为：查找水平居中的控件作为所述参照控件，或者，查找垂直居中的控件作为所述参照控件，或者，查找距离控件操作界面左顶点最近的控件作为所述参照控件。再例如，另一种可能的实施方式中，可以先查找所述控件操作界面中，是否存在水平居中的控件。在存在水平居中的控件的情况下，将水平居中的控件中，距离所述控件操作界面左顶点最近的控件作为所述参照控件。在不存在水平居中的控件的情况下，查找所述控件操作界面中，是否存在垂直居中的控件。在存在垂直居中的控件的情况下，将垂直居中的控件中，距离所述控件操作界面左顶点最近的控件作为所述参照控件。在不存在垂直居中的控件的情况下，将距离所述控件操作界面左顶点最近的控件作为所述参照控件。

例如，根据上述参照控件查找条件，可以查找出图1所示的控件1012为参照控件。

在步骤220中，计算出所述参照控件在所述控件操作界面中的绝对位置和绝对大小。

例如，所述参照控件的绝对位置可以用居中属性、距控件操作界面左边缘距离，距控件操作界面左顶点距离来描述、等等。

例如，所述参照控件的绝对大小可以用参照控件的长宽比例来描述。

在步骤230中，计算出所述控件操作界面中任意其他控件相对所述参照控件的相对位置和相对大小。

可以理解的是，可以根据实际需要，设置相应的相对位置和相对大小的计算规则。例如，一种可能的实施方式中，在所述任意其他控件与所述参照控件具有居中关系的情况下，可以得到所述任意其他控件相对所述参照控件居中的居中属性描述，其中，所述相对位置包括所述居中属性描述。在所述任意其他控件与所述参照控件不具有居中关系的情况下，可以计算出所述任意其他控件相对于所述参照控件的相对高度以及相对宽度，其中，所述相对位置包括所述相对高度以及所述相对宽度。

再例如，可以根据所述任意其他控件相对于所述参照控件的相对大小，计算出所述任意其他控件的长宽比例。例如，所述任意其他控件为相对于所述参照控件大小的2倍，所述参照控件的长款比例为400:400，则所述任意其他控件的长宽比例为800:800。

在步骤240中，根据所述参照控件在所述控件操作界面中的绝对位置和绝对大小，以及，所述任意其他控件相对所述参照控件的相对位置和相对大小，生成用于约束所述参照控件以及所述任意其他控件位置和大小关系的程序代码和/或约束条件。

例如，根据图1所示参照控件1012“imageview”在所述控件操作界面中的绝对位置为水平居中且垂直居中，则可以生成能够在storyboard工具中使用的、用于约束该参照控件位置的程序代码段：

再例如，根据图1所示控件1013“button1”的相对位置为，从“button1”的底部到“imageview”的顶部为“8.0”，从“button1”的左边距到“imageview”的左边距为“0”，可以生成能够在storyboard工具中使用的、用于约束该控件位置的程序代码段：

需要说明的是，为了便于生成程序代码和/或约束条件，可以预先设置符合程序代码和/或约束条件语法规则的程序代码和/或约束条件模板，在该模板中，可以预设一些代码表达式和/或约束条件表达式，在需要生成程序代码和/或约束条件时，将参照控件的绝对位置和绝对大小，以及，其他任意控件的相对位置和相对大小作为参数写入表达式，从而生成相应的程序代码和/或约束条件。

可见，本发明实施例提供的方法根据预置的参照控件查找条件，查找出参照控件，计算出参照控件的绝对位置和绝对大小，计算出任意其他控件相对参照控件的相对位置和绝对大小，从而生成了用于约束所述参照控件以及所述任意其他控件位置和大小关系的程序代码和/或约束条件，用户直接利用该程序代码和/或约束条件即可完成界面布局约束，既实现了对控件位置关系的约束，又实现了对控件大小关系的约束，满足了多种分辨率下界面控件位置和大小能够合理布局的要求，还降低了界面开发的难度，提高了界面开发效率。

为了使本发明实施例更加易于理解，下面结合图3及图4对本发明另外两种可能的实施方式进行详细说明。

图3是根据本发明的另一示例性实施例示出的一种用于生成界面布局约束的方法的流程图。该方法可以应用于如图1所示的计算机101。该方法可以包括：

在步骤310中，根据预置的参照控件查找条件，在控件操作界面中查找出参照控件，所述控件操作界面中包含至少两个控件。

在步骤320中，计算出所述参照控件在所述控件操作界面中的绝对位置。

在步骤330中，计算出所述控件操作界面中任意其他控件相对所述参照控件的相对位置。

在步骤340中，根据所述参照控件在所述控件操作界面中的绝对位置，以及，所述任意其他控件相对所述参照控件的相对位置，生成用于约束所述参照控件以及所述任意其他控件位置关系的程序代码和/或约束条件。

可见，该实施例提供的方法生成了用于约束所述参照控件以及所述任意其他控件位置关系的程序代码和/或约束条件，用户直接利用该程序代码和/或约束条件即可完成界面布局约束，实现了对控件位置关系的约束，满足了多种分辨率下界面控件位置能够合理布局的要求，还降低了界面开发的难度，提高了界面开发效率。

图4是根据本发明的又一示例性实施例示出的一种用于生成界面布局约束的方法的流程图。该方法可以应用于如图1所示的计算机101。该方法可以包括：

在步骤410中，根据预置的参照控件查找条件，在控件操作界面中查找出参照控件，所述控件操作界面中包含至少两个控件。

在步骤420中，计算出所述参照控件在所述控件操作界面中的绝对大小。

在步骤430中，计算出所述控件操作界面中任意其他控件相对所述参照控件的相对大小。

在步骤440中，根据所述参照控件在所述控件操作界面中的绝对大小，以及，所述任意其他控件相对所述参照控件的相对大小，生成用于约束所述参照控件以及所述任意其他控件大小关系的程序代码和/或约束条件。

可见，该实施例提供的方法生成了用于约束所述参照控件以及所述任意其他控件位置关系的程序代码和/或约束条件，用户直接利用该程序代码和/或约束条件即可完成界面布局约束，实现了对控件大小关系的约束，满足了多种分辨率下界面控件大小能够合理缩放的要求，还降低了界面开发的难度，提高了界面开发效率。

图5是根据本发明的一示例性实施例示出的一种用于生成界面布局约束的装置500的框图。该装置可以配置于如图1所示的计算机101。该装置可以包括：参照控件查找模块510、第一获取模块520、第二获取模块530以及约束生成模块540。

该参照控件查找模块510，可以被配置为根据预置的参照控件查找条件，在控件操作界面中查找出参照控件，所述控件操作界面中包含至少两个控件。

该第一获取模块520，可以被配置为计算出所述参照控件在所述控件操作界面中的绝对位置和/或绝对大小。

该第二获取模块530，可以被配置为计算出所述控件操作界面中任意其他控件相对所述参照控件的相对位置和/或相对大小。

该约束生成模块540，可以被配置为根据所述参照控件在所述控件操作界面中的绝对位置和/或绝对大小，以及，所述任意其他控件相对所述参照控件的相对位置和/或相对大小，生成用于约束所述参照控件以及所述任意其他控件位置和/或大小关系的程序代码和/或约束条件。

可见，本发明实施例提供的装置根据预置的参照控件查找条件，查找出参照控件，计算出参照控件的绝对位置和/或绝对大小，计算出任意其他控件相对参照控件的相对位置和/或绝对大小，从而生成了用于约束所述参照控件以及所述任意其他控件位置和/或大小关系的程序代码和/或约束条件，用户直接利用该程序代码或约束条件即可完成界面布局约束，降低了界面开发的难度，提高了界面开发效率。

图6是根据本发明的另一示例性实施例示出的一种用于生成界面布局约束的装置500的框图。在该装置中，该参照控件查找模块510可以包括：水平居中查找子模块511、参照控件确定子模块512以及垂直居中查找子模块513。

该水平居中查找子模块511，可以被配置为查找所述控件操作界面中，是否存在水平居中的控件。

该参照控件确定子模块512，可以被配置为在所述水平居中查找子模块511查找出存在水平居中的控件的情况下，将水平居中的控件中，距离所述控件操作界面左顶点最近的控件作为所述参照控件。

该垂直居中查找子模块513，可以被配置为在所述水平居中查找子模块511查找出不存在水平居中的控件的情况下，查找所述控件操作界面中，是否存在垂直居中的控件。

该参照控件确定子模块512，可以被配置为在所述垂直居中查找子模块513查找出存在垂直居中的控件的情况下，将垂直居中的控件中，距离所述控件操作界面左顶点最近的控件作为所述参照控件，在所述垂直居中查找子模块查找出不存在垂直居中的控件的情况下，将距离所述控件操作界面左顶点最近的控件作为所述参照控件。

一种可能的实施方式中，如图6所示，该第二获取模块530可以包括：居中位置获取子模块531，被配置为在所述任意其他控件与所述参照控件具有居中关系的情况下，得到所述任意其他控件相对所述参照控件居中的居中属性描述，其中，所述相对位置包括所述居中属性描述。位置参数获取子模块532，被配置为在所述任意其他控件与所述参照控件不具有居中关系的情况下，计算出所述任意其他控件相对于所述参照控件的相对高度以及相对宽度，其中，所述相对位置包括所述相对高度以及所述相对宽度。

一种可能的实施方式中，该第一获取模块520，被配置为计算出所述参照控件的长宽比例。该第二获取模块530，被配置为根据所述任意其他控件相对于所述参照控件的相对大小，计算出所述任意其他控件的长宽比例。

一种可能的实施方式中，如图6所示，该装置还可以包括：导入接收模块501，可以被配置为响应于接收到导入所述至少两个控件的指令，将所述至少两个控件显示在所述控件操作界面中。移动指令接收模块502，可以被配置为接收对所述至少两个控件的移动指令。移动指令执行模块503，可以被配置为根据所述移动指令，在所述控件操作界面中相应移动所述至少两个控件。生成指令接收模块504，被配置为在接收到生成指令时，触发所述参照控件查找模块510进入所述根据预置的参照控件查找条件，在控件操作界面中查找出参照控件的步骤。

以上结合附图详细描述了本发明的优选实施方式，但是，本发明并不限于上述实施方式中的具体细节，在本发明的技术构思范围内，可以对本发明的技术方案进行多种简单变型，这些简单变型均属于本发明的保护范围。

另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合。为了避免不必要的重复，本发明对各种可能的组合方式不再另行说明。

此外，本发明的各种不同的实施方式之间也可以进行任意组合，只要其不违背本发明的思想，其同样应当视为本发明所公开的内容。