CN107015795A - 一种绘制用户界面的方法及装置 - Google Patents

Abstract

本申请实施例公开了一种绘制用户界面的方法及装置。预先在客户端中定义UI对应的数据结构，所述数据结构是利用客户端的native代码定义的，该数据结构一方面可以表达该UI的绘制数据，另一方面可以被客户端调用，以作为执行绘制该UI操作的对象。通过本申请实施例，不必预先在客户端中写入大量绘制代码，也不必频繁发布客户端的新版本，就可以通过服务端下发不同的配置参数来实现对客户端的UI的动态定制，这样减轻了用户使用的终端的负担，也提升了用户使用客户端的便利性。

Description

一种绘制用户界面的方法及装置

技术领域

本申请涉及软件技术领域，尤其涉及一种绘制用户界面的方法及装置。

背景技术

客户端的用户界面(User Interface，UI)是用户与客户端进行交互时，用户操作的对象。当用户打开UI时，客户端根据UI对应的绘制代码，将UI绘制到用户使用的终端(如手机)的屏幕上。用户在使用客户端时，可以打开多个不同的UI，不同的UI对应的绘制代码是不同的。

出于业务灵活性的需要，开发人员总是希望UI尽可能地多样化。但是，由于绘制代码属于客户端的原生代码(native代码)，而客户端只能执行native代码，也就是只能根据预先写入到客户端的绘制代码进行UI的绘制，因此，为了业务的灵活性，开发人员常常只能在客户端中尽可能多地写入多种绘制代码，或频繁地发布客户端的新版本(包含更新的绘制代码)要求用户安装。

但是，这样做要么导致了客户端越来越臃肿，对用户使用的终端造成很大的负担，要么要求用户频繁安装新版本的客户端，造成了用户使用客户端的不便。

发明内容

本申请实施例提供一种绘制用户界面的方法及装置，以减轻用户使用的终端的负担以及提升用户使用客户端的便利性。

为解决上述技术问题，本申请实施例是这样实现的：

本申请实施例提供的一种绘制用户界面的方法，预先在客户端中定义用户界面UI对应的数据结构，所述方法包括：

接收服务端下发的UI对应的配置参数；

根据所述UI对应的配置参数配置所述UI对应的数据结构；

根据配置后的所述UI对应的数据结构，确定所述UI对应的绘制数据；

根据所述绘制数据，绘制所述UI。

本申请实施例提供的一种绘制用户界面的装置，预先在所述装置中定义用户界面UI对应的数据结构，所述装置包括：

接收模块，接收服务端下发的UI对应的配置参数；

配置模块，根据所述UI对应的配置参数配置所述UI对应的数据结构；

确定模块，根据配置后的所述UI对应的数据结构，确定所述UI对应的绘制数据；

绘制模块，根据所述绘制数据，绘制所述UI。

由以上本申请实施例提供的技术方案可见，在本申请实施例中，预先在客户端中定义UI对应的数据结构，所述数据结构是利用客户端的native代码定义的，客户端能够将所述数据结构作为执行的对象。当需要绘制某个UI时，通过服务端下发该UI对应的配置参数，客户端根据接收到的配置参数配置该UI对应的数据结构，使得该数据结构一方面可以表达该UI的绘制数据，另一方面可以被客户端调用，以作为执行绘制该UI操作的对象。如此以来，客户端可以根据配置后的数据结构确定该UI的绘制数据，进行UI绘制。通过本申请实施例，不必预先在客户端种写入大量绘制代码，也不必频繁发布客户端的新版本，就可以通过服务端下发不同的配置参数来实现对客户端的UI的动态定制，这样减轻了用户使用的终端的负担，也提升了用户使用客户端的便利性。

附图说明

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

图1是本申请提供的一种绘制用户界面的方法流程图；

图2是本申请实施例提供的视图块的结构示意图；

图3是本申请实施例提供的视图块的布局示意图；

图4是本申请实施例提供的一种绘制用户界面的装置示意图。

