CN108108194A - 用户界面编辑方法以及用户界面编辑器 - Google Patents

Abstract

本申请实施例提供了一种用户界面编辑方法以及用户界面编辑器，该方法只需要开发者在模板选择区域中确定目的模板标识，后台程序就可以依据目的模板标识自动获取相应的生成信息，再依据生成信息生成相应的编译模板，并显示在用户界面上。由于本申请实施例提供的用户界面编辑方法，无需开发者选择组件类型、实体元素和纹理元素，因此简化了用户界面的编辑过程。

Description

用户界面编辑方法以及用户界面编辑器

技术领域

本申请涉及用户界面开发技术领域，更具体的涉及一种用户界面编辑方法以及用户界面编辑器。

背景技术

UI(User Interface，用户界面)是游戏应用的重要组成部分，例如装备用户界面、游戏进展用户界面等等。精良的用户界面可以让玩家更好的体验游戏，这就对用户界面的编译有着很高的要求。用户界面往往包括多个编译模板，例如图片、列表、按钮、输入框等等。

目前，开发者主要是通过用户界面编辑器编辑用户界面，在用户界面编译器上编辑用户界面时，开发者需要编写各编译模板，以使得各编译模板呈现在用户界面上，从而完成用户界面的编辑工作，每一编译模板包括一组件、一实体元素、一纹理元素，编写编译模板的过程涉及组件选择、实体元素的选择、纹理元素的选择，而实体元素和纹理元素的种类繁多，导致编译模板过程较为复杂。

发明内容

有鉴于此，本发明提供了一种用户界面编辑方法以及用户界面编辑器，以克服现有技术中的编译模板过程较为复杂的问题。

为实现上述目的，本发明提供如下技术方案：

一种用户界面编辑方法，其特征在于，所述用户界面编辑方法包括：

显示用户界面编辑区域以及模板选择区域，所述模板选择区域展示有多个模板标识，每一所述模板标识对应一编译模板的生成信息；

获取待编辑的用户界面对应的目的页面文件；

在所述用户界面编辑区域中，根据所述目的页面文件渲染得到所述用户界面；

从所述模板选择区域中确定目的模板标识；

获取所述目的模板标识相应的生成信息；

根据所述目的模板标识相应的生成信息生成所述目的模板标识相应的编译模板，并显示在所述用户界面中。

一种用户界面编辑器，其特征在于，包括：

区域显示模块，用于显示用户界面编辑区域以及模板选择区域，所述模板选择区域展示有多个模板标识，每一所述模板标识对应一编译模板的生成信息；

获取页面文件模块，用于获取待编辑的用户界面对应的目的页面文件；

界面渲染模块，用于在所述用户界面编辑区域中，根据所述目的页面文件渲染得到所述用户界面；

确定模板模块，用于从所述模板选择区域中确定目的模板标识；

获取生成信息模块，用于获取所述目的模板标识相应的生成信息；

生成模板模块，用于根据所述目的模板标识相应的生成信息生成所述目的模板标识相应的编译模板，并显示在所述用户界面中。

经由上述的技术方案可知，与现有技术相比，本发明实施例提供了一种用户界面编辑方法，只需要开发者在模板选择区域中确定目的模板标识，后台程序就可以依据目的模板标识自动获取相应的生成信息，再依据生成信息生成相应的编译模板，并显示在用户界面上。由于本申请实施例提供的用户界面编辑方法，无需开发者选择组件类型、实体元素和纹理元素，因此简化了用户界面的编辑过程。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本申请实施例提供的一种用户界面的示意图；

图2为现有技术中的用户界面编辑器的编译界面的示意图；

图3为本申请实施例提供的一种终端的结构框图；

图4为本申请实施例提供的一种用户界面编辑方法的流程示意图；

图5为本申请实施例提供的模板选择区域的一种实现方式的示意图；

图6为本申请实施例提供的用户界面编辑方法中根据生成信息生成目的模板标识相应的编译模板的一种实现方式的信令图；

图7为本申请实施例提供的用户界面编辑方法中在所述用户界面编辑区域中显示或刷新所述用户界面的一种实现方式的信令图；

图8为本申请实施例提供的一种用户界面动态加载的示意图；

图9为本申请实施例提供的一种用户界面编辑方法中确定待编辑的用户界面的一种实现方式的流程示意图；

图10为本申请实施例提供的一种用户界面编辑器中的模糊搜索区域的示意图；

图11为本申请实施例提供的一种组件标识显示区域的示意图；

图12为现有技术中的字体编辑窗口的示意图；

图13为本申请实施例提供的一种字体编辑窗口的示意图；

图14为本申请实施例提供的一种包含字体编辑按钮的模板选择区域的示意图；

图15为本申请实施例提供的以游戏引擎的排版规则设置的组件位置信息，转换为以Unity3D工具的排版规则设置的组件位置信息的方法的流程示意图；

图16为基于游戏引擎的排版规则相应的组件和对齐目标组件的关系示意图；

图17为本申请实施例提供的用户界面编辑器的排版规则相应的组件和其父节点组件的关系示意图；

图18为本申请实施例提供的一种用户界面编辑器的结构示意图；

图19为本申请实施例提供的一种终端的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

用户界面往往包括多个编译模板，例如图片、列表、按钮、输入框等等，如图1所示，为本申请实施例提供的一种用户界面的示意图，该用户界面中包括多个编译模板，如输入框11、升级按钮12、帮助按钮13、关闭按钮14。为了能为游戏玩家提供精良的用户界面，对用户界面的编译有着很高的要求，例如需要确定各个编译模板中组件的类型、实体元素的类型、纹理元素的类型、组件的组件位置信息、组件的分辨率信息等等。

如图2所示，为现有技术中的用户界面编辑器的编译界面的示意图。编译界面包括：页面文件区域201、属性选择区域202、实体文件区域203、纹理文件区域204、标识展示区域205、标识确定区域206、位置信息输入区域207以及用户界面编辑区域208。

开发者在使用现有技术中的用户界面编辑器编辑用户界面的过程包括：

在页面文件区域201中选择页面文件的标识，在本申请实施例中，选择的页面文件的标识是SrpgGodSoulCarryPage，此时用户界面编辑区域208处现实与该页面文件的标识对应的用户界面209，本申请实施例中，用户界面209为空白用户界面。

标识展示区域205会展示SrpgGodSoulCarryPage的页面文件中对应的组件标识，开发者需要从各个组件标识选择自己所需要的组件的类型，在开发者选中一组件标识后，需要点击down按键210，然后选中的组件标识会显示在标识确定区域206。开发者需要选中标识确定区域206中的组件标识(一个组件标识表示一个组件)，估计该组件标识表示的组件在用户界面的位置，然后在位置信息输入区域207，输入估计的位置，这个位置即为编译模板在用户界面显示的位置，通常需要反复调试才能达到理想结果。还可以通过属性选择区域202设置该组件的分辨率等。

