CN109343845A - 一种代码文件生成方法和装置 - Google Patents

Abstract

本发明提供了一种代码文件生成方法和装置，属于计算机技术领域。其中，终端可以获取目标UI图，然后识别目标UI图中的每个元素的属性信息及位置信息，接着基于每个元素的属性信息及位置信息，生成目标树模型，最后，基于预设的模板代码及目标树模型，生成目标UI图对应的代码文件。本发明实施例中，由于终端可以自主识别出UI图中元素的属性信息及位置信息，并基于识别出来的内容生成对应的代码文件，使得用户无需根据UI图的内容手动编写代码文件，进而简化了生成代码文件的过程，提高了生成代码文件的便捷性，降低了实现成本。

Description

一种代码文件生成方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种代码文件生成方法和装置。

背景技术

为了丰富页面的展示效果，在页面开发的过程中，往往会采用卡片类的设计，即，会在页面中设置大量的用户界面(User Interface，UI)图。

现有技术中，页面中所设置的每张UI图，都需要开发人员先根据每张UI图的内容，手动编写对应的代码文件，这样，终端通过运行这些代码文件，就能在页面中渲染出相应的UI图。但是，这种手动编写代码文件的方式操作较为复杂，便捷性较低，且实现成本较高。

发明内容

本发明提供了一种代码文件生成方法和装置，以解决通过手动编写的方式生成代码文件时，操作较为复杂，便捷性较低，且实现成本较高的问题。

第一方面，本发明实施例提供了一种代码文件生成方法，该方法包括：

获取目标UI图；所述目标UI图中包括至少一个元素；

识别所述目标UI图中的每个元素的属性信息及位置信息；所述位置信息用于指示所述元素与其他元素之间的位置关系；

基于每个元素的属性信息及位置信息，生成目标树模型；

基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件。

优选的，所述基于每个元素的属性信息及位置信息，生成目标树模型的步骤，包括：

将每个元素作为元素节点，并将每个元素的属性信息及位置信息与所述元素对应的元素节点绑定；

按照预设规则，为每个元素节点设置对应的父节点值；

基于预设的最大树模型深度以及每个元素的父节点值，利用穷举法，确定至少一组布局节点以及每组布局节点中各个布局节点的属性；其中，所述布局节点的属性包括线性布局及相对布局；

基于每个元素节点对应的元素的位置信息、每个元素节点对应的父节点值、所述至少一组布局节点以及每个布局节点的属性，构建目标树模型。

优选的，所述基于每个元素节点对应的元素的位置信息、每个元素节点对应的父节点值、所述至少一组布局节点以及每组中每个布局节点的属性，构建目标树模型的步骤，包括：

任选一组布局节点作为目标组布局节点，将所述目标组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接目标组布局节点中的各个布局节点，得到目标树模型；

或者，

对于每组布局节点，将所述组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接所述组布局节点中的各个布局节点，得到多个树模型；将所述多个树模型中嵌套层数最少的树模型确定为目标树模型。

优选的，所述代码文件包括布局文件以及样式文件；

所述基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件的步骤，包括：

获取所述目标树模型中每个布局节点的属性；

获取所述目标树模型中每个元素节点的属性信息及位置信息，并将所述每个元素节点的属性信息及位置信息添加至预设的模板代码中的对应位置，得到样式文件；

对于每个布局节点，在所述布局节点的属性为线性布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为线性排列的文件，在所述布局节点的属性为相对布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为相对排列的文件，得到布局文件。

优选的，所述识别所述目标UI图中的每个元素的属性信息及位置信息的步骤，包括：

将所述目标UI图输入预设图像识别模型，获得所述目标UI图中的每个元素的属性信息，以及，确定每个元素与其他元素之间的位置关系，得到位置信息。

优选的，在所述基于预设的模板代码，遍历所述目标树模型，得到所述目标UI图对应的代码文件的步骤之后，所述方法还包括：

利用所述目标UI图对应的代码文件进行渲染，得到显示界面；

将所述显示界面与所述目标UI图进行对比，确定所述显示界面相对于所述目标UI图的正确率；

基于所述正确率，对所述预设图像识别模型进行调整。

第二方面，本发明实施例提供了一种代码文件生成装置，该装置包括：

获取模块，用于获取目标UI图；所述目标UI图中包括至少一个元素；

