界面排版样式的发送方法、移动终端界面排版方法及装置与流程

本发明涉及终端网络技术领域，特别是涉及一种界面排版样式的发送方法、移动终端界面排版方法及装置。

背景技术：

目前，移动终端界面排版是通过纯native端对界面原子控件的直接排列，或者通过动态下发预先生成的界面布局文件，移动终端进行特定的解析，达到动态排版的目的，但是，对于纯native端控制界面排版，无法实现动态修改界面布局，同时也无法保证更多平台、更多机型界面的适配；而对于动态下发预置的布局文件，虽然在一定程度上解决了动态更改及适配更多界面布局的问题，但是，界面布局文件的预先配置及规则解析较为繁琐，降低了排版的灵活性和高效性。

因此，如何对移动终端的界面进行灵活、高效的动态排版是目前有待解决的技术问题。

技术实现要素：

本发明实施例所要解决的技术问题是提供一种界面排版样式的发送方法、移动终端界面排版方法，以解决现有技术中由于移动终端的界面排版繁琐，不灵活，导致排版的效率低的技术问题。

相应的，本发明实施例还提供了一种移动终端界面排版装置，用以保证上述方法的实现及应用。

为了解决上述问题，本发明是通过如下技术方案实现的：

第一方面提供一种界面排版样式的发送方法，所述方法包括：

获取目标用户界面ui设计图；

对所述目标ui设计图进行拆分，得到界面布局样式；

确定所述界面布局样式对应的界面排版规则样式；

将所述界面排版规则样式通过脚本文件下发给移动终端，以便于所述移动终端按照排版协议对脚本文件进行解析得到对应的界面排版规则样式。

可选的，所述对所述目标ui设计图进行拆分，得到界面布局样式，包括：

对所述目标ui设计图进行划分，得到界面的各个模块区域；

对所述各个模块区域进行扁平化处理，得到各个模块区域对应的界面布局样式。

可选的，所述确定所述界面布局样式对应的界面排版规则样式，包括：

将所述各个模块区域对应的界面布局样式一一对应脚本中现有的界面排版规则样式；

如果所述脚本中现有的界面排版规则样式没有对应模块区域的界面布局样式，则为没有对应的所述模块区域的所述界面布局样式设定新的界面排版规则样式。

可选的，所述为没有对应的模块区域的所述界面布局样式设定新的界面排版规则样式，包括：

采用以界面窗口为根节点，所述各个模块区域为子节点，且有嵌套的模块区域递归划分为父节点和子节点的组合，得到所述新的界面排版规则样式；

对所述新的界面排版规则样式进行数据描述，其中，所述数据描述包括：父节点和子节点区域的关系描述以及各子节点区域的ui样式描述。

第二方面提供一种移动终端界面排版方法，包括：

接收服务端发送的脚本文件，所述脚本文件包括：界面排版规则样式；

按照排版协议对所述脚本文件进行解析，得到对应的界面排版规则样式；

根据所述界面排版规则样式采用flex的布局排版方式对界面窗口进行整体排列布局；

根据所述整体排列布局，回调获取的展示模块内容的子节点控件frame，并在父节点控件frame基础上进行相对位置换算；

将位置换算的结果同步给界面布局，完成界面排版适配。

可选的，所述根据所述界面排版规则样式采用flex的布局排版方式对界面窗口进行整体排列布局，包括：

根据所述界面排版规则样式采用flex的布局排版方式，依次绑定划分后的各节点区域ui样式，并根据父子区域关系，每一父节点绑定其所有子节点区域，以及绑定根节点，实现了对界面窗口的整体排列布局。

第三方面提供一种界面排版样式的发送装置，其特征在于，包括：

获取模块，用于获取目标用户界面ui设计图；

拆分模块，用于对所述目标ui设计图进行拆分，得到界面布局样式；

确定模块，用于确定所述界面布局样式对应的界面排版规则样式；

发送模块，用于将所述界面排版规则样式通过脚本文件下发给移动终端，以便于所述移动终端按照排版协议对脚本文件进行解析得到对应的界面排版规则样式。

可选的，所述拆分模块包括：

划分模块，用于对所述目标ui设计图进行划分，得到界面的各个模块区域；

处理模块，用于对所述各个模块区域进行扁平化处理，得到各个模块区域对应的界面布局样式。

可选的，所述确定模块包括：

对应模块，用于将所述各个模块区域对应的界面布局样式一一对应脚本中现有的界面排版规则样式；

设定模块，用于在所述脚本中现有的界面排版规则样式没有对应模块区域的界面布局样式时，为没有对应的所述模块区域的所述界面布局样式设定新的界面排版规则样式。

可选的，所述设定模块包括：

设定子模块，用于采用以界面窗口为根节点，所述各个模块区域为子节点，且有嵌套的模块区域递归划分为父节点和子节点的组合，得到所述新的界面排版规则样式；

