CN109189390A - 自动生成布局文件的方法、存储介质 - Google Patents

Abstract

本发明提供自动生成布局文件的方法、存储介质，方法包括识别界面效果图，获取各元素；依据各元素之间的位置关系，创建一包含关系树，同时依据元素的属性配置对应节点的属性；依据包含关系树，获取所述界面效果图对应的布局文件和资源图片。本发明通过对应用的效果图进行分析，识别其中的各种元素，对应各元素的位置关系创建包含关系树，据此自动生成布局文件和资源文件，节省了大量的时间，减少相关人员的工作量，减少误差，避免人为操作的失误，提高工作效率，加快了应用的开发流程。

Description

自动生成布局文件的方法、存储介质

技术领域

本发明涉及应用界面分析处理领域，具体涉及自动生成布局文件的方法、存储介质。

背景技术

对于一个终端应用，特别是android应用，用户首先见到的是应用的界面，可以说界面是人机交互的最重要的部分，会极大的影响到用户的体验。

通常情况下，我们开发一个应用时，策划会给出一个应用内各个界面的效果图以及相关的资源文件；当开发人员获取到这些效果图后，就要根据效果图创建相应的界面文件，并贴上对应的资源图片，最终达到策划预定的展示效果。在这一过程中，可以分成三个步骤：1.策划提供效果图；2.美工根据效果图进行切图，得到相关的资源图片；3.开发人员根据效果图和资源图片，进行开发。其中第3个步骤又包含了创建布局文件和贴图。

上述过程除了第一个步骤之外，都有可能由于种种原因，导致一些问题：

1.一个应用的资源图片是要打包到应用当中的，这些资源文件越大，则意味着安装包越大，一些不熟练的美工在切图的时候，可能会把可拉伸的资源(在android系统中，可以对后缀为“.9”的图片进行拉伸，节省资源空间)做成整图，导致资源文件超出实际需要的大小。

2.开发人员进行开发的时候，由于人眼视觉的误差，使用了错误的配色，为避免这个问题，往往需要策划人员在效果图上再标注出具体的颜色，增加了工作量。

3.对于移动端的开发人员，由于存在着机型适配的问题，往往需要制作不同的布局文件来应对不同的机型；若开发人员经验不足，未做机型适配，则往往在上市之后会影响用户体验，收到负面的反馈。

4.开发人员在制作布局文件的时候，若经验不足，则有可能使用太多的控件，导致界面过度绘制，影响性能与效率。

除了上述的问题之外，以上的工作都需要人工去做，花费大量的人力和时间，且效率较低。

发明内容

本发明所要解决的技术问题是：提供一种能够依据应用界面效果图自动生成布局文件的方法、存储介质，不仅提高了工作效率，而且能保证准确度，从而大大加快了应用开发流程。

为了解决上述技术问题，本发明采用的技术方案为：

自动生成布局文件的方法，包括：

识别界面效果图，获取各元素；

依据各元素之间的位置关系，创建一包含关系树，同时依据元素的属性配置对应节点的属性；

依据包含关系树，获取所述界面效果图对应的布局文件和资源图片。

本发明提供的另一个技术方案为：

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能实现上述自动生成布局文件的方法所包含的步骤。

本发明的有益效果在于：充分利用图像识别技术，对应用的效果图进行分析，识别其中的各种元素，对应各元素的位置关系创建包含关系树，据此自动生成布局文件和资源文件，节省了大量的时间，减少相关人员的工作量，减少误差，避免人为操作的失误，提高工作效率，加快了应用的开发流程。

附图说明

图1为本发明自动生成布局文件的方法的流程示意图；

图2为实施例一的流程示意图；

图3为实施例二的界面效果图；

图4为实施例二的步骤7生成的关系树；

图5为实施例二的步骤8更新后的关系树；

图6为实施例二的步骤9修改后的关系树；

图7为实施例二的步骤10合并后的关系树。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

本发明最关键的构思在于：对应用的效果图进行分析，识别其中的各种元素，对应各元素的位置关系创建包含关系树，据此自动生成布局文件和资源文件，显著提高应用界面开发的工作效率。

本发明涉及的技术术语解释:

请参照图1，本发明提供自动生成布局文件的方法，包括：