确定组件后，再确定组件中的实体元素(一个组件对应一个实体元素)，需要从实体文件区域203选择实体文件的标识，例如可以选取AbnormalAccount，这样，在标识确定区域206就会显示AbnormalAccount对应的实体文件包含的各实体元素的标识，开发者需要从各实体元素的标识中选择自己所需要的实体元素的类型，然后才能确定出一适合当前用户界面的实体元素，开发者可以选中一实体元素的标识，点击down按键210，然后选中的实体元素的标识会显示在标识确定区域206。

确定完毕实体元素后，再确定实体元素对应的纹理元素(一个实体元素可以对应一个或多个纹理元素)，开发者从纹理文件区域204中选择一纹理文件的标识，例如可以选取AchievementPage，此时在标识展示区域205就会显示AchievementPage对应的纹理文件包含的各纹理元素的标识，开发者需要记忆各纹理元素的标识对应的纹理元素的类型，然后才能确定出一适合当前用户界面的纹理元素，开发者可以选中一纹理元素的标识，点击down按键210，然后选中的纹理元素的标识会显示在标识确定区域206。

这样就得到了一个编译模板所需要的生成信息，后台程序会依据生成信息，生成编译模板，并显示在用户界面。

综上，现有技术中对用户界面的编辑需要开发者对编辑流程非常熟悉，且需要从繁多的各组件标识表示的组件、各实体元素的标识对应的实体元素、各纹理元素的标识对应的纹理元素中选择出自己需要的组件、实体元素和纹理元素，且编译过程涉及诸多的手动操作，例如手动输入组件的组件位置信息，操作非常繁琐，用户界面的开发效率较低。

因此，本申请实施例提供了一种用户界面编辑方法，该方法可以应用于终端，例如电脑、智能手机等等。如图3所示，为本申请实施例提供的一种终端的结构框图。

本申请实施例提供的用户界面编辑方法可以基于用户界面框架实现，例如QT(1991年由奇趣科技开发的跨平台C++图形用户界面应用程序开发框架)、Unity3D工具，因此终端可以装载有：用户界面框架，例如QT或者Unity3D工具。而用户界面框架往往携带在游戏引擎中，在终端装载游戏引擎后，终端就会装载有游戏引擎和用户界面框架。

综上，终端可以装载有：游戏引擎31、用户界面框架32以及本申请实施例提供的用户界面编辑器33。

游戏引擎31是指一些已编写好的可编辑电脑游戏***或者一些交互式实时图像应用程序的核心组件。这些***为游戏开发者提供各种编写游戏所需的各种工具，其目的在于让游戏开发者能容易和快速地做出游戏程式而不用由零开始。游戏引擎31可以为2d游戏引擎(例如i2d游戏引擎)、3D游戏引擎(例如Unity3D游戏引擎)等等。

用户界面框架32，例如Unity3D工具是一个用于创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的综合型创作工具。

Unity3D工具中包括UGUI(Unity3D引擎内置的UI框架)。

本申请实施例提供的用户界面编辑器33可以基于用户界面框架32使用，用户界面编辑器的安装路径，可与游戏引擎31中的实体文件和纹理文件的安装路径相同，基于用户界面框架32，打开用户界面编辑器32，这样开发人员就可以使用本申请实施例提供的用户界面编辑器。

用户界面框架32还用于为用户界面编辑器33与游戏引擎31之间提供交互接口，例如Unity3D工具，本申请实施例中将Unity3D工提供的交互接口称为Unity接口。

下面将详细介绍应用户界面编辑方法，如图4所示，为本申请实施例提供的一种用户界面编辑方法的流程示意图，该用户界面编辑方法包括：

步骤S401：显示用户界面编辑区域以及模板选择区域。

所述模板选择区域展示有多个模板标识，每一模板标识对应一编译模板的生成信息。

开发者在终端开启用户界面编辑器后，用户界面编辑器的界面可以显示用户界面编辑区域以及模板选择区域。

如图5，为本申请实施例提供的模板选择区域的一种实现方式的示意图。

模板选择区域中展示有按钮编译模板标识、图片编译模板标识、父节点编译模板标识、列表编译模板标识、背景编译模板标识以及字体编译模板标识。

按钮编译模板标识包括：黄色按钮501、绿色按钮502、透明按钮503；图片编译模板标识包括：空白图片504、道具框505；父节点编译模板标识包括：父节点506；列表编译模板标识包括：列表507；背景编译模板标识包括：面板-深咖色508、面板-咖色509、面板-咖色框510、面板-米色粗框511、面板-米色细框512、面板-米色浅黄框513；字体编译模板标识包括：字-白色无边514、字-白色有边515、字-褐色有边516、字-米色517、字-黄色有边518、字-红色有边519、字-绿色有边520。

开发者可以通过模板标识获知其对应的编译模板的类型。

步骤S402：获取待编辑的用户界面对应的目的页面文件。

一个用户界面对应一页面文件。页面文件中存储有与其对应的用户界面所包含的组件的组件标识、组件的分辨率、组件位置信息、组件中的实体元素的索引信息。

步骤S403：在所述用户界面编辑区域中，根据所述目的页面文件渲染得到所述用户界面。

步骤S404：从模板选择区域中确定目的模板标识。

例如，从图5中选择黄色按钮501。

步骤S405：获取目的模板标识相应的生成信息。

预先设置了各个模板标识与生成信息的对应关系，所以可以通过目的模板标识可以直接获取相应的生成信息。

步骤S406：根据目的模板标识相应的生成信息生成目的模板标识相应的编译模板，并显示在用户界面中。

本申请实施例提供的用户界面编辑方法中，只需要开发者在模板选择区域中确定目的模板标识，后台程序就可以依据目的模板标识自动获取相应的生成信息，再依据生成信息生成相应的编译模板，并显示在用户界面上。由于本申请实施例提供的用户界面编辑方法，无需开发者选择组件类型、实体元素和纹理元素，因此简化了用户界面的编辑过程。

本申请实施例提供的用户界面编辑器可以存储有各用户界面对应的页面文件1，页面文件1可以包括模板标识相应的生成信息，游戏引擎中可以存储有各实体文件2、各纹理文件3。

下面以一具体例子，对页面文件1、实体文件2和纹理文件3进行详细说明，本申请实施例提供但不限于以下技术。

页面文件1、实体文件2和纹理文件3均可以为XML(Extensible Markup Language，可扩展标记语言)文件，本申请实施例可以为每一组件、实体元素、纹理元素实现对应的C#类，然后使用.Net Framework中的Xml Serialization来实现xml读写操作，页面文件可以包括以下内容：

页面文件还可以包括父节点组件和子节点组件之间的父子关系，当某一事件发生时，显示的变化等等。

实体文件可以包括以下内容，一个实体文件中可以包括多个实体元素的标识，以及与各实体元素的标识相应的实体元素。实体元素可以为按钮、图片、列表、文字等等，实体元素的功能是为组件提供外观以及划分功能。

