本技術(shù)涉及計算機，尤其涉及一種界面生成方法及裝置。

背景技術(shù)：

1、近年來隨著終端設(shè)備種類的增多，用戶通過越來越多具有不同屏幕尺寸設(shè)備訪問應(yīng)用程序。為了能讓應(yīng)用程序頁面在所有設(shè)備上提供一致、高質(zhì)量的用戶體驗，前端開發(fā)人員必須要設(shè)計開發(fā)能夠適配不同屏幕設(shè)備的應(yīng)用頁面布局。

技術(shù)實現(xiàn)思路

1、本技術(shù)的實施例提供一種界面生成方法，根據(jù)不同屏幕參數(shù)自動調(diào)整界面布局參數(shù)，使得界面布局適配多種不同的屏幕。

2、第一方面，本技術(shù)提供了一種界面生成方法，包括響應(yīng)用戶操作，確定目標應(yīng)用對應(yīng)的界面布局在不同尺寸的關(guān)鍵畫布中的布局參數(shù)，每個關(guān)鍵畫布的布局參數(shù)包括每個關(guān)鍵畫布中每個用戶界面(user?interface，ui)組件的關(guān)鍵屬性值；針對每個ui組件在不同尺寸的關(guān)鍵畫布中的關(guān)鍵屬性值進行插值處理，確定關(guān)鍵屬性值變化曲線，關(guān)鍵屬性值變化曲線指示每個ui組件在不同尺寸的畫布中的關(guān)鍵屬性值的變化趨勢；基于關(guān)鍵屬性值變化曲線，確定布局計算函數(shù)，布局計算函數(shù)用于在目標應(yīng)用被部署到目標終端后，基于目標終端的屏幕參數(shù)確定目標終端的屏幕參數(shù)對應(yīng)的布局參數(shù)。

3、通過在少數(shù)幾個不同尺寸的畫布上完成界面布局設(shè)計，并將不同尺寸的畫布上的界面布局設(shè)計的布局參數(shù)確定為關(guān)鍵布局參數(shù)，每個關(guān)鍵布局參數(shù)包括界面布局設(shè)計中每個ui組件的關(guān)鍵屬性值，通過對不同尺寸畫布上的ui組件的關(guān)鍵屬性值進行插值處理，得到關(guān)鍵屬性值變化曲線，通過變化曲線生成布局計算函數(shù)，通過布局計算函數(shù)即計算得到不同屏幕參數(shù)對應(yīng)的界面布局參數(shù)，也就是得到不同屏幕參數(shù)對應(yīng)的界面布局，實現(xiàn)設(shè)計的界面布局適配不同的屏幕。

4、可選的，用戶操作包括拖拽操作，拖拽操作用于將目標ui組件從ui組件區(qū)域拖拽至關(guān)鍵畫布中的目標位置，例如，開發(fā)者需要在關(guān)鍵畫布中添加text組件，則開發(fā)者從ui組件欄將text組件拖拽至關(guān)鍵畫布中的目標位置然后釋放，編輯器則響應(yīng)拖拽操作，在關(guān)鍵畫布中添加text組件。

5、通過類似ppt的自由拖拽操作方式即可完成界面布局設(shè)計，無需手寫代碼，可以通過簡單的自由拖拽組件的方式快速，直觀的實現(xiàn)前端頁面的布局設(shè)計，有效解決了開發(fā)效率和上手難度的問題。

6、在一個可能的實現(xiàn)中，針對每個ui組件在不同尺寸的關(guān)鍵畫布中的關(guān)鍵屬性值進行插值處理，確定關(guān)鍵屬性值變化曲線的一種具體實現(xiàn)為：對比每個ui組件在不同尺寸的關(guān)鍵畫布中的關(guān)鍵屬性值，確定每個ui組件的具有差異的關(guān)鍵屬性值；對每個ui組件的具有差異的關(guān)鍵屬性值進行插值處理，確定每個ui組件的關(guān)鍵屬性值變化曲線。

7、在該可能的實現(xiàn)中，通過對具有差異的關(guān)鍵屬性值進行插值處理，得到的關(guān)鍵屬性值變化曲線可以指示關(guān)鍵屬性值隨不同畫布尺寸的變化趨勢，可以通過每個ui組件的每個關(guān)鍵屬性值變化曲線得到不同畫布尺寸對應(yīng)的關(guān)鍵屬性值，進而實現(xiàn)ui組件的關(guān)鍵屬性值隨不同畫布尺寸的變化而調(diào)整，可以理解的是不同的畫布尺寸對應(yīng)不同的屏幕尺寸參數(shù)，也就是說，實現(xiàn)每個ui組件的關(guān)鍵屬性值隨屏幕尺寸的改變而調(diào)整，進而實現(xiàn)界面布局參數(shù)隨屏幕尺寸的改變而適應(yīng)性調(diào)整，實現(xiàn)適配不同屏幕尺寸的界面設(shè)計。