识别界面效果图，获取各元素；

依据各元素之间的位置关系，创建一包含关系树，同时依据元素的属性配置对应节点的属性；

依据包含关系树，获取所述界面效果图对应的布局文件和资源图片。

从上述描述可知，本发明的有益效果在于：本发明可完成大部分原本需要手工的操作，开发者拿到界面效果图对应的布局文件和资源图片这一输出结果之后，可以不进行修改或者进行少量的修改就可直接使用；对于美工人员来说，也只需要做少量的自动分析无法识别的资源，节省大量的时间，显著提高界面开发的效率。

进一步的，节点的属性包括父节点、是否有子节点、元素标签、颜色类型、色值和极点坐标；所述元素标签包括形状、图像和文本。

由上述描述可知，对应拆分出来的元素的属性，配置关系树中对应节点的属性，为后续基于关系树自动分析获取布局文件和资源图片提供数据支持。

进一步的，所述依据所述包含关系树，获取所述界面效果图对应的布局文件和资源图片，之前，还包括：

遍历包含关系树中元素标签为形状的叶子节点，获取其中外形轮廓为圆形或椭圆形的节点；

逐一将圆形或椭圆形的节点与其元素标签为文本的兄弟节点进行匹配，若匹配成功，则修改当前圆形或椭圆形的节点的元素标签为文本。

由上述描述可知，能通过上述步骤自动修正由于外形轮廓过于相似而在识别过程错误配置元素标签的节点，从而确保节点属性的正确性，进而显著提高所获取的布局文件的准确性。

进一步的，所述依据所述包含关系树，获取所述界面效果图对应的布局文件和资源图片，之前，还包括：

遍历包含关系树中元素标签为文本的叶子节点，将遍历到的节点与其兄弟节点进行匹配，合并属于同一字符串的节点，并更新包含关系树。

由上述描述可知，通过对属于同一字符串的多个节点进行合并，不仅精简化关系树的结构，而且还能显著降低分析处理的数据量，能在后续提高获取布局文件和资源图片的效率。

进一步的，依据包含关系树，获取所述界面效果图对应的布局文件，具体为：

以广度优先的方式遍历包含关系树的各个节点，对应根节点输出一个第一线性布局容器；

依据节点的属性，判断当前遍历到的节点是否有子节点；若有，则对应输出一个第二线性布局容器，并依据节点的属性放置在第一线性布局容器内的相应位置；若无，则对应输出一个控件，并依据节点的属性放置在相应位置；

遍历完毕，获取对应界面效果图的布局文件。

由上述描述可知，能够实现对应各个节点，依据其属性，自动且高效地获取对应的布局代码，方便开发人员的界面布局开发。

进一步的，依据包含关系树，获取所述界面效果图对应的资源图片，具体为：

遍历包含关系树中元素标签为形状或图像的节点，依据节点的属性中的颜色类型、色值和极点坐标，获取元素标签为形状或图像的节点各自对应的资源图片。

由上述描述可知，能够依据各节点的包含关系以及属性分析，自动、高效且准确地获取对应的资源图片，不仅为开发人员了提供极大的便利，而且能有效解决人眼误差问题，保证颜色的准确性。

进一步的，所述依据节点的属性中的颜色类型、色值和极点坐标，获取元素标签为形状或图像的节点各自对应的资源图片，具体为：

依据各节点的色值和色值分布情况，判断节点的背景对应的是纯色背景、渐变背景还是背景图片；

对应纯色背景、渐变背景和背景图片，配置节点的颜色类型分别为纯色、渐变和无规律；

若节点的颜色类型为单色，则依据其色值和极点坐标输出相应大小且可拉伸的资源图片；

若节点的颜色类型为渐变或无规律，则依据其色值和极点坐标输出原始尺寸的资源图片。

由上述描述可知，能智能判断节点对应的资源图片是否可拉伸，若可拉伸，则缩小资源图片的像素，从而大大减少资源图片占用的空间。

进一步的，所述识别界面效果图，获取各元素，具体为：

通过轮廓检测，提取各元素的轮廓；

获取轮廓边缘不平滑的元素，配置其属性中的元素标签为形状，同时计算获取包括色值、颜色类型和极点坐标的其他属性；获取形状数组；

