一种设置用户界面的方法及装置与流程

本发明涉及计算机技术领域，特别涉及一种设置用户界面的方法及装置。

背景技术：

在android电视和机顶盒应用开发过程中，经常会遇到用户调整相关用户界面的需求。现有技术中，当需要调整用户界面时，开发人员需要重新对整个用户界面进行开发，需要消耗较多的时间。

技术实现要素：

本发明实施例提供了一种设置用户界面的方法及装置，能够减少设置用户界面所需要的时间。

一方面，本发明实施例提供了一种设置用户界面的方法，包括：

s1：获取用户界面数据，其中，所述用户界面数据中包括：基础像素宽度、至少一个表格、每个所述表格的表格高度、每个待生成的目标用户界面的目标控件的属性，其中，每个所述目标控件的属性设置在所述至少一个表格的目标单元格中；

s2：从所述用户界面数据中解析出基础像素宽度；

s3：根据屏幕真实像素宽度和所述基础像素宽度，确定比例关系；

s4：针对每个所述表格，执行a1-a5：

a1：从所述用户界面数据中解析出当前表格的表格高度；

a2：根据所述比例关系、所述当前表格的表格高度和所述基础像素宽度，确定所述当前表格对应的位于所述目标用户界面中的页面布局；

a3：从所述用户界面数据中解析出所述当前表格中的每个所述目标单元格在所述当前表格中的位置，以及每个所述目标单元格中的目标控件的属性；

a4：根据所述当前表格中的每个所述目标单元格在所述当前表格中的位置，确定每个所述目标控件在所述当前表格对应的页面布局中的目标位置；

a5：根据每个所述目标控件的属性，在每个所述目标控件对应的在所述页面布局中的目标位置上实现每个所述目标控件。

优选地，

在所述s2之前，进一步包括：

新建recyclerview，设置所述recyclerview的布局为线性垂直布局；

在所述s1之后，进一步包括：

将所述用户界面数据传入到所述recyclerview的adapter中；

所述s2，包括：

在所述adapter内部对所述用户界面数据进行解析，生成所述基础像素宽度；

所述s3，包括：

在所述adapter内部根据屏幕真实像素宽度和所述基础像素宽度，确定所述比例关系；

所述s4，包括：

在所述adapter内部针对每个所述表格，执行a1-a5。

优选地，

所述a2，包括：

根据所述比例关系、所述当前表格的表格高度和所述基础像素宽度，生成所述当前表格对应的framelayout；

将所述当前表格对应的framelayout作为所述当前表格对应的位于所述目标用户界面中的页面布局。

优选地，

所述用户界面数据中进一步包括：每个所述目标单元格所在列数、所在行数、占用行数和占用列数；

所述从所述用户界面数据中解析出所述当前表格中的每个所述目标单元格在所述当前表格中的位置，包括：

从所述用户界面数据中解析出所述当前表格中的每个所述目标单元格所在列数、所在行数、占用行数和占用列数。

优选地，

所述根据屏幕真实像素宽度和所述基础像素宽度，确定比例关系，包括：

将所述屏幕真实像素宽度除以所述基础像素宽度，生成所述比例关系。

优选地，

所述用户界面数据为json嵌套的数据结构，所述用户界面数据的最外层数据结构中包括所述基础像素宽度，所述用户界面数据的次外层数据结构中包括所述至少一个表格和每个所述表格的表格高度，每个所述表格内部包括至少一个所述目标单元格。

另一方面，本发明实施例提供了一种设置用户界面的装置，包括：

获取单元，用于获取用户界面数据，其中，所述用户界面数据中包括：基础像素宽度、至少一个表格、每个所述表格的表格高度、每个待生成的目标用户界面的目标控件的属性，其中，每个所述目标控件的属性设置在所述至少一个表格的目标单元格中；

解析单元，用于从所述用户界面数据中解析出基础像素宽度；

确定单元，用于根据屏幕真实像素宽度和所述基础像素宽度，确定比例关系；

控件实现单元，用于针对每个所述表格，执行a1-a5：

a1：从所述用户界面数据中解析出当前表格的表格高度；

a2：根据所述比例关系、所述当前表格的表格高度和所述基础像素宽度，确定所述当前表格对应的位于所述目标用户界面中的页面布局；

a3：从所述用户界面数据中解析出所述当前表格中的每个所述目标单元格在所述当前表格中的位置，以及每个所述目标单元格中的目标控件的属性；

a4：根据所述当前表格中的每个所述目标单元格在所述当前表格中的位置，确定每个所述目标控件在所述当前表格对应的页面布局中的目标位置；

