一種頁面布局文件生成方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及計算機(jī)技術(shù)領(lǐng)域，尤其涉及一種頁面布局文件生成方法及裝置。
【背景技術(shù)】
[0002] 在圖形用戶界面（Graphical User Interface，簡稱⑶I)的開發(fā)中，需要對圖形用 戶界面中的界面元素（圖形、文字等）進(jìn)行排布。優(yōu)秀的布局能簡化用戶與應(yīng)用程序之間 的交互操作，迎合用戶的使用習(xí)慣，提高用戶使用的用戶體驗(yàn)。
[0003] 現(xiàn)有的應(yīng)用程序的⑶I開發(fā)過程通常包括兩個階段的工作，g卩：⑶I圖形設(shè)計和 GUI前端開發(fā)。GUI圖形設(shè)計師首先利用繪圖軟件（如Photoshop，PS)將應(yīng)用程序的外觀設(shè) 計出來，再按照前端開發(fā)工程師的頁面布局要求，裁剪設(shè)計圖獲得單個UI元素的切片圖。
[0004] 在獲得GUI設(shè)計師裁剪出的UI元素的切片圖之后，前端開發(fā)工程師將所述切片圖 作為資源導(dǎo)入應(yīng)用程序引用的資源庫中，并按照開發(fā)框架的編碼規(guī)則，利用所述切片圖重 新組織生成頁面布局文件。
[0005] 現(xiàn)有技術(shù)中，前端開發(fā)工程師需要重復(fù)⑶I圖形設(shè)計師的頁面布局工作，這樣既 浪費(fèi)了開發(fā)資源，又降低了開發(fā)效率。

【發(fā)明內(nèi)容】