具体实施方式

本申请实施例提供一种交互控件的调用方法及装置。

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

如背景技术所述，现有的绘制客户端的用户界面(User Interface，UI)的方法，是通过执行预先写入客户端中的绘制代码来实现的，这是因为客户端通常只能执行原生代码(native代码)，native代码包含用于绘制用户界面的绘制代码，是合乎实际的。

开发人员想要在客户端上实现多样化的UI，可以预先在客户端中写入对应与各种UI一一对应的绘制代码，这样工作量是很大的，也造成客户端过于臃肿。如果不采用上述方式，开发人员就只能频发发布客户端的新版本，要求用户安装新版本的客户端，来实现对客户端的UI进行定制和更新，但是这样会给用户使用客户端造成很大的不便。

可见，如何设计一种绘制客户端的新方法，能够在避免造成上述两方面问题的前提下，实现UI的多样化和可定制，是本技术领域丞待解决的技术问题。而本领域技术人员的解决思路通常是考虑如何通过服务端下发绘制数据，来实现对客户端UI的动态定制。其中难以突破的技术点在于，服务端下发的绘制数据并不是预先写入客户端的绘制代码，也就是说服务端下发的绘制数据不是native级别的，客户端无法将接收到的绘制数据作为执行的对象。

鉴于此，本申请所要求保护的技术方案提供了一种方法，即一方面，预先在客户端中定义UI对应的数据结构，由于该数据结构是利用native代码定义的，因此该数据结构可以作为客户端执行的对象而被客户端调用；另一方面，当需要绘制UI时，服务端可以向客户端下发配置参数，配置参数是开发人员在服务端编写的，包含了绘制UI所需的绘制数据。客户端可以根据接收到的配置参数配置UI对应的数据结构，使得该数据结构能够表达绘制UI所需的绘制数据。这样以来，客户端调用该数据结构，根据该数据结构可以确定绘制数据，再根据确定出的绘制数据进行UI绘制。

也就是说，在本申请所要求保护的方案中，开发人员只需要耗费很小的工作量，预先在客户端的native代码中定义用于绘制UI的数据结构，使得客户端可以根据该数据结构确定用于绘制UI的绘制数据。当需要绘制UI时，开发人员就可以在服务端下发用于配置数据结构的配置参数，通过配置数据结构来间接定制需要绘制的UI。

以下结合附图，详细说明本申请各实施例提供的技术方案。

图1是本申请实施例提供的一种绘制用户界面的方法流程图，包括以下步骤：

S101：接收服务端下发的UI对应的配置参数。

本方法的执行主体是客户端，具体可以是在用户使用的终端(如手机、电脑)的操作系统中安装的应用的客户端。其中，所述操作系统可以是安卓操作系统、苹果公司的开发的操作系统、微软操作系统以及其他能够安装所述客户端，并支持所述客户端进行UI绘制的操作系统。

在本申请实施例中，所述服务端可以是与客户端进行远程交互的服务器。所述配置参数可以是开发人员在服务端编写的参数，所述配置参数适配客户端中UI对应的数据结构，可以用于对UI对应的数据结构进行配置。也就是说，UI对应的配置参数用于间接实现对UI的定制。

在步骤S101之前，可以接收用户输入的交互指令，然后根据所述交互指令向所述服务端发送所述交互指令对应的UI绘制请求，以使所述服务端根据所述UI绘制请求下发UI对应的配置参数。

其中，所述交互指令可以是用户对客户端中的按钮的点击操作，也可以是用户打开客户端的操作等；所述UI绘制请求可以携带有需要绘制的UI对应的业务内容等信息。

S102：根据所述UI对应的配置参数配置所述UI对应的数据结构。

S103：根据配置后的所述UI对应的数据结构，确定所述UI对应的绘制数据。

数据结构是软件技术领域的概念，数据结构可以存储各数据元素以及各数据元素之间的关系。数据元素是组成数据结构的基本单位，数据元素的具体内容可以被配置。