a5：根据每个所述目标控件的属性，在每个所述目标控件对应的在所述页面布局中的目标位置上实现每个所述目标控件。

优选地，

该装置进一步包括：

新建单元，用于新建recyclerview，设置所述recyclerview的布局为线性垂直布局；

传入单元，用于将所述用户界面数据传入到所述recyclerview的adapter中；

所述解析单元，用于在所述adapter内部对所述用户界面数据进行解析，生成所述基础像素宽度；

所述确定单元，用于在所述adapter内部根据屏幕真实像素宽度和所述基础像素宽度，确定所述比例关系；

所述控件实现单元，用于在所述adapter内部针对每个所述表格，执行a1-a5。

优选地，

所述控件实现单元，在执行所述a2时，具体用于：

根据所述比例关系、所述当前表格的表格高度和所述基础像素宽度，生成所述当前表格对应的framelayout；

将所述当前表格对应的framelayout作为所述当前表格对应的位于所述目标用户界面中的页面布局。

优选地，

所述用户界面数据中进一步包括：每个所述目标单元格所在列数、所在行数、占用行数和占用列数；

所述控件实现单元，在执行所述从所述用户界面数据中解析出所述当前表格中的每个所述目标单元格在所述当前表格中的位置时，具体用于：

从所述用户界面数据中解析出所述当前表格中的每个所述目标单元格所在列数、所在行数、占用行数和占用列数。

优选地，

所述确定单元，用于将所述屏幕真实像素宽度除以所述基础像素宽度，生成所述比例关系。

优选地，

所述用户界面数据为json嵌套的数据结构，所述用户界面数据的最外层数据结构中包括所述基础像素宽度，所述用户界面数据的次外层数据结构中包括所述至少一个表格和每个所述表格的表格高度，每个所述表格内部包括至少一个所述目标单元格。

在本发明实施例中，当需要设置用户界面时，无需重新开发，只需对需要设置的部分生成用户界面数据，对用户界面数据自动解析，能够实现需要在目标用户界面设置的各个目标控件，并将实现的各个目标控件设置在用户需要的目标位置上，大大减少设置用户界面所需要的时间。

附图说明

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

图1是本发明一实施例提供的一种设置用户界面的方法的流程图；

图2是本发明一实施例提供的另一种设置用户界面的方法的流程图；

图3是本发明一实施例提供的一种设置用户界面的装置的示意图。

具体实施方式

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

如图1所示，本发明实施例提供了一种设置用户界面的方法，该方法可以包括以下步骤：

s1：获取用户界面数据，其中，所述用户界面数据中包括：基础像素宽度、至少一个表格、每个所述表格的表格高度、每个待生成的目标用户界面的目标控件的属性，其中，每个所述目标控件的属性设置在所述至少一个表格的目标单元格中；

s2：从所述用户界面数据中解析出基础像素宽度；

s3：根据屏幕真实像素宽度和所述基础像素宽度，确定比例关系；

s4：针对每个所述表格，执行a1-a5：

a1：从所述用户界面数据中解析出当前表格的表格高度；

a2：根据所述比例关系、所述当前表格的表格高度和所述基础像素宽度，确定所述当前表格对应的位于所述目标用户界面中的页面布局；

a3：从所述用户界面数据中解析出所述当前表格中的每个所述目标单元格在所述当前表格中的位置，以及每个所述目标单元格中的目标控件的属性；

a4：根据所述当前表格中的每个所述目标单元格在所述当前表格中的位置，确定每个所述目标控件在所述当前表格对应的页面布局中的目标位置；

a5：根据每个所述目标控件的属性，在每个所述目标控件对应的在所述页面布局中的目标位置上实现每个所述目标控件。

在本发明实施例中，当需要设置用户界面时，无需重新开发，只需对需要设置的部分生成用户界面数据，对用户界面数据自动解析，能够实现需要在目标用户界面设置的各个目标控件，并将实现的各个目标控件设置在用户需要的目标位置上，大大减少设置用户界面所需要的时间。

在本发明一实施例中，在所述s2之前，进一步包括：

新建recyclerview，设置所述recyclerview的布局为线性垂直布局；

在所述s1之后，进一步包括：

将所述用户界面数据传入到所述recyclerview的adapter中；

所述s2，包括：

在所述adapter内部对所述用户界面数据进行解析，生成所述基础像素宽度；

所述s3，包括：

在所述adapter内部根据屏幕真实像素宽度和所述基础像素宽度，确定所述比例关系；

