本發(fā)明涉及界面布局領域，具體地，涉及一種用于生成界面布局約束的方法及裝置。

控件操作界面技術

在進行程序界面開發(fā)時，為了使界面能夠適應多種分辨率，可以通過控件與控件之間的相對位置來約束界面布局。例如，在IOS開發(fā)過程中，程序員通常使用Storyboard工具來完成界面部分，通過在Storyboard工具中設置約束條件來約束界面布局。

然而，設置約束條件是一項非常復雜的工作，約束條件互相制約，一個約束條件錯誤或者刪除某一個控件，都將影響整體約束條件的設置。程序員經(jīng)常會浪費大量的工作時間在做約束條件的設置上，導致界面開發(fā)難度較大，界面開發(fā)效率較低。

技術實現(xiàn)要素：

有鑒于此，本發(fā)明的目的是提供一種用于生成界面布局約束的方法及裝置，以降低界面開發(fā)難度的目的。

在本發(fā)明的一個方面中，提供了一種用于生成界面布局約束的方法。該方法包括：根據(jù)預置的參照控件查找條件，在控件操作界面中查找出參照控件，所述控件操作界面中包含至少兩個控件，計算出所述參照控件在所述控件操作界面中的絕對位置和/或絕對大小，計算出所述控件操作界面中任意其他控件相對所述參照控件的相對位置和/或相對大小，根據(jù)所述參照控件在所述控件操作界面中的絕對位置和/或絕對大小，以及，所述任意其他控件相對所述參照控件的相對位置和/或相對大小，生成用于約束所述參照控件以及所述任意其他控件位置和/或大小關系的程序代碼和/或約束條件。

可選地，所述根據(jù)預置的參照控件查找條件，在控件操作界面中查找出參照控件包括：查找所述控件操作界面中，是否存在水平居中的控件；在存在水平居中的控件的情況下，將水平居中的控件中，距離所述控件操作界面左頂點最近的控件作為所述參照控件；在不存在水平居中的控件的情況下，查找所述控件操作界面中，是否存在垂直居中的控件；在存在垂直居中的控件的情況下，將垂直居中的控件中，距離所述控件操作界面左頂點最近的控件作為所述參照控件；在不存在垂直居中的控件的情況下，將距離所述控件操作界面左頂點最近的控件作為所述參照控件。

可選地，所述計算出所述控件操作界面中任意其他控件相對所述參照控件的相對位置包括：在所述任意其他控件與所述參照控件具有居中關系的情況下，得到所述任意其他控件相對所述參照控件居中的居中屬性描述，其中，所述相對位置包括所述居中屬性描述；在所述任意其他控件與所述參照控件不具有居中關系的情況下，計算出所述任意其他控件相對于所述參照控件的相對高度以及相對寬度，其中，所述相對位置包括所述相對高度以及所述相對寬度。

可選地，所述計算出所述參照控件在所述控件操作界面中的絕對大小包括：計算出所述參照控件的長寬比例。所述計算出所述控件操作界面中任意其他控件相對所述參照控件的相對大小包括：根據(jù)所述任意其他控件相對于所述參照控件的大小倍數(shù)，計算出所述任意其他控件的長寬比例。

可選地，所述方法還包括：響應于接收到導入所述至少兩個控件的指令，將所述至少兩個控件顯示在所述控件操作界面中；接收對所述至少兩個控件的移動指令；根據(jù)所述移動指令，在所述控件操作界面中相應移動所述至少兩個控件；在接收到生成指令時，進入所述根據(jù)預置的參照控件查找條件，在控件操作界面中查找出參照控件的步驟。

在本發(fā)明的另一個方面中，提供了一種用于生成界面布局約束的裝置。該裝置包括：參照控件查找模塊，被配置為根據(jù)預置的參照控件查找條件，在控件操作界面中查找出參照控件，所述控件操作界面中包含至少兩個控件。第一獲取模塊，被配置為計算出所述參照控件在所述控件操作界面中的絕對位置和/或絕對大小。第二獲取模塊，被配置為計算出所述控件操作界面中任意其他控件相對所述參照控件的相對位置和/或相對大小。約束生成模塊，被配置為根據(jù)所述參照控件在所述控件操作界面中的絕對位置和/或絕對大小，以及，所述任意其他控件相對所述參照控件的相對位置和/或相對大小，生成用于約束所述參照控件以及所述任意其他控件位置和/或大小關系的程序代碼和/或約束條件。