识别模块，用于识别所述目标UI图中的每个元素的属性信息及位置信息；所述位置信息用于指示所述元素与其他元素之间的位置关系；

第一生成模块，用于基于每个元素的属性信息及位置信息，生成目标树模型；

第二生成模块，用于基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件。

优选的，第一生成模块，包括：

绑定子模块，用于将每个元素作为元素节点，并将每个元素的属性信息及位置信息与所述元素对应的元素节点绑定；

设置子模块，用于按照预设规则，为每个元素节点设置对应的父节点值；

确定子模块，用于基于预设的最大树模型深度以及每个元素的父节点值，利用穷举法，确定至少一组布局节点以及每组布局节点中各个布局节点的属性；其中，所述布局节点的属性包括线性布局及相对布局；

构建子模块，用于基于每个元素节点对应的元素的位置信息、每个元素节点对应的父节点值、所述至少一组布局节点以及每组中每个布局节点的属性，构建目标树模型。

优选的，所述构建子模块，用于：

任选一组布局节点作为目标组布局节点，将所述目标组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接目标组布局节点中的各个布局节点，得到目标树模型；

或者，

对于每组布局节点，将所述组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接所述组布局节点中的各个布局节点，得到多个树模型；将所述多个树模型中嵌套层数最少的树模型确定为目标树模型。

优选的，所述代码文件包括布局文件以及样式文件；

所述第二生成模块，用于：

获取所述目标树模型中每个布局节点的属性；

获取所述目标树模型中每个元素节点的属性信息及位置信息，并将所述每个元素节点的属性信息及位置信息添加至预设的模板代码中的对应位置，得到样式文件；

对于每个布局节点，在所述布局节点的属性为线性布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为线性排列的文件，在所述布局节点的属性为相对布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为相对排列的文件，得到布局文件。

优选的，所述识别模块，用于：

将所述目标UI图输入预设图像识别模型，获得所述目标UI图中的每个元素的属性信息，以及，确定每个元素与其他元素之间的位置关系，得到位置信息。

优选的，所述装置还包括：

渲染模块，用于利用所述目标UI图对应的代码文件进行渲染，得到显示界面；

对比模块，用于将所述显示界面与所述目标UI图进行对比，确定所述显示界面相对于所述目标UI图的正确率；

调整模块，用于基于所述正确率，对所述预设图像识别模型进行调整。

第三方面，本发明实施例提供了一种移动终端，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如第一方面所述的代码文件生成方法的步骤。

第四方面，本发明实施例提供了一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如第一方面所述的代码文件生成法的步骤。

本发明实施例包括以下优点：

在本发明实施例中，终端可以获取目标UI图，然后识别目标UI图中的每个元素的属性信息及位置信息，接着基于每个元素的属性信息及位置信息，生成目标树模型，最后，基于预设的模板代码及目标树模型，生成目标UI图对应的代码文件。本发明实施例中，由于终端可以自主识别出UI图中元素的属性信息及位置信息，并基于识别出来的内容生成对应的代码文件，使得用户无需根据UI图的内容手动编写代码文件，进而简化了生成代码文件的过程，提高了生成代码文件的便捷性，降低了实现成本。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例一提供的一种代码文件生成方法的步骤流程图；

图2-1是本发明实施例二提供的一种代码文件生成方法的步骤流程图；

图2-2是本发明实施例二提供的一种目标UI图的示意图；

图2-3是本发发明实施例二提供的一种元素识别示意图；

图2-4是本发明实施例二提供的一种目标树模型示意图；

图3是本发明实施例三提供的一种代码文件生成装置的框图；

图4是本发明实施例四提供的一种代码文件生成装置的框图。

具体实施方式

下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。

实施例一

图1是本发明实施例一提供的一种代码文件生成方法的步骤流程图，如图1所示，该方法可以包括：

步骤101、获取目标UI图；所述目标UI图中包括至少一个元素。

在具体实现中，本发明实施例可以应用在终端中，该终端可以是手机、平板电脑、个人数字助理、台式电脑等等。进一步地，终端可以是接收用户输入的UI图，得到目标UI图，也可以是根据UI图读取指令，读取终端中存储的UI图，得到目标UI图，等等，本发明实施例对此不作限定。

步骤102、识别所述目标UI图中的每个元素的属性信息及位置信息。