描述模块，用于对所述新的界面排版规则样式进行数据描述，所述数据描述包括：父节点和子节点区域的关系描述以及各子节点区域的ui样式描述。

第四方面提供一种移动终端界面排版装置，包括：

接收模块，用于接收服务端发送的脚本文件，所述脚本文件包括：界面排版规则样式；

解析模块，用于按照排版协议对所述脚本文件进行解析，得到对应的界面排版规则样式；

绑定模块，用于按照所述界面排版规则样式绑定各节点区域ui样式；

排列布局模块，用于根据所述界面排版规则样式采用flex的布局排版方式对界面窗口进行整体排列布局；

位置换算模块，用于根据所述整体排列布局，回调展示模块内容的子节点控件frame，与父节点控件frame进行位置换算；

同步模块，用于将位置换算的结果同步给界面布局，完成界面排版适配。

可选的，所述排列布局模块，具体用于根据所述界面排版规则样式采用flex的布局排版方式，依次绑定划分后的各节点区域ui样式，并根据父子区域关系，每一父节点绑定其所有子节点区域，以及绑定根节点，得到界面窗口的整体排列布局。

与现有技术相比，本发明实施例包括以下优点：

本发明实施例中，服务端先对目标用户界面ui设计图进行拆分，得到界面布局样式，然后确定所述界面布局样式对应的界面排版规则样式，以及将所述界面排版规则样式通过脚本文件下发给移动终端，以便于所述移动终端按照排版协议对脚本文件进行解析得到对应界面排版规则样式。也就是说，本发明实施例中，服务端按照目标ui设计图为移动终端动态配置界面排版规则样式，降低丰富的ui界面展示与排版适配的成本，为移动端提供了简便、高效的界面动态排版。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

图1是本发明实施例提供的一种界面排版样式的发送方法的流程图；

图2是本发明实施例提供的一种移动终端界面排版方法的流程图；

图3是本发明实施例提供的一种界面排版样式的发送装置的结构示意图；

图4是本发明实施例提供的一种移动终端界面排版装置的结构示意图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

请参阅图1，为本发明实施例提供的一种界面排版样式的发送方法的流程图，具体可以包括如下步骤：

步骤101：获取目标用户界面ui设计图；

该步骤中，根据运营商或实际需要，预先设置目标用户界面(ui，userinterface)设计图，即服务端获取目标用户界面ui设计图。

其中，ui设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的ui设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。

步骤102；对所述目标ui设计图进行拆分，得到界面布局样式；

服务端对目标ui设计图进行拆分，得到界面布局样式。其中，一种拆分方式为：

首先，服务端对所述目标ui设计图进行划分，得到界面的各个模块区域；然后，对所述各个模块区域进行扁平化处理，得到各个模块区域对应的界面布局样式。

本发明实施例中，划分ui设计图具体采用“最小子集”划分法，比如，划分ui设计图，就像遍历树形结构，划分后的各模块可理解为树的叶子节点，叶子节点不再有自己的孩子。需要说明的是，最小子集的划分法对于本领域技术人员来说，已是熟知技术，再此不再赘述。

本实施例中，ui设计图是像树一样具有层次结构的，每个模块区域对应的界面布局样式包含模块间的层级关系及自身样式描述两个部分，而扁平化处理是指对其划分后的模块之间的层级关系进行平级描述。

步骤103；确定所述界面布局样式对应的界面排版规则样式；

该步骤中，服务端将所述各个模块区域对应的界面布局样式一一对应脚本中现有的界面排版规则样式；

如果所述脚本中现有的界面排版规则样式没有对应模块区域的界面布局样式，则为没有对应的所述模块区域的所述界面布局样式设定新的界面排版规则样式。

其中，一种为没有对应的模块区域的所述界面布局样式设定新的界面排版规则样式，包括：

服务器先采用树的结构遍历方式，以界面窗口为根节点，所述各个模块区域为子节点，且有嵌套的模块区域递归划分为父节点和子节点的组合，得到所述新的界面排版规则样式；然后，对所述新的界面排版规则样式进行数据描述，其中，所述数据描述包括：父节点和子节点区域的关系描述以及各子节点区域的ui样式描述。

也就是说，在本实施例中，ui设计图可以比为树，划分的模块都是树的节点：界面窗口是树的根节点，最终划分后的“最小子集”模块为树的叶子节点，其他为中间的普通层级节点。而界面排版规则样式包括模块间的关系(比如父子关系等)及其样式，即树节点的层级关系及样式描述，树节点的层级关系是父亲和孩子的关系，即只要一个节点下层还有子节点，即为它的孩子。

步骤104；将所述界面排版规则样式通过脚本文件下发给移动终端。