在本申请实施例中，可以根据所述配置参数中的绘制参数，配置视图组件对应的数据结构，以及根据所述配置参数中的布局参数，配置所述UI的视图组件布局对应的数据结构。

在本申请实施例中，定义数据结构即是定义数据结构包含的各数据元素以及各数据元素之间的关系，配置数据结构即是配置数据结构包含的各数据元素的具体内容。

绘制UI实际上就是绘制组成UI的各视图组件(view)，并根据一定的布局，将绘制出的各视图块合成UI。视图组件有多种类型，多个类型的多个视图组件可以组合成很多不同的UI。例如，图片视图组件(imageview)就是一类视图组件，文本视图组件(textview)也是一类视图组件。在一个UI中，可以包含多种类型的视图组件，每种类型的视图组件也可以有多个。

在本申请实施例中，可以预先定义视图组件对应的数据结构以及预先定义UI的视图组件的布局对应的数据结构。

具体而言，可以预先在客户端中，定义各视图组件一一对应的多个数据结构以及UI的视图组件的布局对应的数据结构；也可以预先在客户端中，定义各类视图组件一一对应的多个数据结构以及UI的视图组件的布局对应的数据结构。并且，UI的视图组件的布局对应的数据结构也可以有多个。总之，定义的数据结构能够表达组成UI的各视图组件以及各视图组件如何布局即可，本申请对定义数据结构的具体方式不做限制。

在本申请实施例中，当针对每类视图组件，定义该类视图组件对应的数据结构时，每类视图组件对应的数据结构包含的数据元素可以是当前绘制UI需要用到的各视图组件，某个数据元素的具体内容可以是该视图组件的相对位置坐标或位置坐标、颜色、交互逻辑等信息。例如，图片视图组件对应的数据结构包含的每个数据元素都可以是一个图片视图组件，某个数据元素的具体内容可以是该图片视图组件显示的图片的URL地址等信息。每类视图组件对应的数据结构包含的各数据元素之间的关系可以是线性关系、集合关系、树形关系等。例如，图片视图组件对应的数据结构包含的各数据元素之间的关系可以是集合关系。

举例来说，可以通过以下native代码定义imageview类对应的一个数据结构：

其中，第一段native代码描述各类view的通用信息，第二段native代码描述imageview的具体信息。该通用信息可以在每类view对应的数据结构中都描述一次，也可以在客户端中仅描述一次，在每类view对应的数据结构中都只描述该类view的具体信息。

在本申请实施例中，当定义UI的布局对应的数据结构时，该数据结构区别于各类视图组件对应的数据结构，其主要用于表达各视图组件在UI中是如何布局的。

可见，根据UI对应的配置参数配置各类视图组件分别对应的数据结构，实际上可以是针对每类视图组件，根据配置参数中的绘制参数配置该类视图组件对应的数据结构，也就是各数据元素的具体内容，所述绘制参数表达如何对视图组件进行绘制。而根据UI对应的配置参数配置UI的布局对应的数据结构，实际上可以是根据配置参数中的布局参数配置UI的视图组件的布局对应的数据结构存储的布局参数，也就是该数据结构包含的各数据元素具体为哪种类型的视图组件，以及各数据元素(各视图组件)的关系。

进一步地，定义UI的视图组件的布局对应的数据结构可以有多种方式，可以将UI的视图组件的布局对应的数据结构包含的各数据元素的关系定义为线性关系，用于表达简单的UI布局，如某客户端的UI同时都是只包含一横排imageview的UI，那么该UI的布局对应的数据结构包含的各数据元素就可以是线性排列的；也可以将UI的布局对应的数据结构包含的各数据元素的关系定义为树形关系，每个数据元素可以对应一个视图组件，也可以对应不止一个视图组件即视图块(viewgroup)。这样以来，UI的布局对应的数据结构就可以反映较为复杂的UI布局，在这样的UI布局中，各视图组件分布在不止一个层级上，使得绘制出的UI的交互功能更加丰富。实际上，大部分客户端的UI的布局都是较为复杂的，需要预先在客户端中定义这种树形关系的数据结构。