8、在一個可能的實現(xiàn)中，對每個ui組件的具有差異的關(guān)鍵屬性值進行插值處理，確定每個ui組件的關(guān)鍵屬性值變化曲線的一種具體實現(xiàn)為：響應(yīng)用戶的第一輸入操作，確定目標插值公式；基于目標插值公式對每個ui組件的具有差異的關(guān)鍵屬性值進行插值處理，確定每個ui組件的關(guān)鍵屬性值變化曲線。

9、開發(fā)者根據(jù)不同情況，選擇合適的插值公式對關(guān)鍵屬性值進行插值處理，使得得到的關(guān)鍵屬性值變化曲線更加準確。例如，針對線性變化的關(guān)鍵屬性值選擇線性插值公式進行插值處理，針對非線性變化的關(guān)鍵屬性值選擇非線性插值公式(例如階躍插值公式)，進行插值處理。

10、可選的，第一輸入操作包括選擇操作，該選擇操作用于從多個插值公式中選擇目標插值公式，例如開發(fā)交互界面具有插值公式選擇欄，用戶可以從若干插值公式中選擇合適的插值公式，編輯器響應(yīng)該選擇操作確定用戶選擇的插值公式為目標插值公式，采用該目標插值公式對關(guān)鍵屬性值進行插值處理。

11、或者，第一輸入操作包括編輯操作，編輯操作用于編輯插值公式，編輯完成的插值公式作為目標插值公式。例如，當插值公式選擇欄中的插值公式?jīng)]有滿足需要的插值公式時，開發(fā)者可以通過在自定義輸入框中編輯插值公式，編輯器響應(yīng)該編輯操作，將用戶編輯的插值公式確定為目標插值公式，采用該目標插值公式對關(guān)鍵屬性值進行插值處理。

12、在另一個可能的實現(xiàn)中，關(guān)鍵屬性值變化曲線的確定還與用戶的第二輸入操作相關(guān)，第二輸入操作用于輸入曲線調(diào)整參數(shù)，曲線調(diào)整參數(shù)用于對關(guān)鍵屬性值變化曲線進行調(diào)整。

13、為了進一步保證關(guān)鍵屬性值變化曲線的準確性，在插值處理生成關(guān)鍵屬性值變化曲線之后，開發(fā)者還可以通過調(diào)整關(guān)鍵屬性值變化曲線的曲線參數(shù)，對關(guān)鍵屬性值變化曲線進行調(diào)整。

14、在另一個可能的實現(xiàn)中，響應(yīng)用戶操作，確定目標應(yīng)用對應(yīng)的界面布局在不同尺寸的關(guān)鍵畫布中的布局參數(shù)的一種具體實現(xiàn)為響應(yīng)第一用戶操作，確定關(guān)鍵畫布的尺寸；響應(yīng)第二用戶操作，確定每個ui組件在關(guān)鍵畫布中的關(guān)鍵屬性值。

15、可選的，第一用戶操作包括選擇操作，選擇操作用于從多個典型尺寸中選擇目標尺寸作為關(guān)鍵畫布的尺寸；或者，第一用戶操作包括縮放操作，縮放操作用于將關(guān)鍵畫布的尺寸縮放至目標尺寸。

16、也就是說，開發(fā)者可以通過多種操作方式確定關(guān)鍵畫布的尺寸，例如可以從若干典型畫布中選擇合適的典型畫布作為關(guān)鍵畫布，該典型畫布尺度即為關(guān)鍵畫布的尺寸，或者也可以通過自由縮放畫布的方式確定關(guān)鍵畫布的尺寸。

17、在一個示例中，第二用戶操作包括拖拽操作，拖拽操作用于將目標ui組件從ui組件區(qū)拖拽至所述關(guān)鍵畫布中的目標位置。

18、在另一個可能的實現(xiàn)中，關(guān)鍵屬性值包括寬度屬性值和/或高度屬性值，寬度屬性值指示ui組件的寬度，高度屬性值指示所述ui組件的高度。如此，實現(xiàn)界面布局在不同屏幕尺寸中的相對拉伸布局自適應(yīng)。例如，當界面布局的顯示大小發(fā)生變化時，ui組件的顯示寬度和/或高度隨之發(fā)生改變，以實現(xiàn)界面布局與不同的屏幕尺寸相適配。