服务端将界面排版规则样式通过脚本文件下发给移动终端，以便于移动终端在接收到所述脚本文件后，按照排版协议对所述脚本文件进行解析，得到对应的界面排版规则样式。

本实施例中的脚本文件(script)是使用一种特定的描述性语言，依据一定的格式编写的可执行文件。脚本文件通常可以由应用程序临时调用并执行。各类脚本目前被广泛地应用于网页设计中，因为脚本不仅可以减小网页的规模和提高网页浏览速度，而且可以丰富网页的表现，如动画、声音等。

本发明实施例中，服务端先对目标用户界面ui设计图进行拆分，得到界面布局样式，然后确定所述界面布局样式对应的界面排版规则样式，以及将所述界面排版规则样式通过脚本文件下发给移动终端，以便于所述移动终端按照排版协议对脚本文件进行解析得到对应界面排版规则样式。也就是说，本发明实施例中，服务端按照目标ui设计图为移动终端动态配置界面排版规则样式，降低丰富的ui界面展示与排版适配的成本，为移动端提供了简便、高效的界面动态排版。

还请参阅图2，为本发明实施例提供的一种移动终端界面排版方法的流程图，所述方法包括：

步骤201：接收服务端发送的脚本文件，所述脚本文件包括：界面排版规则样式；

该步骤中，移动终端接收到服务端发送的脚本文件，该脚本文件中含有界面排版相关内容，即界面排版规则样式。

步骤202：按照排版协议对所述脚本文件进行解析，得到对应的界面排版规则样式；

其中，排版协议是服务端和移动终端双方事先约定好的。

该步骤中，移动终端根据该约定好的排版协议对该脚本文件进行解析，得到对应的界面排版规则样式。

步骤203：根据所述界面排版规则样式采用flex的布局排版方式对界面窗口进行整体排列布局；

该实施例中，移动终端根据所述界面排版规则样式采用flex的布局排版方式，依次绑定划分后的各节点区域ui样式，并根据父子区域关系，每一父节点绑定其所有子节点区域，以及绑定根节点，得到界面窗口的整体排列布局。

该步骤中，移动终端根据界面排版规则样式绑定各个节点区域ui样式，其中，各个节点，包括父节点和子节点，以及根节点。

本实施例中，各个节点区域指的就是划分后的模块区域，每个模块都有自己内部的控件，比如文本，按钮，图片等。用户看到的视图效果是需要模块及其控件样式进行排版渲染的，而模块及其控件样式即对应各节点区域的ui样式，这部分描述在排版规则中包含。而界面排版规则样式包含模块间的关系(父子关系)及其样式，所以需要绑定样式来渲染界面模块。

其绑定的步骤包括：根据服务器下发脚本文件中包括的界面排版规则样式，一一对应划分后的各模块区域，找到界面排版规则样式中相应描述ui样式的部分，根据flex布局规范，进行一一解析及绑定各区域自己的ui样式，ui样式就是用户看到的视图效果。

界面排版需要模块区域之间的关系及其样式描述，各区域绑定其样式描述后，根据上述类比，ui设计图为树形结构，而界面的整体排版即相当于生成树的过程，界面窗口为根节点，下层生成它的子节点(根节点为其父亲，它们之间的关系为父子关系)，

同理，递归生成每层每个节点的孩子，即其子节点，直到“最小子集”的节点产生，即树的叶子节点，下层再没有孩子。生成节点的方法即排版各划分后的模块区域的方法：依据flex布局规范。

其中，flex是一种布局规范，用来排版某一区域内的布局元素的技术。它包含容器属性和布局元素的项目属性两种，容器属性主要有：排版的方向，是否折行，排版主轴及其交叉轴的对齐方式；项目属性包含：布局元素的排版顺序，在容器内的伸缩排版情况等；

根据上述的flex技术，在依次绑定划分后的模块区域的排版样式后，界面窗口作为根节点，根据模块区域之间的层级结构关系，进行整体排版布局，渲染出整个界面视图效果。其中，排版的过程包括：移动终端用native语言编程，调用自己封装的方法，通过二进制数据传输给计算机实现的。

步骤204：根据所述整体排列布局，回调获取的展示模块内容的子节点控件frame，与父节点控件frame进行位置换算；

在该实施例中，展示模块内容就是用户看到的视图界面，就是由文本，图片等形成的视图效果。回调指的是：排版完成后会有一个类似通知的机制告诉系统排版结束，同时会传给系统所需参数。

其中，具体的获取展示模块内容的子节点控件frame的过程包括：排版完成后，从移动终端用native语言编程后且封装好的排版方法库里获取的。

各节点按照“flex布局规范”排版布局后，得到它的frame，即位置和大小描述，然后父节点下面还有子节点，子节点在父节点的基础上排版，位置是需要进行换算的，得到相对位置，即相对布局。其相对位置的换算对于本领域技术人员来说已是熟知技术，在此不再赘述。

