CN112256254A - 一种生成布局代码的方法和装置 - Google Patents

Abstract

本发明公开了生成布局代码的方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括获得设计图像，提取设计图像中每个图层的元素信息；依次对每两图层循环遍历，获得图层存储的树状结构；其中，树状结构中父图层的面积大于或等于子图层面积且为最小；接收选定图层的指令，获取选定的图层及其所有子图层；确定每个图层左侧和上侧相邻的兄弟图层，根据预设规则，布局每个兄弟图层以生成布局代码。从而，本发明的实施方式能够解决应用程序开发过程效率不高的问题。

Description

一种生成布局代码的方法和装置

技术领域

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

背景技术

随着客户端应用程序的不断发展，需求越来越多，而其研发不仅要完成产品的需求，更要保证代码质量，所以减少一些重复性工作，而把主要精力放在业务代码上是非常重要的。因此，解决重复性工作成为了降本提效的主要目标。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：

目前，开发应用程序写布局代码是先设计出效果图以及图层的标注，然后再根据效果图和标注开发布局相关的代码，例如针对基于ISO系统(iOS是由苹果公司开发的移动操作系统)客户端的布局代码开发过程。从而，在开发的过程中重复客户端布局相关的代码工作，浪费大量的时间，大大降低了开发效率。

发明内容

有鉴于此，本发明实施例提供一种生成布局代码的方法和装置，能够解决应用程序开发过程效率不高的问题。

为实现上述目的，根据本发明实施例的一个方面，提供了一种生成布局代码的方法，包括获得设计图像，提取设计图像中每个图层的元素信息；依次对每两图层循环遍历，获得图层存储的树状结构；其中，树状结构中父图层的面积大于或等于子图层面积且为最小；接收选定图层的指令，获取选定的图层及其所有子图层；确定每个图层左侧和上侧相邻的兄弟图层，根据预设规则，布局每个兄弟图层以生成布局代码。

可选地，确定每个图层左侧和上侧相邻的兄弟图层，包括：

获取目标图层左侧或上侧所有的兄弟图层，计算所述兄弟图层距离该目标图层的距离；

判断距离最近的兄弟图层是否大于或等于2个，若是则重叠长度多的为目标图层的左侧或上侧相邻兄弟图层，否则该距离最近的为目标图层的左侧或上侧相邻兄弟图层；其中，所述的重叠长度是指垂直于兄弟图层与目标图层直线距离的方向上，兄弟图层与目标图层的平行长度。

可选地，确定每个图层左侧和上侧相邻的兄弟图层之前，包括：

将获取的图层中同一层级的兄弟图层进行合并，获得新的父图层；其中，新父图层为原父图层的子图层；

判断被合并的同一层级的兄弟图层是否为自定义图层，若是则移除被合并的同一层级的兄弟图层再确定每个图层左侧和上侧相邻的兄弟图层，否则直接确定每个图层左侧和上侧相邻的兄弟图层。

可选地，根据预设规则，布局每个兄弟图层以生成布局代码，包括：

兄弟图层的布局表示为(x，y，width，height)；其中，width为该图层的宽度，height为该图层的高度，x为该图层的左边与父图层左边的距离，y为该图层的上边与父图层上边的距离。

另外，根据本发明实施例的一个方面，提供了一种生成布局代码的装置，包括获取模块，用于获得设计图像，提取设计图像中每个图层的元素信息；依次对每两图层循环遍历，获得图层存储的树状结构；其中，树状结构中父图层的面积大于或等于子图层面积且为最小；选定模块，用于接收选定图层的指令，获取选定的图层及其所有子图层；生成模块，用于确定每个图层左侧和上侧相邻的兄弟图层，根据预设规则，布局每个兄弟图层以生成布局代码。

可选地，所述生成模块确定每个图层左侧和上侧相邻的兄弟图层，包括：

获取目标图层左侧或上侧所有的兄弟图层，计算所述兄弟图层距离该目标图层的距离；

判断距离最近的兄弟图层是否大于或等于2个，若是则重叠长度多的为目标图层的左侧或上侧相邻兄弟图层，否则该距离最近的为目标图层的左侧或上侧相邻兄弟图层；其中，所述的重叠长度是指垂直于兄弟图层与目标图层直线距离的方向上，兄弟图层与目标图层的平行长度。