本发明实施例中，元素的位置信息可以用于指示该元素与其他元素之间的位置关系，体现该元素相对于其他各个元素的位置。进一步地，元素的属性信息可以为元素的尺寸大小、元素的内容，目标UI图中的元素可以为文本、按钮、图片，等等。示例的，对于目标UI图中的图片，图片的属性信息可以包括该图片的大小以及该图片的内容。

步骤103、基于每个元素的属性信息及位置信息，生成目标树模型。

本发明实施例中，目标树模型可以由多个节点组成，表示以树型结构存储的数据，进一步地，目标树模型会包括目标UI图中各个元素的属性信息以及位置信息。

步骤104、基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件。

本发明实施例中，预设的模板代码可以是开发人员根据实际需求设定的，该预设的模板代码可以是基于可扩展标记语言(Extensible Markup Language，XML)实现的，进一步地，终端可以通过遍历目标树模型中的每个节点，获取每个节点上的数据，最后基于预设的模板代码以及获取到的数据，生成目标UI图对应的代码文件。

综上所述，本发明实施例一提供的代码文件生成方法，终端可以获取目标UI图，然后识别目标UI图中的每个元素的属性信息及位置信息，接着基于每个元素的属性信息及位置信息，生成目标树模型，最后，基于预设的模板代码及目标树模型，生成目标UI图对应的代码文件。本发明实施例中，由于终端可以自主识别出UI图中元素的属性信息及位置信息，并基于识别出来的内容生成对应的代码文件，使得用户无需根据UI图的内容手动编写代码文件，进而简化了生成代码文件的过程，提高了生成代码文件的便捷性，降低了实现成本。

实施例二

图2-1是本发明实施例二提供的一种代码文件生成的步骤流程图，如图2-1所示，该方法可以包括：

步骤201、获取目标UI图。

具体的，本步骤的实现方式可以参考上述步骤101，本发明实施例在此不做赘述。

步骤202、将所述目标UI图输入预设图像识别模型，获得所述目标UI图中的每个元素的属性信息，以及，确定每个元素与其他元素之间的位置关系，得到位置信息。

本步骤中，预设图像识别模型可以是谷歌的第二代人工智能学习系统TensorFlow技术中的循环神经网络(Recurrent Neural Networks，RNN)模型。其中，RNN模型具备记住之前发生的事的能力，可以把之前处理的结果短暂的存储起来，在进行下一次分析处理时，可以结合之前存储的数据进行分析。

进一步地，该预设图像识别模型可以是通过训练样本训练获得，该训练样本可以包括实验UI图、实验UI图中每个元素的属性信息及位置信息。终端可以在步骤201之前先通过训练样本训练获得该预设图像识别模型，具体的，终端可以先将实验UI图输入初始图像识别模型，获得实验UI图中的每个元素的属性信息及位置信息，得到对比元素的属性信息及位置信息；其中，该初始图像识别模型可以是根据训练样本预先构建的，当然，也可以是现有的模型，本发明实施例对此不作限定。

接着，可以判断对比元素的属性信息及位置信息与实验UI图中的每个元素的属性信息及位置信息是否相同，最后，如果不相同，则调整初始图像识别模型的模型参数，直到对比元素的属性信息及位置信息与实验UI图中的每个元素的属性信息及位置信息相同，获得预设图像识别模型，这样通过调整初始图像识别模型的模型参数，选择识别出来的元素的属性信息及位置信息最接近实验UI图中元素的属性信息及位置信息的图像识别模型作为图像识别模型，以保证利用预设图像识别模型能够准确的识别出目标UI图中元素的属性信息及位置信息。

示例的，图2-2是本发明实施例二提供的一种目标UI图的示意图，相应地，终端可以通过预设图像识别模型，识别该目标UI图中各个元素的属性信息及位置信息。进一步地，图2-3是本发明实施例二提供的一种元素识别示意图，图2-3示出的是对图2-2中示出的目标UI图中的元素进行识别后的示意图，终端可以识别出文本元素01的属性信息及位置信息、按钮元素02的属性信息及位置信息以及图片元素03的属性信息及位置信息。

步骤203、基于每个元素的属性信息及位置信息，生成目标树模型。

具体的，终端可以通过下述子步骤(1)～子步骤(4)实现基于每个元素的属性信息及位置信息，生成目标树模型：

子步骤(1)：将每个元素作为元素节点，并将每个元素的属性信息及位置信息与所述元素对应的元素节点绑定。