获取轮廓符合文本特性的元素，配置其属性中的元素标签为文本，同时计算获取包括色值、颜色类型和极点坐标的其他属性；获取文本数组；

配置其他元素的属性中的元素标签为图像，同时计算获取包括色值、颜色类型和极点坐标的其他属性；获取图像数组。

由上述描述可知，能基于轮廓准确识别获取各元素的标签，同时准确计算获取各元素的其他属性，并进行元素归类，提高后续分析处理地效率。

进一步的，所述依据各元素之间的位置关系，创建一包含关系树，同时依据元素的属性配置对应节点的属性，具体为：

遍历形状数组中的各个元素，依据元素的极点坐标计算各个元素之间的位置关系，生成一包含关系树；同时，依据形状数组中的各个元素的属性配置对应节点的属性；

遍历文本数组中的各个元素，依据元素的极点坐标计算其与所述包含关系树中各个节点所对应元素之间的位置关系，更新包含关系树；同时，依据文本数组中的各个元素的属性配置对应节点的属性；

遍历图像数组中的各个元素，依据元素的极点坐标计算其与更新后的包含关系树中各个节点所对应元素之间的位置关系，再次更新包含关系树；同时，依据图像数组中的各个元素的属性配置对应节点的属性。

由上述描述可知，能基于元素标签归类获取的不同数组，自动、高效且准确得构建获取包含关系树，明确各元素的属性和位置关系。

本发明提供的另一个技术方案为：

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能实现上述自动生成布局文件的方法所包含的步骤。

从上述描述可知，本发明的有益效果在于：对应本领域普通技术人员可以理解实现上述技术方案中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来实现的，所述的程序可存储于一计算机可读取的存储介质中，该程序在执行时，可包括如上述各方法的流程。

其中，所述的存储介质可以是磁盘、光碟、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

实施例一

由于一个应用的布局元素大体上只有三种：形状、文本和图像；绝大多数情况下，形状也只有两种：方形(用于展示文本的背景和图像)和圆形(用于展示图像)。因此，对于图像识别来说，识别一个应用界面上的文本和形状是非常容易做到的事情。因为界面的形状元素都有非常明显、平滑的轮廓；而文本的特征也非常明显：它总是在一个方形区域内，且颜色单一，有很明显的顶部、底部和基线。把形状、文字排除了，剩下的都是图像。需要注意的是，本发明并不需要识别出具体是什么文字内容，而只需要判断某个界面元素是不是文本即可。

本实施例对图2做进一步限定，提供一种基于安卓应用效果图自动生成对应布局文件的具体方法，包括：

S1：指定界面效果图的来源(即存储路径)和对应布局文件的输出目录。

可选的，还包括指定输出的xml格式的布局文件对应的分辨率，如果未指定，则系统默认参照界面效果图的长宽。

S2：读取界面效果图或者界面示意图。

界面效果图或者界面示意图为图片格式文件。

S3：对界面效果图进行识别，分析界面的元素组成和元素属性，并依据元素属性以及各元素之间的位置关系，生成一包含关系树。

可选的，通过轮廓获取、形状匹配、文字匹配等手段，把效果图上的元素进行分离。具体而言，包括以下子步骤：

S31：在系统内存里创建一个包含关系树tree(下文简写为T)，这个树将会有若干节点node(下文简写为N)，每个节点都会有以下属性：父节点、是否有子节点、元素标签(文本text、形状shape、图片image、文本串textShape)、颜色类型(单色、渐变、无规律)、色值、极点坐标(最左、最右、最上、最下四个点)。此时，该树只有一个根节点root(下文简写为R)。

S32：通过轮廓检测函数，提取图片文件的轮廓。

S33：遍历所有取到的轮廓，根据其边缘是否平滑判断是否为形状元素，进行第一次分类。如果该元素符合一个形状的特征，则为该元素分配一个shape标签，并算出每个轮廓四极，取到其颜色类型和色值，形成一个N，存入形状数组。

S34：对非形状的元素进行再次分类，根据文本元素的特征，再把文本元素和图像元素区分开，分别存入文本数组(分配text标签)和图像数组(分配image标签)。