19、在另一個可能的實現(xiàn)中關(guān)鍵屬性值包括寬度屬性值、高度屬性值、頂部偏移屬性值和左側(cè)偏移屬性值，寬度屬性值指示所述ui組件的寬度，高度屬性值指示所述ui組件的高度，頂部偏移屬性值指示所述ui組件與所述關(guān)鍵畫布上邊界的距離，左側(cè)偏移屬性值指示所述ui組件與關(guān)鍵畫布左邊界的距離。如此實現(xiàn)界面布局在不同屏幕尺寸中的挪移布局自適應(yīng)。例如，當界面布局的顯示大小發(fā)生變化時，也即畫布發(fā)生變化，畫布內(nèi)的ui組件的排布位置和大小也隨之改變，以實現(xiàn)界面布局與不同的屏幕尺寸相適配。

20、在另一個可能的實現(xiàn)中，本技術(shù)提供的界面生成方法還包括將布局文件發(fā)送給目標終端，以使目標終端在加載目標應(yīng)用程序后，布局計算函數(shù)根據(jù)目標終端的屏幕參數(shù)，確定目標終端的屏幕對應(yīng)的目標布局參數(shù)，目標終端根據(jù)目標布局參數(shù)渲染得到目標應(yīng)用程序的顯示界面。

21、在終端側(cè)只需要布局計算函數(shù)根據(jù)終端設(shè)備的屏幕參數(shù)(例如屏幕尺寸)，計算得到該終端的屏幕對應(yīng)的目標布局參數(shù)，然后目標終端根據(jù)目標布局參數(shù)進行渲染即可得到與該終端的屏幕適配的顯示界面，使得一套代碼可以適配多種屏幕類型的設(shè)備(例如異形屏、折疊屏)。進一步提高界面布局的自適應(yīng)能力，無需開發(fā)者針對每幀屏幕都開發(fā)一套界面布局，有效降低開發(fā)者的工作量，另一方面，布局計算函數(shù)的計算過程對終端設(shè)備的計算能力開銷較小，對終端設(shè)備的性能影響較小或幾乎無影響。

22、第二方面，本技術(shù)提供一種界面生成方法，包括加載目標應(yīng)用文件，目標應(yīng)用文件包括布局文件，布局文件基于第一方面所述的方法生成；獲取目標終端的屏幕參數(shù)；基于目標終端的屏幕參數(shù)和布局計算函數(shù)，確定目標終端的屏幕參數(shù)對應(yīng)的目標布局參數(shù)；基于目標布局參數(shù)渲染得到目標應(yīng)用的顯示界面。

23、終端在部署目標應(yīng)用后，加載布局文件，調(diào)用布局計算函數(shù)求解終端的屏幕尺寸對應(yīng)的目標布局參數(shù)，然后根據(jù)目標布局參數(shù)進行渲染即可得到適配終端屏幕尺寸大小的顯示界面，布局計算函數(shù)的計算過程對中的設(shè)備的計算能量開銷較小，在對終端設(shè)備的性能影響較小或幾乎無影響的基礎(chǔ)上，即可得到與屏幕尺寸適配的顯示界面。

24、第三方面，本技術(shù)提供一種界面生成裝置，包括響應(yīng)模塊、第一確定模塊、第二確定模塊和生成模塊，其中，響應(yīng)模塊用于響應(yīng)用戶操作，確定目標應(yīng)用對應(yīng)的界面布局在不同尺寸的關(guān)鍵畫布中的布局參數(shù)，每個關(guān)鍵畫布的布局參數(shù)包括每個關(guān)鍵畫布中每個ui組件的關(guān)鍵屬性值；第一確定模塊用于針對每個ui組件在不同尺寸的關(guān)鍵畫布中的關(guān)鍵屬性值進行插值處理，確定關(guān)鍵屬性值變化曲線，關(guān)鍵屬性值變化曲線指示每個ui組件在不同尺寸的畫布中的關(guān)鍵屬性值的變化趨勢；第二確定模塊用于基于關(guān)鍵屬性值變化曲線，確定布局計算函數(shù)，布局計算函數(shù)用于在目標應(yīng)用被部署到目標終端后，基于目標終端的屏幕參數(shù)確定目標終端的屏幕參數(shù)對應(yīng)的布局參數(shù)，生成模塊用于基于布局計算函數(shù)和布局參數(shù)，生成布局文件。

25、在另一個可能的實現(xiàn)中，第一確定模塊具體用于對比每個ui組件在不同尺寸的關(guān)鍵畫布中的關(guān)鍵屬性值，確定每個ui組件的具有差異的關(guān)鍵屬性值；對每個ui組件的具有差異的關(guān)鍵屬性值進行插值處理，確定每個ui組件的關(guān)鍵屬性值變化曲線。