可選地，所述參照控件查找模塊包括：水平居中查找子模塊，被配置為查找所述控件操作界面中，是否存在水平居中的控件。參照控件確定子模塊，被配置為在所述水平居中查找子模塊查找出存在水平居中的控件的情況下，將水平居中的控件中，距離所述控件操作界面左頂點最近的控件作為所述參照控件。垂直居中查找子模塊，被配置為在所述水平居中查找子模塊查找出不存在水平居中的控件的情況下，查找所述控件操作界面中，是否存在垂直居中的控件。所述參照控件確定子模塊，被配置為在所述垂直居中查找子模塊查找出存在垂直居中的控件的情況下，將垂直居中的控件中，距離所述控件操作界面左頂點最近的控件作為所述參照控件，在所述垂直居中查找子模塊查找出不存在垂直居中的控件的情況下，將距離所述控件操作界面左頂點最近的控件作為所述參照控件。

可選地，所述第二獲取模塊包括：居中位置獲取子模塊，被配置為在所述任意其他控件與所述參照控件具有居中關系的情況下，得到所述任意其他控件相對所述參照控件居中的居中屬性描述，其中，所述相對位置包括所述居中屬性描述。位置參數(shù)獲取子模塊，被配置為在所述任意其他控件與所述參照控件不具有居中關系的情況下，計算出所述任意其他控件相對于所述參照控件的相對高度以及相對寬度，其中，所述相對位置包括所述相對高度以及所述相對寬度。

可選地，所述第一獲取模塊，被配置為計算出所述參照控件的長寬比例。所述第二獲取模塊，被配置為根據(jù)所述任意其他控件相對于所述參照控件的相對大小，計算出所述任意其他控件的長寬比例。

可選地，所述裝置還包括：導入接收模塊，被配置為響應于接收到導入所述至少兩個控件的指令，將所述至少兩個控件顯示在所述控件操作界面中。移動指令接收模塊，被配置為接收對所述至少兩個控件的移動指令。移動指令執(zhí)行模塊，被配置為根據(jù)所述移動指令，在所述控件操作界面中相應移動所述至少兩個控件。生成指令接收模塊，被配置為在接收到生成指令時，觸發(fā)所述參照控件查找模塊進入所述根據(jù)預置的參照控件查找條件，在控件操作界面中查找出參照控件的步驟。

由于本發(fā)明根據(jù)預置的參照控件查找條件，在控件操作界面中查找出參照控件，計算出所述參照控件在所述控件操作界面中的絕對位置和/或絕對大小，計算出所述控件操作界面中任意其他控件相對所述參照控件的相對位置和/或相對大小，根據(jù)所述參照控件在所述控件操作界面中的絕對位置和/或絕對大小，以及，所述任意其他控件相對所述參照控件的相對位置和/或相對大小，生成了用于約束所述參照控件以及所述任意其他控件位置和/或大小關系的程序代碼和/或約束條件，用戶直接利用該程序代碼或約束條件即可完成界面布局約束，從而降低了界面開發(fā)的難度，提高了界面開發(fā)效率。

本發(fā)明的其他特征和優(yōu)點將在隨后的具體實施方式部分予以詳細說明。

附圖說明

附圖是用來提供對本發(fā)明的進一步理解，并且構成說明書的一部分，與下面的具體實施方式一起用于解釋本發(fā)明，但并不構成對本發(fā)明的限制。在附圖中：

圖1是根據(jù)一示例性實施例示出的實施環(huán)境示意圖。

圖2是根據(jù)本發(fā)明的一示例性實施例示出的一種用于生成界面布局約束的方法的流程圖。

圖3是根據(jù)本發(fā)明的另一示例性實施例示出的一種用于生成界面布局約束的方法的流程圖。

圖4是根據(jù)本發(fā)明的又一示例性實施例示出的一種用于生成界面布局約束的方法的流程圖。

圖5是根據(jù)本發(fā)明的一示例性實施例示出的一種用于生成界面布局約束的裝置的框圖。

圖6是根據(jù)本發(fā)明的另一示例性實施例示出的一種用于生成界面布局約束的裝置的框圖。

具體實施方式

以下結合附圖對本發(fā)明的具體實施方式進行詳細說明。應當理解的是，此處所描述的具體實施方式僅用于說明和解釋本發(fā)明，并不用于限制本發(fā)明。

