用户界面自适应布局方法、装置、设备和程序产品制造方法及图纸

本公开涉及用户界面自适应布局方法、装置、设备和程序产品。应用于客户端的用户界面自适应布局方法包括：响应于用户界面布局操作，确定目标布局维度；从预设布局文件中确定母版布局信息，并基于目标布局维度，从预设布局文件包含的各候选差分布局信息中确定目标差分布局信息；其中，母版布局信息用于记录母版布局维度下的用户界面布局的信息，候选差分布局信息用于记录候选布局维度下产生变化的局部界面布局的信息；将目标差分布局信息合并至母版布局信息，生成适配待布局终端的界面布局信息。如此，利用一套UI布局文件来高效且精简地存储各布局维度的布局信息，且以差分处理的方式提高了用户界面自适应布局的效率及其与终端的适配程度。与终端的适配程度。与终端的适配程度。

【技术实现步骤摘要】
用户界面自适应布局方法、装置、设备和程序产品


[0001]本公开涉及计算机
，尤其涉及一种用户界面自适应布局方法、装置、设备和程序产品。

技术介绍

[0002]随着用户终端及其显示屏幕的多样化，需要对用户界面(User Interface，UI)的布局进行自适应/响应式调整，以适配不同的用户终端。目前的用户界面自适应布局方案主要是制作多套UI布局文件来适配不同用户终端，或者通过对同一套UI布局文件进行简单的局部修改来适配不同用户终端。但是，这些UI自适应布局的方案均存在布局调整的适配性较差和实现成本高的问题。

技术实现思路

