CN106990950A - 界面布局的方法和装置 - Google Patents

Abstract

本发明涉及一种界面布局的方法，所述方法包括：接收服务器发送的卡片数据，所述卡片数据包括卡片标识；根据所述卡片标识查找与该卡片标识对应的布局文件；根据所述布局文件和所述卡片数据进行界面的布局。该方法通过预先在服务器中预置各种卡片的定义，当调整或更新界面时，只需要将对应的卡片数据下发到客户端，客户端根据对应的布局文件就可以完成界面布局的更新，不需要在客户端进行维护，该方法实现了动态布局客户端界面，省时省力。此外，还提出了一种界面布局的装置。

Description

界面布局的方法和装置

技术领域

本发明涉及计算机技术，特别是涉及一种界面布局的方法和装置。

背景技术

随着移动互联网的发展，人们使用终端中的APP可以完成订餐、购物、打车、支付等多样化的需求，这就要求APP可以承载多种多样的业务，同时面对新需求要有快速迭代更新的能力。

传统的原生APP的界面和功能都由客户端决定，如果需要变更功能或增加新界面需要修改客户端、然后重新发布客户端版本，等用户慢慢升级上来。也就是说，传统的原生布局方案一旦发布就不能修改，也无法增加新的界面，即使是非常小的界面样式调整也必须在客户端维护，费时费力。

发明内容

基于此，有必要针对上述问题，提出一种无须在客户端维护，省时省力的界面布局的方法和装置。

一种界面布局的方法，所述方法包括：接收服务器发送的卡片数据，所述卡片数据包括卡片标识；根据所述卡片标识查找与该卡片标识对应的布局文件；根据所述布局文件和所述卡片数据进行界面的布局。

在其中一个实施例中，所述根据所述布局文件和所述卡片数据进行界面的布局的步骤包括：调用卡片渲染器根据所述布局文件中预设的卡片尺寸在界面上渲染生成卡片模板；根据所述布局文件将所述卡片数据按照预设的规则填充至所述卡片模板，完成界面布局。

在其中一个实施例中，所述根据所述布局文件将所述卡片数据按照预设的规则填充至所述卡片模板，完成界面布局的步骤包括：根据所述卡片数据中的卡片元素ID按照所述布局文件将对应的卡片元素填充至所述卡片模板；将所述卡片数据中的卡片元素对应的功能数据添加到所述卡片模板，完成界面布局。

一种界面布局的装置，所述装置包括：接收模块，用于接收服务器发送的卡片数据，所述卡片数据包括卡片标识；查找模块，用于根据所述卡片标识查找与该卡片标识对应的布局文件；布局模块，用于根据所述布局文件和所述卡片数据进行界面的布局。

在其中一个实施例中，所述布局模块包括：卡片模板生成模块，用于调用卡片渲染器根据所述布局文件中预设的卡片尺寸在界面上渲染生成卡片模板；填充模块，用于根据所述布局文件将所述卡片数据按照预设的规则填充至所述卡片模板，完成界面布局。

在其中一个实施例中，所述填充模块还用于根据所述卡片数据中的卡片元素ID按照所述布局文件将对应的卡片元素填充至所述卡片模板，将所述卡片数据中的卡片元素对应的功能数据添加到所述卡片模板，完成界面布局。

上述界面布局的方法和装置，通过预先在服务器中预置各种卡片的定义，当需要发布新的界面时，只需要在服务器重新设置当前使用的界面卡片，然后将对应的卡片数据发送给客户端，客户端接收到服务器发送的卡片数据，根据卡片数据中的卡片标识查找与该卡片标识对应的布局文件，继而根据布局文件和卡片数据进行界面的布局。在这个过程中，当调整或更新界面时，只需要将对应的卡片数据下发到客户端，客户端根据对应的布局文件就可以完成界面布局的更新，不需要在客户端进行维护，该方法实现了动态布局客户端界面，省时省力。

一种界面布局的方法，所述方法包括：接收客户端发送的卡片请求；根据所述卡片请求获取当前的版本标识；根据所述当前的版本标识获取与该版本标识对应的卡片数据；将所述卡片数据发送给所述客户端，以使所述客户端根据所述卡片数据进行界面的布局。

在其中一个实施例中，在所述根据所述卡片请求获取当前的版本标识的步骤之后还包括：提取所述卡片请求中所述客户端对应的原始版本标识；判断所述原始版本标识与当前的版本标识是否相同；若否，则进入根据所述当前的版本标识获取与该版本标识对应的卡片数据的步骤。