所述s4，包括：

在所述adapter内部针对每个所述表格，执行a1-a5。

在本发明实施例中，通过adapter对用户界面数据进行解析。

在本发明一实施例中，所述a2，包括：

根据所述比例关系、所述当前表格的表格高度和所述基础像素宽度，生成所述当前表格对应的framelayout；

将所述当前表格对应的framelayout作为所述当前表格对应的位于所述目标用户界面中的页面布局。

在本发明实施例中，将framelayout作为页面布局，将目标控件设置在对应的framelayout中，实现对用户界面的设置。

通过比例关系、当前表格的表格高度和基础像素宽度，能够确定出页面布局在目标用户界面所在的设备中的大小。

在本发明一实施例中，所述用户界面数据中进一步包括：每个所述目标单元格所在列数、所在行数、占用行数和占用列数；

所述从所述用户界面数据中解析出所述当前表格中的每个所述目标单元格在所述当前表格中的位置，包括：

从所述用户界面数据中解析出所述当前表格中的每个所述目标单元格所在列数、所在行数、占用行数和占用列数。

在本发明实施例中，通过目标单元格所在列数、所在行数、占用行数和占用列数来定义目标单元的位置。

在本发明一实施例中，所述根据屏幕真实像素宽度和所述基础像素宽度，确定比例关系，包括：

将所述屏幕真实像素宽度除以所述基础像素宽度，生成所述比例关系。

在本发明一实施例中，所述用户界面数据为json嵌套的数据结构，所述用户界面数据的最外层数据结构中包括所述基础像素宽度，所述用户界面数据的次外层数据结构中包括所述至少一个表格和每个所述表格的表格高度，每个所述表格内部包括至少一个所述目标单元格。

在本发明实施例中，表格中可以嵌套一个表格，在解析时，将外层的表格解析完后，解析该表格内部的表格，直到解析完所有的表格，解析出各个表格中的目标单元格。

在本发明实施例中，用户界面数据通过嵌套的方式实现。每一层嵌套object都有一个特殊的字符用来描述该层嵌套的具体含义。最外层数据结构描述了该页面的基础像素宽度，以及内部组件占用宽度，以及最后更新时间戳。次外层数据结构为表格集合，每一个表格描述了该表格的高度，以及内部包含的行数和列数,用以辅助描述内部嵌套控件的具体位置。表格内部为单元格或表格的集合。表格内部的单元格辅助描述自定义组件的具体位置，表格内部的表格用以更细致的描述组件的相对位置。单元格用所在列数，所在行数，占用行数，占用列数用以描述自身的大小位置。目标单元格内部为目标控件的属性，目标控件的属用以辅助目标用户界面的呈现。

如图2所示，本发明实施例提供的一种设置用户界面的方法，包括：

步骤201：获取用户界面数据，其中，所述用户界面数据中包括：基础像素宽度、至少一个表格、每个所述表格的表格高度、每个待生成的目标用户界面的目标控件的属性，其中，每个所述目标控件的属性设置在所述至少一个表格的目标单元格中。

具体地，该用户界面数据可以通过以下方式获得：

预先设置至少一个可编辑控件；

接收外部输入的编辑指令和拖动指令；

根据所述编辑指令和所述拖动指令，呈现界面效果；

确定外部确定的最终界面效果，生成所述最终界面效果对应的用户界面数据。

步骤202：新建recyclerview，设置所述recyclerview的布局为线性垂直布局。

步骤203：将所述用户界面数据传入到所述recyclerview的adapter中。

步骤204：在所述adapter内部对所述用户界面数据进行解析，生成所述基础像素宽度；

步骤205：在所述adapter内部将所述屏幕真实像素宽度除以所述基础像素宽度，生成所述比例关系。

步骤206：在所述adapter内部针对每个所述表格，执行：

从所述用户界面数据中解析出当前表格的表格高度；

根据所述比例关系、所述当前表格的表格高度和所述基础像素宽度，确定所述当前表格对应的位于所述目标用户界面中的页面布局；

从所述用户界面数据中解析出所述当前表格中的每个所述目标单元格在所述当前表格中的位置，以及每个所述目标单元格中的目标控件的属性；

根据所述当前表格中的每个所述目标单元格在所述当前表格中的位置，确定每个所述目标控件在所述当前表格对应的页面布局中的目标位置；

根据每个所述目标控件的属性，在每个所述目标控件对应的在所述页面布局中的目标位置上实现每个所述目标控件。