圖1是根據(jù)一示例性實施例示出的實施環(huán)境示意圖。該實施環(huán)境包括：計算機101。其中，計算機101應用了本發(fā)明實施例提供的用于生成界面布局約束的方法。本發(fā)明實施例一種可能的實施方式中，還提供了如圖1所示的控件操作界面1011。用戶可以將控件1012、1013、1014導入控件操作界面1011。其中，本發(fā)明實施例所述參照控件以及所述任意其他控件可以是對數(shù)據(jù)和方法的封裝，具體到控件操作界面上可以表現(xiàn)為圖片。其中，在控件操作界面導入表現(xiàn)為圖片的控件之后，還可以設置圖片實際顯示尺寸和圖片尺寸的比例，并自動為圖片命名，或者，由用戶人工命名。例如，可以自動按數(shù)字遞增方式的為圖片命名，例如，自動命名的范圍可以為“ctrl0001～ctrl9999”。另外，在表現(xiàn)為圖片的控件導入控件操作界面之后，用戶可以在控件操作界面中任意擺放圖片，對圖片的位置進行調(diào)整或進行刪除等編輯操作。例如，控件操作界面中可以鼠標拖拽圖片，上下箭頭移動圖片，按下ctrl鍵多選圖片，按下shift+方向鍵微調(diào)圖片位置，按下delete鍵刪除圖片、等等。

可以理解的是，圖1所示實施環(huán)境僅用于示意本發(fā)明實施例提供的方法，并不構成對本發(fā)明實施例的限制。

圖2是根據(jù)本發(fā)明的一示例性實施例示出的一種用于生成界面布局約束的方法的流程圖。該方法可以應用于如圖1所示的計算機101。該方法可以包括：

在步驟210中，根據(jù)預置的參照控件查找條件，在控件操作界面中查找出參照控件，所述控件操作界面中包含至少兩個控件。

一種可能的實施方式中，應用本發(fā)明實施例提供的方法的計算機101可以響應于接收到導入至少兩個控件的指令，將所述至少兩個控件顯示在控件操作界面中，接收對所述至少兩個控件的移動指令，根據(jù)所述移動指令，在所述控件操作界面中相應移動所述至少兩個控件，在接收到生成指令時，進入步驟210，根據(jù)預置的參照控件查找條件，在控件操作界面中查找出參照控件。

需要說明的是，本發(fā)明實施例對所述參照控件查找條件并不進行限制，可以根據(jù)實際需要進行設置。例如，一種可能的實施方式中，所述參照控件查找條件可以為：查找水平居中的控件作為所述參照控件，或者，查找垂直居中的控件作為所述參照控件，或者，查找距離控件操作界面左頂點最近的控件作為所述參照控件。再例如，另一種可能的實施方式中，可以先查找所述控件操作界面中，是否存在水平居中的控件。在存在水平居中的控件的情況下，將水平居中的控件中，距離所述控件操作界面左頂點最近的控件作為所述參照控件。在不存在水平居中的控件的情況下，查找所述控件操作界面中，是否存在垂直居中的控件。在存在垂直居中的控件的情況下，將垂直居中的控件中，距離所述控件操作界面左頂點最近的控件作為所述參照控件。在不存在垂直居中的控件的情況下，將距離所述控件操作界面左頂點最近的控件作為所述參照控件。

例如，根據(jù)上述參照控件查找條件，可以查找出圖1所示的控件1012為參照控件。

在步驟220中，計算出所述參照控件在所述控件操作界面中的絕對位置和絕對大小。

例如，所述參照控件的絕對位置可以用居中屬性、距控件操作界面左邊緣距離，距控件操作界面左頂點距離來描述、等等。

例如，所述參照控件的絕對大小可以用參照控件的長寬比例來描述。

在步驟230中，計算出所述控件操作界面中任意其他控件相對所述參照控件的相對位置和相對大小。

可以理解的是，可以根據(jù)實際需要，設置相應的相對位置和相對大小的計算規(guī)則。例如，一種可能的實施方式中，在所述任意其他控件與所述參照控件具有居中關系的情況下，可以得到所述任意其他控件相對所述參照控件居中的居中屬性描述，其中，所述相對位置包括所述居中屬性描述。在所述任意其他控件與所述參照控件不具有居中關系的情況下，可以計算出所述任意其他控件相對于所述參照控件的相對高度以及相對寬度，其中，所述相對位置包括所述相對高度以及所述相對寬度。

再例如，可以根據(jù)所述任意其他控件相對于所述參照控件的相對大小，計算出所述任意其他控件的長寬比例。例如，所述任意其他控件為相對于所述參照控件大小的2倍，所述參照控件的長款比例為400:400，則所述任意其他控件的長寬比例為800:800。

在步驟240中，根據(jù)所述參照控件在所述控件操作界面中的絕對位置和絕對大小，以及，所述任意其他控件相對所述參照控件的相對位置和相對大小，生成用于約束所述參照控件以及所述任意其他控件位置和大小關系的程序代碼和/或約束條件。