在本申请实施例中，可以预先定义视图块对应的数据结构，作为UI的视图组件的布局对应的数据结构；一个视图块中包含视图组件和/或子视图块，每个视图块是其包含的子视图块的父试图块，每个子视图块又能作为父视图块包含包含视图组件和/或子视图块。

图2是本申请实施例提供的视图块(viewgroup)的结构示意图，如图2所示，视图块的结构为层层嵌套，以一个视图组件块为总节点向下分支，呈树形结构，每个视图组件块可以包含视图组件和/或子视图块。图2所示的视图块的结构可以被视为UI的视图组件的布局对应的数据结构。

开发人员通过服务端下发的配置参数中的布局参数，可以表达视图组件块的结构，服务端下发的布局参数不同，视图块的结构也就不同。视图块的结构其实可以是UI中显示的各视图组件的布局结构。

实际上，一个UI本质上是由若干视图组件组合而成的，倘若将UI中显示的视图组件进行分组，即以视图块(viewgroup)为单位来描述UI的视图组件的布局，就可以理解在本申请实施例中为何通过定义视图块对应的数据结构来表达UI的视图组件的布局了。

图3是本申请实施例提供的视图块的布局示意图。如图3所示，将UI视为一个视图块1，视图块1包含视图块2、视图块3、view1、view2，视图块2进一步包含视图块4、view3，视图块3进一步包含view4、view5，视图块4进一步包含view6、view7。客户端根据配置参数中的布局参数配置后的UI的视图组件的布局对应的数据结构，可以包含UI的视图组件的布局信息，也就是以UI(即视图块1)为参考系下的视图块2、视图块3、view1、view2的相对位置坐标，以视图块2为参考系下的视图块4、view3的相对位置坐标，以视图块3为参考系下的view4、view5的相对位置坐标，以视图块4为参考系下的view6、view7的相对位置坐标。其中，各视图组件(view1-view7)中可以存在相同类别的视图组件，如view1、view3可以是imageview，view2可以是textview。其中，可以以视图块和view的左下角的端点为参考系的原点。当然，也可以统一以视图块和view的其他点为参考系的原点，本申请对此不做限制。

基于以上，在图3所示的UI快的布局示意图中，各视图组件相对于UI的位置坐标都可以被最终确定下来，那么，UI的视图组件的布局也就可以确定了。客户端可以根据服务端下发的布局参数，确定视图块的结构，也就是确定每个视图块包含的视图组件和/或视图块。各视图块的结构不同，客户端绘制出的UI的视图组件的布局自然也就不同。

值得说明的是，一个视图块包含的视图组件和/或视图块的排列方式也是可以定制的，具体的排列方式可以是横向排列、纵向排列、重叠等。

举例来说，可以通过以下native代码定义图2所示的视图块对应的数据结构：

public abstract class BaseBlock extend BaseItem{

//一个视图块可以包含m个视图块和/或n个视图组件

public arraylist<BaseBlock>mBlock；

public arraylist<BaseItem>nItems；

……

}

public class LinearLayoutBlock extend BaseBlock{

//视图块包含的视图组件是线性排列的

public int orientation；//定义线性排列的方式是横向还是纵向

……

}

其中，第一段native代码是描述各种不同排列方式对应的视图块的通用信息，第二段native代码描述线性排列方式对应的视图块的具体信息，当然还可以通过其他native代码描述重叠排列对应的视图块的具体信息，在此不再赘述。

综上，通过定义各类视图组件对应的数据结构和UI的视图组件布局对应的数据结构，客户端就可以顺利从这两种数据结构中获取组成UI的每个视图组件的位置坐标和绘制信息，各视图组件的位置坐标和绘制信息，也就是UI的绘制数据。

