本申请涉及计算机技术领域，特别是涉及一种前端界面代码生成方法、装置、电子设备及存储介质。
背景技术：
随着计算机技术的发展，客户端类型越来越多，为了保持产品界面的一致性，设计师设计的ui(用户界面)通常需要在不同类型的客户端显示，如网页端、pc端、移动终端等。在传统的图形用户界面开发过程中，设计师设计出的用户界面，通常需要交付给编码工程师，由编码工程师通过编写代码将图形用户界面中的界面元素布局到前端，但是，传统的界面布局方法需要编码工程师手动编写代码并布局界面元素，开发效率低。现有技术中还出现了一种前端界面代码生成方法，通过深度学习的方式，根据图形用户界面的设计稿的截屏图片生成前端界面代码。基于深度学习生成前端界面代码的方法相比传统技术在生成前端界面代码速度上有了很大提升，但是截屏图片相对完整设计稿丢失了许多编程必要信息，导致生成的代码准确率很低，无法达到工程级别的使用要求。现有技术中还有一种通过预先建立代码标准模板、通用脚本文件以及信息项配置表，根据配置处理结果自动加载元素和调用脚本文件，生成web界面的方法，但是，该方法需要预先建立代码标准模板，开发效率低下，并且仅适用于界面设计元素单一，结构简单的界面，无法满足复杂设计界面的需求。
可见，现有技术中的前端界面代码生成方法至少存在生成代码准确率低、开发效率低下或者适用性较差的缺陷。
技术实现要素：
本申请提供一种前端界面代码生成方法，解决现有技术中的前端界面代码生成方法存在的上述至少一个问题。
为了解决上述问题，第一方面，本申请公开了一种前端界面代码生成方法，包括：
获取前端界面设计稿导出的源数据中包括的控件的位置信息；
基于所述控件的位置信息，通过模拟布局或容器内控件迭代的方式确定所述控件的布局方案；
根据所述布局方案生成所述前端界面的代码。
第二方面，本申请公开了一种前端界面代码生成装置，包括：
控件位置信息获取模块，用于获取前端界面设计稿导出的源数据中包括的控件的位置信息；
布局方案确定模块，用于基于所述控件的位置信息，通过模拟布局或容器内控件迭代的方式确定所述控件的布局方案；
界面代码生成模块，用于根据所述布局方案生成所述前端界面的代码。
第三方面，本申请实施例提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现本申请实施例所述的前端界面代码生成方法。
第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本申请实施例所述的前端界面代码生成方法的步骤。
本申请实施例公开的前端界面代码生成方法，通过获取前端界面设计稿导出的源数据中包括的控件的位置信息，然后基于所述控件的位置信息，通过模拟布局或容器内控件迭代的方式确定所述控件的布局方案，最后根据所述布局方案生成所述前端界面的代码，解决了现有技术中的前端界面代码生成方法存在的生成代码准确率低、开发效率低下。通过获取前端界面设计稿导出的源数据中包括的控件的位置信息，充分保留了控件数据，可以有效提升生成的代码的准确性；通过自动根据控件的位置信息确定所述控件的布局方案，不需要人工输入标准布局模板，不仅提高了生成前端界面代码的效率，同时避免了采用标准布局模板进行布局适用界面受限的问题，生成布局代码灵活性更大。
附图说明
为了更清楚地说明本申请实施例的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本申请实施例一的前端界面代码生成方法流程图；
图2是本申请实施例二的前端界面代码生成方法流程图；
图3是本申请实施例二的前端界面代码生成方法中一个步骤的具体流程图；
图4是本申请实施例二的前端界面代码生成方法中一个步骤另一实施方式的具体流程图；
图5是本申请实施例三的前端界面代码生成方法流程图；
图6是本申请实施例三的控件分布示意图；
图7是本申请实施例四的前端界面代码生成装置结构图之一；
图8是本申请实施例四的前端界面代码生成装置结构图之二；
图9是本申请实施例五的前端界面代码生成装置结构图之一。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
实施例一
本申请公开的一种前端界面代码生成方法，如图1所示，该方法包括：步骤100至步骤120。
步骤100，获取前端界面设计稿导出的源数据中包括的控件的位置信息。
具体实施时，可以通过从前端界面的设计稿中导出前端界面设计数据，然后，对所述前端界面设计数据进行信息收集和转化处理，确定所述前端界面包括的控件信息。所述控件信息中包括：前端界面包括的所有控件的列表，以及每个控件的位置信息，所述位置信息至少包括：位置坐标和控件宽度、高度等控件尺寸信息。
现有技术中在进行前端界面开发时，通常是设计师先通过设计软件进行前端界面设计，然后，将设计师设计的前端界面中的图片或控件或切图等导出成图片格式的文件、html格式的数据文件或json个数的数据文件。之后，软件工程师编写界面显示代码，以便程序运行时显示前端界面。设计师常用的设计软件如：sketch、photoshop，illustrator和fireworks等。通常，设计软件支持源数据导出，也支持部分图层或界面元素导出。以sketch为例，支持以layer(图层)为基础进行数据导出，每个图层对应一个控件；支持整个画布导出；支持切图导出；支持分组导出等。具体实施时，可以通过设计软件的开放接口导出设计稿中的界面源数据。从设计稿中导出界面源数据的方法参见现有技术，本申请实施例中不再赘述。
仍以通过sketch设计前端界面为例，设计稿以layer为基础组成用户所看到的设计图。为了生成最终的代码逻辑，首先需要收集layer的各种属性信息。每个layer的属性信息包括：layer唯一标志符、名称、类型、填充文本、文本总行数、文本对齐方式、字体大小、字体颜色、layer边角半径、透明度、边框宽度、边框颜色、填充色、水平坐标、垂直坐标、宽度、高度等。sketch中的每个layer对应前端界面的一个控件，因此，layer的属性信息对应控件的显示属性。将layer的上述信息通过sketch开放api收集并以json数据格式的形式进行保存，得到的json数据格式的数据即是前端界面的源数据。
由于前端界面设计数据是通过设计软件的开放接口从设计稿中导出的数据，因此，导出的前端界面设计数据中包含的是设计软件的开放接口定义的字段，需要对前端界面设计数据进行数据处理，从中获取设计前端界面显示程序时需要的信息。例如，sketch的开放接口导出的前端界面设计数据中图层类型以textlayer、slicelayer、bitmaplayer等字段标识，而设计前端界面显示程序时需要的信息是控件类型，如：text、imageview、rect等类型。因此，首先需要在导出的所述前端界面设计数据进行信息收集，将每种类型的图层数据转化为相应控件类型控件的控件数据，如进行视图归类和映射，确定前端界面中包括的控件类型、控件标识和显示位置、显示风格等控件信息。
步骤110，基于所述控件的位置信息，通过模拟布局或容器内控件迭代的方式确定所述控件的布局方案。
控件的布局方案通常包括控件的布局顺序和位置关系，具体实施时，可以首先根据控件的位置信息首先模拟控件布局，确定多条候选布局方案；然后，确定每条候选布局方案的评分，再根据候选布局方案的候选评分选择最优的一条布局方案。或者，可以首先根据控件的位置信息通过容器特征识别或边框识别或者结合边框识别和容器特征识别的方法，对控件进行迭代分组，将位置相关的控件划分至同一组中，并创建一个新容器来管理该组控件；然后，确定每组控件所属容器的容器类型；最后，基于所述容器类型、每组控件所属容器的层级隶属关系，确定所有控件的布局方案。其中，容器的层级隶属关系在对控件进行迭代分组时同步确定。
步骤120，根据所述布局方案生成所述前端界面的代码。
具体实施时，基于所述控件的位置信息，通过模拟布局或容器内控件迭代的方式确定所述控件的布局方案可以采用xml布局文件描述。xml布局文件是一种非常接近实际代码的描述，只需要很少且机械化的工作就能直接转化成编程的布局代码。
本申请实施例公开的前端界面代码生成方法，通过获取前端界面设计稿导出的源数据中包括的控件的位置信息，然后基于所述控件的位置信息，通过模拟布局或容器内控件迭代的方式确定所述控件的布局方案，最后根据所述布局方案生成所述前端界面的代码，解决了现有技术中的前端界面代码生成方法存在的生成代码准确率低、开发效率低下。通过获取前端界面设计稿导出的源数据中包括的控件的位置信息，充分保留了控件数据，可以有效提升生成的代码的准确性；通过自动根据控件的位置信息确定所述控件的布局方案，不需要人工输入标准布局模板，不仅提高了生成前端界面代码的效率，同时避免了采用标准布局模板进行布局适用界面受限的问题，生成布局代码灵活性更大。
实施例二
本申请公开的一种前端界面代码生成方法，如图2所示，该方法包括：步骤200至步骤240。
步骤200，获取前端界面设计稿导出的源数据中包括的控件的位置信息。
获取前端界面设计稿导出的源数据中包括的控件的位置信息的具体实施时方式参见实施例一，此处不再赘述。
具体实施时，获取到的前端界面中包括的控件的位置信息，至少包括：位置坐标和控件的宽度、高度等信息。
获取到控件的位置信息之后，首先基于控件的位置信息，通过模拟布局的方式确定控件的布局方案，包括：基于所述控件的位置信息，对未布局的控件进行模拟布局，以确定备选布局方案；确定所述备选布局方案的候选评分；选择所述候选评分满足预设条件的所述备选布局方案，作为所述控件的布局方案。
步骤210，基于所述控件的位置信息，对未布局的控件进行模拟布局，以确定备选布局方案。
控件的布局方案通常包括控件的布局顺序和位置关系。由于不同的平台由于界面代码类型不同，提供的界面代码显示接口不同等因素，在基于所述控件的位置信息，通过模拟布局或容器内控件迭代的方式确定所述控件的布局方案时，可以采用相应的技术方案。本实施例中，如图3所示，基于所述控件的位置信息，对未布局的控件进行模拟布局，以确定备选布局方案，包括：子步骤2101至子步骤2106，本实施例中将以未布局控件包括：a、b、c、d四个控件为例，详细说明基于所述控件的位置信息，对未布局的控件进行模拟布局，以确定备选布局方案的具体技术方案。
优选的，鉴于工程师设计的前端界面代码通常是按照控件从左上往右下布局的顺序设置的，因此，在布局之前，首先基于所述控件的位置信息，将未布局的控件按照从左上到右下的顺序进行排列，这样，生成的界面代码有利于二次开发。
子步骤2101，基于所述控件的位置信息确定每个未布局控件相关的已布局控件。
具体实施时，在布局第一个未布局控件时，由于没有已布局控件作参考，可以将包含所有未布局控件的最小矩形，作为一个容器控件，然后，将该容器控件拆分为与容器控件大小相等，紧邻该容器控件上、下、左、右四个方向排布的虚拟控件，并将这四个虚拟控件作为已布局控件，供其他未布局控件在布局时参考，可以记为m1、m2、m3和m4。具体实施时，容器控件的宽和高也可以根据需要设置为其他值。
具体实施时，可以生成两个数组，一个存放已布局控件，一个存放未布局控件，并将前端界面中包括的所有控件按照位置从左上往右下排序，加入到未布局控件数组中。在模拟布局过程中，首先要确定每个未布局控件相关的已布局控件。例如，对于未布局控件a，分别计算未布局控件a与每个已布局控件mi的中心水平距离h_ami或中心垂直距离v_ami,如果未布局控件a和已布局控件mi的中心水平距离h_ami小于未布局控件a或已布局控件mi的宽度的一半，或者，未布局控件a和已布局控件mi的中心垂直距离v_ami小于未布局控件a或已布局控件mi的高度的一半，则认为未布局控件a与和已布局控件mi相关。具体实施时，可以将与未布局控件a相关的已布局控件记为ma。
子步骤2102，根据所述控件的位置信息，确定每个所述未布局控件相对与其相关的已布局控件的单项要素布局评分。
其中，所述单项要素布局评分包括：第一水平布局评分、第二水平布局评分、第一垂直布局评分和第二垂直布局评分；所述单项要素布局评分还包括：连续性评分、包含关系评分、与右下方距离评分中的任意一项或多项。
本申请实施例中，以单项要素布局评分包括：第一水平布局评分、第二水平布局评分、第一垂直布局评分、第二垂直布局评分、连续性评分、包含关系评分、与右下方距离评分为例，说明计算未布局控件的单项要素布局评分的具体方案。本申请实施例中，以单项要素布局评分越小表示该控件基于对应的布局要素越容易布局为例进行说明。
进一步可选的，根据所述控件的位置信息，确定每个所述未布局控件相对与其相关的已布局控件的单项要素布局评分，包括：根据未布局控件和已布局控件的位置信息，确定所述未布局控件基于不同的水平方向布局关系布局时的第一水平布局评分和第二水平布局评分；其中，所述水平方向布局关系包括：左对齐、右对齐、水平居中对齐、固定水平边距和未布局控件宽度中的任意一项或多项。具体实施时，当基于左对齐或右对齐布局时，确定所述水平布局评分等于第一分值；当基于水平居中对齐布局时，确定所述水平布局评分等于第二分值；当基于固定水平边距布局时，确定所述水平布局评分等于第三分值；当基于未布局控件宽度布局时，确定所述水平布局评分等于第四分值；所述第二分值匹配的布局难度大于所述第一分值匹配的布局难度；所述第三分值匹配的布局难度与水平边距成正比；所述第四分值匹配的布局难度与未布局控件宽度成正比；所述第三分值和第四分值匹配的布局难度大于等于所述第一分值匹配的布局难度。
假设未布局控件a的相关已布局控件m1、m2、m3和m4，对a尝试做水平方向布局时，首先根据未布局控件和已布局控件的位置信息，确定所述未布局控件基于不同的水平方向布局关系布局时的第一水平布局评分。首先，根据未布局控件a和与其相关的已布局控件m1、m2、m3和m4的位置坐标确定所述未布局控件a分别相对于与其相关的已布局控件m1、m2、m3和m4的位置关系，并进一步确定未布局控件a分别相对于与其相关的已布局控件m1、m2、m3和m4的的第一水平布局评分。当未布局控件a相对已布局控件m1左对齐时，可以基于左对齐关系对未布局控件a进行布局，然后确定未布局控件a相对已布局控件m1的第一水平布局为第一分值，具体实施时，第一分值可以取值为0分。当未布局控件a相对已布局控件m3水平居中对齐时，可以基于水平居中对齐关系对未布局控件a进行布局，然后确定未布局控件a相对已布局控件m3的第一水平布局为第二分值，具体实施时，第二分值可以取值为10分。当未布局控件a的左边距相对已布局控件m2的右边距离为0时，可以基于固定水平边距进行布局，然后，确定未布局控件a相对已布局控件m2的第一水平布局评分为第三分值，具体实施时，第三分值可以取值为0分。当未布局控件a的右边距相对已布局控件m3的左边距离为20时，基于固定水平边距进行布局，然后确定控件a相对已布局控件m3的第一水平布局评分，例如第一水平布局评分为10分。当基于未布局控件宽度进行布局时，控件宽度越小，越容易布局，其第一水平布局评分就越小。例如：未布局控件宽度小于等于50，其第一水平布局评分为第四分值，如0分,未布局控件宽度大于50小于等于100，其第一水平布局评分为第四分值，如10分。即第四分值越小，匹配的布局难度越小。
之后，根据未布局控件a和与其相关的已布局控件m1、m2、m3和m4的位置坐标确定所述未布局控件a分别相对于与其相关的已布局控件m1、m2、m3和m4的位置关系，并进一步确定未布局控件a分别相对于与其相关的已布局控件m1、m2、m3和m4的第二水平布局评分。在确定第二水平布局评分时，采用与确定第一水平布局评分不同的水平方向布局关系，例如：如果根据左对齐关系确定未布局控件a相对已布局控件m1的第一水平布局评分，则不能再根据左对齐关系确定未布局控件a相对已布局控件m1的第二水平布局评分。基于某种水平方向布局关系确定未布局控件相对于其相关的某一已布局控件的第二水平布局评分的具体方法，参照基于相应水平方向布局关系确定第一水平布局评分的具体方法，此处不再赘述。
本申请具体实施时，优先判断控件的左对齐和右对齐两种水平方向布局关系关系，然后，判断水平居中对齐关系，最后判断边距离。如果未布局控件相对与其相关的已布局控件左对齐或右对齐，那么，该未布局控件相对与其相关的已布局控件的水平布局评分将设置为第一分值，如0分。如果未布局控件相对与其相关的已布局控件水平居中对齐，那么，该未布局控件相对与其相关的已布局控件的水平布局要素布局评分将设置为第二分值，如10分。即第二分值匹配的布局难度大于第一分值匹配的布局难度。如果未布局控件左边距离与其相关的已布局控件m1的右边距离为0，那么，该未布局控件相对已布局控件m1的水平布局评分将设置为第三分值，如0；如果未布局控件左边距离与其相关的已布局控件m1的右边距离为50，那么，该未布局控件相对已布局控件m1的水平布局评分将设置为第三分值，如20，即第三分值越小匹配的布局难度越小；固定边距越小对应的第三分值越小。
进一步可选的，根据所述控件的位置信息，确定每个所述未布局控件相对与其相关的已布局控件的单项要素布局评分，包括：根据未布局控件和已布局控件的位置信息，确定所述未布局控件基于不同的垂直方向布局关系布局时的第一垂直布局评分和第二垂直布局评分；所述垂直方向布局关系包括：顶对齐、底对齐、垂直居中对齐、固定垂直边距和未布局控件高度中的任意一项或多项。当基于顶对齐或底对齐布局时，确定所述垂直布局评分等于第五分值；当基于垂直居中对齐布局时，确定所述垂直布局评分等于第六分值；当基于固定垂直边距布局时，确定所述垂直布局评分等于第七分值；当基于未布局控件高度布局时，确定所述垂直布局评分等于第八分值；所述第六分值匹配的布局难度大于所述第五分值匹配的布局难度；所述第七分值匹配的布局难度与垂直边距成正比；所述第八分值匹配的布局难度与未布局控件高度成正比；所述第七分值和第八分值匹配的布局难度大于等于所述第五分值匹配的布局难度。
仍然假设未布局控件a的相关已布局控件m1、m2、m3和m4，对a尝试做垂直方向布局时，首先根据未布局控件和已布局控件的位置信息，确定所述未布局控件基于不同的垂直方向布局关系布局时的第一垂直布局评分。首先，根据未布局控件a和与其相关的已布局控件m1、m2、m3和m4的位置坐标确定所述未布局控件a分别相对于与其相关的已布局控件m1、m2、m3和m4的位置关系，并进一步确定未布局控件a分别相对于与其相关的已布局控件m1、m2、m3和m4的的第一垂直布局评分。当未布局控件a相对已布局控件m1顶对齐时，可以基于顶对齐关系对未布局控件a进行布局，然后确定未布局控件a相对已布局控件m1的第一垂直布局为第五分值，具体实施时，第五分值可以取值为0分。当未布局控件a相对已布局控件m3垂直居中对齐时，可以基于垂直居中对齐关系对未布局控件a进行布局，然后确定未布局控件a相对已布局控件m3的第一垂直布局为第六分值，具体实施时，第六分值可以取值为10分。当未布局控件a的顶边距相对已布局控件m2的底边距离为0时，可以基于固定垂直边距进行布局，然后，确定未布局控件a相对已布局控件m2的第一垂直布局评分为第七分值，具体实施时，第七分值可以取值为0分。当未布局控件a的顶边距相对已布局控件m3的底边距离为20时，基于固定垂直边距进行布局，然后确定控件a相对已布局控件m3的第一垂直布局评分，例如第一垂直布局评分为10分。当基于未布局控件高度进行布局时，控件高度越小，越容易布局，其第一垂直布局评分就越小。例如：未布局控件高度小于等于50，其第一垂直布局评分为第八分值，如0分,未布局控件高度大于50小于等于100，其第一垂直布局评分为第八分值，如10分。即第八分值越小，匹配的布局难度越小。
之后，根据未布局控件a和与其相关的已布局控件m1、m2、m3和m4的位置坐标确定所述未布局控件a分别相对于与其相关的已布局控件m1、m2、m3和m4的位置关系，并进一步确定未布局控件a分别相对于与其相关的已布局控件m1、m2、m3和m4的第二垂直布局评分。在确定第二垂直布局评分时，采用与确定第一垂直布局评分不同的垂直方向布局关系，例如：如果根据顶对齐关系确定未布局控件a相对已布局控件m1的第一垂直布局评分，则不能再根据顶对齐关系确定未布局控件a相对已布局控件m1的第二垂直布局评分。基于某种垂直方向布局关系确定未布局控件相对于其相关的某一已布局控件的第二垂直布局评分的具体方法，参照基于相应垂直方向布局关系确定第一垂直布局评分的具体方法，此处不再赘述。
本申请具体实施时，优先判断控件的顶对齐和底对齐两种垂直方向布局关系关系，然后，判断垂直居中对齐关系，最后判断边距离。如果未布局控件相对与其相关的已布局控件顶对齐或底对齐，那么，该未布局控件相对与其相关的已布局控件的垂直布局评分将设置为第五分值，如0分。如果未布局控件相对与其相关的已布局控件垂直居中对齐，那么，该未布局控件相对与其相关的已布局控件的垂直布局布局评分将设置为第六分值，如10分。即第六分值匹配的布局难度大于第五分值匹配的布局难度。如果未布局控件顶边距离与其相关的已布局控件m1的底边距离为0，那么，该未布局控件相对已布局控件m1的垂直布局评分将设置为第七分值，如0；如果未布局控件顶边距离与其相关的已布局控件m1的底边距离为50，那么，该未布局控件相对已布局控件m1的垂直布局评分将设置为第七分值，如20，即第七分值越小匹配的布局难度越小；固定边距越小对应的第七分值越小。
进一步可选的，根据所述控件的位置信息，确定每个所述未布局控件相对与其相关的已布局控件的单项要素布局评分，包括：根据未布局控件和最后标记为已布局的控件在水平方向、垂直方向的距离，确定所述未布局控件的连续性评分；其中，所述连续性评分匹配的布局难度与所述水平方向和垂直方向的距离成正比。假设控件m4为最后标记为已布局的控件，控件a、b、c、d为未布局控件，本步骤中需要分别确定控件a、b、c、d的连续性评分。具体实施时，若未布局控件a与已布局控件m4或已布局控件中包含m4的控件的水平距离很近，如小于50，则未布局控件a的连续性评分可以设置为-50；若未布局控件a与已布局控件m4或已布局控件中包含m4的控件的垂直距离很近，如小于50，则未布局控件a的连续性评分可以设置为-10。
进一步可选的，根据所述控件的位置信息，确定每个所述未布局控件相对与其相关的已布局控件的单项要素布局评分，包括：当未布局控件与任意一已布局控件存在包含关系时，确定包含关系评分为第九分值，所述第九分值匹配的布局难度小于所述第一分值匹配的布局难度。存在包含关系的控件最容易布局，因此，包含布局要素布局评分优先级最高。具体实施时，若未布局控件与已布局控件中任意一个控件存在包含关系，则将该未布局控件的包含关系评分为第九分值，例如，第九分值等于-200。
进一步可选的，根据所述控件的位置信息，确定每个所述未布局控件相对与其相关的已布局控件的单项要素布局评分，包括：根据未布局控件与右下方的距离，确定所述未布局控件的与右下方距离布局评分；其中，所述与右下方距离布局评分匹配的布局难度与未布局控件与右下方的距离成反比。具体实施时，因为未布局控件首先按从左上到右下的顺序进行了排列，因此，通常先布局的控件为位置靠左上方的控件。在模拟布局过程中，如果依据其他布局要素的单一维度布局评分之和无法确定未布局控件的布局难易程度，则位置越靠近右下方的控件相对越容易布局。因此，根据未布局控件与右下方的距离，确定所述未布局控件的与右下方距离布局评分，作为补正评分。具体实施时，未布局控件与向右下方的距离越小，对应的与右下方距离布局评分越大，该右下方距离布局评分匹配未布局控件布局难度越大。例如，对于最靠近右下方的未布局控件b，设置其与右下方距离布局评分为25，对于靠近右下方距离小于未布局控件b的未布局控件c，设置其与右下方距离布局评分为20。
子步骤2103，根据所述单项要素布局评分，确定当前最易布局的未布局控件。
具体实施时，可以取连续性评分最小的未布局控件作为当前最易布局的未布局控件。如果存在多个连续性评分最小的未布局控件，则比较连续性评分最小的多个未布局控件的各单项要素布局评分之和。具体实施时，每个未布局控件的相关控件可能有多个，每个未布局控件对应的单项要素布局评分也可能存在多个，可以将未布局控件对应的所有单项要素布局评分的和作为该未布局控件的总布局评分，然后，进一步比较连续性评分最小的各未布局控件的总布局评分，并将总布局评分最小的未布局控件确定为当前最易布局的未布局控件。若总布局评分最小的未布局控件也存在多个，则进一步比较总布局评分最小的各未布局控件的与右下方距离布局评分，将与右下方距离布局评分确定为当前最易布局的未布局控件。
子步骤2104，将所述当前最易布局的未布局控件标记为已布局控件。
然后，将所述当前最易布局的未布局控件标记为已布局控件，例如，将所述当前最易布局的未布局控件从未布局控件数组中移出，并将其加入已布局控件数组中。
子步骤2105，判断所有未布局控件是否全部标记为已布局控件，若是，当前备选布局方案布局结束，跳转至子步骤2106；否则，跳转至子步骤2101。
然后，可以判断未布局控件数组中是否还包括未布局控件，若不包括，则说明所有未布局控件已经全部标记为已布局控件。如果，未布局控件数组中还包括未布局控件，则重复执行子步骤2101至子步骤2104，直至所有控件均标记为已布局控件的步骤，直至所有控件均标记为已布局控件；按照被标记为已布局控件的顺序，确定所述控件的当前备选布局方案。
子步骤2106，按照被标记为已布局控件的顺序，确定所述控件的当前备选布局方案。
以前端界面包括控件a、b、c、d为例，如果上首先将控件a标记为已布局控件，然后，依次将控件b、d、c标记为已布局控件，则确定的控件a、b、c、d的当前备选布局方案为：控件布局顺序为a、b、d、c。通常，所述控件布局方案还包括布局关系，如a和b左对齐、d的左边距b的右边距离0等。具体实施时，控件之间的布局关系可以根据两个控件的位置信息进一步确定，或者，在确定控件的单项要素布局评分是时，同时记录两个控件的布局关系。
可选的，如图4所示，所述根据所述单一要素布局评分，确定当前最易布局的未布局控件的步骤之后，还包括：
子步骤2107，根据所述单项要素布局评分，确定当前候选布局控件；
子步骤2108，根据所述当前最易布局的未布局控件和所述当前候选布局控件，进行布局方案分裂处理。
具体实施时，计算所有已经确定了单项要素布局评分的所有未布局控件的多项要素布局评分，例如，将第一水平布局评分、第二水平布局评分、第一垂直布局评分、第二垂直布局评分，以及包含关系评分的和作为该未布局控件的多项要素布局评分，然后，将多项要素布局评分最低的未布局控件确定为当前候选布局控件。
然后，根据所述当前最易布局的未布局控件和所述当前候选布局控件，进行布局方案分裂处理，包括：判断所述当前最易布局的控件与所述当前候选待布局控件是否相同；若不同，且已布局控件中分裂项数小于预设阈值，则执行布局方案分裂处理；其中，所述执行布局方案分裂处理，包括：按照被标记为已布局控件的顺序，确定一条分裂布局方案；以及，将所述当前候选待布局控件标记为该条分裂布局方案的分裂项。
具体实施时，如果所述当前最易布局的控件与所述当前候选待布局控件为同一个控件，则认为当前最易布局的控件只有一个，不需要进行布局路径分裂，沿当前布局路径继续布局未布局控件。
如果所述当前最易布局的控件与所述当前候选待布局控件不是同一个控件，则认为当前最易布局的控件有两个，可能需要进行布局路径分裂。进一步的，判断已布局控件中分裂项数是否小于预设阈值。如果已布局控件中分裂项数小于预设阈值，则执行布局方案分裂处理；如果已布局控件中分裂项数大于或等于预设阈值，则不再执行布局方案分裂处理。具体实施时，所述预设阈值可以设置为3。
所述执行布局方案分裂处理，包括：按照被标记为已布局控件的顺序，确定一条分裂布局方案；以及，将所述当前候选待布局控件标记为该条分裂布局方案的分裂项。假设已布局控件包括a和b，a先标记为已布局控件，则分裂布局方案由控件a和b组成，表示为rule1，并且布局顺序是先布局a再布局b。然后，将当前候选待布局控件d作为分裂布局方案rule1的分裂项。具体实施时，可以建立一个分裂布局方案列表，保存分裂出的分裂布局方案。
可选的，如图4所示，按照被标记为已布局控件的顺序，确定所述控件的当前备选布局方案的之后，还包括：
子步骤2109，判断是否存在分裂布局方案，若存在，则执行子步骤21010，否则，结束。
在生成一条备选布局方案之后，需要进一步判断在生成该备选布局方案的过程中是否进行了布局方案分裂，若已经执行布局方案分裂处理，则依次基于确定的各条分裂布局方案进行模拟布局，确定对应的备选布局方案。
子步骤21010，依次基于各条分裂布局方案进行模拟布局，确定对应的备选布局方案。
若已经执行布局方案分裂处理，则依次基于确定的各条分裂布局方案进行模拟布局，确定对应的备选布局方案。其中，基于确定的各条分裂布局方案进行模拟布局，确定对应的备选布局方案包括：将该条分裂布局方案作为当前布局方案的首段，将该条分裂布局方案中的分裂项作为当前布局方案的分裂项，将所述分裂布局方案的分裂项标记为已布局控件，将所述前端界面中除该条分裂布局方案中的控件和所述分裂项以外的控件作为未布局控件，执行基于所述控件的位置信息，对未布局的控件进行模拟布局，以确定备选布局方案的步骤。
以分裂布局方案rule1为例，分裂布局方案由控件a和b组成，布局顺序是先布局a再布局b，分裂布局方案rule1的分裂项为控件d。具体实施时，将控件a和b作为点前备选布局方案的首段，然后，将控件d标记为点前备选布局方案的已布局控件，即控件d依赖控件b布局。同时，将该条分裂布局方案中的分裂项作为当前布局方案的分裂项，便于统计该备选布局方案中的分裂项数，以控制布局方案的分裂次数。最后，将所述前端界面中包括的a、b、c、d四个控件中，除该条分裂布局方案中的控件a、b，和所述分裂项d以外的控件以外的控件，即控件c作为未布局控件，执行基于所述控件的位置信息，对未布局的控件进行模拟布局，以确定当前备选布局方案的步骤。
步骤220，确定所述备选布局方案的候选评分。
具体实施时，确定所述备选布局方案的候选评分，包括：根据所述备选布局方案中每个控件的布局总评分和该备选布局方案中包括的分裂项数，确定该备选布局方案的候选评分。其中，每个控件的布局总评分可以为该控件的第一水平布局评分、第二水平布局评分、第一垂直布局评分、第二垂直布局评分、连续性评分、包含关系评分的总和。
进一步可选的，根据所述备选布局方案中每个控件的布局总评分和该备选布局方案中包括的分裂项数，确定该备选布局方案的候选评分，包括：将所述备选布局方案中包含的各控件的布局总评分与分裂项数评分的和，作为该备选布局方案的候选评分；其中，所述分裂项数评分与该备选布局方案中分裂项数成正比。
具体实施时，可以通过公式：
score_rule＝sum(score_viewi)+split_num*k确定每条备选布局方案的候选评分score_rule，其中，score_viewi为控件i的布局总评分，split_num为该备选布局方案中的分裂项数，k为常量，例如取值为5。以前端界面中包括三个控件a、b、c为例，如果其中一个备选布局方案中的布局顺序为a、c、b，控件a的布局总评分为20，控件c的布局总评分为25，控件c的布局总评分为30，c为分裂项，该备选布局方案的候选评分为(20+25+30)+1*5＝80。
步骤230，选择所述候选评分满足预设条件的所述备选布局方案，作为所述控件的布局方案。
本实施例中，以单项要素布局评分越小表示控件布局难度越小，相应的，可以选择所述候选评分最小的所述备选布局方案，作为所述控件的布局方案。具体实施时，如果以单项要素布局评分越小表示控件布局难度越大，相应的，选择所述候选评分最大的所述备选布局方案，作为所述控件的布局方案。
步骤240，根据所述布局方案生成所述前端界面的代码。
具体实施时，基于所述控件的位置信息，确定的所述控件的布局方案可以采用xml布局文件描述。xml布局文件是一种非常接近实际代码的描述，只需要很少且机械化的工作就能直接转化成编程的布局代码。
具体实施时，也可以设置单一要素布局评分越高表示该控件基于这种布局要素越容易，则在确定每个布局要素对应的单一要素布局评分时，对满足预设条件的未布局控件的相应要素布局要素对应的单一要素布局评分的分值做相应调整。备选布局方案的候选评分判断方法也需要相应调整。
本申请实施例公开的前端界面代码生成方法，通过获取前端界面设计稿导出的源数据中包括的控件的位置信息，基于所述控件的位置信息，对未布局的控件进行模拟布局，以确定备选布局方案及所述备选布局方案的候选评分，之后，选择所述候选评分满足预设条件的所述备选布局方案，作为所述控件的布局方案并依此生成所述前端界面的代码，解决了现有技术中前端界面代码生成方法存在的生成代码准确率低、开发效率低下的问题。通过获取前端界面设计稿导出的源数据中包括的控件的位置信息，充分保留了控件数据，可以有效提升生成的代码的准确性；通过自动根据控件的位置信息确定所述控件的布局方案，不需要人工输入标准布局模板，不仅提高了生成前端界面代码的效率，同时避免了采用标准布局模板进行布局适用界面受限的问题，生成布局代码灵活性更大。
同时，通过在无法确定最优布局控件时，对布局方案进行分裂，采用多种可能的布局方案分别进行模拟布局，最后再选择一个最优的布局方案，可以进一步提升布局的准确性。
通过对每个控件基于已布局的相关控件进行布局，进一步提升布局准确性和布局效率。通过计算每个控件的布局评分，并选择最优的控件优先布局，以及基于多条布局关系进行模拟布局，进一步提升布局准确性。
实施例三
本申请公开的一种前端界面代码生成方法，如图5所示，所述方法包括：步骤500至步骤550。
步骤500，获取前端界面设计稿导出的源数据中包括的控件的位置信息。
获取前端界面设计稿导出的源数据中包括的控件的位置信息的具体实施时方式参见实施例一，此处不再赘述。
具体实施时，获取到的前端界面中包括的控件的位置信息，至少包括：位置坐标和控件的宽度、高度等信息。获取到的前端界面中包括的控件的位置信息，还可以包括，所述控件对应的结构框的位置坐标和尺寸。
控件的布局方案通常包括控件的布局顺序和位置关系。由于不同的平台由于界面代码类型不同，提供的界面代码显示接口不同等因素，在基于所述控件的位置信息，确定所述控件的布局方案时，可以采用相应的技术方案。本实施例中，基于容器和控件位置信息进行控件布局。获取到控件的位置信息之后，基于所述控件的位置信息，通过容器内控件迭代的方式确定所述控件的布局方案。首先，将所有未布局控件加入未指定容器类型的根容器；然后，从根容器开始，基于所述控件的位置信息，按照父容器到子容器的顺序，对容器中的控件进行迭代分组，并将分组得到的每组控件移入相应子容器；确定所述容器的容器类型；基于所述容器类型、所述容器对应的层级关系，确定相应容器内控件的布局方案。
步骤510，将所有未布局控件加入未指定容器类型的根容器。
首先创建一个未指定类型的根容器，然后，将前端界面设计稿导出的源数据中包括的所有控件都加入所述根容器。具体实施时，所述根容器可以为包含所有所述控件的一个最小矩形，也可以是设计稿导出的源数据中包括的画板，或者用户执行导出操作时设置的导出区域。
本实施例中将以导出的控件包括：a、b、c、d、e五个控件为例，详细说明基于所述控件的位置信息，对未布局的控件进行模拟布局，以确定备选布局方案的具提技术方案。其中，控件a为设计稿导出的源数据中包括的画板，即对应根容器。
步骤520，从根容器开始，基于所述控件的位置信息，按照父容器到子容器的顺序，对容器中的控件进行迭代分组，并将分组得到的每组控件移入相应子容器。
具体实施时，从根容器开始，基于所述控件的位置信息，按照父容器到子容器的顺序，对容器中的控件进行迭代分组，并将分组得到的每组控件移入相应子容器，包括：从根容器开始，按照父容器到子容器的顺序，迭代对每个容器执行控件分组操作，直至前后两次分组结果相同。假设父容器对应控件a，父容器中包括四个控件，分别为b、c、d和e，首先对父容器中的控件进行分组，假设控件b和c可以分为一组，则创建一个子容器f，将控件b和c移入子容器f,则此时，容器a包含子容器f、控件d和控件e，其中子容器f也是一个控件，该控件的位置坐标和尺寸可以根据子容器f包括的控件b、c的位置坐标和尺寸确定。例如，子容器f为包含控件b、c的最小矩形。接下来，重复对容器a包含的控件f(与子容器f对应)和控件d和e进行分组。
如果，控件f和控件d、e无法分为一组，则分组结束。如果控件f和控件d可以分为一组，则新创建一个子容器g，将子容器f(对应控件f)和控件d移入子容器g。此时，根容器下包括的子容器的层级关系为：根容器a包括：子容器g和控件e，子容器g进一步包括：子容器f和控件d；子容器f进一步包括：控件b和控件c。因为，本轮分组时产生了新的分组，即前后两次分组结果不一样，因此，还需要再从根容器a开始，进行迭代分组。
具体实施时，所述控件分组操作包括：第一种，基于控件的位置信息，通过容器特征识别，对当前容器中的控件进行分组，并将分组得到的每组控件移入相应新建子容器；或，第二种，基于控件的位置信息，通过边框特征识别，对当前容器中的控件进行分组，并将分组得到的每组控件移入相应新建子容器；或者第一种和第二种方案结合进行分组。例如，首先通过第二种方案进行初步分组，再基于第一种方案进行进一步细分组。或者，当获取的控件信息没有结构框时，采用第一种方案进行分组。
基于控件的位置信息，通过容器特征识别，对当前容器中的控件进行分组，并将分组得到的每组控件移入相应新建子容器，包括：基于所述控件的位置信息，识别满足不同容器特征的控件分组及对应的分组评分；创建指定容器类型的第一子容器，并将该最优分组评分对应分组中的控件移入创建的所述第一子容器，所述指定容器类型与所述最优分组评分对应的分组所满足的容器特征匹配；其中，所述容器类型至少包括以下任意一项：线性容器类型、网格容器类型；所述线性容器类型的容器特征为：容器中的控件成线性排列；所述网格容器类型的容器特征为：容器中的控件成网格排列。
常用的容器类型有线性容器、网格容器、相对容器、协作容器等，不同容器类型对应的容器特征不同，所述容器特征指容器内包含的控件的布局特征，例如：所述线性容器类型的容器中的控件成线性排列，网格容器类型的容器中的控件成网格排列。
具体实施时，可以根据控件的位置信息，确定当前容器内的控件的排布特征满足不同容器类型的容器特征的评分。例如，有3个控件，其位置分别为b＝(5，10，20，40,)、c＝(40,20,20,30),d＝(80,5,30,45)，这3个控件的垂直方向的中心点y在一条线上，具有线性排列特征，可以将控件b、c和d分为一组且满足线性容器特征的评分设置为3分；控件b、c和d不具备网格排列特征；控件c和d相对排列特征不明显，则控件c和d分为一组且满足相对容器特征的评分设置为1分。针对每种容器特征的分组都会得到一个对应的分组评分，具体实施时，选择最优分组评分，例如分组评分最大的一个分组作为本次分组结果，即本次分组结果为：控件b、c和d分为一组且满足线性容器特征。然后，创建线性容器类型的第一子容器，并将该最优分组评分对应分组中的控件，即控件b、c和d移入创建的所述第一子容器。在执行分组过程中，有多少个特性明显的容器就按多少个特性进行分组，每个特性会得到不同的分组信息。
具体实施时，所述基于控件的位置信息，通过边框特征识别，对当前容器中的控件进行分组，并将分组得到的每组控件移入相应新建子容器，包括：根据当前容器中结构框的位置坐标和尺寸，将包含在同一个结构框内的所有结构框划分为一组；创建所述同一个结构框对应的未指定类型的第二子容器，并将包含在所述同一个结构框内的所有结构框移入所述第二子容器；创建所述第二子容器中每个结构框对应的未指定类型的第三子容器，将各第三子容器对应的结构框包含的控件移入该第三子容器。
边框特征识别即根据控件结构框的信息，将处于一个块内的控件划分为一个组，并创建一个未指定类型的容器，将该块中所有的控件加入该容器。边框识别分组完全依赖于设计风格。设计师在进行界面设计时，普遍会把关联比较近的控件放在一结构框里，便于拖拽；有时，为了给一些控件添加相同背景，也会创建结构框。从前端界面设计稿导出的源数据中会包括结构框信息，结构框也是一种控件。边框特征识别分组就是充分利用结构框信息并结合不同系统的控件布局特征，对控件进行分组。例如，有3个结构框b、c和d，结构框的位置分别为b＝(10，10，200，300)、c＝(20，30，50，50),d＝(100，40，150，200)，根据上述位置数据，可以确定结构框c和d包含在结构框b中，因此将结构框c和d分为一组。然后，创建结构框b对应的未指定类型的子容器h，并将包含在所述结构框b内的结构框c和d移入创建的容器h。
同时，从前端界面设计稿导出的源数据中会包括的结构框信息中还包括控件的层级关系，即结构框包含的控件信息。例如，结构框c包括控件c’。在根据结构框进行分组时，结构框包括的控件将被移入该结构框所在容器的子容器中。具体实施时，将结构框c和d移入创建的容器h之后，进一步创建结构框c的子容器i，然后将控件c’移入子容器i。
通过按照上述方法迭代对根容器包括的控件进行分组后，前端界面中导出的控件将被移入相应的父容器、子容器，或者让然在根容器内。
步骤530，确定所述容器的容器类型。
具体实施时，通过容器特征识别进行分组后创建的相应子容器已经指定容器类型的，而对于根容器和通过边框特征识别进行分组后创建的相应子容器则没有指定容器类型，因此，需要在此确定所述容器的容器类型。确定所述容器的容器类型包括：根据容器中控件的位置信息，预估所述控件按照不同容器类型的容器特征布局时对应的布局评分；选择最优布局评分对应的容器特征所属容器类型，作为该容器的容器类型；其中，所述容器类型至少包括以下任意一项：线性容器类型、网格容器类型；所述线性容器类型的容器特征为：容器中的控件成线性排列；所述网格容器类型的容器特征为：容器中的控件成网格排列。
首先，根据容器中控件的位置信息，预估所述控件按照不同容器类型的容器特征布局时对应的布局评分。
容器类型识别时将容器中的控件布局到指定类型的容器，并评估出一个分值，最终取分值最大的容器类型，作为该容器的容器类型。进行容器类型识别时，容器可能包括子容器，子容器中又可能包括多个控件，但是，以容器为一个基本布局单元将容器中的控件(包括容器)布局到指定类型的容器中。例如，当前容器中包括3个控件，分别为，控件b＝(10，20，20，30)，控件c＝(30，25，50，60)，控件d＝(60，50，80，80)，其中，控件c中又包括2个控件，分别表示为控件e和f，在进行容器类型识别时，只对控件b、c和d的分布特征进行识别。例如，预估控件b、c和d按照线性布局时的布局评分为3分，控件b、c和d按照网格布局时的布局评分为1分。
然后，选择最优布局评分对应的容器特征所属容器类型，作为该容器的容器类型。
具体实施时，可以选择布局评分最大的容器特征所属容器类型，作为该容器的容器类型。例如，控件b、c和d按照线性布局时的布局评分为3分，为最大布局评分，则确定当前容器的容器类型为线性容器。
步骤540，基于所述容器类型、所述容器对应的层级关系，确定相应容器内控件的布局方案。
具体实施时，基于所述容器类型、所述容器对应的层级关系，确定相应容器内控件的布局方案，包括：采用与容器类型匹配的控件布局策略，按照由子容器到根容器的顺序，依次确定各容器内控件的布局方案。首先布局最底层的子容器中的控件，然后再布局该子容器的父容器中的控件，直至布局完根容器中的所有控件。
在布局每个容器中包含的控件时，根据容器的类型选择相应的布局策略。
例如，当容器类型为相对容器时，所述控件布局策略包括：确定优先布局控件；按照与父容器的距离由小到大的顺序，依次对所述优先布局控件及依赖所述优先布局控件的控件进行布局。具体实施时，确定的所述优先布局控件为：在容器内的最左边、最右边、最上边、最下边或中间的控件。
具体实施时，可以首先计算控件的依赖关系，然后通过控件的依赖关系进一步确定各控件上、下、左、右四个方向的控件。
对于相对容器中的控件，选择控件的布局顺序，对实际布局准确度有很大影响。在实际代码编写布局过程中，通常会以最左边，最右边，最上边、最下边或是居中的控件作为一个基准，其他控件会相对其布局，因此，确定在容器的最左边、最右边、最上边、最下边或中间的控件为优先布局控件。具体实施时，可以将优先布局控件按照与父容器的距离由小到大的顺序依次排列，加入优先布局队列。控件与父容器的距离可以表示为：控件沿水平方向与父容器的距离与控件沿垂直方向与父容器的距离之和，再取反。具体实施时，居中的控件在布局中使用作为首选布局控件的概率比较大，所以计算其与父容器距离过程中，如果哪个方向居中，则将该方向与父容器的距离乘以一个比例系数，当前设为0.5，具体实施时，比例系数可以根据统计结果进行调整。
具体实施时，顺序使用优先布局队列中的控件进行布局，所述控件布局策略还包括：根据控件在水平方向和垂直方向与父容器的距离，确定当前最优布局控件。如果确定的优先布局控件已经全部布局完毕，并且还有未布局的控件，则从剩下的未布局控件中选择当前最优布局控件。例如：可以计算每个未布局控件与父容器的距离，然后，选择与父容器的距离最小的控件作为当前最优布局控件，首先对当前最优布局控件进行布局。控件与父容器的距离可以表示为：控件沿水平方向与父容器的距离与控件沿垂直方向与父容器的距离之和，再取反。具体实施时，如果控件的某一方向已经确定，则可设置该方向上的距离为0，然后再和其他方向与父容器的距离求和，之后再对和取反，以确定该控件与父容器的距离，进而确定当前最优布局控件。再基于该当前最优布局控件，对依赖该控件的其他控件进行布局。例如，该当前最优布局控件右边距离最近的控件、当前最优布局控件下边距离最近的控件。
以相对容器中包括a、b、c、d、e和f六个控件为例，首先计算控件之间的依赖关系，计算方式很直接，为每个控件找到其上下左右最近的控件。然后，确定优先布局控件。如果当前容器的最左边控件为a、最右边控件为b、最上边控件为c、中间控件为d、最下边控件为e，则确定a、b、c、d、e为优先布局控件。进一步计算优先布局控件与父容器的距离，并按照距离由小到大的顺序排序，假设优先布局队列中的控件依次为：a、b、c、d、e。
之后，首先从优先布局队列中从前向后布局。以首先布局控件a为例，根据预先确定的依赖关系，布局完控件a之后，进一步布局依赖a布局的控件。具体实施时，找到a上、下、左、右最近的且未在该方向上完成布局的控件。左右方向的控件只能由控件a决定其水平方向，上下方向的控件只能由控件a决定其垂直方向。具体实施时，如果控件a的左边控件为控件b，控件b的右边控件是控件a，且控件b与右边控件的距离小于离左边控件的距离，则对控件a的左边控件b进行布局。右、上、下方向类似，此处不再赘述。同样，依赖控件a布局的控件b布局完成后，还要布局依赖控件b进行布局的控件。
按这种依赖关系依次进行布局，直到到占不到满足依赖条件的控件。
再例如，当容器类型为网格容器时，所述控件布局策略包括：确定当前容器中控件的行列分布，所述行列分布包括：控件的行数和列数、行位置、列位置，以及每个控件所在的行和列；确定布局方向上的基准控件，所述布局方向包括：行方向或列方向；确定所述行和列形成的单元格的宽度和高度；基于所述基准控件、布局方向上其他控件沿布局方向的长度，调整单元格在布局方向的长度。
网格容器由多个单元格(即cell)组成，cell的个数由网格容器的行数和列数确定。cell按行列网格状。没有控件所在列的宽度为0，没有控件所在行的高度为0；每列的宽度不一定相同，每行的高度也不一定相同，即每一个cell的高度和宽度可能都是不一样的；同一个cell中不能指定两个及以上的控件。具体实施时，首先确定当前容器中控件的行数和列数。
在确定网格容器的列数时，每列的宽度取最大值，由于同一个cell中不能指定两个控件，如果存在2个以上的控件水平位置包含在某个控件中，则该控件不能作为计算列数的基准控件。如图6所示，下方的控件b、c和d的水平位置包含在上方的控件a的水平方向范围内，则该控件a不能作为计算列数的基准控件。下面的控件b、c和d的水平方向范围内不存在包含的控件，则可以作为计算列数的基准控件。最终计算得到的网格容器的列数为3，这一类的控件包括：b、c和d。
确定网格容器的行数时，每行的高度取最大值，由于同一个cell中不能指定两个控件，如果存在2个以上的控件垂直位置包含在某个控件中，则该控件不能作为计算行数的基准控件。确定网格容器的行数的具体方法参见确定网格容器的列数的方法，此处不再赘述。
确定了网格容器的行数和列数之后，同时也确定了每一行和每一列包含的控件。进一步的，根据每一行和每一列包含的控件的位置信息可以确定每一行和每一列的位置。例如，将每一列中包含的最左侧控件的位置作为该列的位置，将每一行中包含的最上面控件的位置作为该行的位置。
之后，确定布局方向上的基准控件，所述布局方向包括：行方向或列方向。具体实施时，如果布局方向为行方向，即水平方向，则可以将每行中最左边或最右边的控件作为基准控件；如果布局方向为列方向，即垂直方向，则可以将每列中最上边或最下边的控件作为基准控件。
然后，根据每一行中选中的基准控件的宽度，对其他控件进行布局，确定该行中各列的宽度；根据每一行中选中的基准控件的高度，对其他控件进行布局，确定该行的高度。具体实施时，可以将基准控件的宽度作为列宽度，将基准控件的高度作为行高度。或者，将每行中最大控件宽度作为列宽度，将最大控件高度作为行高度。
最后，基于所述基准控件、布局方向上其他控件沿布局方向的长度，调整布局方向的单元格长度。鉴于控件的宽度和高度不同，为了避免控件重合或者出现空间之间距离较大的情况，进一步根据每个cell对应的控件的宽和高调整行高和列宽。具体实施时，以沿行方向，即水平方向布局为例，假设基准控件a在当前行的最左边列column1，对于基准控件右边的列column2，其起始位置调整为等于基准控件的起始位置横坐标与基准控件的宽度之和y1，column2的结束位置为与列clumn2上的控件b的宽度，即调整当前行column1和column2行程的单元格的宽度为y1+控件b的宽度。调整单元格沿垂直方向的长度的方法则基于所述基准控件的垂直位置、垂直方向上其他控件高度，本实施例不再赘述。
当容器类型为协作容器时，所述布局策略为：首先识别每个控件是否依赖于其他控件，如果是，则采用依赖关系进行布局，否则使用常规布局。计算控件之间的依赖关系，计算方式很直接，根据控件的位置坐标为每个控件找到其上下左右最近的控件。
当容器类型为线性容器时，所述布局策略为：首先确定布局方向，水平方向新加入的控件的水平位置依赖于前一个控件的位置，先按x方向进行排序，并依次布局；垂直方向新加入的控件的y位置依赖于前一个控件的位置，按y方向先进行排序，再依次布局。
例如：3个控件，分别表示为a(5，10，20，40,)，b(80,5,30,45)，c(40,20,20,30),在分组时会将其放在线性容器linearlayout中，linearlayout有两个方向，水平和垂直方向，首先我们先确定布局方向。根据这控件a、b、c的位置信息计算其中心点的y在一条直线上，故linearlayout的方向为水平方向。linearlayout水平方向的特征是后一个加入的控件的水平位置依赖于前一个控件的水平位置，将a、b、c按起始位置x进行排序，得到排序后的结果为a、c、b。首先将a进行布局，因为其前面没有控件，所以直接按位置设置布局参数。a布局完成后，对c进行布局。c前面已经有了a，所以c的水平位置由a决定，计算c的水平开始位置和a水平结束位置的差值，并设置c的marginleft为计算得到的差值。同样方式处理b，只是b对应的是c。至此，完成了linearlayout中对a、b、c的布局。
步骤550，根据所述布局方案生成所述前端界面的代码。
具体实施时，基于所述控件的位置信息，确定的所述控件的布局方案可以采用xml布局文件描述。
本申请实施例公开的前端界面代码生成方法，通过获取前端界面设计稿导出的源数据中包括的控件的位置信息，然后，将所有未布局控件加入未指定容器类型的根容器；之后，从根容器开始，基于所述控件的位置信息，按照父容器到子容器的顺序，对容器中的控件进行迭代分组，并将分组得到的每组控件移入相应子容器，最后再根据容器类型对应的布局策略进行控件布局，解决了现有技术中前端界面代码生成方法存在的生成代码准确率低、开发效率低下的问题。通过获取前端界面设计稿导出的源数据中包括的控件的位置信息，充分保留了控件数据，可以有效提升生成的代码的准确性；通过自动根据控件的位置信息确定所述控件的布局方案，不需要人工输入标准布局模板，不仅提高了生成前端界面代码的效率，同时避免了采用标准布局模板进行布局适用界面受限的问题，生成布局代码灵活性更大。
通过对控件基于容器特征识别和/或边框识别进行迭代分组，将具有相同布局特点、且距离较近的控件加入一个容器，并以容器为单位，采用与容器类型相应的布局策略进行布局，进一步提高了布局方案的准确度。在确定容器类型时，通过基于不同容器特征分别对容器内的控件排布特点进行识别，并取最大评分对应的容器类型，保证了容器类型识别的准确性，进一步提高了布局方案的准确性。通过基于容器的层级关系自底向上进行布局，使得布局方案更容易基于树形结构进行表示，使得生成的界面代码结构更清晰。
实施例四
本申请公开的一种前端界面代码生成装置，如图7所示，所述装置包括：
控件位置信息获取模块700，用于获取前端界面设计稿导出的源数据中包括的控件的位置信息；
布局方案确定模块710，用于基于所述控件的位置信息，通过模拟布局或容器内控件迭代的方式确定所述控件的布局方案；
界面代码生成模块720，用于根据所述布局方案生成所述前端界面的代码。
本申请实施例公开的前端界面代码生成装置，通过获取前端界面设计稿导出的源数据中包括的控件的位置信息，然后基于所述控件的位置信息，通过模拟布局或容器内控件迭代的方式确定所述控件的布局方案，最后根据所述布局方案生成所述前端界面的代码，解决了现有技术中的前端界面代码生成方法存在的生成代码准确率低、开发效率低下。通过获取前端界面设计稿导出的源数据中包括的控件的位置信息，充分保留了控件数据，可以有效提升生成的代码的准确性；通过自动根据控件的位置信息确定所述控件的布局方案，不需要人工输入标准布局模板，不仅提高了生成前端界面代码的效率，同时避免了采用标准布局模板进行布局适用界面受限的问题，生成布局代码灵活性更大。
可选的，如图8所示，所述布局方案确定模块710进一步包括：
备选布局方案确定单元7101，用于基于所述控件位置信息获取模块700获取的控件的位置信息，对未布局的控件进行模拟布局，以确定备选布局方案；
布局方案评分单元7102，用于确定所述备选布局方案的候选评分；
布局方案选择单元7103，用于选择所述候选评分满足预设条件的所述备选布局方案，作为所述控件的布局方案。
可选的，所述备选布局方案确定单元7101，进一步用于：
基于所述控件的位置信息确定每个未布局控件相关的已布局控件；
根据所述控件的位置信息，确定每个所述未布局控件相对与其相关的已布局控件的单项要素布局评分；
根据所述单项要素布局评分，确定当前最易布局的未布局控件；
将所述当前最易布局的未布局控件标记为已布局控件；
重复执行基于所述控件的位置信息确定每个未布局控件相关的已布局控件，至将所述当前最易布局控件标记为已布局控件的步骤，直至所有控件均标记为已布局控件；
按照被标记为已布局控件的顺序，确定所述控件的当前备选布局方案；
其中，所述单项要素布局评分包括：第一水平布局评分、第二水平布局评分、第一垂直布局评分和第二垂直布局评分；所述单项要素布局评分还包括：连续性评分、包含关系评分、与右下方距离评分中的任意一项或多项。
可选的，所述根据所述单项要素布局评分，确定当前最易布局的未布局控件的步骤之后，还包括：
根据所述单项要素布局评分，确定当前候选布局控件；
根据所述当前最易布局的未布局控件和所述当前候选布局控件，进行布局方案分裂处理；
所述按照被标记为已布局控件的顺序，确定所述控件的当前备选布局方案的步骤之后，还包括：
若存在分裂布局方案，则依次基于各条分裂布局方案进行模拟布局，确定对应的备选布局方案。
可选的，所述根据所述当前最易布局的未布局控件和所述当前候选布局控件，进行布局方案分裂处理的步骤，包括：
判断所述当前最易布局的控件与所述当前候选待布局控件是否相同；
若不同，且已布局控件中分裂项数小于预设阈值，则执行布局方案分裂处理；
其中，所述执行布局方案分裂处理，包括：
按照被标记为已布局控件的顺序，确定一条分裂布局方案；以及，
将所述当前候选待布局控件标记为该条分裂布局方案的分裂项。
可选的，所述按照被标记为已布局控件的顺序，确定所述控件的当前备选布局方案的步骤之后，还包括：
若已经执行布局方案分裂处理，则依次基于确定的各条分裂布局方案进行模拟布局，确定对应的备选布局方案；
其中，基于确定的各条分裂布局方案进行模拟布局，确定对应的备选布局方案包括：将该条分裂布局方案作为当前布局方案的首段，将该条分裂布局方案中的分裂项作为当前布局方案的分裂项，将所述分裂布局方案的分裂项标记为已布局控件，将所述前端界面中除该条分裂布局方案中的控件和所述分裂项以外的控件作为未布局控件，执行基于所述控件的位置信息，对未布局的控件进行模拟布局，以确定备选布局方案的步骤。
可选的，所述根据所述控件的位置信息，确定每个所述未布局控件相对与其相关的已布局控件的单项要素布局评分的步骤，包括：
根据未布局控件和已布局控件的位置信息，确定所述未布局控件基于不同的水平方向布局关系布局时的第一水平布局评分和第二水平布局评分；以及，
根据未布局控件和已布局控件的位置信息，确定所述未布局控件基于不同的垂直方向布局关系布局时的第一垂直布局评分和第二垂直布局评分；
其中，所述水平方向布局关系包括：左对齐、右对齐、水平居中对齐、固定水平边距和未布局控件宽度中的任意一项或多项；所述垂直方向布局关系包括：顶对齐、底对齐、垂直居中对齐、固定垂直边距和未布局控件高度中的任意一项或多项。
可选的，当基于左对齐或右对齐布局时，确定所述水平布局评分等于第一分值；
当基于水平居中对齐布局时，确定所述水平布局评分等于第二分值；
当基于固定水平边距布局时，确定所述水平布局评分等于第三分值；
当基于未布局控件宽度布局时，确定所述水平布局评分等于第四分值；
所述第二分值匹配的布局难度大于所述第一分值匹配的布局难度；所述第三分值匹配的布局难度与水平边距成正比；所述第四分值匹配的布局难度与未布局控件宽度成正比；所述第三分值和第四分值匹配的布局难度大于等于所述第一分值匹配的布局难度；
当基于顶对齐或底对齐布局时，确定所述垂直布局评分等于第五分值；
当基于垂直居中对齐布局时，确定所述垂直布局评分等于第六分值；
当基于固定垂直边距布局时，确定所述垂直布局评分等于第七分值；
当基于未布局控件高度布局时，确定所述垂直布局评分等于第八分值；
所述第六分值匹配的布局难度大于所述第五分值匹配的布局难度；所述第七分值匹配的布局难度与垂直边距成正比；所述第八分值匹配的布局难度与未布局控件高度成正比；所述第七分值和第八分值匹配的布局难度大于等于所述第五分值匹配的布局难度。
可选的，所述根据所述控件的位置信息，确定每个所述未布局控件相对与其相关的已布局控件的单项要素布局评分的步骤，包括以下任意一项或多项：
根据未布局控件和最后标记为已布局的控件在水平方向、垂直方向的距离，确定所述未布局控件的连续性评分；其中，所述连续性评分匹配的布局难度与所述水平方向和垂直方向的距离成正比；
当未布局控件与任意一已布局控件存在包含关系时，确定包含关系评分为第九分值，所述第九分值匹配的布局难度小于所述第一分值匹配的布局难度；
根据未布局控件与右下方的距离，确定所述未布局控件的与右下方距离布局评分；其中，所述与右下方距离布局评分匹配的布局难度与未布局控件与右下方的距离成反比。
可选的，所述布局方案评分单元进一步用于：
根据所述备选布局方案中每个控件的布局总评分和该备选布局方案中包括的分裂项数，确定该备选布局方案的候选评分。
可选的，所述根据所述备选布局方案中每个控件的布局总评分和该备选布局方案中包括的分裂项数，确定该备选布局方案的候选评分，包括：将所述备选布局方案中包含的各控件的布局总评分与分裂项数评分的和，作为该备选布局方案的候选评分；其中，所述分裂项数评分与该备选布局方案中分裂项数成正比。
同时，通过在无法确定最优布局控件时，对布局方案进行分裂，采用多种可能的布局方案分别进行模拟布局，最后再选择一个最优的布局方案，可以进一步提升布局的准确性。
进一步的，通过对每个控件基于已布局的相关控件进行布局，进一步提升布局准确性和布局效率。通过计算每个控件的布局评分，并选择最优的控件优先布局，以及基于多条布局关系进行模拟布局，进一步提升布局准确性。
实施例五
在另一实施例中，本申请公开的一种前端界面代码生成装置，如图9所示，所述装置包括：控件位置信息获取模块700、布局方案确定模块710以及，界面代码生成模块720。与实施例四的区别在于，所述布局方案确定模块710进一步包括：
第一分组单元7105，用于将所有未布局控件加入未指定容器类型的根容器；
第二分组单元7106，用于从根容器开始，基于所述控件的位置信息，按照父容器到子容器的顺序，对容器中的控件进行迭代分组，并将分组得到的每组控件移入相应子容器；
容器类型确定单元7107，用于确定所述容器的容器类型；
布局方案确定单元7108，用于基于所述容器类型、所述容器对应的层级关系，确定相应容器内控件的布局方案。
可选的，所述第二分组单元7106进一步用于：
从根容器开始，按照父容器到子容器的顺序，迭代对每个容器执行控件分组操作，直至前后两次分组结果相同；其中，所述控件分组操作包括：
基于控件的位置信息，通过容器特征识别，对当前容器中的控件进行分组，并将分组得到的每组控件移入相应新建子容器；和/或，
基于控件的位置信息，通过边框特征识别，对当前容器中的控件进行分组，并将分组得到的每组控件移入相应新建子容器。
可选的，所述基于控件的位置信息，通过容器特征识别，对当前容器中的控件进行分组，并将分组得到的每组控件移入相应新建子容器，包括：
基于所述控件的位置信息，识别满足不同容器特征的控件分组及对应的分组评分；
创建指定容器类型的第一子容器，并将该最优分组评分对应分组中的控件移入创建的所述第一子容器，所述指定容器类型与所述最优分组评分对应的分组所满足的容器特征匹配；
其中，所述容器类型至少包括以下任意一项：线性容器类型、网格容器类型；所述线性容器类型的容器特征为：容器中的控件成线性排列；所述网格容器类型的容器特征为：容器中的控件成网格排列。
可选的，所述基于控件的位置信息，通过边框特征识别，对当前容器中的控件进行分组，并将分组得到的每组控件移入相应新建子容器，包括：
根据当前容器中结构框的位置坐标和尺寸，将包含在同一个结构框内的所有结构框划分为一组；
创建所述同一个结构框对应的未指定类型的第二子容器，并将包含在所述同一个结构框内的所有结构框移入所述第二子容器；
创建所述第二子容器中每个结构框对应的未指定类型的第三子容器，将各第三子容器对应的结构框包含的控件移入该第三子容器。
可选的，所述容器类型确定单元7107进一步用于：
根据容器中控件的位置信息，预估所述控件按照不同容器类型的容器特征布局时对应的布局评分；
选择最优布局评分对应的容器特征所属容器类型，作为该容器的容器类型；
其中，所述容器类型至少包括以下任意一项：线性容器类型、网格容器类型；所述线性容器类型的容器特征为：容器中的控件成线性排列；所述网格容器类型的容器特征为：容器中的控件成网格排列。
可选的，所述布局方案确定单元7108进一步用于：
采用与容器类型匹配的控件布局策略，按照由子容器到根容器的顺序，依次确定各容器内控件的布局方案。
可选的，所述控件布局策略包括：
确定优先布局控件；
按照与父容器的距离由小到大的顺序，依次对所述优先布局控件及依赖所述优先布局控件的控件进行布局。
可选的，所述控件布局策略包括：
根据控件在水平方向和垂直方向与父容器的距离，确定当前最优布局控件。
可选的，确定的所述优先布局控件为：在容器内的最左边、最右边、最上边、最下边或中间的控件。
可选的，所述控件布局策略包括：
确定当前容器中控件的行列分布，所述行列分布包括：控件的行数和列数、行位置、列位置，以及每个控件所在的行和列；
确定布局方向上的基准控件，所述布局方向包括：行方向或列方向；
确定所述行和列形成的单元格的宽度和高度；
基于所述基准控件、布局方向上其他控件沿布局方向的长度，调整单元格在布局方向的长度。
本申请实施例公开的前端界面代码生成装置，通过获取前端界面设计稿导出的源数据中包括的控件的位置信息，然后，将所有未布局控件加入未指定容器类型的根容器；之后，从根容器开始，基于所述控件的位置信息，按照父容器到子容器的顺序，对容器中的控件进行迭代分组，并将分组得到的每组控件移入相应子容器，最后再根据容器类型对应的布局策略进行控件布局，解决了现有技术中前端界面代码生成方法存在的生成代码准确率低、开发效率低下的问题。通过获取前端界面设计稿导出的源数据中包括的控件的位置信息，充分保留了控件数据，可以有效提升生成的代码的准确性；通过自动根据控件的位置信息确定所述控件的布局方案，不需要人工输入标准布局模板，不仅提高了生成前端界面代码的效率，同时避免了采用标准布局模板进行布局适用界面受限的问题，生成布局代码灵活性更大。
通过对控件基于容器特征识别和/或边框识别进行迭代分组，将具有相同布局特点、且距离较近的控件加入一个容器，并以容器为单位，采用与容器类型相应的布局策略进行布局，进一步提高了布局方案的准确度。在确定容器类型时，通过基于不同容器特征分别对容器内的控件排布特点进行识别，并取最大评分对应的容器类型，保证了容器类型识别的准确性，进一步提高了布局方案的准确性。通过基于容器的层级关系自底向上进行布局，使得布局方案更容易基于树形结构进行表示，使得生成的界面代码结构更清晰。
相应的，本申请还公开了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如本申请实施例一至实施例三所述的前端界面代码生成方法。所述电子设备可以为移动终端、pc机、平板电脑等。
本申请还公开了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请实施例一至实施例三所述的前端界面代码生成方法的步骤。
本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
以上对本申请提供的一种前端界面代码生成方法及装置进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件实现。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如rom/ram、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。