例如，根據(jù)圖1所示參照控件1012“imageview”在所述控件操作界面中的絕對位置為水平居中且垂直居中，則可以生成能夠在storyboard工具中使用的、用于約束該參照控件位置的程序代碼段：

再例如，根據(jù)圖1所示控件1013“button1”的相對位置為，從“button1”的底部到“imageview”的頂部為“8.0”，從“button1”的左邊距到“imageview”的左邊距為“0”，可以生成能夠在storyboard工具中使用的、用于約束該控件位置的程序代碼段：

需要說明的是，為了便于生成程序代碼和/或約束條件，可以預先設置符合程序代碼和/或約束條件語法規(guī)則的程序代碼和/或約束條件模板，在該模板中，可以預設一些代碼表達式和/或約束條件表達式，在需要生成程序代碼和/或約束條件時，將參照控件的絕對位置和絕對大小，以及，其他任意控件的相對位置和相對大小作為參數(shù)寫入表達式，從而生成相應的程序代碼和/或約束條件。

可見，本發(fā)明實施例提供的方法根據(jù)預置的參照控件查找條件，查找出參照控件，計算出參照控件的絕對位置和絕對大小，計算出任意其他控件相對參照控件的相對位置和絕對大小，從而生成了用于約束所述參照控件以及所述任意其他控件位置和大小關系的程序代碼和/或約束條件，用戶直接利用該程序代碼和/或約束條件即可完成界面布局約束，既實現(xiàn)了對控件位置關系的約束，又實現(xiàn)了對控件大小關系的約束，滿足了多種分辨率下界面控件位置和大小能夠合理布局的要求，還降低了界面開發(fā)的難度，提高了界面開發(fā)效率。

為了使本發(fā)明實施例更加易于理解，下面結合圖3及圖4對本發(fā)明另外兩種可能的實施方式進行詳細說明。

圖3是根據(jù)本發(fā)明的另一示例性實施例示出的一種用于生成界面布局約束的方法的流程圖。該方法可以應用于如圖1所示的計算機101。該方法可以包括：

在步驟310中，根據(jù)預置的參照控件查找條件，在控件操作界面中查找出參照控件，所述控件操作界面中包含至少兩個控件。

在步驟320中，計算出所述參照控件在所述控件操作界面中的絕對位置。

在步驟330中，計算出所述控件操作界面中任意其他控件相對所述參照控件的相對位置。

在步驟340中，根據(jù)所述參照控件在所述控件操作界面中的絕對位置，以及，所述任意其他控件相對所述參照控件的相對位置，生成用于約束所述參照控件以及所述任意其他控件位置關系的程序代碼和/或約束條件。

可見，該實施例提供的方法生成了用于約束所述參照控件以及所述任意其他控件位置關系的程序代碼和/或約束條件，用戶直接利用該程序代碼和/或約束條件即可完成界面布局約束，實現(xiàn)了對控件位置關系的約束，滿足了多種分辨率下界面控件位置能夠合理布局的要求，還降低了界面開發(fā)的難度，提高了界面開發(fā)效率。

圖4是根據(jù)本發(fā)明的又一示例性實施例示出的一種用于生成界面布局約束的方法的流程圖。該方法可以應用于如圖1所示的計算機101。該方法可以包括：

在步驟410中，根據(jù)預置的參照控件查找條件，在控件操作界面中查找出參照控件，所述控件操作界面中包含至少兩個控件。

在步驟420中，計算出所述參照控件在所述控件操作界面中的絕對大小。

在步驟430中，計算出所述控件操作界面中任意其他控件相對所述參照控件的相對大小。

在步驟440中，根據(jù)所述參照控件在所述控件操作界面中的絕對大小，以及，所述任意其他控件相對所述參照控件的相對大小，生成用于約束所述參照控件以及所述任意其他控件大小關系的程序代碼和/或約束條件。

可見，該實施例提供的方法生成了用于約束所述參照控件以及所述任意其他控件位置關系的程序代碼和/或約束條件，用戶直接利用該程序代碼和/或約束條件即可完成界面布局約束，實現(xiàn)了對控件大小關系的約束，滿足了多種分辨率下界面控件大小能夠合理縮放的要求，還降低了界面開發(fā)的難度，提高了界面開發(fā)效率。

圖5是根據(jù)本發(fā)明的一示例性實施例示出的一種用于生成界面布局約束的裝置500的框圖。該裝置可以配置于如圖1所示的計算機101。該裝置可以包括：參照控件查找模塊510、第一獲取模塊520、第二獲取模塊530以及約束生成模塊540。

