[发明专利]界面模拟方法、装置及集成开发环境系统

说明书

本申请实施例公开了界面模拟方法、装置及集成开发环境系统，所述系统包括：代码编辑器模块以及模拟器模块；代码编辑器模块被配置为：将目标界面关联的多个界面元素的元素标识，以及对应的素材图像提供给所述模拟器模块；模拟器模块被配置为：创建界面模拟区域，并在所述界面模拟区域中对所述多个界面元素的素材图像进行展示，响应于在所述界面模拟区域范围内对所述多个界面元素的素材图像执行的位置拖动和/或图层上下移动操作，确定所述多个界面元素在所述编辑区域中的坐标信息和/或图层关系信息，并返回给所述代码编辑器模块。通过本申请实施例，可以提升界面开发效率，降低设计师与代码开发人员之间的沟通成本。

技术领域

本申请涉及界面开发技术领域，特别是涉及界面模拟方法、装置及集成开发环境系统。

背景技术

在界面设计到开发的过程中，通常需要设计师与代码开发人员进行配合。具体的，首先可以由设计师输出设计稿，具体可以利用界面设计工具进行界面元素的绘制以及布局等设计。生成的设计稿可以以文件的形式提供给代码开发人员，代码开发人员则可以将具体设计稿中的界面元素素材导出，并导入到IDE(Integrated Development Environment，集成开发环境)中与当前界面开发对应的工程包中。之后，代码开发人员可以对设计稿中具体界面元素所在的位置进行测量等操作，确定出界面元素在界面中的坐标等位置信息，然后可以在IDE工具中输入这种坐标信息，并进行界面代码的生成。

但是，在通过上述方式进行界面开发的过程中，经常会存在以下问题：代码开发人员是按照自己对设计稿的理解，来生成界面代码，但是，最终生成的界面效果可能并不完全符合设计师的预期，于是在设计师对界面开发结果进行验收的过程中，可能需要代码开发人员反复修改具体界面元素的坐标，才能达到设计师想要的效果，以至于效率很低。例如，关于设计稿中的某个界面元素，代码开发人员将其坐标设定为(x1，y1)，但是设计师在进行验收时，可能认为该元素在界面中的位置太靠右了，于是让代码开发人员向左移动40像素。代码开发人员通过修改代码调整界面元素的坐标之后，在电脑模拟器上预览效果时，设计师发现，向左移动了40像素后的效果仍然不符合预期，于是可能需要代码开发人员继续向左移动10像素，等等。以上代码修改以及预览的过程中可能需要重复执行多次，才能使得生成的界面符合设计师的预期。

发明内容

本申请提供了界面模拟方法、装置及集成开发环境系统，可以提升界面开发效率，降低设计师与代码开发人员之间的沟通成本。

本申请提供了如下方案：

一种集成开发环境IDE系统，

所述系统包括代码编辑器模块以及模拟器模块；

所述代码编辑器模块被配置为：响应于对处于开发中状态的目标界面的模拟请求，将所述目标界面关联的多个界面元素的元素标识，以及对应的素材图像提供给所述模拟器模块；

所述模拟器模块被配置为：创建界面模拟区域，并在所述界面模拟区域中对所述多个界面元素的素材图像进行展示，响应于在所述界面模拟区域范围内对所述多个界面元素的素材图像执行的位置拖动和/或图层上下移动操作，确定所述多个界面元素在所述编辑区域中的坐标信息和/或图层关系信息，并返回给所述代码编辑器模块；

所述代码编辑器模块还被配置为：根据所述界面元素的元素标识，以及对应的坐标信息和/或图层关系信息，生成所述目标界面的位置排版代码。

一种界面模拟方法，通过集成开发环境IDE系统关联的模拟器程序执行以下处理：

接收所述IDE系统的代码编辑器模块提供的目标界面关联的多个界面元素的元素标识，以及对应的素材图像；

创建界面模拟区域，并在所述界面区域中对所述多个界面元素的素材图像进行展示；