示例的，假设有5个元素，那么终端可以将这5个元素中每个元素的属性信息及位置信息与该元素对应的元素节点绑定。假设这5个元素分别为元素1、元素2、元素3、元素4以及元素5，元素1对应元素节点A、元素2对应元素节点B，元素3对应元素节点C，元素4对应元素节点D，元素5对应元素节点E，那么终端可以将元素1的属性信息及位置信息与元素节点A绑定，将元素2的属性信息及位置信息与元素节点B绑定，将元素3的属性信息及位置信息与元素节点C绑定，将元素4的属性信息及位置信息与元素节点D绑定，将元素5的属性信息及位置信息与元素节点E绑定。

具体的，在将每个元素的属性信息及位置信息与元素对应的元素节点绑定时，可以是在元素节点中定义该元素节点对应的属性信息及位置信息，进一步地，由于后续步骤中，终端会从目标树模型中获取每个元素节点的属性信息及位置信息来生成布局文件，因此，本步骤中，通过将每个元素的属性信息及位置信息与对应的元素节点绑定，使得每个元素节点都带有其对应的信息描述，这样，后续步骤中终端能够便捷基于目标树模型，获取每个元素节点的属性信息及位置信息。当然，实际应用中，也可以不将每个元素的属性信息及位置信息与元素对应的元素节点绑定，而是将所有元素的属性信息及位置信息都存储在预设区域，然后建立元素的属性信息及位置信息与元素节点对应关系，相应的，终端可以基于该对应关系进行查找，进而获取每个元素节点对应的属性信息及位置信息，本发明实施例对此不作限定。

子步骤(2)：按照预设规则，为每个元素节点设置对应的父节点值。

本步骤中，父节点值可以用于指示该元素节点与哪个布局节点连接，对应相同父节点值的元素节点连接至同一父节点上。具体的，该预设规则可以是为布局关系相同的元素节点设置相同的父节点值，在设置父节点值时，终端可以先根据每个元素节点的位置信息，确定各个元素节点之间是线性布局还是相对布局，将表示线性布局属性的标识值作为线性布局的元素节点对应的父节点值，例如，1，相应地，将表示相对布局属性的标识值作为相对布局的元素节点对应的父节点值，其中，标识值的具体数值可以是由开发人员预先定义的，本发明实施例对此不作限定。

进一步地，终端为元素节点A～元素节点E设置的父节点值，可以通过二维数组形式存储，示例的，该二维数组可以如下表1所示：

元素节点	父节点值
		A	1
B	2
		C	1
D	1
		E	2
…	…

表1

子步骤(3)：基于预设的最大树模型深度以及每个元素的父节点值，利用穷举法，确定至少一组布局节点以及每组布局节点中各个布局节点的属性。

本步骤中，该预设的最大树模型深度可以是根据实际需求设置的，示例的，由于UI图中元素的个数往往不会太多，基于大多数UI图中包括的元素个数，可以设置该最大树模型深度为3，当然，在UI图中包括的元素个数较多/较少时，设置更大/更小的深度，本发明实施例对此不作限定。

进一步地，终端可以以预设的最大树模型深度作为标准，利用穷举法，列举出多组布局节点，其中，每组布局节点中包括至少一个布局节点，每组布局节点中包括的布局节点个数，需要保证利用布局节点个数与元素节点个数之和个节点所能够组成的树模型中，深度最小的树模型的深度可以小于预设的最大树模型深度且每个布局节点都连接有其他节点，这样，由于元素节点的个数是固定的，树的深度是有限的，所以可形成的布局关系也是有限的，因此能够通过穷举法进行列举。

具体的，在列举时，终端可以针对每种具有相同父节点值的元素节设置一个布局节点，以上表1为例，终端可以针对元素节点A、C、D设置一个布局节点，针对元素节点B、E设置一个布局节点，具体在确定布局节点的属性时，可以根据布局节点所需要连接的元素节点的位置关系来确定，其中，布局节点的属性可以包括线性布局及相对布局。

子步骤(4)：基于每个元素节点对应的元素的位置信息、每个元素节点对应的父节点值、所述至少一组布局节点以及每组中每个布局节点的属性，构建目标树模型。