可选地，所述生成模块确定每个图层左侧和上侧相邻的兄弟图层之前，包括：

将获取的图层中同一层级的兄弟图层进行合并，获得新的父图层；其中，新父图层为原父图层的子图层；

判断被合并的同一层级的兄弟图层是否为自定义图层，若是则移除被合并的同一层级的兄弟图层再确定每个图层左侧和上侧相邻的兄弟图层，否则直接确定每个图层左侧和上侧相邻的兄弟图层。

可选地，所述生成模块根据预设规则，布局每个兄弟图层以生成布局代码，包括：

兄弟图层的布局表示为(x，y，width，height)；其中，width为该图层的宽度，height为该图层的高度，x为该图层的左边与父图层左边的距离，y为该图层的上边与父图层上边的距离。

根据本发明实施例的另一个方面，还提供了一种电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现上述任一生成布局代码的实施例所述的方法。

根据本发明实施例的另一个方面，还提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现上述任一基于生成布局代码的实施例所述的方法。

上述发明中的一个实施例具有如下优点或有益效果：本发明通过获得设计图像，提取设计图像中每个图层的元素信息；依次对每两图层循环遍历，获得图层存储的树状结构；接收选定图层的指令，获取选定的图层及其所有子图层；确定每个图层左侧和上侧相邻的兄弟图层，根据预设规则，布局每个兄弟图层以生成布局代码。因此，本发明能够避免重复客户端布局相关的代码，实现快捷、方便地布局代码开发。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的生成布局代码的方法的主要流程的示意图；

图2是根据本发明另一实施例的生成布局代码的方法的主要流程的示意图；

图3是根据本发明又一实施例的生成布局代码的方法的主要流程的示意图；

图4是根据本发明实施例的兄弟图层合并前后关系示意图；

图5是根据本发明实施例的另一种兄弟图层合并前后关系示意图；

图6是根据本发明一个具体实施例的兄弟图层布局的示意图；

图7是根据本发明实施例的确定图层左侧或上侧相邻兄弟图层的方法的主要流程的示意图；

图8是根据本发明实施例的重叠长度的示意图；

图9是根据本发明实施例的图层布局表示的示意图；

图10是根据本发明实施例的生成布局代码的装置的主要模块的示意图；

图11是本发明实施例可以应用于其中的示例性系统架构图；

图12是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1是根据本发明第一实施例的生成布局代码的方法的主要流程的示意图，所述生成布局代码的方法可以包括：

步骤S101，获得设计图像，提取设计图像中每个图层的元素信息。

步骤S102，依次对每两图层循环遍历，获得图层存储的树状结构。

在实施例中，树状结构中父图层的面积大于或等于子图层面积，且为大于或等于子图层面积中面积最小的。

步骤S103，接收选定图层的指令，获取选定的图层及其所有子图层。

在实施例中，当接收到点击某个图层时，将当前点击图层和其所有子图层全部选中保存。

步骤S104，确定每个图层左侧和上侧相邻的兄弟图层，根据预设规则，布局每个兄弟图层以生成布局代码。

在实施例中，在确定图层左侧和上侧相邻的兄弟图层的时候，可以获取目标图层左侧或上侧所有的兄弟图层，然后计算所述兄弟图层距离该目标图层的距离。继而，判断距离最近的兄弟图层是否大于或等于2个，如果大于或等于2个则重叠长度多的为目标图层的左侧或上侧相邻兄弟图层，如果小于2个则该距离最近的为目标图层的左侧或上侧相邻兄弟图层。

值得说明的是，兄弟图层的布局可以表示为(x，y，width，height)。其中，width为该图层的宽度，height为该图层的高度，x为该图层的左边与父图层左边的距离，y为该图层的上边与父图层上边的距离。也就是说，根据预设的规则，可以通过确定的图层左侧和上侧相邻的兄弟图层，来表示该图层布局。

