[发明专利]一种界面布局方法、电子设备和计算机可读存储介质

说明书

本发明实施例提供的一种界面布局方法、电子设备和计算机可读存储介质的技术方案中，当第一终端设备与第二终端设备连接时，获取第二终端设备的显示分辨率；根据显示分辨率计算出第二终端设备的屏幕宽高比值，并从多个预先划分的比例区间中，确定出屏幕宽高比值所处的比例区间；根据屏幕宽高比值所处的比例区间，获取比例区间对应的显示布局样式；基于显示布局样式，从第一终端设备的应用页面中选取第一视觉元素；根据显示布局样式对第一视觉元素进行布局，以生成第二终端设备的显示界面，通过设置不同比例区间对应的显示布局样式，使得根据显示布局样式对第一视觉元素进行布局时，保证第一视觉元素能够达到整齐、美观、易用性强的视觉效果。

【技术领域】

本发明涉及电子技术领域，具体地涉及一种界面布局方法、电子设备和计算机可读存储介质。

【背景技术】

在分布式场景下，原来手机上展示的界面需要被拓展到其他设备上展示，例如车机、平板、电脑、电视、AR、VR等设备。在相关技术中，在多个设备上体验同一服务的方法通常包括以下两种：一种是在多个设备上安装服务应用的客户端，然而这种方式需要设计师设计和导出多种设备上的界面资源，开发者也需要开发多套布局资源，从而导致耗费较大的人力、物力的问题。并且这种方式一旦遇到没有针对性适配的界面，就会出现界面显示元素错位、显示不完整等问题。另一种是投屏分布，然而传统的投屏的方式容易造成当同一应用界面分布到不同设备上视觉效果欠佳、应用界面上的各个模块参差不齐、错位重叠和易用性差的问题。

【发明内容】

有鉴于此，本发明提供一种界面布局方法、电子设备和计算机可读存储介质，通过设置不同比例区间对应的显示布局样式，使得根据显示布局样式对第一视觉元素进行布局时，保证第一视觉元素能够达到整齐、美观、易用性强、适配第二终端设备的视觉效果。

一方面，本发明实施例提供了一种界面布局方法，应用于第一终端设备，包括：

当所述第一终端设备与第二终端设备连接时，获取所述第二终端设备的显示分辨率；

根据所述显示分辨率计算出所述第二终端设备的屏幕宽高比值，并从多个预先划分的比例区间中，确定出所述屏幕宽高比值所处的比例区间；

根据所述屏幕宽高比值所处的比例区间，获取所述比例区间对应的显示布局样式；

基于所述显示布局样式，从所述第一终端设备的应用页面中选取第一视觉元素；

根据所述显示布局样式对所述第一视觉元素进行布局，以生成所述第二终端设备的显示界面。

作为一种可能的实现方式，所述显示布局样式包括显示窗口数量、栅格数量、栅格宽度、边距以及间距，其中，每个显示窗口所包含的栅格的数量不同，边距用于指示第一视觉元素与所述第二终端设备的显示界面边缘之间的距离，间距用于指示第一视觉元素之间的距离；

在所述根据所述显示布局样式对所述第一视觉元素进行布局，以生成所述第二终端设备的显示界面之前，包括：

根据所述第一视觉元素的类型、获取的所述第一视觉元素的属性信息以及预设的元素布局规则，确定出所述第一视觉元素所占的栅格数量，其中，所述元素布局规则包括多个类型的第一视觉元素对应的布局规则。

作为一种可能的实现方式，在所述根据所述第一视觉元素的类型、获取的所述第一视觉元素的属性信息以及预设的元素布局规则，确定出所述第一视觉元素所占的栅格数量之后，包括：

获取所述第二终端设备的设备信息，所述设备信息包括显示区域的大小、显示区域的位置以及设备类型；

根据所述设备信息和所述第一视觉元素所占的栅格数量，确定出所述第一视觉元素的位置，所述位置包括所述第一视觉元素所处的显示窗口以及在所述显示窗口在所述第二终端设备的显示区域的所处位置。