各个实体元素的标识所代表的实体元素的类型如下表：

表1各实体元素的标识与实体元素的类型的对应关系表

G_View	图片
		G_TextView	文本
G_EditText	可编辑文本
		G_GridView	多行列表
G_ListView	单行列表
		G_ViewGroup	视图组合
G_Button	按钮
		G_Toggle	开关

纹理文件可以包括以下内容，一个纹理文件中可以包括多个纹理元素的标识以及与各纹理元素的标识相应的纹理元素。纹理元素决定了组件在用户界面的外观。

上述用户界面编辑方法实施例中获取目的模板标识相应的生成信息可以包括：确定与目的模板标识相应的组件标识，一个组件标识对应一个组件；获取组件标识表示的组件的，组件位置信息以及所对应的实体元素的索引信息，一组件对应一实体元素。实体元素的索引信息包括实体元素所属的实体文件的标识以及实体元素的标识。

下面对在用户界面中添加一编译模板的过程进行详细描述。本申请实施例提供的用户界面编辑方法可以基于用户界面框架实现，例如QT(1991年由奇趣科技开发的跨平台C++图形用户界面应用程序开发框架)、Unity3D工具。下面以基于Unity3D工具为例，对在用户界面中添加一编译模板的过程进行说明。

请参阅图6，为本申请实施例提供的用户界面编辑方法中根据目的模板标识相应的生成信息生成目的模板标识相应的编译模板的一种实现方式的信令图，该方法包括：

步骤S601：用户界面编辑器33根据实体元素的索引信息中的实体文件的标识，生成请求所述实体元素所属的实体文件的指令，并通过Unity接口34发送至游戏引擎31。

请求所述实体元素所属的实体文件的指令携带有该实体元素所属的实体文件的标识。

步骤S602：游戏引擎31接收请求所述实体元素所属的实体文件的指令，从存储的各实体文件的标识对应的实体文件中，获得与请求所述实体元素所属的实体文件的指令中携带的各实体文件的标识相应的实体文件，并通过Unity接口34发送至用户界面编辑器33。

步骤S603：用户界面编辑器33根据所述实体元素的索引信息中的实体元素的标识，从所述实体元素所属的实体文件中确定出所述实体元素及所述实体元素相应的纹理元素的索引信息。

步骤S604：用户界面编辑器33根据所述纹理元素的索引信息中的纹理文件的标识，生成请求所述纹理元素所属的纹理文件的指令，并通过Unity接口34发送至用户界面编辑器33。

请求所述纹理元素所属的纹理文件的指令携带有纹理文件的标识。

步骤S605：游戏引擎31接收请求所述纹理元素所属的纹理文件的指令，从存储的额各纹理文件的标识相应的纹理文件中，确定出与请求所述纹理元素所属的纹理文件的指令中携带的各纹理文件的标识相应的纹理文件，并通过Unity接口34发送至用户界面编辑器33。

步骤S606：用户界面编辑器33根据所述纹理元素的索引信息中的纹理元素的标识，从所述纹理元素所属的纹理文件中获取所述纹理元素。

步骤S607：用户界面编辑器33根据所述组件标识表示的组件，所述组件的组件位置信息，所述实体元素，所述实体元素相应的纹理元素生成所述编译模板，并显示在所述用户界面中。

下面对刷新用户界面，或在用户界面编辑区域渲染用户界面的过程进行详细描述。本申请实施例提供的用户界面编辑方法可以基于用户界面框架实现，例如QT(1991年由奇趣科技开发的跨平台C++图形用户界面应用程序开发框架)、Unity3D工具。下面以基于Unity3D工具为例，对实现刷新用户界面，或在用户界面编辑区域渲染用户界面的方法进行说明。

请参阅图7，为本申请实施例提供的用户界面编辑方法中在所述用户界面编辑区域中显示或刷新用户界面的一种实现方式的信令图，该方法包括：

步骤S701：用户界面编辑器33获取所述目的页面文件中包含的各组件标识表示的组件，的组件位置信息以及所对应的各实体元素的索引信息。

一个组件标识对应一组件，一组件对应一实体元素。

一个用户界面中可能包括多个组件。

步骤S702：用户界面编辑器33根据各实体元素的索引信息中的实体文件的标识，生成请求各实体元素所属的实体文件的指令，并通过Unity接口34发送至游戏引擎31。

请求各实体元素所属的实体文件的指令中携带有所需要的实体文件的标识。

步骤S703：游戏引擎31接收请求各实体元素所属的实体文件的指令，从存储的各实体元素的标识相应的实体文件中，确定出请求各实体元素所属的实体文件的指令中携带的各实体文件的标识对应的实体文件，并通过Unity接口34发送至用户界面编辑器33。

步骤S704：用户界面编辑器33根据各实体元素的索引信息中的实体元素的标识，从各实体元素所属的实体文件中确定相应的实体元素以及各实体元素相应的纹理元素的索引信息。

步骤S705：用户界面编辑器33根据各纹理元素的索引信息中的纹理文件的标识，生成请求各纹理元素所属的纹理文件的指令，并通过Unity接口34发送至游戏引擎31。

请求各纹理元素所属的纹理文件的指令携带有各纹理元素所属的纹理文件的标识。

步骤S706：游戏引擎31接收请求各纹理元素所属的纹理文件的指令，从存储的各纹理文件的标识相应的纹理文件中，确定出请求各纹理元素所属的纹理文件的指令中携带各纹理文件的标识相应的纹理文件，并通过Unity接口34发送至用户界面编辑器33。

步骤S707：用户界面编辑器33根据各纹理元素的索引信息中的纹理元素的标识，从各纹理元素所属的纹理文件中获取相应的纹理元素。

步骤S708：用户界面编辑器33依据各组件标识表示的组件、各组件相应的组件位置信息、各组件相应的实体元素、各实体元素相应的纹理元素，渲染出所述用户界面，并显示在所述用户界面编辑区域。

本申请实施例提供的用户界面编辑方法中，采用图7所示的方法可以实现将用户界面动态加载至用户界面编辑区域，采用图6所示的方法可以实现将编译模板动态加载至用户界面，如图8为本申请实施例提供的一种用户界面动态加载的示意图。

在用户界面编辑区域显示一个用户界面时，首先解析这个用户界面对应的页面文件，把页面文件中包括的各组件信息(每一组件信息包括组件标识、组件标识表示的组件、组件的组件位置信息、与组件标识对应的实体元素的索引信息)储存在内存中(可选的可以数组形式存储)，本申请实施例中以组件信息81、组件信息82和组件信息83为例，即该页面文件中包括三个组件。

然后遍历这些组件信息，从游戏引擎31中获取各组件所需的实体元素所属的实体文件。依据实体元素的索引信息中的实体元素的标识，从获得的各实体文件中遍历相应的实体元素，并加载至内存中，本申请实施例中以实体元素为视图实体元素84以及按钮实体元素85为例，且组件信息81对应视图实体元素84，组件信息82和组件信息83均对应按钮实体元素85。