因此，根据上面所述的各种实施例，本发明为了解决目前在开发应用程序的过程中重复性的工作浪费大量的时间，开发效率低的问题，通过设计图(UI设计师设计后的效果图)得到的绝对坐标，通过布局算法将所述绝对坐标转化成相对坐标，直接生成布局代码。

图2是根据本发明另一实施例的生成布局代码的方法的主要流程的示意图，所述生成布局代码的方法可以包括：

步骤S201，获得设计图像，提取设计图像中每个图层的元素信息。

步骤S202，依次对每两图层循环遍历，获得图层存储的树状结构。

在实施例中，树状结构中父图层的面积大于或等于子图层面积且为最小。

步骤S203，接收选定图层的指令，获取选定的图层及其所有子图层。

步骤S204，将获取的图层中同一层级的兄弟图层进行合并，获得新的父图层。

在实施例中，新父图层为原父图层的子图层。

需要说明的是，在此进行图层合并能够便于对图层做进一步封装，使布局代码结构更为清晰。

步骤S205，判断被合并的同一层级的兄弟图层是否为自定义图层，若是则先进行步骤S206再进行步骤S207，否则直接进行步骤S207。

步骤S206，移除被合并的同一层级的兄弟图层。

在实施例中，由于是自定义图层，移除不影响布局代码的生成，只是多个自定义图层合成了一个新的自定义图层。

步骤S207，确定每个图层左侧和上侧相邻的兄弟图层，根据预设规则，布局每个兄弟图层以生成布局代码。

在实施例中，在确定图层左侧和上侧相邻的兄弟图层的时候，可以获取目标图层左侧或上侧所有的兄弟图层，然后计算所述兄弟图层距离该目标图层的距离。继而，判断距离最近的兄弟图层是否大于或等于2个，如果大于或等于2个则重叠长度多的为目标图层的左侧或上侧相邻兄弟图层，如果小于2个则该距离最近的为目标图层的左侧或上侧相邻兄弟图层。

另外，兄弟图层的布局可以表示为(x，y，width，height)。其中，width为该图层的宽度，height为该图层的高度，x为该图层的左边与父图层左边的距离，y为该图层的上边与父图层上边的距离。

图3是根据本发明又一实施例的生成布局代码的方法的主要流程的示意图，基于ios操作系统，所述生成布局代码的方法可以包括：

步骤S301，获得设计图像，提取设计图像中每个图层的元素信息。

在实施例中，通过Sketch(Sketch是一款矢量绘图应用)插件来提取设计图像中每个图层的元素信息。其中，Sketch插件可以直接导出设计图像的json文件，该json文件包括了设计图像中每个图层的元素信息，例如坐标，文本颜色，字号，控件类型等等。

另外，可以采用macOS(macOS是一套运行于苹果Macintosh系列电脑上的操作系统，是图形用户界面操作系统。)的可视化应用软件对图层进行各种功能的操作。

步骤S302，剔除遮罩图层的元素信息。

在实施例中，在提取的图层中，存在一些具有相同元素信息的遮罩图层，因此可以将这些重复的遮罩图层进行剔除。

进一步地，可以将剔除后的图层及其元素信息存储至预设的数组中。

步骤S303，根据元素信息中的面积，将图层从小到大排序。

步骤S304，依次对每两图层循环遍历，获得图层存储的树状结构。其中，树状结构中的父图层面积大于或等于子图层面积，且为大于或等于子图层中最小的面积。

在实施例中，由于设计图像的json文件中每个图层的坐标属性都是针对屏幕顶点，并没有父子层级关系，所以需要转换生成树状结构的层级关系。

进一步地，将所有的图层从小到大按面积排序，排序之后依次对两图层循环遍历，根据预设的确定父图层的原则，找到所有的父子层级关系，并对生成的树状结构进行存储。更进一步地，预设的确定父图层的原则为能够包住一个图层的面积最小的图层则为其父图层，即能够大于或等于子图层的面积最小视图为其父图层。

步骤S305，接收选定图层的指令，获取选定的图层及其所有子图层。

在实施例中，当接收到点击某个图层时，将当前点击图层和其所有子图层全部选中保存。

步骤S306，将获取的图层中同一层级的兄弟图层进行合并，获得新的父图层。其中，新父图层为原父图层的子图层。

