[發(fā)明專利]用戶界面代碼生成方法、裝置、電子設(shè)備及存儲介質(zhì)

在審

• 申請?zhí)枺?/td>: 202111006589.2
• 申請日: 2021-08-30
• 公開（公告）號: CN113672227A
• 公開（公告）日: 2021-11-19
• 發(fā)明（設(shè)計(jì)）人: 蔡宇
• 申請（專利權(quán)）人: 北京愛奇藝科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F8/34;G06F8/51
• 代理公司: 北京柏杉松知識產(chǎn)權(quán)代理事務(wù)所(普通合伙) 11413
• 代理人: 項(xiàng)京;高鶯然

本申請實(shí)施例提供了一種用戶界面代碼生成方法、裝置、電子設(shè)備及存儲介質(zhì)，獲取用戶界面的設(shè)計(jì)文件，設(shè)計(jì)文件包含有多個(gè)圖層；建立多個(gè)圖層的層級樹，其中，層級樹中，每個(gè)子節(jié)點(diǎn)所表示的圖層在該子節(jié)點(diǎn)的父節(jié)點(diǎn)所表示的圖層的區(qū)域內(nèi)；按照行分組和/或列分組的方式，對層級樹上每個(gè)節(jié)點(diǎn)的一組子節(jié)點(diǎn)進(jìn)行迭代分組，得到每個(gè)節(jié)點(diǎn)對應(yīng)的多組子節(jié)點(diǎn)，以及每個(gè)節(jié)點(diǎn)的布局描述信息，每個(gè)節(jié)點(diǎn)的布局描述信息包括該節(jié)點(diǎn)對應(yīng)的多組子節(jié)點(diǎn)的劃分情況；按照預(yù)設(shè)的編碼語法，將每個(gè)節(jié)點(diǎn)的布局描述信息轉(zhuǎn)換為用戶界面代碼。應(yīng)用本申請實(shí)施例提供的技術(shù)方案，能夠減少分析設(shè)計(jì)文件所占用的人力資源，提高UI代碼生成效率。

技術(shù)領(lǐng)域

本申請涉及信息處理技術(shù)領(lǐng)域，特別是涉及一種用戶界面代碼生成方法、裝置、電子設(shè)備及存儲介質(zhì)。

背景技術(shù)

應(yīng)用程序迭代更新日趨頻繁。隨著應(yīng)用程序的迭代更新，應(yīng)用程序的UI(UserInterface，用戶界面)隨之更新。

目前，應(yīng)用程序的UI更新流程為：用戶對UI設(shè)計(jì)文件進(jìn)行分析，確定UI設(shè)計(jì)文件中的圖層信息，進(jìn)而基于圖層信息手動撰寫行列布局的UI代碼。在設(shè)計(jì)文件日漸復(fù)雜且更新頻繁的今天，手動撰寫行列布局的UI代碼，將耗費(fèi)大量人力資源，導(dǎo)致UI代碼生成效率低下。

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

本申請實(shí)施例的目的在于提供一種用戶界面代碼生成方法、裝置、電子設(shè)備及存儲介質(zhì)，以減少分析設(shè)計(jì)文件所占用的人力資源，提高UI代碼生成效率。具體技術(shù)方案如下：

在本申請實(shí)施的第一方面，首先提供了一種用戶界面代碼生成方法，該方法包括：

獲取所述用戶界面的設(shè)計(jì)文件，所述設(shè)計(jì)文件包含有多個(gè)圖層；

建立所述多個(gè)圖層的層級樹，其中，所述層級樹中，每個(gè)子節(jié)點(diǎn)所表示的圖層在該子節(jié)點(diǎn)的父節(jié)點(diǎn)所表示的圖層的區(qū)域內(nèi)；

按照行分組和/或列分組的方式，對所述層級樹上每個(gè)節(jié)點(diǎn)的一組子節(jié)點(diǎn)進(jìn)行迭代分組，得到每個(gè)節(jié)點(diǎn)對應(yīng)的多組子節(jié)點(diǎn)，以及每個(gè)節(jié)點(diǎn)的布局描述信息，每個(gè)節(jié)點(diǎn)的布局描述信息包括該節(jié)點(diǎn)對應(yīng)的多組子節(jié)點(diǎn)的劃分情況；

按照預(yù)設(shè)的編碼語法，將所述層級樹中所有節(jié)點(diǎn)的布局描述信息轉(zhuǎn)換為用戶界面代碼。

可選的，所述建立所述多個(gè)圖層的層級樹的步驟，包括：

針對所述多個(gè)圖層中每一圖層，將該圖層作為層級樹的當(dāng)前節(jié)點(diǎn)；

若所述多個(gè)圖層中其他圖層在所述當(dāng)前節(jié)點(diǎn)的區(qū)域內(nèi)，且所述其他圖層不在所述當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)的區(qū)域內(nèi)，則將所述其他圖層作為所述當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)，所述當(dāng)前節(jié)點(diǎn)的作為所述其他圖層的父節(jié)點(diǎn)；

若所述其他圖層在所述當(dāng)前節(jié)點(diǎn)的區(qū)域內(nèi)，且所述其他圖層在當(dāng)前節(jié)點(diǎn)的第一子節(jié)點(diǎn)的區(qū)域內(nèi)，則將所述其他圖層作為所述第一子節(jié)點(diǎn)的子節(jié)點(diǎn)，所述第一子節(jié)點(diǎn)作為所述其他圖層的父節(jié)點(diǎn)；

當(dāng)所述多個(gè)圖層均確定了父節(jié)點(diǎn)和/或子節(jié)點(diǎn)后，所述層級樹構(gòu)建完成。

可選的，所述按照行分組和/或列分組的方式，對所述層級樹上每個(gè)節(jié)點(diǎn)的一組子節(jié)點(diǎn)進(jìn)行迭代分組，得到每個(gè)節(jié)點(diǎn)對應(yīng)的多組子節(jié)點(diǎn)，以及每個(gè)節(jié)點(diǎn)的布局描述信息的步驟，包括：

以所述層級樹上每個(gè)節(jié)點(diǎn)的一組子節(jié)點(diǎn)作為該節(jié)點(diǎn)的候選分組，按照行分組和列分組的方式，分別對每個(gè)節(jié)點(diǎn)的候選分組進(jìn)行分組，得到每個(gè)節(jié)點(diǎn)對應(yīng)的行分組和列分組；

根據(jù)每個(gè)節(jié)點(diǎn)對應(yīng)的行分組的數(shù)量和列分組的數(shù)量，將每個(gè)節(jié)點(diǎn)對應(yīng)的行分組或列分組更新為該節(jié)點(diǎn)的候選分組，并重新執(zhí)行所述按照行分組和列分組的方式，分別對每個(gè)節(jié)點(diǎn)的候選分組進(jìn)行分組，得到每個(gè)節(jié)點(diǎn)對應(yīng)的多個(gè)行分組和多個(gè)列分組的步驟，直至候選分組包括的子節(jié)點(diǎn)的數(shù)量小于等于預(yù)設(shè)數(shù)量；

利用更新每個(gè)節(jié)點(diǎn)的候選分組時(shí)采用的分組方式，確定每個(gè)節(jié)點(diǎn)的布局描述信息。