再次，从游戏引擎31中获得各实体元素所需的纹理元素所属的纹理文件，再依据纹理元素的索引信息中的纹理元素的标识，从各纹理文件中获得相应的纹理文件，本申请实施例以纹理文件为图片86和图片87为例，且视图实体元素84对应图片86，按钮实体元素85对应图片87，并加载到内存中。这样就获取到了绘制一个用户界面所需的全部信息。

从图8中可以看出，内存88中已经存储有组件信息81、组件信息82和组件信息83、视图实体元素84以及按钮实体元素85、图片86和图片87。

本申请实施例可以利用内存中的各组件的组件信息，各组件相应的实体元素，各实体元素相应的纹理元素，用Unity原生的用户界面框架UGUI(Unity3D工具中内置的UI框架)进行绘制。

本申请实施例中，在对用户界面进行刷新操作或显示操作时，都可以采用如图6和图7所示的方法。相对于现有技术中每次进行刷新操作，或显示操作，哪怕只是刷新用户界面上的某一个纹理元素，都要重新从游戏引擎中获取所有的纹理元素的方式，节省了内存空间，又不会导致卡顿，从而进一步提高了用户界面的编译效率。

现有技术中的用户界面编辑方法中，需要开发者在位置信息输入区域207输入组件的位置，组件的位置即为编译模板的位置，本申请实施例中可以通过在用户界面中拖动编译模板，拖动的最终位置信息即为编译模板的位置，具体的，用户界面编辑方法包括：确定在所述用户界面中，拖动所述编译模板的拖动轨迹的最终位置信息；将所述组件标识表示的组件的组件位置信息，更新为所述最终位置信息。

本申请实施例提供的编译模板的位置信息确定方法，不需要开发者预估编译模板的位置信息，可以理解的是，开发者预估计的位置信息，很多情况下不能一步到位，因此会有多次尝试，而本申请实施例通过拖动编译模板的方式，可以边拖动，边查看编译模板在各个位置的展示效果，从而能更加快速且方便的确定出编译模板的位置，后台程序可以自动更新编译模板的位置，不需要开发者预估位置。

从图2可以看出，现有技术中的页面文件区域201展示有所有的页面文件的标识，开发者可以通过滚动条人为浏览各个页面文件的标识，本申请实施例中的用户界面编辑方法中，可以采用模糊搜索的方式确定待编辑的用户界面，从而可以快速找到待编译的用户界面，如图9所示，为本申请实施例提供的一种用户界面编辑方法中确定待编辑的用户界面的一种实现方式的流程示意图，该方法可以包括：

步骤S901：在显示所述用户界面编辑区域以及所述模板选择区域时，显示模糊搜索区域。

步骤S902：获取输入所述模糊搜索区域的字符串。

步骤S903：将所述字符串与各页面文件的标识相匹配。

步骤S904：在所述模糊搜索区域显示标识包含所述字符串的页面文件的标识。

步骤S905：从标识包含所述字符串的页面文件的标识中，确定目的页面文件的标识。

如图10所示，为本申请实施例提供的一种用户界面编辑器中的模糊搜索区域的示意图。

如图10所示，在模糊搜索区域输入的字符串为Gamp，后台程序会搜索并显示包含Gamp的页面文件的标识，例如GampCollectPage.xml、GampPage.xml、GampPageInfo.xml。

步骤S906：依据所述目的页面文件的标识，获得所述目的页面文件。

例如，从GampCollectPage.xml、GampPage.xml、GampPageInfo.xml中选取GampCollectPage.xml作为目的页面文件的标识。

从图2中可以看出，现有技术中的标识展示区域205所有的组件标识均展示在同一层级中，需要开发者区分各个组件标识之间的关系，例如哪个组件是父节点组件，哪个组件是子节点组件。本申请实施例提供的用户界面编辑器的界面展示的组件标识显示区域可以是以层级方式显示有多个组件标识。如图11所示，为本申请实施例提供的一种组件标识显示区域的示意图。

从图11中可以看出，Canvas为父节点组件标识、BLPageStage为Canvas子节点组件的组件标识；bg_animation为BLPageStage的子节点组件的组件标识，依次类推。组件标识为bg_new1的组件、组件标识为bg_new_top的组件、组件标识为bg_new_top1的组件等位于同一层级上，彼此之间没有父子关系，均是组件标识为bg_black的组件的子节点。

可选的，点击▽可以隐藏子节点。例如点击组件标识bg_black则bg_new1组件标识、bg_new_top组件标识、bg_new_top1组件标识等等就会被隐藏。可选的，在隐藏之后，位于组件标识bg_black前面的▽就会变为△，点击△，就会展开组件标识bg_black的子节点。

现有技术中的用户界面编辑器在编辑字体的颜色时，会显示如图12所示的字体编辑窗口，需要开发者在字体颜色输入框121中输入对应的颜色对应的RGB的数值，例如需要设置成白色，则输入255,255,255，这就需要开发者需要获知RGB的各个数字的组合对应什么颜色，例如查表格等，导致用户界面的编辑时间延长。

针对上述问题，本申请实施例提供的用户界面编辑器还提供了字体编辑窗口，请参阅图13，为本申请实施例提供的一种字体编辑窗口的示意图。

模板选择区域还展示有字体编辑按钮，可以通过字体编辑按钮调出字体编辑窗口，如图14所示，为本申请实施例提供的一种包含字体编辑按钮的模板选择区域的示意图。

开发者通过点击图14中的字体编辑按钮141，可以调出字体编辑窗口。

字体编辑窗口中可以展示有颜色条，例如R(Red，红色)颜色条131、G(Green，绿色)颜色条132、B(Blue，蓝色)颜色条133和A(Alpha，透明度)透明度条134，开发者可以通过点击颜色条相应的位置，选取相应的颜色，可选的，可以在开发者点击的位置上显示如图13所示的定位标识135，以提示开发者当前点击的位置，然后颜色预览窗口可以显示开发者选中的颜色，例如图13中白色圆圈136所示。

具体的，用户界面编辑方法还包括：接收到点击所述字体编辑按钮的指令时，显示字体编辑窗口，所述字体编辑窗口展示有颜色预览窗口以及颜色条；获取点击所述颜色条的位置信息；在所述颜色预览窗口中显示与所述位置信息对应的颜色。

现有技术中，开发者可以利用属性选择区域202设置编译模板的分辨率，开发者需要从各个属性的标识对应的属性信息中找打自己所需要的属性信息，导致用户界面的编辑时间延长，基于这个问题，本申请实施例还提供了以下方法：检测到缩放所述编译模板指令时，确定所述编译模板的最终分辨率信息；将所述编译模板相应的分辨率信息，更新为所述最终分辨率信息。