在实施例中，可以通过框选图层或者多选图层，将多个图层合并成一个新的父图层，其中合并的必须是同一层级的兄弟图层。

例如：先有B，C，D三个子视图，合并后会生成一个新的父图层为New，则合并成功后，New为B，C，D三个子视图的新父图层，而原父图层A为新合并图层New的父图层，合并前后关系如下图4所示。

步骤S307，判断被合并的同一层级的兄弟图层是否为自定义图层，若是则先进行步骤S308再进行步骤S309，否则直接进行步骤S309。

在实施例中，所述的自定义图层指的是非系统现有的原生图层，而是通过开发者对简单控件封装的自定义图层。

步骤S308，移除被合并的同一层级的兄弟图层。

在实施例中，被合并的同一层级的兄弟图层被移除，合并前后关系如图5所示，B，C，D已合并成了新的自定义图层，而新的自定义图层包括B，C，D图层的实现，所以B，C，D图层可以移除。

步骤S309，将同一层级的兄弟图层按照预设方式进行排序。

在实施例中，可以将图层的左边与父图层左边的距离以及图层的上边与父图层上边的距离求和，然后根据求和结果从小到大进行图层排序。

步骤S310，确定每个图层左侧和上侧相邻的兄弟图层。

在实施例中，找到每个图层上侧和左侧是否有相邻的兄弟视图控件，例如图6所示，B图层的上侧和左侧没有，C图层的上侧没有，左侧为B图层。具体的确定图层左侧或上侧相邻兄弟图层的过程如图7所示：

步骤S701：获取目标图层左侧或上侧所有的兄弟图层。

步骤S702：计算所述兄弟图层距离该目标图层的距离。

在实施例中，计算兄弟图层左边距离该目标图层左边的距离。

步骤S703：判断距离最近的兄弟图层是否大于或等于2个，若是则进行步骤S704，否则进行步骤S705。

步骤S704：重叠长度多的为目标图层的左侧或上侧相邻兄弟图层。

在实施例中，当2个或2个以上的兄弟图层与目标图层的距离一样时，比较重叠的长度，重叠长度多的为目标图层的左侧或上侧相邻兄弟图层。其中，所述的重叠长度是指垂直于兄弟图层与目标图层直线距离的方向上，兄弟图层与目标图层的平行长度。如图8所示，兄弟图层1和2与目标图层3的直线距离相同，但垂直于该直线距离的方向上，兄弟图层1与目标图层3的平行长度大于兄弟图层2与目标图层3的平行长度。

步骤S705：距离最近的为目标图层的左侧或上侧相邻兄弟图层。

步骤S311，根据预设规则，布局每个兄弟图层以生成布局代码。

在实施例中，如图9所示，每个兄弟图层的布局应表示为(x，y，width，height)，其中，width为该图层的宽度，height为该图层的高度，x为该图层的左边与父图层左边的距离，y为该图层的上边与父图层上边的距离。另外，子图层右边与父图层左边的距离为right，子图层下边与父图层上边的距离为bottom。

值得说明的是，如果子图层左边和上边都没有相邻的兄弟图层，则子图层左边与父图层左边的距离可以表示为left，即x＝left，子图层上边与父图层上边的距离为top，即y＝top。

例如：如图6中所示的兄弟图层，先布局兄弟图层B，兄弟图层B左侧和上侧均没有兄弟图层，则兄弟图层B直接针对父图层A进行布局，即兄弟图层B的布局为(left，top，width，height)。接下来布局兄弟图层C，兄弟图层C左侧有兄弟图层B，上侧没有兄弟图层，假设兄弟图层B和兄弟图层C的间隔是10，则兄弟图层C的布局为(B.right+10，y，width，height)，同理兄弟图层E的布局为(C.right+10，D.bottom+10，width，height)，依此类推，可以生成最终的布局代码，即兄弟图层B的布局代码为b.frame＝CGRectMake(left，top，width，height)，兄弟图层C的布局代码为c.frame＝CGRectMake(B.right+10，y，width，height)。