S35：遍历每一个形状数组的元素，取其四极，计算彼此之间的包含关系：如果N1包含了N2，则将N2的父节点置为N1，将N1的“是否有子节点”这个属性的值置为true；如果N1不被形状数组里的任何一个N所包含，则将N1的父节点置为R，把R的“是否有子节点”这个属性的值置为true。此时树T已经有了若干节点，这些节点全部都是形状元素。

S36：遍历文本数组里的每一个元素E，取E的任意点P，广度优先且从树叶开始遍历树T的每一个节点N(包括根节点R)，判断P是在N的内部还是外部，如果P在N的内部，则把E的父节点记为N。所有的标签为文本的节点都是叶子节点。

S37：同样遍历图像数组里的每一个元素E，取E的任意点P，广度优先且从树叶开始遍历树T的每一个节点N(包括根节点R，不包括标签为文字的节点)，判断P是在N的内部还是外部，如果P在N的内部，则把E的父节点记为N。所有的标签为图像的节点也都是叶子节点。

S38：再一次遍历树T的叶子节点，找到所有的圆形或者椭圆形的节点N，再根据其坐标、高度、色值等信息与其兄弟节点进行匹配(由于一行文本总是归属于同一个形状的，因此只需要和兄弟节点进行比较)。如果发现N实际上是一个文本，则修改N的标签为text。

这是因为形状和文本之间可能有交叉，比如数字0和字母O在上面的识别处理过程中有可能会被认为是一个圆形或者椭圆形。该步骤能有效提升识别准确度。

S39：遍历包含关系树中元素标签为文本的叶子节点，将遍历到的节点与其兄弟节点进行匹配，合并属于同一字符串的节点，并更新包含关系树。

具体而言，遍历所有属性为文本的叶子节点，把所有顶部、底部坐标在同一个区间的进行归类，同时计算其最左、最右、最上、最下的点坐标，根据这四个点重新生成一个方形元素，分配textShape标签，同时替换掉这些文本叶子节点。至此，生成一棵完整的树。

S4：依据包含关系树，获取所述界面效果图对应的布局文件和资源图片。

具体而言，该步骤包括以下子步骤：

S41：从根节点R开始，以广度优先遍历整棵关系树的每个节点，如果是根节点，则输出一个线性布局容器，作为所有子节点的父容器；如果不是根节点，则判断该节点是否有子节点，如果是，则对应的形状元素是一个容器；否则，该形状元素就是一个控件。然后根据该形状元素的四个顶点的坐标以及和父节点、兄弟节点的关系，生成相应的布局代码，加入其父布局的代码当中去，直到所有的节点都被处理过，最终生成一个完整的布局文件代码，输出到指定的目录。

S42：从根节点开始，重新遍历整棵树，依据元素标签找到每一个形状元素，判断其背景是纯色背景还是渐变背景还是图片背景，输出相应的背景资源图片到指定的目录。

具体而言，根据关系树以及各个元素的色值分析，可以取到精确的颜色以及该颜色所覆盖的区域，从而可以得到各个元素各自对应的背景颜色(单色或渐变)或者图片(复杂颜色构成)，并把这些背景输出成png格式作为资源图片。

有些元素对应的控件的背景是简单的颜色(可能是单色，也可能是渐变的)，有些元素对应的控件的背景可能是相对复杂的图片，这两种情况输出资源图片的方法是不同的。具体来说，对于纯颜色的背景，可以直接生成一个可拉伸的.9图片，像素很少；对于复杂的图片背景，可以通过像素拷贝，把源图对应区域的像素逐个拷贝出来，形成新的背景图片，将该背景图片输出作为对应的资源图片。

因此，在输出资源图片的时候，可以分析资源图片的色值以及颜色的方向性(即分布情况)，来判断是是属于可以拉伸的图片，如果是，则输出可拉伸的图片。

在输出资源图片的时候，本方案需要判断在某个方向上的色值是否相同且均匀，即颜色的方向是否一致。在实际的应用中，有很多的背景或者图片是渐变的，比如某张图片纵向的颜色是逐渐变深(或者是不均匀的)，那么这个方向是不可拉伸的，必须按照原图的大小绘制；若该图片横向的颜色都是一致的(在像素层面上，每一行的色值都是相同的)，则该图片的横向是可拉伸的。因此，对于上述图片，如果它的原始大小是长200像素，宽50像素的(200*50)，经本方案处理后输出的图片可能只有1*50，但是可以在APP上面显示出原图的效果(200*50)，从而可大大减少资源文件占用的空间。