本申请实施例提供的用户界面编辑器中存储有多个页面文件，各页面文件中均包括组件的组件位置信息，可选的，组件位置信息可以是依据游戏引擎的排版规则设置的，而游戏引擎的排版规则与Unity3D工具的排版规则不同，为了使得用户界面编辑器能够基于Unity3D工具，正常将各个编译模板显示在用户界面上，需要将以游戏引擎的排版规则设置的组件位置信息，转换为以Unity3D工具的排版规则设置的组件位置信息。

可选的，每一组件的组件位置信息包括：对齐目标组件的锚点坐标、组件相对于所述对齐目标组件的锚点坐标的对齐方向、组件的顶边分别与所述对齐目标组件的顶边和底边的长度距离以及组件的左边分别与所述对齐目标组件的左边和右边的长度距离。如图15所示，为本申请实施例提供的以游戏引擎的排版规则设置的组件位置信息，转换为以Unity3D工具的排版规则设置的组件位置信息的方法的流程示意图，该方法包括：

步骤S1501：从所述组件的顶边分别与所述对齐目标组件的顶边和底边的长度距离以及组件的左边分别与所述对齐目标组件的左边和右边的长度距离中，确定与所述对齐方向相应的有效长度数据。

页面文件中包含的组件位置信息包括margin＝"left,top,right,bottom"，其中，left为组件的左边与所述对齐目标组件的左边的长度距离；top为组件的顶边与对齐目标组件的顶边的长度距离；right为组件的左边与所述对齐目标组件的右边的长度距离；bottom为组件的顶边与对齐目标组件的底边的长度距离。

游戏引擎的排版规则包括：对齐目标组件的锚点坐标、组件相对于对齐目标组件的锚点的对齐方式、left,top,right,bottom等3各因素决定。

游戏引擎的对齐方式由横向和纵向两个变量组成，其中横向对齐可能是左对齐、右对齐、居中对齐、左边对齐、右边对齐；纵向对齐可能是上对齐、下对齐、居中对齐、上方对齐、下方对齐。

假设组件的对齐方式中横向对齐为左对齐，纵向对齐为上对齐，则本申请实施例中的有效长度数据即为组件的顶边与对齐目标的顶边的长度距离，以及组件的左边与对齐目标的左边的长度距离。

步骤S1502：判断所述对齐目标组件是否为所述组件的父节点组件。

由于在游戏引擎31中，对齐目标组件可以是组件的父节点组件，也可以不是，但是在Unity3D的排版规则中，对齐目标组件必须是组件的父节点组件。因此需要判断对齐目标组件和组件之间的关系。

步骤S1503：当所述对齐目标组件为所述组件的父节点组件时，依据所述对齐目标组件的锚点坐标以及所述有效长度数据，确定出所述组件的中心点与所述对齐目标组件的中心点的相对位置信息。

如图16所示，为基于游戏引擎的排版规则相应的组件和对齐目标组件的关系示意图。假设对齐目标组件161的锚点162的锚点坐标为该对齐目标组件161的左顶点坐标，组件163的对齐方式中横向对齐为左对齐，纵向对齐为上对齐。组件的顶边与对齐目标的顶边的长度距离为top，以及组件的左边与对齐目标的左边的长度距离为left。

对齐目标组件161用虚线框表示，组件163用实线框表示。

可选的，假设Unity3D工具的排版规则为：父节点组件中心点和组件自身的中心点之间的相对位置信息，父节点组件的坐标为(x，y)，如图17，为本申请实施例提供的用户界面编辑器的排版规则相应的组件和其父节点组件的关系示意图。

父节点组件171用虚线框表示，组件163用实线框表示。

则，转换后的组件的坐标(x1,y1)为：

x1＝x+left–父节点组件的组件宽度/2+组件自身的宽度/2

y1＝y+top-父节点组件的组件高度/2+组件自身高度/2。

父节点的组件宽度用W1表示，父节点组件的组件高度用H1表示；组件自身的宽度用W2表示，组件自身的高度用H2表示。

步骤S1504：当所述对齐目标组件不是所述组件的父节点组件时，获取所述组件的父节点的锚点坐标，依据所述父节点的锚点坐标、所述有效长度数据、所述对齐目标组件的锚点坐标，确定出所述组件的中心点与所述父节点组件的中心点的相对位置信息。

相应的，依据各组件标识表示的组件、各组件相应的组件位置信息、各组件相应的实体元素、各实体元素相应的纹理元素，渲染出所述用户界面，并显示在所述用户界面编辑区域，包括：依据各组件标识表示的组件、各组件的中心点与相应的父节点组件的中心点的相对位置信息、各组件相应的实体元素、各实体元素相应的纹理元素，渲染出所述用户界面，并显示在所述用户界面编辑区域。

相应的，根据所述组件标识表示的组件，所述组件的组件位置信息，所述实体元素，所述实体元素相应的纹理元素生成所述编译模板，并显示在所述用户界面，包括：根据所述组件标识表示的组件，所述组件的中心点与相应的父节点组件的中心点的相对位置信息，所述实体元素，所述实体元素相应的纹理元素生成所述编译模板，并显示在所述用户界面。

可以参照上述公式的原理推导相应的公式，在此不再赘述。

为了能够更加快速的获取纹理元素，可以将一纹理文件中的各个纹理元素以设定分辨率的纹理图像进行存储。设定分辨率可以为1024*1024。

纹理文件可以是一系列纹理元素的集合，每个纹理元素储存一张图片的分辨率、格式、纹理元素的标识。位于同一个纹理文件中的图片可以被合并到一张分辨率为1024*1024的纹理图片上，以提高获取纹理文件的运行效率。一般同一个纹理文件中储存几个相似的用户界面所使用的图片，如果这些图片合并后分辨率超过1024*1024，则需要将它们拆分到不同的纹理文件中，若合并后的分辨率未超过1024*1024，则以无效图片进行填充，以形成1024*1024的纹理图片。

本申请实施例中的用户界面编辑器可以为开发者呈现一个便于编译的用户界面编译界面，允许开发者在用户界面上拖拽编译模板、缩放编译模板、增删编译模板等操作，最后将修改结果存储至页面文件中。

在删除用户界面中已有的编译模板时，可以在用户界面中选中需要删除的编译模板，执行删除操作，删除编译模板后，该用户界面对应的页面文件中相应的组件标识、组件标识表示的组件、该组件的位置信息、该组件相应的实体元素的索引信息都会被删除。

本申请实施例提供的用户界面编辑器，当开发者在模板选择区域选取一编译模板后，如图14所示，会在模板选择区域中显示该编译模板对应的组件的对齐方式、组件对应的实体元素、该实体元素的实体元素的标识，当实体元素为字体时，还可以显示字体的颜色和字号。

开发者可以在模板选择区域中的相应位置，进行修改，例如将实体元素“神魂名称+1Lv 66战力999999999”修改为“神魂名称+1Lv 66战力00000000”，将对齐方式修改为“left，top”；将实体元素的标识修改为Ziti_still_soulname1等等。在开发者点击保存后，会将这些信息更新至页面文件、实体文件中。