一种界面布局的装置，所述装置包括：请求接收模块，用于接收客户端发送的卡片请求；版本标识获取模块，用于根据所述卡片请求获取当前的版本标识；卡片数据获取模块，用于根据所述当前的版本标识获取与该版本标识对应的卡片数据；发送模块，用于将所述卡片数据发送给所述客户端，以使所述客户端根据所述卡片数据进行界面的布局。

在其中一个实施例中，所述装置还包括：提取模块，用于提取所述卡片请求中所述客户端对应的原始版本标识；判断模块，用于判断所述原始版本标识与当前的版本标识是否相同，若否，则通知卡片数据获取模块根据所述当前的版本标识获取与该版本标识对应的卡片数据。

上述界面布局的方法和装置，预先在服务器中预置各种卡片的定义，不同的卡片样式和功能对应不同的版本标识，然后设置当前使用的版本标识，当接收到客户端发送的卡片请求时，根据该卡片请求获取当前的版本标识，然后根据版本标识将对应的卡片数据发送到客户端，以使客户端根据卡片数据进行界面的布局。在这个过程中，当需要调整或更新界面时，只需要在服务器重新设置当前的版本标识，然后将对应的卡片数据下发到客户端即可，不需要对客户端进行更改，省时省力。

附图说明

图1为一个实施例中界面布局的方法流程图；

图2为一个实施例中根据布局文件和卡片数据进行界面布局的方法流程图；

图3为一个实施例中根据布局文件将卡片数据按照预设的规则填充至卡片模板的方法流程图；

图4为一个实施例中卡片示意图；

图5为另一个实施例中界面布局的方法流程图；

图6为又一个实施例中界面布局的方法流程图；

图7为再一个实施例中界面布局的方法流程图；

图8为一个实施例中界面布局的装置的结构框图；

图9为一个实施例中布局模块的结构框图；

图10为另一个实施例中界面布局的装置的结构框图；

图11为又一个实施例中界面布局的装置的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，在一个实施例中，提出了一种界面布局的方法，该方法包括：

步骤102，接收服务器发送的卡片数据，卡片数据包括卡片标识。