S5：开发人员从指定的目录取到完整的布局文件和资源图片文件，进行开发。

实施例二

请参照图3-图7，本实施例对应实施例一，提供一具体运用场景：

对应图3的Android应用的界面效果图，如果用传统的方式进行开发，首先需要美工人员切图，从图中切出以下资源：1.返回按钮的“<”图片；2.标题栏正中的资源图片；3.“10软件币”那种按钮背景图片；4.支付宝图片；5.支付宝那一栏右边的小圆形按钮；6.确认支付的背景资源图片。开发人员需要首先制作一个布局文件layout.xml，在这个布局文件上面根据效果图放置多个容器和控件，然后根据美工人员切出来的资源图片进行背景设置。在运行过程中，还要根据在手机上实际展现出来的效果与效果图之间的差距进行微调。

而对应本发明提供的自动生成布局文件的方法，则只需要以下步骤便可实现自动且高效得获取对应的准确得布局文件和资源图片。本实施例的具体步骤流程如下：

1.开发人员为系统指定上述图3的存储路径。

2.开发人员为系统指定解析的输出路径，默认使用图片作为屏幕大小，启动系统分析。

3.系统根据图片路径，读取图片，并根据图片的大小生成一个树的根节点。

4.系统根据轮廓算法，依次取到以下轮廓：

4.1标题栏

4.2返回按钮

4.3标题栏正中背景