若实体文件中包括Ziti_still_soulname1这个实体元素的标识，而与该实体元素的标识对应的实体元素不是“神魂名称+1Lv 66战力00000000”，则会将实体文件中的实体元素的标识Ziti_still_soulname1对应的实体元素更新为“神魂名称+1Lv66战力00000000”。

若实体文件中不包括Ziti_still_soulname1这个实体元素的标识，则可以视为开发者新建一个实体元素，可以展示实体文件选择窗口，让开发者选择新建的实体元素存储于哪一实体文件中。

本申请实施例提供的用户界面编辑器可以为各种游戏开发用户界面，例如部落守卫战手游等游戏。

下面对本申请实施例提供的用户界面编辑器的结构进行介绍，下文描述的用户界面编辑器中的各个模块可以与上文描述的用户界面编辑方法各个步骤相互对应参照。

请参阅图18，为本申请实施例提供的一种用户界面编辑器的结构示意图，该用户界面编辑器包括：区域显示模块1801、获取页面文件模块1802、界面渲染模块1803、确定模板模块1804、获取生成信息模块1805以及生成模板模块1806，其中：

区域显示模块1801，用于显示用户界面编辑区域以及模板选择区域，所述模板选择区域展示有多个模板标识，每一所述模板标识对应一编译模板的生成信息。

获取页面文件模块1802，用于获取待编辑的用户界面对应的目的页面文件。

界面渲染模块1803，用于在所述用户界面编辑区域中，根据所述目的页面文件渲染得到所述用户界面。

确定模板模块1804，用于从所述模板选择区域中确定目的模板标识。

获取生成信息模块1805，用于获取所述目的模板标识相应的生成信息。

生成模板模块1806，用于根据所述目的模板标识相应的生成信息生成所述目的模板标识相应的编译模板，并显示在所述用户界面中。

可选的，获取生成信息模块1805包括：

确定组件标识单元，用于确定与所述目的模板标识相应的组件标识，一个组件标识对应一个组件。

获取组件参数单元，用于获取所述组件标识表示的组件的，组件位置信息以及所对应的实体元素的索引信息，一组件对应一实体元素。

可选的，生成模板模块1806包括：

请求实体文件单元，用于根据所述实体元素的索引信息中的实体文件的标识，请求所述实体元素所属的实体文件。

确定实体参数单元，用于根据所述实体元素的索引信息中的实体元素的标识，从所述实体元素所属的实体文件中确定出所述实体元素及所述实体元素相应的纹理元素的索引信息。

请求纹理文件单元，用于根据所述纹理元素的索引信息中的纹理文件的标识，请求所述纹理元素所属的纹理文件。

获取纹理元素单元，用于根据所述纹理元素的索引信息中的纹理元素的标识，从所述纹理元素所属的纹理文件中获取所述纹理元素。

生成模板单元，用于根据所述组件标识表示的组件，所述实体元素，所述实体元素相应的纹理元素生成所述编译模板。

显示模板单元，用于根据所述组件位置信息，在所述用户界面显示生成的编译模板。

可选的，用户界面编辑器还包括：

确定位置信息模块，用于确定在所述用户界面中，拖动所述编译模板的拖动轨迹的最终位置信息。

更新位置信息模块，用于将所述组件标识表示的组件的组件位置信息，更新为所述最终位置信息。

可选的，获取页面文件模块1802包括：

显示模糊搜索区域单元，用于在显示所述用户界面编辑区域以及所述模板选择区域时，显示模糊搜索区域。

获取字符串单元，用于获取输入所述模糊搜索区域的字符串。

匹配单元，用于将所述字符串与各页面文件的标识相匹配。

显示相匹配用户界面单元，用于在所述模糊搜索区域显示标识包含所述字符串的页面文件的标识。

确定待编辑用户界面单元，用于从标识包含所述字符串的页面文件的标识中，确定目的页面文件的标识。

获取目的页面文件单元，用于依据所述目的页面文件的标识，获得所述目的页面文件。

可选的，界面渲染模块1803包括：

获取页面文件内容单元，用于获取所述目的页面文件中包含的各组件标识表示的组件，的组件位置信息以及所对应的各实体元素的索引信息，一个组件标识对应一组件，一组件对应一实体元素。

请求实体文件单元，用于根据各实体元素的索引信息中的实体文件的标识，请求各实体元素所属的实体文件。

确定实体参数单元，用于根据各实体元素的索引信息中的实体元素的标识，从各实体元素所属的实体文件中确定相应的实体元素以及各实体元素相应的纹理元素的索引信息。

请求纹理文件单元，用于根据各纹理元素的索引信息中的纹理文件的标识，请求各纹理元素所属的纹理文件。

获取纹理元素单元，用于根据各纹理元素的索引信息中的纹理元素的标识，从各纹理元素所属的纹理文件中获取相应的纹理元素。

渲染用户界面单元，用于依据各组件标识表示的组件、各组件相应的组件位置信息、各组件相应的实体元素、各实体元素相应的纹理元素，渲染出所述用户界面，并显示在所述用户界面编辑区域。

可选的，每一组件的组件位置信息包括：对齐目标组件的锚点坐标，对于一组件的组件位置信息，所述用户界面编辑器还包括：

判断模块，用于判断所述对齐目标组件是否为所述组件的父节点组件。

第一确定位置信息模块，用于当所述对齐目标组件为所述组件的父节点组件时，依据所述组件位置信息，确定出所述组件的中心点与所述对齐目标组件的中心点的相对位置信息。

第二确定位置信息模块，用于当所述对齐目标组件不是所述组件的父节点组件时，获取所述组件的父节点组件的锚点坐标，依据所述父节点组件的锚点坐标、所述组件位置信息，确定出所述组件的中心点与所述父节点组件的中心点的相对位置信息。

可选的，每一组件的组件位置信息还包括：组件相对于所述对齐目标组件的锚点坐标的对齐方向、组件的顶边分别与所述对齐目标组件的顶边和底边的长度距离以及组件的左边分别与所述对齐目标组件的左边和右边的长度距离，所述第一确定位置信息模块包括：

确定有效数据单元，用于从所述组件的顶边分别与所述对齐目标组件的顶边和底边的长度距离以及组件的左边分别与所述对齐目标组件的左边和右边的长度距离中，确定与所述对齐方向相应的有效长度数据。

第一确定位置信息单元，用于依据所述对齐目标组件的锚点坐标以及所述有效长度数据，确定出所述组件的中心点与所述对齐目标组件的中心点的相对位置信息。

可选的，第二确定位置信息模块包括：

第二确定位置信息单元，用于依据所述对齐目标组件的锚点坐标、所述父节点组件的锚点坐标以及所述有效长度数据，确定出所述组件的中心点与所述父节点组件的中心点的相对位置信息。