[0003]为了解决上述用户界面自适应布局的适配效果差和实现成本高的技术问题，本公开提供了一种用户界面自适应布局方法、装置、设备和程序产品。
[0004]第一方面，本公开实施例提供了一种用户界面自适应布局方法，应用于客户端，包括：
[0005]响应于用户界面布局操作，确定目标布局维度；其中，所述目标布局维度为用户界面布局调整的依据维度；
[0006]从预设布局文件中确定母版布局信息，并基于所述目标布局维度，从预设布局文件包含的至少一个候选差分布局信息中确定目标差分布局信息；其中，所述母版布局信息用于记录母版布局维度下的用户界面布局的信息，所述候选差分布局信息用于记录候选布局维度下的用户界面布局相对于所述母版布局维度下的用户界面布局产生变化的局部界面布局的信息；
[0007]将所述目标差分布局信息合并至所述母版布局信息，生成适配客户端对应的待布局终端的界面布局信息。
[0008]第二方面，本公开实施例还提供了一种用户界面自适应布局方法，应用于服务端，包括：
[0009]响应于客户端发送的用户界面布局请求，确定目标布局维度；其中，所述目标布局维度为用户界面布局调整的依据维度；
[0010]从预设布局文件中确定母版布局信息，并基于所述目标布局维度，从预设布局文件包含的至少一个候选差分布局信息中确定目标差分布局信息；其中，所述母版布局信息用于记录母版布局维度下的用户界面布局的信息，所述候选差分布局信息用于记录候选布局维度下的用户界面布局相对于所述母版布局维度下的用户界面布局产生变化的局部界面布局的信息；
[0011]将所述目标差分布局信息合并至所述母版布局信息，生成适配所述客户端对应的待布局终端的界面布局信息；
[0012]将所述界面布局信息发送至所述客户端，以使所述客户端基于所述界面布局信息展示界面内容。
[0013]第三方面，本公开实施例还提供了一种用户界面自适应布局装置，配置于客户端，包括：
[0014]目标布局维度确定模块，用于响应于用户界面布局操作，确定目标布局维度；其中，所述目标布局维度为用户界面布局调整的依据维度；
[0015]目标差分布局信息确定模块，用于从预设布局文件中确定母版布局信息，并基于所述目标布局维度，从预设布局文件包含的至少一个候选差分布局信息中确定目标差分布局信息；其中，所述母版布局信息用于记录母版布局维度下的用户界面布局的信息，所述候选差分布局信息用于记录候选布局维度下的用户界面布局相对于所述母版布局维度下的用户界面布局产生变化的局部界面布局的信息；
[0016]布局信息合并模块，用于将所述目标差分布局信息合并至所述母版布局信息，生成适配客户端对应的待布局终端的界面布局信息。
[0017]第四方面，本公开实施例还提供了一种用户界面自适应布局装置，配置于服务端，包括：
[0018]布局请求响应模块，用于响应于客户端发送的用户界面布局请求，确定目标布局维度；其中，所述目标布局维度为用户界面布局调整的依据维度；
[0019]目标差分布局信息确定模块，用于从预设布局文件中确定母版布局信息，并基于所述目标布局维度，从预设布局文件包含的至少一个候选差分布局信息中确定目标差分布局信息；其中，所述母版布局信息用于记录母版布局维度下的用户界面布局的信息，所述候选差分布局信息用于记录候选布局维度下的用户界面布局相对于所述母版布局维度下的用户界面布局产生变化的局部界面布局的信息；
[0020]布局信息合并模块，用于将所述目标差分布局信息合并至所述母版布局信息，生成适配所述客户端对应的待布局终端的界面布局信息；
[0021]界面布局信息发送模块，用于将所述界面布局信息发送至所述客户端，以使所述客户端基于所述界面布局信息展示界面内容。
[0022]第五方面，本公开实施例还提供了一种电子设备，包括：
[0023]存储器和处理器，所述存储器用于存储所述处理器可执行指令；
[0024]所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述可执行指令以实现本公开任意实施例所提供的所述用户界面自适应布局方法。
[0025]第六方面，本公开实施例还提供了一种计算机程序产品，所述计算机程序产品用于执行本公开任意实施例所提供的所述用户界面自适应布局方法。
[0026]本公开实施例提供的用户界面自适应布局方法相对于现有技术有如下优点：
[0027]一、利用一个预设布局文件来存储母版布局信息和各候选差分布局信息，该母版布局信息为母版布局维度下的、完整的用户界面布局的信息，该候选差分布局信息是区别于母版布局维度的候选布局维度下的、相对于母版布局信息发生局部的布局变化的信息。一方面，通过一套UI布局文件来高效且精简地存储各种布局维度对应的布局信息，避免了多套UI布局文件所造成的数据存储量大的问题，为后续自适应布局提供了更加全面且精简的数据基础；另一方面，差分布局信息的创建与存储，使得候选布局维度及其对应的界面布
局的修改变得更加便捷与灵活，降低了自适应布局的开发成本和维护成本。
[0028]二、在自适应布局的过程中，只需根据目标布局维度从预设布局文件中筛选出对应的目标差分布局信息，并将其与母版布局信息进行组合，无需业务代码侵入，便可得到适配目标布局维度的界面布局信息，既提高了用户界面自适应布局的效率，又确保了界面布局信息与目标布局维度的适配程度，即便是复杂的动态布局调整，也可通过筛选合适的差分布局信息来实现，提高了自适应布局调整的普适性。
附图说明
[0029]结合附图并参考以下具体实施方式，本公开各实施例的上述和其他特征、优点及方面将变得更加明显。贯穿附图中，相同或相似的附图标记表示相同或相似的元素。应当理解附图是示意性的，原件和元素不一定按照比例绘制。
[0030]图1为本公开实施例提供的一种应用于客户端的用户界面自适应布局方法的流程示意图；
[0031]图2为本公开实施例提供的一种交互式布局界面的显示示意图；
[0032]图3为本公开实施例提供的一种屏幕分辨率与候选屏幕类型之间的关系示意图；
[0033]图4为本公开实施例提供的一种预设布局文件构建的流程示意图；
[0034]图5为本公开实施例提供的一种预设布局文件中的候选差分布局信息对应的多叉树结构的示意图；<本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种用户界面自适应布局方法，其特征在于，应用于客户端，包括：响应于用户界面布局操作，确定目标布局维度；其中，所述目标布局维度为用户界面布局调整的依据维度；从预设布局文件中确定母版布局信息，并基于所述目标布局维度，从预设布局文件包含的至少一个候选差分布局信息中确定目标差分布局信息；其中，所述母版布局信息用于记录母版布局维度下的用户界面布局的信息，所述候选差分布局信息用于记录候选布局维度下的用户界面布局相对于所述母版布局维度下的用户界面布局产生变化的局部界面布局的信息；将所述目标差分布局信息合并至所述母版布局信息，生成适配客户端对应的待布局终端的界面布局信息。2.根据权利要求1所述的方法，其中，所述预设布局文件通过如下方式预先构建：以多叉树结构存储所述母版布局维度下的用户界面布局中包含的各布局元素，生成所述母版布局信息；其中，以节点关系记录各所述布局元素之间的层级关系，以叶节点记录所述布局元素的元素类型、元素内容和元素属性；以多叉树结构存储所述候选布局维度下的用户界面布局相对于所述母版布局维度下的用户界面布局产生变化的至少一个所述布局元素，生成所述候选差分布局信息；将所述母版布局信息按照母版标识存储至所述预设布局文件，且将各所述候选差分布局信息按照相应候选布局维度存储至所述预设布局文件。3.根据权利要求1所述的方法，其中，所述从预设布局文件中确定母版布局信息，并基于所述目标布局维度，从预设布局文件包含的至少一个候选差分布局信息中确定目标差分布局信息包括：基于母版标识，从所述预设布局文件中确定所述母版布局信息；匹配所述目标布局维度与各所述候选布局维度，并将匹配成功的所述候选布局维度对应的所述候选差分布局信息确定为所述目标差分布局信息。4.根据权利要求1至3任一项所述的方法，其中，所述目标布局维度包括目标屏幕类型、目标布局样式、目标终端类型和目标终端型号中的至少一个；其中，所述目标布局样式用于表征布局元素的类型、数量、布局位置和布局层级关系中的至少一个。5.根据权利要求4所述的方法，其中，在所述目标布局维度包括所述目标屏幕类型和所述目标布局样式的情况下，所述响应于用户界面布局操作，确定目标布局维度包括：响应于所述用户界面布局操作，确定所述待布局终端的目标屏幕分辨率，并基于所述目标屏幕分辨率确定目标屏幕类型；从候选屏幕类型与候选布局样式的对应关系中确定所述目标屏幕类型对应的目标布局样式。6.根据权利要求5所述的方法，其中，所述基于所述目标屏幕分辨率确定目标屏幕类型包括：将所述目标屏幕分辨率与多个候选分辨率区间进行匹配，确定所述目标屏幕分辨率所在的目标分辨率区间；其中，所述候选分辨率区间由预设宽度像素数和预设高度像素数确定，所述预设宽度像素数包括基础宽度像素数和扩展宽度像素数，高度所在方向和宽度所在方向垂直；
将所述目标分辨率区间对应的候选屏幕类型确定为所述目标屏幕类型。7.根据权利要求5所述的方法，其中，所述对应关系基于交互式布局界面的交互操作生成；所述交互式布局界面至少用于呈现所述候选屏幕类型的选择功能和所述候选布局样式的设计功能。8.根据权利要求1所述的...

【专利技术属性】
技术研发人员：陈祖杰，叶城宇，刘永学，
申请(专利权)人：阿里巴巴中国有限公司，
类型：发明
国别省市：