具体的，本步骤中，终端可以任选一组布局节点作为目标组布局节点，将目标组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上，其中，父节点值所指示的布局节点指的是属性与该父节点值表示属性相同的布局节点，然后根据每个元素节点对应的元素的位置信息，连接目标组布局节点中的各个布局节点，进而得到目标树模型。这样，任选一组布局节点和元素节点构建目标树模型的方式，使得终端通过一次构建过程，即可得到目标树模型，对终端系统资源的耗费较少。具体的，在连接时，可以是基于每个布局节点所连接的每个元素节点对应的元素的位置信息，确定每个布局节点所连接的元素节点之间的相对位置关系，然后按照与每个布局节点连接的各个元素节点的实际排列位置对应的方式，将布局节点依次连接至根节点中，进而使得后续步骤中，终端通过遍历目标树模型生成的代码文件能够与各个元素实际位置相符合。

进一步地，终端也可以对于每组布局节点都执行下述操作：将该组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接该组布局节点中的各个布局节点，得到多个树模型。

最后，将多个树模型中嵌套层数最少的树模型确定为目标树模型。这样，终端通过构建多个树模型，选出嵌套层数最少的树模型作为目标树模型，可以减少后续基于目标数据模型生成的代码文件的冗余度，提高代码文件的质量。示例的，图2-4是本发明实施例二提供的一种目标树模型示意图，如图2-4所示，该目标树模型中包括5个元素节点A～E及3个布局节点F～H。

步骤204、基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件。

本步骤中，代码文件可以包括布局文件以及样式文件，相应地，终端可以通过下述子步骤(5)～子步骤(7)实现生成目标UI图对应的代码文件：

子步骤(5)：获取所述目标树模型中每个布局节点的属性。

本步骤中，终端可以遍历布局节点的方式来获取每个布局节点的属性。示例的，终端可以通过如下示例代码实现遍历节点：

进一步地，在完成遍历之后，可以将遍历结果，例如，布局节点的属性存储在预设的lst列表中：

for node in lst：

print node._data

子步骤(6)：获取所述目标树模型中每个元素节点的属性信息及位置信息，并将所述每个元素节点的属性信息及位置信息添加至预设的模板代码中的对应位置，得到样式文件。

本步骤中，该预设的模板代码中可以根据元素类型以及嵌套布局，例如，基于三大基础元素文本、按钮、图片、相对布局以及线性布局，来设定代码模板，该预设的代码模板中可以包括各种代码标签，其中，不同代码标签对应不同类型的参数数据。具体的，终端可以遍历元素节点来获取每个元素节点的属性信息及位置信息，然后，将每个元素节点的属性信息及位置信息添加至对应的代码标签中，得到样式文件。示例的，终端可以接着遍历元素节点A、元素节点B、元素节点C、元素节点D以及元素节点E，获取每个元素节点上绑定的属性信息及位置信息，然后将获取到的属性信息及位置信息添加至对应的代码标签中，得到样式文件。

需要说明的是，终端还可以在生成目标UI图对应的代码文件之后，利用目标UI图对应的代码文件进行渲染，得到显示界面；将显示界面与目标UI图进行对比，确定显示界面相对于目标UI图的正确率；最后，基于该正确率，对预设图像识别模型进行调整，以提高后续过程中，预设图像识别模型对UI图识别的准确率。

进一步地，终端还可以通过其他方式来生成代码文件，例如，采用生成式对抗网络GAN，其中，对抗网络GAN是一种博弈式算法，博弈双方的利益之和是一个常数。网络中的发生器(Generator)会根据随机数来生成有意义的数据，网络中的鉴别器(Discriminator)会学习如何判断哪些是真实数据，哪些是生成数据，然后将学习的经验反向传递给Generator，让Generator能根据随机数生成更像真实数据的数据，其中，Generator生成的即为代码文件。

子步骤(7)：对于每个布局节点，在所述布局节点的属性为线性布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为线性排列的文件，在所述布局节点的属性为相对布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为相对排列的文件，得到布局文件。

本步骤中，布局文件可以体现各个元素之间的布局关系，相应地，在生成文件时，终端可以为布局节点所连接的各个元素节点在样式文件中对应的代码片段设置对应的标识，在布局节点的属性为线性布局时，通过在预设的定义线性排列代码段中增加与该布局节点连接的各个元素节点对应的代码片段的标识，进而实现生成文件；相应地，在布局节点的属性为相对布局时，通过在预设的定义相对排列代码段中增加与该布局节点连接的各个元素节点对应的代码片段的标识，进而实现生成文件。示例的，假设属性为线性布局的布局节点连接有元素节点B、元素节点E，那么可以为元素节点B对应的代码片段设置对应的标识，为元素节点E对应的代码片段设置对应的标识，通过在预设的定义线性排列代码段中增加与元素节点B对应的代码片段的标识以及元素节点E对应的代码片段的标识实现生成文件，进而得到布局文件。