在本申请实施例中，当定义的数据结构较为简单时，可以直接将各类视图组件分别对应的数据结构存储的绘制参数作为各类视图分别对应的绘制信息，将UI的布局对应的数据结构存储的布局参数直接作为UI的布局信息，将绘制信息和布局信息作为绘制数据，就可以进行UI的绘制了。

当定义的数据结构较为复杂时，尤其是当定义的UI的布局对应的数据结构表达的是图3所示的布局结构时，还需要在客户端中预先定义解析函数，用于解析复杂的数据结构。

具体而言，根据所述解析函数从各视图组件对应的数据结构中解析出各视图组件的绘制信息；以及根据所述解析函数从所述UI的视图组件的布局对应的数据结构中解析出所述UI的视图组件的布局信息；将解析出的各视图组件的绘制信息和所述UI的视图组件的布局信息作为所述UI对应的绘制数据。

值得说明的是，当需要绘制的UI要用到多个不同规格的同一类视图组件(如需要用到多个imageview，也就是需要显示多个图片)时，根据解析函数从该类视图组件对应的数据结构存储的绘制参数中解析出的该类视图组件的绘制信息包含了多个不同规格的视图组件的绘制信息。

在本申请实施例中，根据解析函数从该布局结构对应的数据结构存储的布局参数中解析出UI的布局信息，可以是从该布局结构中解析出组成UI的各视图组件的位置坐标。

具体而言，客户端可以从视图块对应的数据结构中解析出每个视图块相对于其父视图块的相对位置坐标和每个视图组件相对于其父视图块的相对位置坐标，那么，将UI视为最初的父视图块的话，也就可以确定每个视图组件相对于UI的相对位置坐标。每个视图组件的相对于UI的相对位置坐标就是UI的布局信息。

在本申请实施例中，当视图组件对应的数据结构中存储有视图组件相对于其父视图块的相对位置坐标时，也可以针对每个视图块，根据所述解析函数，从该视图块对应的数据结构中解析出该视图块的位置坐标；针对该视图块中的每个视图组件，根据所述解析函数，从该视图组件对应的数据结构中解析出该视图组件相对于该视图块的相对位置坐标；将针对每个视图块确定出的位置坐标和针对每个视图组件确定出的相对位置坐标，作为所述UI的视图组件的布局信息。

其中，可以是每个视图块可以对应一个数据结构，也可以是各视图块对应一个数据结构，本申请视图块和数据结构具体如何对应不做限制。

其中，每个视图块的位置坐标具体可以是每个视图块相对于其父视图块的相对位置坐标，也可以是每个视图块相对于UI的相对位置坐标。总之，客户端可以根据每个视图组件相对于其父视图块的相对位置坐标和每个视图块的位置坐标，确定每个视图组件相对于UI的位置坐标。

可见，通过步骤S102和步骤S103，可以确定绘制UI所需的绘制数据，该绘制数据可以是每个视图组件对应的绘制信息和位置坐标，具体可以是每个视图组件对应的绘制信息和相对位置坐标，以及每个视图块的相对位置坐标。

S104：根据所述绘制数据，绘制所述UI。

在本申请实施例中，可以根据每个视图组件的绘制信息和位置坐标进行UI的绘制。具体而言，可以根据每个视图组件对应的绘制信息和相对位置坐标，以及每个视图块的相对位置坐标，绘制该视图组件；所述UI是由绘制出的各视图块合而成的。

其中，当每类视图组件对应一个数据结构时，每个视图组件的绘制信息可以是根据该视图组件所属类别对应的绘制信息确定的；当每个视图组件对应一个数据结构时，每个视图组件的绘制信息可以是从该视图组件对应的这个数据结构中解析出的绘制信息。

综上，通过图1所示的交互控件的调用方法，预先在客户端中定义UI对应的数据结构，所述数据结构是利用客户端的native代码定义的，客户端能够将所述数据结构作为执行的对象。当需要绘制某个UI时，通过服务端下发该UI对应的配置参数，客户端根据接收到的配置参数配置该UI对应的数据结构，使得该数据结构一方面可以表达该UI的绘制数据，另一方面可以被客户端调用，以作为执行绘制该UI操作的对象。如此以来，客户端可以根据配置后的数据结构确定该UI的绘制数据，进行UI绘制，增加了绘制UI灵活性。