可选的，模板选择区域还展示有字体编辑按钮，用户界面编辑器还包括：

显示字体编辑窗口模块，用于接收到点击所述字体编辑按钮的指令时，显示字体编辑窗口，所述字体编辑窗口展示有颜色预览窗口以及颜色条。

获取颜色条位置信息模块，用于获取点击所述颜色条的位置信息。

显示颜色模块，用于在所述颜色预览窗口中显示与所述位置信息对应的颜色。

可选的，用户界面编辑器还包括：

确定分辨率信息模块，用于检测到缩放所述编译模板指令时，确定所述编译模板的最终分辨率信息。

更新分辨率信息模块，用于将所述编译模板相应的分辨率信息，更新为所述最终分辨率信息。

本申请实施例还提供了一种终端，该终端可以装在有上述的用户界面编辑器。

如图19，为本申请实施例提供的一种终端的结构示意图，终端可以包括：处理器191、通信接口192、存储器193和通信总线194。

其中处理器191、通信接口192、存储器193通过通信总线194完成相互间的通信。

可选的，通信接口192可以为通信模块的接口，如GSM模块的接口。

处理器191，用于执行程序。

处理器191可能是一个中央处理器CPU，或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。

存储器193，用于存放程序。

程序可以包括程序代码，所述程序代码包括计算机操作指令。在本发明实施例中，程序可以包括上述用户界面编辑器对应的程序。

存储器193可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。

其中，程序可具体用于：

显示用户界面编辑区域以及模板选择区域，所述模板选择区域展示有多个模板标识，每一所述模板标识对应一编译模板的生成信息；

获取待编辑的用户界面对应的目的页面文件，一用户界面对应一页面文件；

在所述用户界面编辑区域中，根据所述目的页面文件渲染得到所述用户界面；

从所述模板选择区域中确定目的模板标识；

获取所述目的模板标识相应的生成信息；

根据所述目的模板标识相应的生成信息生成所述目的模板标识相应的编译模板，并显示在所述用户界面中。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (20)

1.一种用户界面编辑方法，其特征在于，包括：

显示用户界面编辑区域以及模板选择区域，所述模板选择区域展示有多个模板标识，每一所述模板标识对应一编译模板的生成信息；

获取待编辑的用户界面对应的目的页面文件，一用户界面对应一页面文件；

在所述用户界面编辑区域中，根据所述目的页面文件渲染得到所述用户界面；

从所述模板选择区域中确定目的模板标识；

获取所述目的模板标识相应的生成信息；

根据所述目的模板标识相应的生成信息生成所述目的模板标识相应的编译模板，并显示在所述用户界面中。

2.根据权利要求1所述用户界面编辑方法，其特征在于，所述获取所述目的模板标识相应的生成信息包括：

确定与所述目的模板标识相应的组件标识，一个组件标识对应一个组件；

获取所述组件标识表示的组件的，组件位置信息以及所对应的实体元素的索引信息，一组件对应一实体元素。

3.根据权利要求2所述用户界面编辑方法，其特征在于，所述根据所述目的模板标识相应的生成信息生成所述目的模板标识相应的编译模板，并显示在所述用户界面中包括：

根据所述实体元素的索引信息中的实体文件的标识，请求所述实体元素所属的实体文件；

根据所述实体元素的索引信息中的实体元素的标识，从所述实体元素所属的实体文件中确定出所述实体元素及所述实体元素相应的纹理元素的索引信息；

根据所述纹理元素的索引信息中的纹理文件的标识，请求所述纹理元素所属的纹理文件；

根据所述纹理元素的索引信息中的纹理元素的标识，从所述纹理元素所属的纹理文件中获取所述纹理元素；

根据所述组件标识表示的组件，所述组件的组件位置信息，所述实体元素，所述实体元素相应的纹理元素生成所述编译模板，并显示在所述用户界面中。

4.根据权利要求2至3任一所述用户界面编辑方法，其特征在于，还包括：

确定在所述用户界面中，拖动所述编译模板的拖动轨迹的最终位置信息；

将所述组件标识表示的组件的组件位置信息，更新为所述最终位置信息。

5.根据权利要求1所述用户界面编辑方法，其特征在于，所述获取待编辑的用户界面对应的目的页面文件包括：

在显示所述用户界面编辑区域以及所述模板选择区域时，显示模糊搜索区域；

获取输入所述模糊搜索区域的字符串；

将所述字符串与各页面文件的标识相匹配；

在所述模糊搜索区域显示标识包含所述字符串的页面文件的标识；

从标识包含所述字符串的页面文件的标识中，确定目的页面文件的标识；

依据所述目的页面文件的标识，获得所述目的页面文件。

6.根据权利要求1、2、3或5所述用户界面编辑方法，其特征在于，所述在所述用户界面编辑区域中，根据所述目的页面文件渲染得到用户界面包括：

获取所述目的页面文件中包含的各组件标识表示的组件，的组件位置信息以及所对应的各实体元素的索引信息，一个组件标识对应一组件，一组件对应一实体元素；

根据各实体元素的索引信息中的实体文件的标识，请求各实体元素所属的实体文件；

根据各实体元素的索引信息中的实体元素的标识，从各实体元素所属的实体文件中确定相应的实体元素以及各实体元素相应的纹理元素的索引信息；

根据各纹理元素的索引信息中的纹理文件的标识，请求各纹理元素所属的纹理文件；

根据各纹理元素的索引信息中的纹理元素的标识，从各纹理元素所属的纹理文件中获取相应的纹理元素；

依据各组件标识表示的组件、各组件相应的组件位置信息、各组件相应的实体元素、各实体元素相应的纹理元素，渲染出所述用户界面，并显示在所述用户界面编辑区域。

7.根据权利要求6所述用户界面编辑方法，其特征在于，每一组件的组件位置信息包括：对齐目标组件的锚点坐标，所述用户界面编辑方法还包括：

判断所述对齐目标组件是否为与其相应的组件的父节点组件；

当所述对齐目标组件为所述组件的父节点组件时，依据所述组件位置信息，确定出所述组件的中心点与所述对齐目标组件的中心点的相对位置信息；

当所述对齐目标组件不是所述组件的父节点组件时，获取所述组件的父节点组件的锚点坐标，依据所述父节点组件的锚点坐标、所述组件位置信息，确定出所述组件的中心点与所述父节点组件的中心点的相对位置信息。

8.根据权利要求7所述用户界面编辑方法，其特征在于，每一组件的组件位置信息还包括：组件相对于所述对齐目标组件的锚点坐标的对齐方向、组件的顶边分别与所述对齐目标组件的顶边和底边的长度距离以及组件的左边分别与所述对齐目标组件的左边和右边的长度距离，所述依据所述组件位置信息，确定出所述组件的中心点与所述对齐目标组件的中心点的相对位置信息包括：

