[发明专利]用于将UI图转换成代码文件的方法和装置

说明书

本发明实施例提供一种用于将UI图转换成代码文件的方法和装置，属于界面开发技术领域。该方法包括：确定所述UI图对应的json文件；解析所述json文件，以获取所述UI图中的至少一个元素的相关信息，其中，针对任一元素，所述相关信息包括：元素类型、该元素在所述UI图中的坐标、尺寸及外观属性；针对所述UI图中的至少一个元素，根据所述相关信息确定元素对应的代码文件；以及基于所述UI图中的至少一个元素对应的代码文件，生成所述UI图对应的代码文件。藉此，实现了自动将UI图转换成代码文件。

技术领域

本发明涉及界面开发技术领域，具体地涉及一种用于将UI图转换成代码文件的方法和装置。

背景技术

一个完整的界面开发，一般先由UI设计人员设计出UI稿，开发人员手动开发根据UI稿上标注，设置尺寸、布局和颜色等，完成UI设计的界面。现有技术存在以下缺点：1)开发UI比较耗时；2)开发完后UI校对，会修修改改是一项麻烦且耗时的过程。

发明内容

本发明实施例的目的是提供一种用于将UI图转换成代码文件的方法和装置，其可实现自动将UI图转换成代码文件。

为了实现上述目的，本发明实施例的一个方面提供一种用于将UI图转换成代码文件的方法，该方法包括：确定所述UI图对应的json文件；解析所述json文件，以获取所述UI图中的至少一个元素的相关信息，其中，针对任一元素，所述相关信息包括：元素类型、该元素在所述UI图中的坐标、尺寸及外观属性；针对所述UI图中的至少一个元素，根据所述相关信息确定元素对应的代码文件；以及基于所述UI图中的至少一个元素对应的代码文件，生成所述UI图对应的代码文件。

可选地，针对所述UI图中的至少一个元素中的任一元素，根据所述相关信息确定该元素对应的代码文件包括：根据所述元素类型及预设映射表，确定所述元素类型对应的类型模板，其中，所述预设映射表包括所述元素类型与所述类型模板的对应关系；将所确定出的类型模板生成对应的代码文件；以及根据所述坐标、所述尺寸及所述外观属性，对所确定出的类型模板对应的代码文件进行调整，以将所述坐标、所述尺寸和所述外观属性添加至代码文件中，进而获得该元素对应的代码文件。

可选地，所述UI图为sketch文件，所述确定所述UI图对应的json文件包括：将所述sketch文件转换为zip文件；解压所述zip文件；搜索解压所述zip文件得到的至少一个文件夹，以找到配置文件夹；以及从所述配置文件夹中找到json文件，其中所找到的json文件即为所述UI图对应的json文件。

可选地，在所述确定所述UI图对应的json文件之前，该方法还包括：为所述UI图中的至少一个元素添加辅助标签，其中，针对任一元素，所述辅助标签表明该元素是否包括点击事件，其中，所述相关信息还包括所述辅助标签。

可选地，针对所述UI图中的任一元素，在根据所述元素类型及预设映射表确定出所述元素类型对应的类型模板以及将所确定出的类型模板生成对应的代码文件的情况下，除根据所述坐标、所述尺寸及所述外观属性对所确定出的类型模板对应的代码文件进行调整外，根据所述相关信息确定该元素对应的代码文件还包括：根据所述辅助标签对所确定出的类型模板对应的代码文件进行调整，以将所述辅助标签添加至所述代码文件中。

相应地，本发明实施例的另一方面提供一种用于将UI图转换成代码文件的装置，该装置包括：json文件确定模块，用于确定所述UI图对应的json文件；解析模块，用于解析所述json文件，以获取所述UI图中的至少一个元素的相关信息，其中，针对任一元素，所述相关信息包括：元素类型、该元素在所述UI图中的坐标、尺寸及外观属性；元素代码文件确定模块，用于针对所述UI图中的至少一个元素，根据所述相关信息确定元素对应的代码文件；以及代码文件生成模块，用于基于所述UI图中的至少一个元素对应的代码文件，生成所述UI图对应的代码文件。