图10是根据本发明实施例的生成布局代码的装置，如图10所示，所述生成布局代码的装置1000包括获取模块1001、选定模块1002和生成模块1003。其中，获取模块1001获得设计图像，提取设计图像中每个图层的元素信息；依次对每两图层循环遍历，获得图层存储的树状结构。其中，树状结构中父图层的面积大于或等于子图层面积且为最小。选定模块1002接收选定图层的指令，获取选定的图层及其所有子图层。生成模块1003确定每个图层左侧和上侧相邻的兄弟图层，根据预设规则，布局每个兄弟图层以生成布局代码。

较佳地，所述生成模块1003确定每个图层左侧和上侧相邻的兄弟图层，包括：

获取目标图层左侧或上侧所有的兄弟图层，计算所述兄弟图层距离该目标图层的距离。判断距离最近的兄弟图层是否大于或等于2个，若是则重叠长度多的为目标图层的左侧或上侧相邻兄弟图层，否则该距离最近的为目标图层的左侧或上侧相邻兄弟图层。

作为另一个实施例，所述生成模块1003确定每个图层左侧和上侧相邻的兄弟图层之前，包括：

将获取的图层中同一层级的兄弟图层进行合并，获得新的父图层；其中，新父图层为原父图层的子图层；

判断被合并的同一层级的兄弟图层是否为自定义图层，若是则移除被合并的同一层级的兄弟图层再确定每个图层左侧和上侧相邻的兄弟图层，否则直接确定每个图层左侧和上侧相邻的兄弟图层。

另外，所述生成模块1003根据预设规则，布局每个兄弟图层以生成布局代码时，兄弟图层的布局可以表示为(x，y，width，height)；其中，width为该图层的宽度，height为该图层的高度，x为该图层的左边与父图层左边的距离，y为该图层的上边与父图层上边的距离。

需要说明的是，在本发明所述生成布局代码的方法和所述生成布局代码的装置在具体实施内容上具有相应关系，故重复内容不再说明。

图11示出了可以应用本发明实施例的生成布局代码的方法或生成布局代码的装置的示例性系统架构1100。

如图11所示，系统架构1100可以包括终端设备1101、1102、1103，网络1104和服务器1105。网络1104用以在终端设备1101、1102、1103和服务器1105之间提供通信链路的介质。网络1104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备1101、1102、1103通过网络1104与服务器1105交互，以接收或发送消息等。终端设备1101、1102、1103上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备1101、1102、1103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器1105可以是提供各种服务的服务器，例如对用户利用终端设备1101、1102、1103所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果(例如目标推送信息、产品信息--仅为示例)反馈给终端设备。

需要说明的是，本发明实施例所提供的生成布局代码的方法一般由服务器1105执行，相应地，生成布局代码的装置一般设置于服务器1105中。

应该理解，图11中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图12，其示出了适于用来实现本发明实施例的终端设备的计算机系统1200的结构示意图。图12示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图12所示，计算机系统1200包括中央处理单元(CPU)1201，其可以根据存储在只读存储器(ROM)1202中的程序或者从存储部分1208加载到随机访问存储器(RAM)1203中的程序而执行各种适当的动作和处理。在RAM1203中，还存储有系统1200操作所需的各种程序和数据。CPU1201、ROM1202以及RAM1203通过总线1204彼此相连。输入/输出(I/O)接口1205也连接至总线1204。

以下部件连接至I/O接口1205：包括键盘、鼠标等的输入部分1206；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分1207；包括硬盘等的存储部分1208；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分1209。通信部分1209经由诸如因特网的网络执行通信处理。驱动器1210也根据需要连接至I/O接口1205。可拆卸介质1211，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1210上，以便于从其上读出的计算机程序根据需要被安装入存储部分1208。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分1209从网络上被下载和安装，和/或从可拆卸介质1211被安装。在该计算机程序被中央处理单元(CPU)1201执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括获取模块、选定模块和生成模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：获得设计图像，提取设计图像中每个图层的元素信息；依次对每两图层循环遍历，获得图层存储的树状结构；其中，树状结构中父图层的面积大于或等于子图层面积且为最小；接收选定图层的指令，获取选定的图层及其所有子图层；确定每个图层左侧和上侧相邻的兄弟图层，根据预设规则，布局每个兄弟图层以生成布局代码。