示例的，生成的布局文件可以为下述代码示例：

以图2-4中示出的目标树模型为例，终端可以先遍历布局节点F、布局节点G以及布局节点H来获取布局节点F的属性、布局节点G的属性以及布局节点H的属性，然后根据与布局节点G连接的元素节点A、元素节点C以及元素节点D，与布局节点H连接的元素节点B以及元素节点E生成布局文件。

综上所述，本发明实施例二提供的代码文件生成方法，终端可以获取目标UI图，然后将目标UI图输入预设图像识别模型中，获取目标UI图中每个元素的属性信息及位置信息，这样，终端通过预设图像识别模型即可确定出目标UI图中每个元素的属性信息及位置信息，进而可以省略用户自主判断目标UI图中元素的属性信息及位置信息的步骤，进一步地，终端还会基于每个元素的属性信息及位置信息，生成目标树模型，最后，基于预设的模板代码及目标树模型，生成目标UI图对应的代码文件。本发明实施例中，由于终端可以自主识别出UI图中元素的属性信息及位置信息，并基于识别出来的内容生成对应的代码文件，使得用户无需根据UI图的内容手动编写代码文件，进而简化了生成代码文件的过程，提高了生成代码文件的便捷性，降低了实现成本。

实施例三

图3是本发明实施例三提供的一种代码文件生成装置的框图，如图3所示，该装置可以包括：

获取模块301，用于获取目标UI图；所述目标UI图中包括至少一个元素。

识别模块302，用于识别所述目标UI图中的每个元素的属性信息及位置信息；所述位置信息用于指示所述元素与其他元素之间的位置关系。

第一生成模块303，用于基于每个元素的属性信息及位置信息，生成目标树模型。

第二生成模块304，用于基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件。

本发明实施例三提供的代码文件生成装置，获取模块可以获取目标UI图，然后识别模块可以识别目标UI图中的每个元素的属性信息及位置信息，接着，第一生成模块可以基于每个元素的属性信息及位置信息，生成目标树模型，最后，第二生成模块可以基于预设的模板代码及目标树模型，生成目标UI图对应的代码文件。本发明实施例中，由于终端可以自主识别出UI图中元素的属性信息及位置信息，并基于识别出来的内容生成对应的代码文件，使得用户无需根据UI图的内容手动编写代码文件，进而简化了生成代码文件的过程，提高了生成代码文件的便捷性，降低了实现成本。

实施例四

图4是本发明实施例四提供的一种代码文件生成装置的框图，如图4所示，该装置可以包括：

获取模块401，用于获取目标UI图；所述目标UI图中包括至少一个元素。

识别模块402，用于识别所述目标UI图中的每个元素的属性信息及位置信息；所述位置信息用于指示所述元素与其他元素之间的位置关系。

第一生成模块403，用于基于每个元素的属性信息及位置信息，生成目标树模型。

第二生成模块404，用于基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件。

优选的，第一生成模块403，包括：

绑定子模块4031，用于将每个元素作为元素节点，并将每个元素的属性信息及位置信息与所述元素对应的元素节点绑定。

设置子模块4032，用于按照预设规则，为每个元素节点设置对应的父节点值。

确定子模块4033，用于基于预设的最大树模型深度以及每个元素的父节点值，利用穷举法，确定至少一组布局节点以及每组布局节点中各个布局节点的属性；其中，所述布局节点的属性包括线性布局及相对布局。

构建子模块4034，用于基于每个元素节点对应的元素的位置信息、每个元素节点对应的父节点值、所述至少一组布局节点以及每组中每个布局节点的属性，构建目标树模型。

优选的，所述构建子模块4034，用于：

任选一组布局节点作为目标组布局节点，将所述目标组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接目标组布局节点中的各个布局节点，得到目标树模型。

或者，

对于每组布局节点，将所述组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接所述组布局节点中的各个布局节点，得到多个树模型；将所述多个树模型中嵌套层数最少的树模型确定为目标树模型。