此外，在现有的UI绘制方法中，不同的UI对应有不同的绘制代码，绘制代码专用性强，可复用性差。而在本申请实施例中，预先定义的UI对应的数据结构，可以根据服务端下发的不同的配置参数，用于绘制不同的UI，也就是说，预先定义的UI对应的数据结构有很强的可复用性。

另外，在现有的UI绘制方法中，对于业务功能类似的多个客户端(如三个实现支付功能的APP)而言，这多个客户端的业务功能哪怕有一点不同，其所需要的UI也会不同，这就要求开发人员针对这多个客户端分别编写多套绘制代码。例如，APP1除了有基本的支付功能外，还有外卖功能，APP2除了有基本的支付功能外，还有社交功能，APP3除了有基本的支付功能外，还有新闻资讯功能，那么APP1的UI中除了包含基本的支付类控件(控件由组件组成)外，还可能包含用于展示外卖商家的商品清单的展示控件等特殊功能的控件，APP2的UI中除了包含基本的支付类控件外，还可能包含多个聊天窗口的切换标签控件，APP3的UI中除了包含基本的支付类控件外，还可能包含一些用于显示新闻资讯的控件。APP1、APP2、APP3的绘制代码中有关支付业务的代码部分基本上是雷同的，但是这3个APP各自的特殊功能对应的代码部分却需要与支付业务的代码部分耦合，否则这3个APP的UI的显示效果会很差。开发人员就只能分别针对这3个APP撰写三套绘制代码，工作量是巨大的。

而在本申请实施例中，由于预先定义了一种可配置的数据结构(工作量较小)，因此开发人员不必针对这三个客户端都分别撰写绘制代码，而可以将这种数据结构一并定义在这三个客户端中，并且业务功能类似的客户端越多，开发人员的工作效率就越高，这就实现了UI与业务功能分离，该数据结构可以适配多个业务功能类似的客户端，开发人员只需要在服务端动态配置这多个类似的客户端上的数据结构，就可以分别在这多个客户端上绘制实现其业务功能的UI。倘若上述举例中的APP1、APP2、APP3中都定义有本申请所述的UI对应的数据结构，那么服务端只需要针对这3个APP下发不同的配置参数即可实现UI的绘制，并且这3个APP的支付功能对应的配置参数与各自的特殊功能对应的配置参数的耦合性很低，开发人员不必重复编写支付功能对应的配置参数。

值得说明的是，本申请实施例中所述支付涉及的技术载体，例如可以包括近场通信(Near Field Communication，NFC)、WIFI、3G/4G/5G、POS机刷卡技术、二维码扫码技术、条形码扫码技术、蓝牙、红外、短消息(Short Message Service，SMS)、多媒体消息(Multimedia Message Service，MMS)等。

基于图1所示的绘制用户界面的方法，本申请实施例还对应提供了一种绘制用户界面的装置，如图4所示，预先在所述装置中定义用户界面UI对应的数据结构，所述装置包括：

接收模块401，接收服务端下发的UI对应的配置参数；

配置模块402，根据所述UI对应的配置参数配置所述UI对应的数据结构；

确定模块403，根据配置后的所述UI对应的数据结构，确定所述UI对应的绘制数据；

绘制模块404，根据所述绘制数据，绘制所述UI。

所述装置还包括：请求模块405，在所述接收模块401接收服务端下发的UI对应的配置参数之前，接收用户输入的交互指令；根据所述交互指令，向所述服务端发送所述交互指令对应的UI绘制请求，以使所述服务端根据所述UI绘制请求下发UI对应的配置参数。

预先在客户端中定义用户界面UI对应的数据结构，具体包括：预先定义视图组件对应的数据结构；预先定义UI的视图组件的布局对应的数据结构；