根据本发明实施例的技术方案，能够解决应用程序开发过程效率不高的问题。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种生成布局代码的方法，其特征在于，包括：

获得设计图像，提取设计图像中每个图层的元素信息；

依次对每两图层循环遍历，获得图层存储的树状结构；其中，树状结构中父图层的面积大于或等于子图层面积且为最小；

接收选定图层的指令，获取选定的图层及其所有子图层；

确定每个图层左侧和上侧相邻的兄弟图层，根据预设规则，布局每个兄弟图层以生成布局代码。

2.根据权利要求1所述的方法，其特征在于，确定每个图层左侧和上侧相邻的兄弟图层，包括：

获取目标图层左侧或上侧所有的兄弟图层，计算所述兄弟图层距离该目标图层的距离；

判断距离最近的兄弟图层是否大于或等于2个，若是则重叠长度多的为目标图层的左侧或上侧相邻兄弟图层，否则该距离最近的为目标图层的左侧或上侧相邻兄弟图层；其中，所述的重叠长度是指垂直于兄弟图层与目标图层直线距离的方向上，兄弟图层与目标图层的平行长度。

3.根据权利要求1所述的方法，其特征在于，确定每个图层左侧和上侧相邻的兄弟图层之前，包括：

将获取的图层中同一层级的兄弟图层进行合并，获得新的父图层；其中，新父图层为原父图层的子图层；

判断被合并的同一层级的兄弟图层是否为自定义图层，若是则移除被合并的同一层级的兄弟图层再确定每个图层左侧和上侧相邻的兄弟图层，否则直接确定每个图层左侧和上侧相邻的兄弟图层。

4.根据权利要求1-3任一所述的方法，其特征在于，根据预设规则，布局每个兄弟图层以生成布局代码，包括：

兄弟图层的布局表示为(x，y，width，height)；其中，width为该图层的宽度，height为该图层的高度，x为该图层的左边与父图层左边的距离，y为该图层的上边与父图层上边的距离。

5.一种生成布局代码的装置，其特征在于，包括：

获取模块，用于获得设计图像，提取设计图像中每个图层的元素信息；依次对每两图层循环遍历，获得图层存储的树状结构；其中，树状结构中父图层的面积大于或等于子图层面积且为最小；

选定模块，用于接收选定图层的指令，获取选定的图层及其所有子图层；

生成模块，用于确定每个图层左侧和上侧相邻的兄弟图层，根据预设规则，布局每个兄弟图层以生成布局代码。

6.根据权利要求5所述的装置，其特征在于，所述生成模块确定每个图层左侧和上侧相邻的兄弟图层，包括：

获取目标图层左侧或上侧所有的兄弟图层，计算所述兄弟图层距离该目标图层的距离；

判断距离最近的兄弟图层是否大于或等于2个，若是则重叠长度多的为目标图层的左侧或上侧相邻兄弟图层，否则该距离最近的为目标图层的左侧或上侧相邻兄弟图层；其中，所述的重叠长度是指垂直于兄弟图层与目标图层直线距离的方向上，兄弟图层与目标图层的平行长度。

7.根据权利要求5所述的装置，其特征在于，所述生成模块确定每个图层左侧和上侧相邻的兄弟图层之前，包括：

将获取的图层中同一层级的兄弟图层进行合并，获得新的父图层；其中，新父图层为原父图层的子图层；

判断被合并的同一层级的兄弟图层是否为自定义图层，若是则移除被合并的同一层级的兄弟图层再确定每个图层左侧和上侧相邻的兄弟图层，否则直接确定每个图层左侧和上侧相邻的兄弟图层。

8.根据权利要求5-7任一所述的装置，其特征在于，所述生成模块根据预设规则，布局每个兄弟图层以生成布局代码，包括：

兄弟图层的布局表示为(x，y，width，height)；其中，width为该图层的宽度，height为该图层的高度，x为该图层的左边与父图层左边的距离，y为该图层的上边与父图层上边的距离。

9.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-4中任一所述的方法。

10.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-4中任一所述的方法。

Images