26、在另一個可能的實現(xiàn)中，對每個ui組件的具有差異的關(guān)鍵屬性值進行插值處理，得到每個ui組件的關(guān)鍵屬性值變化曲線的一種具體實現(xiàn)為：響應(yīng)用戶的第一輸入操作，確定目標插值公式；基于目標插值公式對每個ui組件的具有差異的關(guān)鍵屬性值進行插值處理，確定每個ui組件的關(guān)鍵屬性值變化曲線。

27、在另一個可能的實現(xiàn)中，第一輸入操作包括選擇操作，選擇操作用于從多個插值公式中選擇目標插值公式；或者，第一輸入操作包括編輯操作，編輯操作用于編輯插值公式，編輯完成的插值公式作為目標插值公式。

28、在另一個可能的實現(xiàn)中，關(guān)鍵屬性值變化曲線的確定還與用戶的第二輸入操作相關(guān)，第二輸入操作用于輸入曲線調(diào)整參數(shù)，曲線調(diào)整參數(shù)用于對關(guān)鍵屬性值變化曲線進行調(diào)整。

29、在另一個可能的實現(xiàn)中，響應(yīng)模塊具體用于響應(yīng)第一用戶操作，確定關(guān)鍵畫布的尺寸；響應(yīng)第二用戶操作，確定每個ui組件在關(guān)鍵畫布中的關(guān)鍵屬性值。

30、在另一個可能的實現(xiàn)中，第一用戶操作包括選擇操作，選擇操作用于從多個典型尺寸中選擇目標尺寸作為關(guān)鍵畫布的尺寸；或者，第一用戶操作包括縮放操作，縮放操作用于將關(guān)鍵畫布的尺寸縮放至目標尺寸。

31、在另一個可能的實現(xiàn)中，第二用戶操作包括拖拽操作，拖拽操作用于將目標ui組件從ui組件區(qū)拖拽至關(guān)鍵畫布中的目標位置。

32、在另一個可能的實現(xiàn)中，關(guān)鍵屬性值包括寬度屬性值和/或高度屬性值，寬度屬性值指示ui組件的寬度，高度屬性值指示ui組件的高度；或者，關(guān)鍵屬性值包括寬度屬性值、高度屬性值、頂部偏移屬性值和左側(cè)偏移屬性值，寬度屬性值指示ui組件的寬度，高度屬性值指示ui組件的高度，頂部偏移屬性值指示ui組件與關(guān)鍵畫布上邊界的距離，左側(cè)偏移屬性值指示ui組件與關(guān)鍵畫布左邊界的距離。

33、在另一個可能的實現(xiàn)中，本技術(shù)提供的界面生成裝置還包括發(fā)送模塊，該發(fā)送模塊用于將布局文件發(fā)送給目標終端，以使目標終端在加載目標應(yīng)用程序后，布局計算函數(shù)根據(jù)目標終端的屏幕參數(shù)，確定目標終端的屏幕對應(yīng)的目標布局參數(shù)，目標終端根據(jù)目標布局參數(shù)渲染得到目標應(yīng)用程序的顯示界面。

34、第四方面，本技術(shù)提供一種界面生成裝置，包括加載模塊、獲取模塊、第三確定模塊和渲染模塊，其中，加載模塊用于加載目標應(yīng)用文件，目標應(yīng)用文件包括布局文件，布局文件基于第一方面所述的方法生成；獲取模塊用于獲取目標終端的屏幕參數(shù)；第三確定模塊用于基于目標終端的屏幕參數(shù)和布局計算函數(shù)，確定目標終端的屏幕參數(shù)對應(yīng)的目標布局參數(shù)；渲染模塊用于基于目標布局參數(shù)渲染得到目標應(yīng)用的顯示界面。

35、第五方面，本技術(shù)實施例提供一種計算設(shè)備，包括存儲器和處理器，所述存儲器中存儲有指令，當所述指令被處理器執(zhí)行時，使得第一方面和/或第二方面所述的方法被實現(xiàn)。

36、第六方面，本技術(shù)實施例提供一種計算機可讀存儲介質(zhì)，其上存儲有計算機程序，當所述計算機程序在被處理器執(zhí)行時，使得第一方面和/或第二方面所述的方法被實現(xiàn)。

37、第七方面，本技術(shù)實施例還提供一種計算機程序或計算機程序產(chǎn)品，該計算機程序或計算機程序產(chǎn)品包括指令，當所述指令執(zhí)行時，令計算機執(zhí)行第一方面和/或第二方面所述的方法。

38、第八方面，本技術(shù)實施例還提供一種芯片，包括至少一個處理器和通信接口，所述處理器用于執(zhí)行第一方面和/或第二方面所述的方法。