从所述组件的顶边分别与所述对齐目标组件的顶边和底边的长度距离以及组件的左边分别与所述对齐目标组件的左边和右边的长度距离中，确定与所述对齐方向相应的有效长度数据；

依据所述对齐目标组件的锚点坐标以及所述有效长度数据，确定出所述组件的中心点与所述对齐目标组件的中心点的相对位置信息。

9.根据权利要求8所述用户界面编辑方法，其特征在于，所述依据所述父节点的锚点坐标、所述组件位置信息，确定出所述组件的中心点与所述父节点组件的中心点的相对位置信息包括：

依据所述对齐目标组件的锚点坐标、所述父节点组件的锚点坐标以及所述有效长度数据，确定出所述组件的中心点与所述父节点组件的中心点的相对位置信息。

10.根据权利要求7所述用户界面编辑方法，其特征在于，所述纹理元素为图片，所述纹理文件中的各个纹理元素以设定分辨率的纹理图像进行存储。

11.根据权利要求1所述用户界面编辑方法，其特征在于，所述用户界面编辑方法还包括：

在显示所述用户界面编辑区域以及所述模板选择区域时，显示组件标识显示区域，所述组件标识显示区域以层级方式显示有多个组件标识。

12.根据权利要求1所述用户界面编辑方法，其特征在于，所述模板选择区域还展示有字体编辑按钮，所述用户界面编辑方法还包括：

接收到点击所述字体编辑按钮的指令时，显示字体编辑窗口，所述字体编辑窗口展示有颜色预览窗口以及颜色条；

获取点击所述颜色条的位置信息；

在所述颜色预览窗口中显示与所述位置信息对应的颜色。

13.根据权利要求1所述用户界面编辑方法，其特征在于，还包括：

检测到缩放所述编译模板指令时，确定所述编译模板的最终分辨率信息；

将所述编译模板相应的分辨率信息，更新为所述最终分辨率信息。

14.一种用户界面编辑器，其特征在于，包括：

区域显示模块，用于显示用户界面编辑区域以及模板选择区域，所述模板选择区域展示有多个模板标识，每一所述模板标识对应一编译模板的生成信息；

获取页面文件模块，用于获取待编辑的用户界面对应的目的页面文件；

界面渲染模块，用于在所述用户界面编辑区域中，根据所述目的页面文件渲染得到所述用户界面；

确定模板模块，用于从所述模板选择区域中确定目的模板标识；

获取生成信息模块，用于获取所述目的模板标识相应的生成信息；

生成模板模块，用于根据所述目的模板标识相应的生成信息生成所述目的模板标识相应的编译模板，并显示在所述用户界面中。

15.根据权利要求14所述用户界面编辑器，其特征在于，所述获取生成信息模块包括：

确定组件标识单元，用于确定与所述目的模板标识相应的组件标识，一个组件标识对应一个组件；

获取组件参数单元，用于获取所述组件标识表示的组件的，组件位置信息以及所对应的实体元素的索引信息，一组件对应一实体元素。

16.根据权利要求15所述用户界面编辑器，其特征在于，所述生成模板模块包括：

请求实体文件单元，用于根据所述实体元素的索引信息中的实体文件的标识，请求所述实体元素所属的实体文件；

确定实体参数单元，用于根据所述实体元素的索引信息中的实体元素的标识，从所述实体元素所属的实体文件中确定出所述实体元素及所述实体元素相应的纹理元素的索引信息；

请求纹理文件单元，用于根据所述纹理元素的索引信息中的纹理文件的标识，请求所述纹理元素所属的纹理文件；

获取纹理元素单元，用于根据所述纹理元素的索引信息中的纹理元素的标识，从所述纹理元素所属的纹理文件中获取所述纹理元素；

生成模板单元，用于根据所述组件标识表示的组件，所述实体元素，所述实体元素相应的纹理元素生成所述编译模板；

显示模板单元，用于根据所述组件位置信息，在所述用户界面显示生成的编译模板。

17.根据权利要求14至16任一所述用户界面编辑器，其特征在于，所述界面渲染模块包括：

获取页面文件内容单元，用于获取所述目的页面文件中包含的各组件标识表示的组件，的组件位置信息以及所对应的各实体元素的索引信息，一个组件标识对应一组件，一组件对应一实体元素；

请求实体文件单元，用于根据各实体元素的索引信息中的实体文件的标识，请求各实体元素所属的实体文件；

确定实体参数单元，用于根据各实体元素的索引信息中的实体元素的标识，从各实体元素所属的实体文件中确定相应的实体元素以及各实体元素相应的纹理元素的索引信息；

请求纹理文件单元，用于根据各纹理元素的索引信息中的纹理文件的标识，请求各纹理元素所属的纹理文件；

获取纹理元素单元，用于根据各纹理元素的索引信息中的纹理元素的标识，从各纹理元素所属的纹理文件中获取相应的纹理元素；

渲染用户界面单元，用于依据各组件标识表示的组件、各组件相应的组件位置信息、各组件相应的实体元素、各实体元素相应的纹理元素，渲染出所述用户界面，并显示在所述用户界面编辑区域。

18.根据权利要求17所述用户界面编辑器，其特征在于，每一组件的组件位置信息包括：对齐目标组件的锚点坐标，所述用户界面编辑器还包括：

判断模块，用于判断所述对齐目标组件是否为与其相应的组件的父节点组件；

第一确定位置信息模块，用于当所述对齐目标组件为所述组件的父节点组件时，依据所述组件位置信息，确定出所述组件的中心点与所述对齐目标组件的中心点的相对位置信息；

第二确定位置信息模块，用于当所述对齐目标组件不是所述组件的父节点组件时，获取所述组件的父节点组件的锚点坐标，依据所述父节点组件的锚点坐标、所述组件位置信息，确定出所述组件的中心点与所述父节点组件的中心点的相对位置信息。

19.根据权利要求18所述用户界面编辑器，其特征在于，每一组件的组件位置信息还包括：组件相对于所述对齐目标组件的锚点坐标的对齐方向、组件的顶边分别与所述对齐目标组件的顶边和底边的长度距离以及组件的左边分别与所述对齐目标组件的左边和右边的长度距离，所述第一确定位置信息模块包括：

确定有效数据单元，用于从所述组件的顶边分别与所述对齐目标组件的顶边和底边的长度距离以及组件的左边分别与所述对齐目标组件的左边和右边的长度距离中，确定与所述对齐方向相应的有效长度数据；

第一确定位置信息单元，用于依据所述对齐目标组件的锚点坐标以及所述有效长度数据，确定出所述组件的中心点与所述对齐目标组件的中心点的相对位置信息。

20.根据权利要求19所述用户界面编辑器，其特征在于，所述第二确定位置信息模块包括：

第二确定位置信息单元，用于依据所述对齐目标组件的锚点坐标、所述父节点组件的锚点坐标以及所述有效长度数据，确定出所述组件的中心点与所述父节点组件的中心点的相对位置信息。