所述配置模块402，根据所述配置参数中的绘制参数，配置视图组件对应的数据结构，以及根据所述配置参数中的布局参数，配置所述UI的视图组件布局对应的数据结构。

预先在客户端中定义解析函数，所述解析函数用于解析所述数据结构；

所述确定模块403，根据所述解析函数从各视图组件对应的数据结构中解析出各视图组件的绘制信息；以及根据所述解析函数从所述UI的视图组件的布局对应的数据结构中解析出所述UI的视图组件的布局信息；将解析出的各视图组件的绘制信息和所述UI的视图组件的布局信息作为所述UI对应的绘制数据。

预先定义UI的视图组件的布局对应的数据结构，具体包括：预先定义视图块对应的数据结构，作为UI的视图组件的布局对应的数据结构；一个视图块中包含视图组件和/或子视图块；

所述确定模403，针对每个视图块，根据所述解析函数，从该视图块对应的数据结构中解析出该视图块的位置坐标；针对该视图块中的每个视图组件，根据所述解析函数，从该视图组件对应的数据结构中解析出该视图组件相对于该视图块的相对位置坐标；将针对每个视图块确定出的位置坐标和针对每个视图组件确定出的相对位置坐标，作为所述UI的视图组件的布局信息。

所述确定模块403，根据所述解析函数，确定该视图块的父视图块，从该视图块对应的数据结构中解析出该视图块相对于所述父视图块的相对位置坐标。

所述绘制模块404，根据每个视图组件对应的绘制信息和相对位置坐标，以及每个视图块的相对位置坐标，绘制该视图组件；所述UI是由绘制出的各视图块合而成的。

在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable GateArray，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(RubyHardware Description Language)等，目前最普遍使用的是VHDL(Very-High-SpeedIntegrated Circuit Hardware Description Language)与Verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (14)

1.一种绘制用户界面的方法，其特征在于，预先在客户端中定义用户界面UI对应的数据结构，所述方法包括：

接收服务端下发的UI对应的配置参数；

根据所述UI对应的配置参数配置所述UI对应的数据结构；

根据配置后的所述UI对应的数据结构，确定所述UI对应的绘制数据；

根据所述绘制数据，绘制所述UI。

2.根据权利要求1所述的方法，其特征在于，在接收服务端下发的UI对应的配置参数之前，所述方法还包括：

接收用户输入的交互指令；

根据所述交互指令，向所述服务端发送所述交互指令对应的UI绘制请求，以使所述服务端根据所述UI绘制请求下发UI对应的配置参数。

3.根据权利要求1或2所述的方法，其特征在于，预先在客户端中定义用户界面UI对应的数据结构，具体包括：

预先定义视图组件对应的数据结构；

预先定义UI的视图组件的布局对应的数据结构；

根据所述UI对应的配置参数配置所述UI对应的数据结构，具体包括:

根据所述配置参数中的绘制参数，配置视图组件对应的数据结构，以及根据所述配置参数中的布局参数，配置所述UI的视图组件布局对应的数据结构。

4.根据权利要求3所述的方法，其特征在于，所述方法还包括：预先在客户端中定义解析函数，所述解析函数用于解析所述数据结构；

根据配置后的所述UI对应的数据结构，确定所述UI对应的绘制数据，具体包括：

根据所述解析函数从各视图组件对应的数据结构中解析出各视图组件的绘制信息；以及根据所述解析函数从所述UI的视图组件的布局对应的数据结构中解析出所述UI的视图组件的布局信息；

将解析出的各视图组件的绘制信息和所述UI的视图组件的布局信息作为所述UI对应的绘制数据。

5.根据权利要求4所述的方法，其特征在于，预先定义UI的视图组件的布局对应的数据结构，具体包括：

预先定义视图块对应的数据结构，作为UI的视图组件的布局对应的数据结构；一个视图块中包含视图组件和/或子视图块；