优选的，所述代码文件包括布局文件以及样式文件。

所述第二生成模块404，用于：

获取所述目标树模型中每个布局节点的属性。

获取所述目标树模型中每个元素节点的属性信息及位置信息，并将所述每个元素节点的属性信息及位置信息添加至预设的模板代码中的对应位置，得到样式文件。

对于每个布局节点，在所述布局节点的属性为线性布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为线性排列的文件，在所述布局节点的属性为相对布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为相对排列的文件，得到布局文件。

优选的，所述识别模块402，用于：

将所述目标UI图输入预设图像识别模型，获得所述目标UI图中的每个元素的属性信息，以及，确定每个元素与其他元素之间的位置关系，得到位置信息。

优选的，所述装置40还包括：

渲染模块，用于利用所述目标UI图对应的代码文件进行渲染，得到显示界面。

对比模块，用于将所述显示界面与所述目标UI图进行对比，确定所述显示界面相对于所述目标UI图的正确率。

调整模块，用于基于所述正确率，对所述预设图像识别模型进行调整。

综上所述，本发明实施例四提供的代码文件生成装置，获取模块可以获取目标UI图，然后识别模块可以获取目标UI图中每个元素的属性信息及位置信息，这样，终端通过预设图像识别模型即可确定出目标UI图中每个元素的属性信息及位置信息，进而可以省略用户自主判断目标UI图中元素的属性信息及位置信息的步骤，进一步地，第一生成模块会基于每个元素的属性信息及位置信息，生成目标树模型，最后，第二生成模块会基于预设的模板代码及目标树模型，生成目标UI图对应的代码文件。本发明实施例中，由于终端可以自主识别出UI图中元素的属性信息及位置信息，并基于识别出来的内容生成对应的代码文件，使得用户无需根据UI图的内容手动编写代码文件，进而简化了生成代码文件的过程，提高了生成代码文件的便捷性，降低了实现成本。

对于上述装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

优选的，本发明实施例还提供一种移动终端，包括处理器，存储器及存储在存储器上并可在处理器上运行的计算机程序，该计算机程序被处理器执行时实现上述代码文件生成方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

本发明实施例还提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述代码文件生成方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。其中，所述的计算机可读存储介质，如只读存储器(Read-Only Memory，简称ROM)、随机存取存储器(RandomAccess Memory，简称RAM)、磁碟或者光盘等。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域技术人员易于想到的是：上述各个实施例的任意组合应用都是可行的，故上述各个实施例之间的任意组合都是本发明的实施方案，但是由于篇幅限制，本说明书在此就不一一详述了。

在此提供的代码文件生成方法不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造具有本发明方案的系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本发明并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的代码文件生成方法中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (12)

1.一种代码文件生成方法，其特征在于，所述方法包括：

获取目标UI图；所述目标UI图中包括至少一个元素；

识别所述目标UI图中的每个元素的属性信息及位置信息；所述位置信息用于指示所述元素与其他元素之间的位置关系；

基于每个元素的属性信息及位置信息，生成目标树模型；

基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件。

2.根据权利要1所述的方法，其特征在于，所述基于每个元素的属性信息及位置信息，生成目标树模型的步骤，包括：

将每个元素作为元素节点，并将每个元素的属性信息及位置信息与所述元素对应的元素节点绑定；

按照预设规则，为每个元素节点设置对应的父节点值；

基于预设的最大树模型深度以及每个元素的父节点值，利用穷举法，确定至少一组布局节点以及每组布局节点中各个布局节点的属性；其中，所述布局节点的属性包括线性布局及相对布局；

基于每个元素节点对应的元素的位置信息、每个元素节点对应的父节点值、所述至少一组布局节点以及每组中每个布局节点的属性，构建目标树模型。

3.根据权利要2所述的方法，其特征在于，所述基于每个元素节点对应的元素的位置信息、每个元素节点对应的父节点值、所述至少一组布局节点以及每个布局节点的属性，构建目标树模型的步骤，包括：

任选一组布局节点作为目标组布局节点，将所述目标组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接目标组布局节点中的各个布局节点，得到目标树模型；

或者，

对于每组布局节点，将所述组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接所述组布局节点中的各个布局节点，得到多个树模型；将所述多个树模型中嵌套层数最少的树模型确定为目标树模型。