在本实施例中，卡片数据包括：卡片标识、卡片元素及每个元素的ID、卡片的功能数据等，其中，卡片标识用来唯一标识一类卡片；卡片元素包括文本、图片以及按钮等；卡片元素ID就相当于是卡片元素的名字；卡片的功能数据是指卡片中卡片元素对应的响应动作。在一个实施例中，可以设置卡片的卡片标识为001，该卡片的卡片元素包括文本1和图片1，其中，文本1的数据是[特朗普当选美国总统]，图片1的地址是[http://www.baidu.com]。卡片的功能数据用来设置卡片元素的响应动作，比如设置点击图片1就会跳转到浏览器打开某个网页。

这里的卡片即原生卡片(Native Card),原生APP中界面的组织形式是以卡片为单位的瀑布流。卡片的样式通常是一个矩形，可以包含文字、图片、按钮等元素。为了能够灵活的动态布局客户端界面，预先在服务器中预置各种卡片的定义，即预先抽象出具有独立能力的卡片，不同的卡片具有不同的样式和功能，然后设置不同的界面版本对应不同的卡片，而每个界面版本都有一个版本标识。当需要更新界面版本时，只需要更换当前使用的版本标识，然后将更新后的版本标识对应的卡片数据下发到客户端。客户端接收服务器发送的卡片数据，便于后续根据接收到的卡片数据进行界面的布局。

步骤104，根据卡片标识查找与该卡片标识对应的布局文件。

在本实施例中，客户端中预先存储了不同类型卡片对应的布局文件。每一种卡片都会对应一个自己的布局文件，而每一种卡片都有唯一的卡片标识，卡片标识用于唯一标识一类卡片。为了能够快速到找到每种卡片对应的布局文件，在客户端预先存储卡片标识和布局文件之间的对应关系。具体的，可以直接存储卡片标识与布局文件所在路径的对应关系，这样，客户端就可以快速的根据接收到的卡片标识找到对应的布局文件。在另一个实施例中，也可以预先存储卡片标识和布局文件标识之间的对应关系，先根据卡片标识找到对应的布局文件标识，然后查找与该布局文件标识对应的布局文件。

步骤106，根据布局文件和卡片数据进行界面的布局。

在本实施例中，布局文件的作用是将接收到的卡片元素和卡片功能数据按照规则布局到对应的卡片中，然后将对应的卡片展示在界面上，这样就完成了界面的布局。其中，界面是卡片的容器，用于展示卡片，一个界面可以容纳多个卡片，具体数量根据卡片具体大小而定。具体的，首先，根据布局文件中预设的卡片尺寸在界面上生成卡片模板，卡片模板实际上是一个具有形状尺寸的空卡片，所以还需要根据布局文件将卡片元素和卡片功能数据按照预设的规则填充到该卡片模板，填充完成后即完成了界面的布局。其中，卡片元素和卡片功能数据的填充可以同时进行填充，也可以先填充卡片元素，在填充与卡片元素对应的功能数据。需要说明的是，由于一个界面可以同时包含多个卡片，而这多个卡片可以是一类卡片，也可以是不同类型的卡片，而每一类卡片对应一个布局文件。当界面中包含不同型类卡片时，需要同时获取到对应的多个布局文件，然后每个卡片根据自己的布局文件进行界面的布局。

在本实施例中，通过预先在服务器中预置各种卡片的定义，当需要发布新的界面时，只需要在服务器重新设置当前使用的界面卡片，然后将对应的卡片数据发送给客户端，客户端接收到服务器发送的卡片数据，根据卡片数据中的卡片标识查找与该卡片标识对应的布局文件，继而根据布局文件和卡片数据进行界面的布局。在这个过程中，当调整或更新界面时，只需要将对应的卡片数据下发到客户端，客户端根据对应的布局文件就可以完成界面布局的更新，不需要在客户端进行维护，该方法实现了动态布局客户端界面，省时省力。

如图2所示，在一个实施例中，根据布局文件和卡片数据进行界面的布局的步骤包括：

步骤106A，调用卡片渲染器根据布局文件中预设的卡片尺寸在界面上渲染生成卡片模板。

在本实施例中，布局文件中存储了卡片在客户端界面显示的尺寸大小。当客户端根据卡片标识查找到与该卡片标识对应的布局文件后，调用卡片渲染器根据布局文件中预设的卡片尺寸在客户端界面上渲染生成一个卡片模板，其中，卡片模板是指具有形状尺寸的空卡片，卡片尺寸默认为矩形。卡片渲染器的作用是根据服务器下发的卡片数据渲染生成原生卡片。一般是采用通用卡片渲染器来进行渲染。通用卡片渲染器是指可以渲染多种卡片类型的渲染器，不管客户端接收到的是什么类型的卡片数据，都可以采用该通用渲染器渲染得到正确的卡片。

步骤106B，根据布局文件将卡片数据按照预设的规则填充至卡片模板，完成界面布局。

在本实施例中，客户端在界面上渲染生成一个卡片模板后，调用渲染器根据布局文件将卡片数据按照预设的规则填充到该卡片模板中以完成界面布局。具体的，卡片数据包括卡片的所有元素，即包括若干个文本、若干个图片、以及每个文件和图片的ID，还包括卡片元素对应的功能数据，即哪些元素是可以点击的以及被点击后的响应动作是什么。具体的，布局文件中存储了卡片元素ID与位置之间的对应关系以及卡片元素与功能数据之间的对应关系，客户端获取到每个卡片元素ID后，根据布局文件中的对应关系将卡片元素填充到卡片模板中，同时将卡片元素对应的功能数据也填充到卡片模板中，当所有的卡片数据都填充到卡片模板后即完成了界面的布局。

如图3所示，在一个实施例中，根据布局文件将卡片数据按照预设的规则填充至卡片模板，完成界面布局的步骤包括：

步骤302，根据卡片数据中的卡片元素ID按照布局文件将对应的卡片元素填充至卡片模板。

在本实施例中，卡片元素ID就相当于是每个卡片元素的名字，用于唯一标识一个卡片元素，布局文件中存储了卡片元素ID与位置之间的对应关系，所以根据布局文件中的卡片元素ID和位置之间的对应关系就可以将卡片元素ID对应的卡片元素布局到卡片模板中的对应位置，即将卡片数据中的卡片元素填充到卡片模板。如图4所示，为一个卡片示意图，假设卡片数据中的卡片元素包括文本1、文本2、图片1和图片2，布局文件中设置了文本1对应的位置在卡片的左边，图片2的位置与图片1的位置并排在卡片的右边，文件1和文本2的位置分别在图片1和图片2的上面。那么按照布局文件中的卡片元素ID和位置之间的对应关系分别将图片1放在左边，图片2与图片1并排，放在右边，文本1和文本2分别放在图片1和图片2的上面。

步骤304，将卡片数据中的卡片元素对应的功能数据添加到卡片模板，完成界面布局。

在本实施例中，卡片中有些卡片元素是具有响应功能的，当点击这些具有响应功能的卡片元素时会执行对应的响应动作，比如，当点击卡片中的图片1时会跳转到浏览器打开对应的链接(比如，http：//www.google.com)。所以当客户端调用渲染器将卡片数据中的卡片元素都填充到卡片模板后，还需要根据布局文件中卡片元素与功能数据之间的对应关系将卡片元素对应的功能数据也添加到卡片模板，这样就完成了界面布局。

如图5所示，在一个实施例中，上述界面布局的方法还包括：

步骤108，接收用户的点击操作。

在本实施例中，由于进行客户端界面布局时有些卡片元素是具有响应功能的，其中响应功能包括：点击跳出新界面、点击弹出提示、点击启动某个下载任务等。所以当客户端布局完界面之后，还需要检测用户的点击操作，当检测到用户的点击操作后，可以根据该点击操作对应的功能进行响应。

步骤110，调用卡片处理器响应点击操作执行对应的响应事件。

在本实施例中，当接收到用户的点击操作后，客户端通过调用卡片处理器响应该点击操作，然后将卡片中设置的响应动作找出来，然后执行这个动作，即响应用户的点击操作并执行对应的响应事件。比如，根据该点击操作打开一个网页或跳转到另一个界面等。

如图6所示，在一个实施例中，提出了一种界面布局的方法，该方法包括：

步骤602，接收客户端发送的卡片请求。

在本实施例中，当客户端启动时，会自动向服务器发送卡片请求，卡片请求是为了获取最新的卡片数据。服务器接收到客户发送的卡片请求后执行后续的操作。在一个实施例中，卡片请求中包括客户端的原始版本标识，即客户端之前使用的界面版本标识，版本标识用于唯一标识一个界面版本。

步骤604，根据卡片请求获取当前的版本标识。

在本实施例中，服务器接收到卡片请求后，根据该卡片请求去获取当前的版本标识，版本标识用来唯一标识一个界面版本。每一个界面版本对应不同的卡片样式和功能，即对应不同的卡片数据。

步骤606，根据当前的版本标识获取与该版本标识对应的卡片数据。

在本实施例中，服务器中预先存储了版本标识和卡片数据之间的对应关系，当服务器获取到当前的版本标识后，就可以查找与该版本标识对应的卡片数据。

步骤608，将卡片数据发送给客户端，以使客户端根据卡片数据进行界面的布局。

在本实施例中，服务器查找到与版本标识对应的卡片数据后，将查找到的卡片数据下发到客户端，这样客户端就可以根据接收到的卡片数据进行界面的布局。由于在服务器中预先设置了不同的卡片样式和功能，当需求变更时，只需要服务器下发不同的卡片样式和功能对应的卡片数据，客户端就可以呈现出不同的界面和功能，满足了快速迭代的需要，同时规避了频繁发版带来的带宽消耗等问题。

在本实施例中，预先在服务器中预置各种卡片的定义，不同的卡片样式和功能对应不同的版本标识，然后设置当前使用的版本标识，当接收到客户端发送的卡片请求时，根据该卡片请求获取当前的版本标识，然后根据版本标识将对应的卡片数据发送到客户端，以使客户端根据卡片数据进行界面的布局。在这个过程中，当需要调整或更新界面时，只需要在服务器重新设置当前的版本标识，然后将对应的卡片数据下发到客户端即可，不需要对客户端进行更改，省时省力。

如图7所示，在一个实施例中，在所述根据所述卡片请求获取当前的版本标识的步骤之后还包括：

步骤610，提取卡片请求中客户端对应的原始版本标识。

在本实施例中，卡片请求中包含客户端之前使用的客户端界面对应的原始版本标识。服务器提取卡片请求中客户端对应的原始版本标识，便于后续根据该原始版本标识判断客户端界面版本是否有更新。

步骤612，判断原始版本标识与当前的版本标识是否相同，若是，则结束，若否，则进入步骤606。

在本实施例中，通过判断原始版本标识与服务器中当前设置的版本标识是否一致来确定是否更新客户端界面。若两者一致，说明客户端当前的界面已经是最近的版本界面，故不需要更新。当两者不一致时，说明需要更新当前客户端的版本界面，那么就需要获取与当前的版本标识对应的卡片数据，然后将卡片数据下发的客户端，使客户端根据最新的卡片数据进行界面的布局。

如图8所示，在一个实施例中，提出了一种界面布局的装置，该装置包括：

接收模块802，用于接收服务器发送的卡片数据，卡片数据包括卡片标识。

查找模块804，用于根据卡片标识查找与该卡片标识对应的布局文件。

布局模块806，用于根据布局文件和卡片数据进行界面的布局。

如图9所示，在一个实施例中，布局模块806包括：

卡片模板生成模块806A，用于调用卡片渲染器根据布局文件中预设的卡片尺寸在界面上渲染生成卡片模板。

填充模块806B，用于根据布局文件将卡片数据按照预设的规则填充至卡片模板，完成界面布局。

在一个实施例中，填充模块还用于根据卡片数据中的卡片元素ID按照布局文件将对应的卡片元素填充至卡片模板，将卡片数据中的卡片元素对应的功能数据添加到卡片模板，完成界面布局。

如图10所示，在一个实施例中，提出了一种界面布局的装置，该装置包括：

请求接收模块1002，用于接收客户端发送的卡片请求。

版本标识获取模块1004，用于根据卡片请求获取当前的版本标识。

卡片数据获取模块1006，用于根据当前的版本标识获取与该版本标识对应的卡片数据。

发送模块1008，用于将卡片数据发送给客户端，以使客户端根据卡片数据进行界面的布局。

如图11所示，在一个实施例中，上述界面布局的装置还包括：

提取模块1010，用于提取卡片请求中客户端对应的原始版本标识。

判断模块1012，用于判断原始版本标识与当前的版本标识是否相同，若否，则通知卡片数据获取模块根据当前的版本标识获取与该版本标识对应的卡片数据。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种界面布局的方法，所述方法包括：

接收服务器发送的卡片数据，所述卡片数据包括卡片标识；

根据所述卡片标识查找与该卡片标识对应的布局文件；

根据所述布局文件和所述卡片数据进行界面的布局。

2.根据权利要求1所述的方法，其特征在于，所述根据所述布局文件和所述卡片数据进行界面的布局的步骤包括：

调用卡片渲染器根据所述布局文件中预设的卡片尺寸在界面上渲染生成卡片模板；

根据所述布局文件将所述卡片数据按照预设的规则填充至所述卡片模板，完成界面布局。

3.根据权利要求2所述的方法，其特征在于，所述根据所述布局文件将所述卡片数据按照预设的规则填充至所述卡片模板，完成界面布局的步骤包括：

根据所述卡片数据中的卡片元素ID按照所述布局文件将对应的卡片元素填充至所述卡片模板；

将所述卡片数据中的卡片元素对应的功能数据添加到所述卡片模板，完成界面布局。

4.一种界面布局的方法，所述方法包括：

接收客户端发送的卡片请求；

根据所述卡片请求获取当前的版本标识；

根据所述当前的版本标识获取与该版本标识对应的卡片数据；

将所述卡片数据发送给所述客户端，以使所述客户端根据所述卡片数据进行界面的布局。

5.根据权利要求4所述的方法，其特征在于，在所述根据所述卡片请求获取当前的版本标识的步骤之后还包括：

提取所述卡片请求中所述客户端对应的原始版本标识；

判断所述原始版本标识与当前的版本标识是否相同；

若否，则进入根据所述当前的版本标识获取与该版本标识对应的卡片数据的步骤。

6.一种界面布局的装置，其特征在于，所述装置包括：

接收模块，用于接收服务器发送的卡片数据，所述卡片数据包括卡片标识；

查找模块，用于根据所述卡片标识查找与该卡片标识对应的布局文件；

布局模块，用于根据所述布局文件和所述卡片数据进行界面的布局。

7.根据权利要求6所述的装置，其特征在于，所述布局模块包括：

卡片模板生成模块，用于调用卡片渲染器根据所述布局文件中预设的卡片尺寸在界面上渲染生成卡片模板；

填充模块，用于根据所述布局文件将所述卡片数据按照预设的规则填充至所述卡片模板，完成界面布局。

8.根据权利要求7所述的装置，其特征在于，所述填充模块还用于根据所述卡片数据中的卡片元素ID按照所述布局文件将对应的卡片元素填充至所述卡片模板，将所述卡片数据中的卡片元素对应的功能数据添加到所述卡片模板，完成界面布局。

9.一种界面布局的装置，其特征在于，所述装置包括：

请求接收模块，用于接收客户端发送的卡片请求；

版本标识获取模块，用于根据所述卡片请求获取当前的版本标识；

卡片数据获取模块，用于根据所述当前的版本标识获取与该版本标识对应的卡片数据；

发送模块，用于将所述卡片数据发送给所述客户端，以使所述客户端根据所述卡片数据进行界面的布局。

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

提取模块，用于提取所述卡片请求中所述客户端对应的原始版本标识；

判断模块，用于判断所述原始版本标识与当前的版本标识是否相同，若否，则通知卡片数据获取模块根据所述当前的版本标识获取与该版本标识对应的卡片数据。