[0006] 本發(fā)明實(shí)施例提供了一種頁面布局文件生成方法及裝置，可實(shí)現(xiàn)直接根據(jù)目標(biāo)圖 像文件生成頁面布局文件，提高了 GUI開發(fā)的效率和人力開發(fā)成本。
[0007] 第一方面，提供了一種頁面布局文件生成方法方法，包括：
[0008] 獲取目標(biāo)圖像文件，所述目標(biāo)圖像文件包括多個圖層，以及獲取所述多個圖層的 分組信息，所述分組信息用于指示各個圖層所屬的圖層組，以及各個圖層組之間組織關(guān) 系；
[0009] 根據(jù)所述各個圖層組各自對應(yīng)的在所述目標(biāo)圖像文件所表征的圖形用戶界面中 的布局區(qū)域、所述各個圖層組各自對應(yīng)的布局區(qū)域之間的布局關(guān)系、所述各個圖層各自對 應(yīng)的控件屬性以及所述各個圖層各自對應(yīng)的布局信息生成頁面布局文件，所述頁面布局文 件經(jīng)過編譯運(yùn)行會產(chǎn)生所述圖形用戶界面；
[0010] 其中，所述各個圖層組各自對應(yīng)的在所述目標(biāo)圖像文件所表征的圖形用戶界面中 的布局區(qū)域由所述各個圖層組各自包含的圖層的布局信息確定，所述圖層的布局信息包括 所述圖層在所述圖形用戶界面中的大小和位置；所述各個圖層組各自對應(yīng)的布局區(qū)域之間 的布局關(guān)系由所述各個圖層組之間的組織關(guān)系確定；所述各個圖層各自對應(yīng)的控件屬性由 輸入的配置操作指定。
[0011] 結(jié)合第一方面，在第一種可能的實(shí)現(xiàn)方式中，所述根據(jù)所述各個圖層組各自對應(yīng) 的在所述目標(biāo)圖像文件所表征的圖形用戶界面中的布局區(qū)域、所述各個圖層組各自對應(yīng)的 布局區(qū)域之間的布局關(guān)系、所述各個圖層各自對應(yīng)的控件屬性以及所述各個圖層各自對應(yīng) 的布局信息生成頁面布局文件，包括：
[0012] 根據(jù)所述各個圖層組各自對應(yīng)的在所述目標(biāo)圖像文件所表征的圖形用戶界面中 的布局區(qū)域、所述各個圖層組各自對應(yīng)的布局區(qū)域之間的布局關(guān)系生成框架布局代碼；
[0013] 根據(jù)所述各個圖層各自對應(yīng)的控件屬性、所述各個圖層各自對應(yīng)的布局信息生成 用于布局所述各個圖層各自對應(yīng)的控件的代碼；所述各個圖層各自對應(yīng)的控件由所述各個 圖層各自對應(yīng)的控件屬性所表征；
[0014] 根據(jù)所述框架布局代碼和用于布局所述各個圖層各自對應(yīng)的控件的代碼生成所 述頁面布局文件。
[0015] 結(jié)合第一方面的第一種可能的實(shí)現(xiàn)方式，在第二種可能的實(shí)現(xiàn)方式中，所述根據(jù) 所述各個圖層組各自對應(yīng)的在所述目標(biāo)圖像文件所表征的圖形用戶界面中的布局區(qū)域、所 述各個圖層組各自對應(yīng)的布局區(qū)域之間的布局關(guān)系生成框架布局代碼，包括：
[0016] 根據(jù)所述各個圖層組各自對應(yīng)的布局區(qū)域生成用于布局所述各個圖層組各自對 應(yīng)的布局區(qū)域的代碼；
[0017] 根據(jù)所述各個圖層組各自對應(yīng)的布局區(qū)域之間的布局關(guān)系，將用于布局所述各個 圖層組各自對應(yīng)的布局區(qū)域的代碼組成所述框架布局代碼。
[0018] 結(jié)合第一方面的第二種可能的實(shí)現(xiàn)方式，在第三種可能的實(shí)現(xiàn)方式中，所述根據(jù) 所述框架布局代碼和用于布局所述各個圖層各自對應(yīng)的控件的代碼生成所述頁面布局文 件，包括：
[0019] 將用于布局所述各個圖層各自對應(yīng)的控件的代碼，填充到所述框架布局代碼中用 于布局所述各個圖層各自所屬圖層組對應(yīng)的布局區(qū)域的代碼中，從而生成所述頁面布局文 件。
[0020] 結(jié)合第一方面，或者，結(jié)合第一方面的第一種至第三種中任一種可能的實(shí)現(xiàn)方式， 在第四種可能的實(shí)現(xiàn)方式中，在所述獲取目標(biāo)圖像文件，以及所述獲取所述多個圖層的分 組信息之后，所述方法還包括：根據(jù)所述各個圖層組之間的組織關(guān)系分層顯示所述各個圖 層組，其中，同一圖層組中的圖層被按照圖層在所述目標(biāo)圖像文件中的堆疊順序進(jìn)行分層 顯不〇
[0021] 第二方面，提供了一種頁面布局文件生成裝置，包括：
[0022] 獲取單元，用于獲取目標(biāo)圖像文件，所述目標(biāo)圖像文件包括多個圖層，以及獲取所 述多個圖層的分組信息，所述分組信息用于指示各個圖層所屬的圖層組，以及各個圖層組 之間組織關(guān)系；
[0023] 生成單元，用于根據(jù)所述各個圖層組各自對應(yīng)的在所述獲取單元獲取的目標(biāo)圖像 文件所表征的圖形用戶界面中的布局區(qū)域、所述各個圖層組各自對應(yīng)的布局區(qū)域之間的布 局關(guān)系、所述各個圖層各自對應(yīng)的控件屬性以及所述各個圖層各自對應(yīng)的布局信息生成頁 面布局文件，所述頁面布局文件經(jīng)過編譯運(yùn)行會產(chǎn)生所述圖形用戶界面；
[0024] 其中，所述各個圖層組各自對應(yīng)的在所述目標(biāo)圖像文件所表征的圖形用戶界面中 的布局區(qū)域由所述各個圖層組各自包含的圖層的布局信息確定，所述圖層的布局信息包括 所述圖層在所述圖形用戶界面中的大小和位置；所述各個圖層組各自對應(yīng)的布局區(qū)域之間 的布局關(guān)系由所述各個圖層組之間的組織關(guān)系確定；所述各個圖層各自對應(yīng)的控件屬性由 輸入的配置操作指定。
[0025] 結(jié)合第二方面，在第一種可能的實(shí)現(xiàn)方式中，所述生成單元，包括：第一生成子單 元、第二生成子單元和第三生成子單元，其中：
[0026] 所述第一生成子單元，用于根據(jù)所述各個圖層組各自對應(yīng)的在所述目標(biāo)圖像文件 所表征的圖形用戶界面中的布局區(qū)域、所述各個圖層組各自對應(yīng)的布局區(qū)域之間的布局關(guān) 系生成框架布局代碼；
[0027] 所述第二生成子單元，用于根據(jù)所述各個圖層各自對應(yīng)的控件屬性、所述各個圖 層各自對應(yīng)的布局信息生成用于布局所述各個圖層各自對應(yīng)的控件的代碼；所述各個圖層 各自對應(yīng)的控件由所述各個圖層各自對應(yīng)的控件屬性所表征；
[0028] 所述第三生成子單元，用于根據(jù)所述框架布局代碼和用于布局所述各個圖層各自 對應(yīng)的控件的代碼生成所述頁面布局文件。
[0029] 結(jié)合第二方面的第一種可能的實(shí)現(xiàn)方式，在第二種可能的實(shí)現(xiàn)方式中，所述第一 生成子單元，具體用于：根據(jù)所述各個圖層組各自對應(yīng)的布局區(qū)域生成用于布局所述各個 圖層組各自對應(yīng)的布局區(qū)域的代碼；根據(jù)所述各個圖層組各自對應(yīng)的布局區(qū)域之間的布局 關(guān)系，將用于布局所述各個圖層組各自對應(yīng)的布局區(qū)域的代碼組成所述框架布局代碼。
[0030] 結(jié)合第二方面的第二種可能的實(shí)現(xiàn)方式，在第三種可能的實(shí)現(xiàn)方式中，所述第三 生成子單元，具體用于：將用于布局所述各個圖層各自對應(yīng)的控件的代碼，填充到所述框架 布局代碼中用于布局所述各個圖層各自所屬圖層組對應(yīng)的布局區(qū)域的代碼中，從而生成所 述頁面布局文件。
[0031] 結(jié)合第二方面，或者，結(jié)合第二方面的第一種至第三種中任一種可能的實(shí)現(xiàn)方式， 在第四種可能的實(shí)現(xiàn)方式中，所述裝置還包括：顯示單元，用于在所述獲取單元獲取目標(biāo)圖 像文件，以及獲取所述多個圖層的分組信息之后，根據(jù)所述各個圖層組之間的組織關(guān)系分 層顯示所述各個圖層組，其中，同一圖層組中的圖層被按照圖層在所述目標(biāo)圖像文件中的 堆疊順序進(jìn)行分層顯示。
[0032] 第三方面，提供了一種終端，包括：存儲器和與所述存儲器耦合的處理器，其中，所 述處理器讀取所述存儲器中存儲的指令，用于執(zhí)行以下步驟：
[0033] 獲取目標(biāo)圖像文件，所述目標(biāo)圖像文件包括多個圖層，以及獲取所述多個圖層的 分組信息，所述分組信息用于指示各個圖層所屬的圖層組，以及各個圖層組之間組織關(guān) 系；
[0034] 根據(jù)所述各個圖層組各自對應(yīng)的在所述目標(biāo)圖像文件所表征的圖形用戶界面中 的布局區(qū)域、所述各個圖層組各自對應(yīng)的布局區(qū)域之間的布局關(guān)系、所述各個圖層各自對 應(yīng)的控件屬性以及所述各個圖層各自對應(yīng)的布局信息生成頁面布局文件，所述頁面布局文 件經(jīng)過編譯運(yùn)行會產(chǎn)生所述圖形用戶界面；
[0035] 其中，所述各個圖層組各自對應(yīng)的在所述目標(biāo)圖像文件所表征的圖形用戶界面中 的布局區(qū)域由所述各個圖層組各自包含的圖層的布局信息確定，所述圖層的布局信息包括 所述圖層在所述圖形用戶界面中的大小和位置；所述各個圖層組各自對應(yīng)的布局區(qū)域之間 的布局關(guān)系由所述各個圖層組之間的組織關(guān)系確定；所述各個圖層各自對應(yīng)的控件屬性由 輸入的配置操作指定。
[0036] 本發(fā)明實(shí)施例中，通過根據(jù)目標(biāo)圖像文件包含的各個圖層組各自對應(yīng)的布局區(qū)域 和所述各個圖層組各自對應(yīng)的布局區(qū)域之間的布局關(guān)系、所述目標(biāo)圖像文件包含的各個圖 層各自對應(yīng)的控件屬性、布局信息生成頁面布局文件；其中，所述各個圖層組各自對應(yīng)的布 局區(qū)域由所述各個圖層組各自包含的圖層的布局信息確定；所述各個圖層組各自對應(yīng)的布 局區(qū)域之間的布局關(guān)系由所述各個圖層組之間組織關(guān)系確定；所述各個圖層各自對應(yīng)的控 件屬性由輸入的配置操作指定。上述方案可實(shí)現(xiàn)直接根據(jù)目標(biāo)圖像文件生成頁面布局文 件，提高了 GUI開發(fā)的效率，節(jié)約了開發(fā)成本。
【附圖說明】
[0037] 為了更清楚地說明本發(fā)明實(shí)施例中的技術(shù)方案，下面將對實(shí)施例描述中所需要使 用的附圖作簡單地介紹。
[0038] 圖1是本發(fā)明實(shí)施例涉及的目標(biāo)圖像文件所展示的用戶界面的示意圖；
[0039] 圖2是本發(fā)明實(shí)施例提供的一種頁面布局文件生成方法的流程示意圖；
[0040] 圖3A是本發(fā)明實(shí)施例提供的圖層組對應(yīng)的布局區(qū)域的示意圖；
[0041] 圖3B是本發(fā)明實(shí)施例提供的三種布局區(qū)域的排布方式的示意圖；
[0042] 圖4A是本發(fā)明實(shí)施例提供的目標(biāo)圖像文件對應(yīng)的多個圖層的分組示意圖；
[0043] 圖4B是本發(fā)明實(shí)施例提供的各個圖層組對應(yīng)的布局區(qū)域的層級結(jié)構(gòu)示意圖；
[0044] 圖5是本發(fā)明實(shí)施例提供的目標(biāo)圖像文件中底部導(dǎo)航菜單包含應(yīng)用圖標(biāo)的示意 圖；
[0045] 圖6是本發(fā)明實(shí)施例提供的分層顯示目標(biāo)圖像文件對