步骤206：将位置换算的结果同步给界面布局，完成界面排版适配。

该步骤中，同步的过程是指将换算后的相对位置传输给系统，系统将结果呈现到屏幕上，即界面上看到的视图效果，比如图的下面有两行文本等这样的视图。

本发明实施例中，移动终端对接收到的脚本文件进行解析，得到对应的界面排版规则样式，然后，按照界面排版规则样式，采取flex的布局排版方式，对界面窗口进行整体排列布局，并根据整体排列布局，回调获取的展示模块内容的子节点控件frame，并在父节点控件frame基础上进行相对位置换算；以及将位置换算的结果同步给界面布局，完成界面排版适配。也就是说，本发明实施例中，界面排版在动态可配的基础上，将解析得到的排版规则结合flex的标准布局，可支持更简便、高效地适配移动端丰富的ui界面，使移动终端界面的动态排版更简单规范，适配更灵活高效。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。

请参阅图3，为本发明实施例提供的一种界面排版样式的发送装置的结构示意图，具体可以包括如下模块：获取模块31，拆分模块32，确定模块33和发送模块34，其中，

获取模块31，用于获取目标用户界面ui设计图；

拆分模块32，用于对所述目标ui设计图进行拆分，得到界面布局样式；

确定模块33，用于确定所述界面布局样式对应的界面排版规则样式；

发送模块34，用于将所述界面排版规则样式通过脚本文件下发给移动终端，以便于所述移动终端按照排版协议对脚本文件进行解析得到对应的界面排版规则样式。

可选的，在另一实施例中，该实施例在上述实施例的基础上，所述拆分模块包括：划分模块和处理模块(图中未示)，其中，

划分模块，用于对所述目标ui设计图进行划分，得到界面的各个模块区域；

处理模块，用于对所述各个模块区域进行扁平化处理，得到各个模块区域对应的界面布局样式。

可选的，在另一实施例中，该实施例在上述实施例的基础上，所述确定模块包括：对应模块和设定模块(图中未示)，其中，

对应模块，用于将所述各个模块区域对应的界面布局样式一一对应脚本中现有的界面排版规则样式；

设定模块，用于在所述脚本中现有的界面排版规则样式没有对应的界面布局样式时，为没有对应的所述模块区域的所述界面布局样式设定新的界面排版规则样式。

可选的，在另一实施例中，该实施例在上述实施例的基础上，所述设定模块包括：设定子模块和描述模块(图中未示)，其中，

设定子模块，用于采用以界面窗口为根节点，所述各个模块区域为子节点，且有嵌套的模块区域递归划分为父节点和子节点的组合，得到所述新的界面排版规则样式；

描述模块，用于对所述新的界面排版规则样式进行具体数据描述，包括：父节点和子节点区域的关系描述以及各子节点区域的ui样式描述。

所述装置可以集成在服务端，也可以独立部署，本实施例不做限制。

需要说明的是，本实施例中，界面排版规则样式就是界面排版样式。

还请参阅图4，为本发明实施例提供的一种移动终端界面排版装置的结构示意图，所述装置包括：接收模块41，解析模块42，绑定模块43，排列布局模块44，位置换算模块45和同步模块46，其中，

接收模块41，用于接收服务端发送的脚本文件，所述脚本文件包括：界面排版规则样式；

解析模块42，用于按照排版协议对所述脚本文件进行解析，得到对应的界面排版规则样式；

排列布局模块43，用于根据所述界面排版规则样式采用flex的布局排版方式对界面窗口进行整体排列布局；

位置换算模块44，用于根据所述整体排列布局，回调展示模块内容的子节点控件frame，与父节点控件frame进行位置换算；

同步模块45，用于将位置换算的结果同步给界面布局，完成界面排版适配。

可选的，再另一实施例中，该实施例在上述实施例的基础上，所述排列布局模块44，具体用于根据所述界面排版规则样式采用flex的布局排版方式，依次绑定划分后的各节点区域ui样式，并根据父子区域关系，每一父节点绑定其所有子节点区域，以及绑定根节点，得到界面窗口的整体排列布局。

所述装置可以集成在移动终端，也可以独立部署，本实施例不做限制。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本发明实施例中，服务端先对目标用户界面ui设计图进行拆分，得到界面布局样式，然后确定所述界面布局样式对应的界面排版规则样式，以及将所述界面排版规则样式通过脚本文件下发给移动终端，以便于所述移动终端按照排版协议对脚本文件进行解析得到对应界面排版规则样式。也就是说，本发明实施例中，服务端按照目标ui设计图为移动终端动态配置界面排版规则样式，降低丰富的ui界面展示与排版适配的成本，为移动端提供了简便、高效的界面动态排版。

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

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

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

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

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

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

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

以上对本发明所提供的一种界面排版文件的发送方法、移动终端界面排版方法及装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。