4.4“软件币充值”文本((注：每个字都是一个独立的轮廓，下同)

4.5“当前用户：15225443”文本

4.6“余额2(软件币)”文本

4.7“1软件币”文本

4.8椭圆形“0”，实际上是字符“0”

4.9“10软件币”所处的方形区域

4.10“5软件币”文本

4.11椭圆形“0”，实际上是字符“0”

4.12“50软件币”所处的方形区域

4.13“支付方式”文本

4.14支付宝图标

4.15“支付宝支付”文本

4.16支付方式右边的圆圈

4.17支付方式右边圆圈内部的圆点

4.18上面4.5-4.17所处的方形区域

4.19上面4.18下方的空白区域

4.20“实付金额”文本

4.21“￥2”文本

4.22椭圆形“0”，实际上是字符“0”

4.23上面4.20-4.22所处的方形区域

4.24“确认支付”文本

4.25“确认支付”文本所处的方形区域

5.系统遍历(4)中找到的所有轮廓，进行第一次分类，把所有的规则形状分离开来，得到一个数组，包含有：4.1标题栏区域、4.3标题文本背景区域、4.8字符“0”、4.9“10软件币”的背景区域、4.11字符“0”、4.12“50软件币”的背景区域、4.14支付宝图标(由于支付宝的图标的轮廓外形是一个圆，会被认为是一个形状)、4.16支付方式右方的圆圈、4.17其内部圆点、4.18方形区域、4.19空白区域、4.23方形区域、4.25确认支付的背景区域。以上所有元素被分配了shape标签。

6.系统遍历剩下的未被确认为形状的轮廓，经判断4.2返回按钮是图像，分配image标签，存入图像级数；剩下的全部是文本，全部存入文本数组，并分配text标签。

7.系统遍历所有的形状元素，生成图4的关系树。

8.系统遍历所有的非形状元素，并根据其内部点与上述形状的关系，更新图4为图5的关系树。

9.系统遍历上面图5的关系树中的所有叶子节点，判断是否是形状元素且是圆形的或者椭圆形的，如果是，则取其与其兄弟叶子进行匹配。比如取到4.8，它被标识为shape，是一个形状元素，同时又是个椭圆形，则将它与4.7进行比较，发现二者的色值相同、高度接近，可以认为是一个文本，于是修改它的标签为text，生成如图6的关系树(黑体加粗部分为本次操作的修改)。

10.继续遍历图6中的所有文本叶子节点，并在兄弟节点之间进行匹配，发现4.4是同一个字符串(如前文所述，4.4其实是有多个文本轮廓)4.7和4.8是同一个字符串，4.10和4.11是同一个字符串，4.13是同一个字符串，4.15是同一个字符串，4.20是同一个字符串，4.21和4.22是同一个字符串，4.24是同一个字符串，对其进行合并，形成图7的关系树。

11.系统生成一个layout.xml文件，并根据图7的关系树各节点的包含关系，填充这个layout.xml，输出至指定目录的layout子目录下。

具体步骤如下：

11.1、首先是根节点，在layout.xml下放置一个线性布局容器LinearLayout(以下简称为L1)，设置长、高为matchparent，方向为纵向。

11.2、4.1标题栏，因为它是有子节点的，系统会判断它是一个容器，因此会在L1内部放置一个线程布局容器L2，L2的宽度为matchparent，高度为实际高度(转换成dp值)，其方向为横向(依据为轮廓识别时获取的轮廓宽度和高度，在此，假设取到的轮廓的宽度和原始图片的宽度一致)。

11.3、4.2返回按钮，系统会根据其位置在L2内部放一个ImageView，背景为输出的返回按钮图片资源。

11.4、4.3标题背景，首先它是一个image，并且有唯一的文本子节点，系统会判断它是一个带背景的文本，同时根据对称性，判断该背景是居中显示的，于是在L2内部继续放一个TextView，设置为居中显示，长宽自适应。

11.5、4.4标题文本，此节点已经在处理其父节点(标题背景)一起处理了，跳过。

11.6、继续对其他元素进行处理，直到所有的节点都被处理完成。

12.系统遍历图7的每一个图像节点，通过像素拷贝的方式复制该节点对应的元素所对应的图片，输出至指定目录的drawable子目录下。

比如4.14支付宝图标，具体过程如下：

12.1、根据支付宝图标的下下左右四个点，从原图上截下对应的方形区域，

12.2、逐个像素描述截下来的方形区域，形成一个m*n的二维数组(m是方形区域的长，n是方形区域的高)，这个二维数组的每一个元素存放着方形区域对应坐标的色值。

12.3、创建另一个m*n的数组，所有元素的值都是0，待赋值。

12.4、由于方形区域比支付宝大，因此系统会遍历原区域里的每一个点，判断其是在支付宝图标内部还是外部：只有在支付宝图标内部(含边界)上的点，才会在新建的数组对应的坐标的位置写入相同的值。

12.5、遍历完原数组，并对新数组进行赋值之后，创建一个和上述方形区域一样大的画布(Bitmap)，把新数组的色值绘制在新的画布上。

12.6、把画布保存到指定的目录，该画布即对应该元素的背景资源图片。

12.7、继续处理其他元素，直到所有的图片都处理完。

13.系统遍历图7的每一个形状节点，输出对应的背景资源图片到指定目录的drawable子目录下。具体步骤如下：

13.1比如对于4.4，系统会遍历其所在区域的每一个像素点，取出其色值，并根据色值分类。

13.2根据色值的数量，判断它的背景色是单色，4.4的色值为0xff3c3ca6，因此该背景图片是可以拉伸的，不需要做成和原区域一样大。

13.3再根据其轮廓线，判断是一个带导角的长方形。

13.4综上，系统会对应4.4这一元素的节点，输出一个可拉伸的、带导角的、纯色0xff3c3ca6的资源图片。

13.5重复以上步骤，直到所有的形状元素都处理完成。

14.开发人员直接到指定的目录下获取对应的资源，直接进行开发。

实施例三

本实施例对应实施例一和实施例二，提供一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能实现上述实施例一或实施例二提供的自动生成布局文件的方法所包含的步骤。具体的步骤在此不进行复述，详情参见实施例一和实施例二的记载。

综上所述，本发明提供的自动生成布局文件的方法、存储介质，节省了大量的时间，减少相关人员的工作量，减少误差，避免人为操作的失误，提高工作效率，加快了应用的开发流程。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.自动生成布局文件的方法，其特征在于，包括：

识别界面效果图，获取各元素；

依据各元素之间的位置关系，创建一包含关系树，同时依据元素的属性配置对应节点的属性；

依据包含关系树，获取所述界面效果图对应的布局文件和资源图片。

2.如权利要求1所述的自动生成布局文件的方法，其特征在于，节点的属性包括父节点、是否有子节点、元素标签、颜色类型、色值和极点坐标；所述元素标签包括形状、图像和文本。

3.如权利要求2所述的自动生成布局文件的方法，其特征在于，所述依据所述包含关系树，获取所述界面效果图对应的布局文件和资源图片，之前，还包括：

遍历包含关系树中元素标签为形状的叶子节点，获取其中外形轮廓为圆形或椭圆形的节点；

逐一将圆形或椭圆形的节点与其元素标签为文本的兄弟节点进行匹配，若匹配成功，则修改当前圆形或椭圆形的节点的元素标签为文本。

4.如权利要求2所述的自动生成布局文件的方法，其特征在于，所述依据所述包含关系树，获取所述界面效果图对应的布局文件和资源图片，之前，还包括：

遍历包含关系树中元素标签为文本的叶子节点，将遍历到的节点与其兄弟节点进行匹配，合并属于同一字符串的节点，并更新包含关系树。

5.如权利要求2所述的自动生成布局文件的方法，其特征在于，依据包含关系树，获取所述界面效果图对应的布局文件，具体为：

以广度优先的方式遍历包含关系树的各个节点，对应根节点输出一个第一线性布局容器；

依据节点的属性，判断当前遍历到的节点是否有子节点；若有，则对应输出一个第二线性布局容器，并依据节点的属性放置在第一线性布局容器内的相应位置；若无，则对应输出一个控件，并依据节点的属性放置在相应位置；

遍历完毕，获取对应界面效果图的布局文件。

6.如权利要求2所述的自动生成布局文件的方法，其特征在于，依据包含关系树，获取所述界面效果图对应的资源图片，具体为：

遍历包含关系树中元素标签为形状或图像的节点，依据节点的属性中的颜色类型、色值和极点坐标，获取元素标签为形状或图像的节点各自对应的资源图片。

7.如权利要求6所述的自动生成布局文件的方法，其特征在于，所述依据节点的属性中的颜色类型、色值和极点坐标，获取元素标签为形状或图像的节点各自对应的资源图片，具体为：

依据各节点的色值和色值分布情况，判断节点的背景对应的是纯色背景、渐变背景还是背景图片；

对应纯色背景、渐变背景和背景图片，配置节点的颜色类型分别为纯色、渐变和无规律；

若节点的颜色类型为单色，则依据其色值和极点坐标输出相应大小且可拉伸的资源图片；

若节点的颜色类型为渐变或无规律，则依据其色值和极点坐标输出原始尺寸的资源图片。

8.如权利要求2所述的自动生成布局文件的方法，其特征在于，所述识别界面效果图，获取各元素，具体为：

通过轮廓检测，提取各元素的轮廓；

获取轮廓边缘不平滑的元素，配置其属性中的元素标签为形状，同时计算获取包括色值、颜色类型和极点坐标的其他属性；获取形状数组；

获取轮廓符合文本特性的元素，配置其属性中的元素标签为文本，同时计算获取包括色值、颜色类型和极点坐标的其他属性；获取文本数组；

配置其他元素的属性中的元素标签为图像，同时计算获取包括色值、颜色类型和极点坐标的其他属性；获取图像数组。

9.如权利要求8所述的自动生成布局文件的方法，其特征在于，所述依据各元素之间的位置关系，创建一包含关系树，同时依据元素的属性配置对应节点的属性，具体为：

遍历形状数组中的各个元素，依据元素的极点坐标计算各个元素之间的位置关系，生成一包含关系树；同时，依据形状数组中的各个元素的属性配置对应节点的属性；

遍历文本数组中的各个元素，依据元素的极点坐标计算其与所述包含关系树中各个节点所对应元素之间的位置关系，更新包含关系树；同时，依据文本数组中的各个元素的属性配置对应节点的属性；

遍历图像数组中的各个元素，依据元素的极点坐标计算其与更新后的包含关系树中各个节点所对应元素之间的位置关系，再次更新包含关系树；同时，依据图像数组中的各个元素的属性配置对应节点的属性。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序在被处理器执行时，能实现上述自动生成布局文件的方法所包含的步骤。