4.根据权利要2所述的方法，其特征在于，所述代码文件包括布局文件以及样式文件；

所述基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件的步骤，包括：

获取所述目标树模型中每个布局节点的属性；

获取所述目标树模型中每个元素节点的属性信息及位置信息，并将所述每个元素节点的属性信息及位置信息添加至预设的模板代码中的对应位置，得到样式文件；

对于每个布局节点，在所述布局节点的属性为线性布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为线性排列的文件，在所述布局节点的属性为相对布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为相对排列的文件，得到布局文件。

5.根据权利要求1所述的方法，其特征在于，所述识别所述目标UI图中的每个元素的属性信息及位置信息的步骤，包括：

将所述目标UI图输入预设图像识别模型，获得所述目标UI图中的每个元素的属性信息，以及，确定每个元素与其他元素之间的位置关系，得到位置信息。

6.根据权利要求2所述的方法，其特征在于，在所述基于预设的模板代码，遍历所述目标树模型，得到所述目标UI图对应的代码文件的步骤之后，所述方法还包括：

利用所述目标UI图对应的代码文件进行渲染，得到显示界面；

将所述显示界面与所述目标UI图进行对比，确定所述显示界面相对于所述目标UI图的正确率；

基于所述正确率，对所述预设图像识别模型进行调整。

7.一种代码文件生成装置，其特征在于，所述装置包括：

获取模块，用于获取目标UI图；所述目标UI图中包括至少一个元素；

识别模块，用于识别所述目标UI图中的每个元素的属性信息及位置信息；所述位置信息用于指示所述元素与其他元素之间的位置关系；

第一生成模块，用于基于每个元素的属性信息及位置信息，生成目标树模型；

第二生成模块，用于基于预设的模板代码及所述目标树模型，生成所述目标UI图对应的代码文件。

8.根据权利要7所述的装置，其特征在于，第一生成模块，包括：

绑定子模块，用于将每个元素作为元素节点，并将每个元素的属性信息及位置信息与所述元素对应的元素节点绑定；

设置子模块，用于按照预设规则，为每个元素节点设置对应的父节点值；

确定子模块，用于基于预设的最大树模型深度以及每个元素的父节点值，利用穷举法，确定至少一组布局节点以及每组布局节点中各个布局节点的属性；其中，所述布局节点的属性包括线性布局及相对布局；

构建子模块，用于基于每个元素节点对应的元素的位置信息、每个元素节点对应的父节点值、所述至少一组布局节点以及每组中每个布局节点的属性，构建目标树模型。

9.根据权利要8所述的装置，其特征在于，所述构建子模块，用于：

任选一组布局节点作为目标组布局节点，将所述目标组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接目标组布局节点中的各个布局节点，得到目标树模型；

或者，

对于每组布局节点，将所述组布局节点中的布局节点作为父节点，根据每个元素节点对应的父节点值，将对应父节点值相同的元素节点连接到所述父节点值所指示的同一布局节点上；根据每个元素节点对应的元素的位置信息，连接所述组布局节点中的各个布局节点，得到多个树模型；将所述多个树模型中嵌套层数最少的树模型确定为目标树模型。

10.根据权利要8所述的装置，其特征在于，所述代码文件包括布局文件以及样式文件；

所述第二生成模块，用于：

获取所述目标树模型中每个布局节点的属性；

获取所述目标树模型中每个元素节点的属性信息及位置信息，并将所述每个元素节点的属性信息及位置信息添加至预设的模板代码中的对应位置，得到样式文件；

对于每个布局节点，在所述布局节点的属性为线性布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为线性排列的文件，在所述布局节点的属性为相对布局时，生成定义所述布局节点所连接的各个元素节点在所述样式文件中对应的代码片段之间为相对排列的文件，得到布局文件。

11.根据权利要求7所述的装置，其特征在于，所述识别模块，用于：

将所述目标UI图输入预设图像识别模型，获得所述目标UI图中的每个元素的属性信息，以及，确定每个元素与其他元素之间的位置关系，得到位置信息。

12.根据权利要求8所述的装置，其特征在于，所述装置还包括：

渲染模块，用于利用所述目标UI图对应的代码文件进行渲染，得到显示界面；

对比模块，用于将所述显示界面与所述目标UI图进行对比，确定所述显示界面相对于所述目标UI图的正确率；

调整模块，用于基于所述正确率，对所述预设图像识别模型进行调整。