該參照控件查找模塊510，可以被配置為根據(jù)預置的參照控件查找條件，在控件操作界面中查找出參照控件，所述控件操作界面中包含至少兩個控件。

該第一獲取模塊520，可以被配置為計算出所述參照控件在所述控件操作界面中的絕對位置和/或絕對大小。

該第二獲取模塊530，可以被配置為計算出所述控件操作界面中任意其他控件相對所述參照控件的相對位置和/或相對大小。

該約束生成模塊540，可以被配置為根據(jù)所述參照控件在所述控件操作界面中的絕對位置和/或絕對大小，以及，所述任意其他控件相對所述參照控件的相對位置和/或相對大小，生成用于約束所述參照控件以及所述任意其他控件位置和/或大小關系的程序代碼和/或約束條件。

可見，本發(fā)明實施例提供的裝置根據(jù)預置的參照控件查找條件，查找出參照控件，計算出參照控件的絕對位置和/或絕對大小，計算出任意其他控件相對參照控件的相對位置和/或絕對大小，從而生成了用于約束所述參照控件以及所述任意其他控件位置和/或大小關系的程序代碼和/或約束條件，用戶直接利用該程序代碼或約束條件即可完成界面布局約束，降低了界面開發(fā)的難度，提高了界面開發(fā)效率。

圖6是根據(jù)本發(fā)明的另一示例性實施例示出的一種用于生成界面布局約束的裝置500的框圖。在該裝置中，該參照控件查找模塊510可以包括：水平居中查找子模塊511、參照控件確定子模塊512以及垂直居中查找子模塊513。

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

該參照控件確定子模塊512，可以被配置為在所述水平居中查找子模塊511查找出存在水平居中的控件的情況下，將水平居中的控件中，距離所述控件操作界面左頂點最近的控件作為所述參照控件。

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

該參照控件確定子模塊512，可以被配置為在所述垂直居中查找子模塊513查找出存在垂直居中的控件的情況下，將垂直居中的控件中，距離所述控件操作界面左頂點最近的控件作為所述參照控件，在所述垂直居中查找子模塊查找出不存在垂直居中的控件的情況下，將距離所述控件操作界面左頂點最近的控件作為所述參照控件。

一種可能的實施方式中，如圖6所示，該第二獲取模塊530可以包括：居中位置獲取子模塊531，被配置為在所述任意其他控件與所述參照控件具有居中關系的情況下，得到所述任意其他控件相對所述參照控件居中的居中屬性描述，其中，所述相對位置包括所述居中屬性描述。位置參數(shù)獲取子模塊532，被配置為在所述任意其他控件與所述參照控件不具有居中關系的情況下，計算出所述任意其他控件相對于所述參照控件的相對高度以及相對寬度，其中，所述相對位置包括所述相對高度以及所述相對寬度。

一種可能的實施方式中，該第一獲取模塊520，被配置為計算出所述參照控件的長寬比例。該第二獲取模塊530，被配置為根據(jù)所述任意其他控件相對于所述參照控件的相對大小，計算出所述任意其他控件的長寬比例。

一種可能的實施方式中，如圖6所示，該裝置還可以包括：導入接收模塊501，可以被配置為響應于接收到導入所述至少兩個控件的指令，將所述至少兩個控件顯示在所述控件操作界面中。移動指令接收模塊502，可以被配置為接收對所述至少兩個控件的移動指令。移動指令執(zhí)行模塊503，可以被配置為根據(jù)所述移動指令，在所述控件操作界面中相應移動所述至少兩個控件。生成指令接收模塊504，被配置為在接收到生成指令時，觸發(fā)所述參照控件查找模塊510進入所述根據(jù)預置的參照控件查找條件，在控件操作界面中查找出參照控件的步驟。

以上結合附圖詳細描述了本發(fā)明的優(yōu)選實施方式，但是，本發(fā)明并不限于上述實施方式中的具體細節(jié)，在本發(fā)明的技術構思范圍內(nèi)，可以對本發(fā)明的技術方案進行多種簡單變型，這些簡單變型均屬于本發(fā)明的保護范圍。

另外需要說明的是，在上述具體實施方式中所描述的各個具體技術特征，在不矛盾的情況下，可以通過任何合適的方式進行組合。為了避免不必要的重復，本發(fā)明對各種可能的組合方式不再另行說明。

此外，本發(fā)明的各種不同的實施方式之間也可以進行任意組合，只要其不違背本發(fā)明的思想，其同樣應當視為本發(fā)明所公開的內(nèi)容。