在本发明实施例中，后台提供用户输入接口，用户可以在界面自由编辑、拖动可以扩展的控件，用户操作完毕，将后台设置的界面以一定的规则抽象出用户界面数据，并提供相关接口供需要该用户界面数据的终端调用，该终端在恰当的时机请求该接口并解析用户界面数据，最终呈现效果和用户在后台保存的页面基本一致，从而达到直观、所见即所得的效果与后期持续运营化维护的目的，减轻开发人员的工作量，满足不同客户的不同需求。

本发明实施例适用于android系统设备，包括：手机，平板，机顶盒等，具有封装性和通用性。

在本发明实施例中，用户界面数据中抽象出目标控件的属性，统一数据接入接口与焦点控制。

如图3所示，本发明实施例提供了一种设置用户界面的装置，包括：

获取单元301，用于获取用户界面数据，其中，所述用户界面数据中包括：基础像素宽度、至少一个表格、每个所述表格的表格高度、每个待生成的目标用户界面的目标控件的属性，其中，每个所述目标控件的属性设置在所述至少一个表格的目标单元格中；

解析单元302，用于从所述用户界面数据中解析出基础像素宽度；

确定单元303，用于根据屏幕真实像素宽度和所述基础像素宽度，确定比例关系；

控件实现单元304，用于针对每个所述表格，执行a1-a5：

a1：从所述用户界面数据中解析出当前表格的表格高度；

a2：根据所述比例关系、所述当前表格的表格高度和所述基础像素宽度，确定所述当前表格对应的位于所述目标用户界面中的页面布局；

a3：从所述用户界面数据中解析出所述当前表格中的每个所述目标单元格在所述当前表格中的位置，以及每个所述目标单元格中的目标控件的属性；

a4：根据所述当前表格中的每个所述目标单元格在所述当前表格中的位置，确定每个所述目标控件在所述当前表格对应的页面布局中的目标位置；

a5：根据每个所述目标控件的属性，在每个所述目标控件对应的在所述页面布局中的目标位置上实现每个所述目标控件。

在本发明一实施例中，该装置进一步包括：

新建单元，用于新建recyclerview，设置所述recyclerview的布局为线性垂直布局；

传入单元，用于将所述用户界面数据传入到所述recyclerview的adapter中；

所述解析单元，用于在所述adapter内部对所述用户界面数据进行解析，生成所述基础像素宽度；

所述确定单元，用于在所述adapter内部根据屏幕真实像素宽度和所述基础像素宽度，确定所述比例关系；

所述控件实现单元，用于在所述adapter内部针对每个所述表格，执行a1-a5。

在本发明一实施例中，所述控件实现单元，在执行所述a2时，具体用于：

根据所述比例关系、所述当前表格的表格高度和所述基础像素宽度，生成所述当前表格对应的framelayout；

将所述当前表格对应的framelayout作为所述当前表格对应的位于所述目标用户界面中的页面布局。

在本发明一实施例中，所述用户界面数据中进一步包括：每个所述目标单元格所在列数、所在行数、占用行数和占用列数；

所述控件实现单元，在执行所述从所述用户界面数据中解析出所述当前表格中的每个所述目标单元格在所述当前表格中的位置时，具体用于：

从所述用户界面数据中解析出所述当前表格中的每个所述目标单元格所在列数、所在行数、占用行数和占用列数。

在本发明一实施例中，所述确定单元，用于将所述屏幕真实像素宽度除以所述基础像素宽度，生成所述比例关系。

在本发明一实施例中，所述用户界面数据为json嵌套的数据结构，所述用户界面数据的最外层数据结构中包括所述基础像素宽度，所述用户界面数据的次外层数据结构中包括所述至少一个表格和每个所述表格的表格高度，每个所述表格内部包括至少一个所述目标单元格。

上述装置内的各单元之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，具体内容可参见本发明方法实施例中的叙述，此处不再赘述。

本发明各个实施例至少具有如下有益效果：

在本发明实施例中，当需要设置用户界面时，无需重新开发，只需对需要设置的部分生成用户界面数据，对用户界面数据自动解析，能够实现需要在目标用户界面设置的各个目标控件，并将实现的各个目标控件设置在用户需要的目标位置上，大大减少设置用户界面所需要的时间。

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

本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储在计算机可读取的存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：rom、ram、磁碟或者光盘等各种可以存储程序代码的介质中。

最后需要说明的是：以上所述仅为本发明的较佳实施例，仅用于说明本发明的技术方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所做的任何修改、等同替换、改进等，均包含在本发明的保护范围内。