根据所述解析函数从所述UI的视图组件布局对应的数据结构中解析出所述UI的视图组件的布局信息，具体包括：

针对每个视图块，根据所述解析函数，从该视图块对应的数据结构中解析出该视图块的位置坐标；

针对该视图块中的每个视图组件，根据所述解析函数，从该视图组件对应的数据结构中解析出该视图组件相对于该视图块的相对位置坐标；

将针对每个视图块确定出的位置坐标和针对每个视图组件确定出的相对位置坐标，作为所述UI的视图组件的布局信息。

6.根据权利要求5所述的方法，其特征在于，根据所述解析函数，从该视图块对应的数据结构中解析出该视图块的位置坐标，具体包括：

根据所述解析函数，确定该视图块的父视图块，从该视图块对应的数据结构中解析出该视图块相对于所述父视图块的相对位置坐标。

7.根据权利要求6所述的方法，其特征在于，根据所述绘制数据，绘制所述UI，具体包括：

根据每个视图组件对应的绘制信息和相对位置坐标，以及每个视图块的相对位置坐标，绘制该视图组件；所述UI是由绘制出的各视图组件组合而成的。

8.一种绘制用户界面的装置，其特征在于，预先在所述装置中定义用户界面UI对应的数据结构，所述装置包括：

接收模块，接收服务端下发的UI对应的配置参数；

配置模块，根据所述UI对应的配置参数配置所述UI对应的数据结构；

确定模块，根据配置后的所述UI对应的数据结构，确定所述UI对应的绘制数据；

绘制模块，根据所述绘制数据，绘制所述UI。

9.根据权利要求8所述的方法，其特征在于，所述装置还包括：

请求模块，在所述接收模块接收服务端下发的UI对应的配置参数之前，接收用户输入的交互指令；根据所述交互指令，向所述服务端发送所述交互指令对应的UI绘制请求，以使所述服务端根据所述UI绘制请求下发UI对应的配置参数。

10.根据权利要求8或9所述的装置，其特征在于，预先在客户端中定义用户界面UI对应的数据结构，具体包括：预先定义视图组件对应的数据结构；

预先定义UI的视图组件的布局对应的数据结构；

所述配置模块，根据所述配置参数中的绘制参数，配置视图组件对应的数据结构，以及根据所述配置参数中的布局参数，配置所述UI的视图组件布局对应的数据结构。

11.根据权利要求10所述的装置，其特征在于，预先在客户端中定义解析函数，所述解析函数用于解析所述数据结构；

所述确定模块，根据所述解析函数从各视图组件对应的数据结构中解析出各视图组件的绘制信息；以及根据所述解析函数从所述UI的视图组件的布局对应的数据结构中解析出所述UI的视图组件的布局信息；将解析出的各视图组件的绘制信息和所述UI的视图组件的布局信息作为所述UI对应的绘制数据。

12.根据权利要求11所述的装置，其特征在于，预先定义UI的视图组件的布局对应的数据结构，具体包括：

预先定义视图块对应的数据结构，作为UI的视图组件的布局对应的数据结构；一个视图块中包含视图组件和/或子视图块；

所述确定模块，针对每个视图块，根据所述解析函数，从该视图块对应的数据结构中解析出该视图块的位置坐标；针对该视图块中的每个视图组件，根据所述解析函数，从该视图组件对应的数据结构中解析出该视图组件相对于该视图块的相对位置坐标；将针对每个视图块确定出的位置坐标和针对每个视图组件确定出的相对位置坐标，作为所述UI的视图组件的布局信息。

13.根据权利要求12所述的装置，其特征在于，所述确定模块，根据所述解析函数，确定该视图块的父视图块，从该视图块对应的数据结构中解析出该视图块相对于所述父视图块的相对位置坐标。

14.根据权利要求13所述的装置，其特征在于，所述绘制模块，根据每个视图组件对应的绘制信息和相对位置坐标，以及每个视图块的相对位置坐标，绘制该视图组件；所述UI是由绘制出的各视图组件组合而成的。