界面显示方法及电子设备与流程

本技术实施例涉及终端设备领域，尤其涉及一种界面显示方法及电子设备。

背景技术：

1、随着折叠屏技术的发展，越来越多的用户选择使用折叠屏手机。但是，目前的第三方应用在布局窗口时，通常是基于直板手机的屏幕比例进行布局。因此，在直板手机与折叠手机的屏幕比例相差较大时，第三方应用的窗口布局方式将无法适应折叠屏手机的屏幕，影响用户使用体验。

技术实现思路

1、本技术实施例提供一种界面显示方法及电子设备，在该方法中，电子设备可在不减少应用所要显示的界面内容的情况下，显示应用的用户界面，提升用户使用体验。

2、第一方面，本技术实施例提供一种界面显示方法。该方法包括：电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面。其中，第一用户界面的宽度与第一显示窗口的宽度相同，第一用户界面的高度与第一显示窗口的高度相同。目标应用的视图树中包括至少一个视图节点，第一用户界面中包括至少一个视图节点中的每个节点所对应的控件。电子设备拉伸第一用户界面及第一用户界面中的各控件的宽度，得到第二用户界面。第二用户界面中的各控件的高度等于第一用户界面中的各控件的高度。电子设备将第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同。电子设备在第二显示窗口显示第二用户界面；第二用户界面的宽度等于第二显示窗口的宽度，第二用户界面的高度等于第二显示窗口的高度；第二显示窗口的高度等于第一显示窗口的高度，第二显示窗口的宽度大于第一显示窗口的宽度。这样，本技术实施例中通过在系统级对应用的用户界面做自适应，可适用于任意应用，应用自身无需做修改。并且，本技术实施例中通过拉伸界面得到的用户界面，不会减少应用所要显示的用户界面中的内容。

3、示例性的，第一显示窗口可以是本技术实施例中的显示窗口901。

4、示例性的，第二显示窗口可以是本技术实施例中的显示窗口902。

5、示例性的，电子设备将至少一个控件的宽度还原至与在第一用户界面中的宽度相同，可以理解为是将至少一个控件的宽度还原至拉伸前的宽度。

6、示例性的，第二用户界面中的控件与第二用户界面的上边缘的距离，与其在第一用户界面时，与第一用户界面的上边缘的距离相等。第二用户界面中的控件与第二用户界面的下边缘的距离，与其在第一用户界面时，与第一用户界面的下边缘的距离相等。

7、示例性的，各显示窗口及空间的高度可选地为纵向方向上的像素值。显示窗口及空间的宽度可选地为横向方向上的像素值。

8、示例性的，视图树即为本技术实施例中所述的viewtree。

9、示例性的，视图节点包括view和/或viewgroup。

10、根据第一方面，电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面之前，方法还包括：电子设备获取目标应用生成的视图树，视图树为目标应用基于电子设备传输给目标应用的窗口信息生成的，窗口信息用于指示第一显示窗口的宽度与高度。这样，电子设备提供给应用的是第一显示窗口的信息，应用可基于第一显示窗口的高度与宽度生成的视图树，从而对应用的要求降低，无需应用对视图树做修改。

11、示例性的，方法还可以包括电子设备中的布局系统向应用传输窗口信息，并接收到应用生成的视图树。

12、示例性的，窗口信息仅指示第一显示窗口的宽度与高度，不指示第一显示窗口的位置。

13、根据第一方面，或者以上第一方面的任意一种实现方式，电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面，包括：电子设备获取至少一个视图节点中的每个视图节点的布局信息，布局信息用于指示每个视图节点在第一显示窗口中的大小与位置；电子设备基于每个视图节点的布局信息，生成第一用户界面。这样，在布局阶段，电子设备可基于第一显示窗口进行布局，以得到第一用户界面。布局后得到的第一用户界面是符合第一显示窗口的尺寸的，各控件的位置也是在第一显示窗口中的。基于第一显示窗口布局后的第一用户界面接近于直板手机的显示界面。

14、示例性的，布局信息指示视图节点在其父节点中的位置，也可以理解为是在第一显示窗口中的位置。示例性的，视图节点的位置包括其与父节点的左、右、上、下四条边的距离。

15、示例性的，每个视图节点可以看作为矩形。

16、根据第一方面，或者以上第一方面的任意一种实现方式，电子设备基于每个视图节点的布局信息，生成第一用户界面，包括：电子设备基于每个视图节点的布局信息，创建每个视图节点的画布，并在每个视图节点对应的画布上，绘制每个视图节点对应的控件内容以得到第一用户界面；其中，视图节点的根视图节点对应的画布的高度为第一用户界面的高度，根视图节点对应的画布的宽度为第一用户界面的宽度。这样，本技术实施例中通过对节点的画布进行拉伸，以实现对用户界面中的控件的拉伸操作。

17、示例性的，用户界面所显示的控件，可以理解为是视图节点所对应的控件。需要说明的是，用户界面上所显示的控件内容，仅为控件的一部分内容，其可能包括未显示的部分，即画布中未填充图像的部分。用户从显示界面中可能看不到画布中除控件内容以外的部分，但是该未显示的部分，同样属于控件的一部分，也可以理解为是视图节点对应的控件的一部分。

18、根据第一方面，或者以上第一方面的任意一种实现方式，电子设备拉伸第一用户界面及第一用户界面中的各控件的宽度，得到第二用户界面，包括：电子设备拉伸至少一个视图节点的画布的宽度以得到第二用户界面；其中，至少一个视图节点的画布中的控件内容随着画布拉伸而拉伸。这样，本技术实施例中通过对画布进行拉伸，从而实现对控件的拉伸。本技术实施例中仅改变各视图节点对应的画布，而不改变控件的实际位置，其中，实际位置即为控件在第一显示窗口中的位置。可以理解为，本技术实施例中仅改变各控件在显示窗口中所呈现的内容，而不改变其在布局阶段在显示窗口中的实际位置，从而降低系统处理复杂度。

19、根据第一方面，或者以上第一方面的任意一种实现方式，视图树包括根视图节点以及多个子视图节点，电子设备将第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同，包括：电子设备将第二用户界面中的至少一个子视图节点对应的画布的宽度还原至拉伸前的宽度；至少一个子视图节点属于多个子视图节点。这样，将控件的画布拉伸之后，将部分控件的画布还原，可避免拉伸所导致的控件内容变形。对于一些拉伸后不会影响其显示内容的控件，可仍然保持其拉伸后的宽度，从而有效提高用户界面的美观性。

20、根据第一方面，或者以上第一方面的任意一种实现方式，至少一个子视图节点为文本类型和/或小图片类型；其中，小图片类型用于指示子视图节点对应的画布的宽度小于预设阈值，且子视图节点对应的控件内容为图片；文本类型用于指示子视图节点的画布的控件内容为文本。这样，通过对视图节点所对应的控件进行分类，可将控件划分为需要还原的控件以及保持拉伸的控件，并对需要进行还原的控件进行还原处理。

21、示例性的，目标应用的视图树中的每个视图节点对应有声明信息，声明信息中包括但不限于类型信息、布局信息等。类型信息用于指示各视图节点的类型。

22、根据第一方面，或者以上第一方面的任意一种实现方式，视图树中包括根节点和第一视图节点，第一视图节点为大图片类型的视图节点，大图片类型用于指示子视图节点对应的画布的宽度大于或等于预设阈值，且子视图节点对应的控件内容为图片；电子设备将第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同，包括：将第一视图节点的控件内容还原至拉伸前的状态；其中，第一视图节点的画布的宽度为拉伸后的宽度，且还原后的第一视图节点的控件内容在第一视图节点的画布中居中显示；将第一视图节点的画布中除控件内容外的部分填充目标图像。这样，本技术实施例中通过对大图片进行相应处理，可避免大图片被拉伸后变形，同时能够保证大图片在第二显示窗口中显示的位置与第一显示窗口中的位置是等比的。

23、根据第一方面，或者以上第一方面的任意一种实现方式，目标图像与控件内容中的部分内容一致，或者，目标图像为控件内容中的部分内容进行高斯模糊处理后的图像。这样，通过对大图片的画布进行填充，可有效提升画面的美观性。

24、根据第一方面，或者以上第一方面的任意一种实现方式，第一显示窗口的左边缘与第二显示窗口的左边缘对齐；方法还包括：接收对第二用户界面中的第二视图节点对应的控件的触摸操作；其中，触摸操作在第二显示窗口中的第一位置；第一位置与第二显示窗口的左边缘之间的距离为第一距离值，第一位置与第二显示窗口的上边缘之间的距离为第二距离值；确定第一位置映射在第一显示窗口中的第二位置；第二位置与第一显示窗口的左边缘之间的距离为第三距离值，第二位置与第一显示窗口的上边缘之间的距离为第四距离值；其中，第一距离值与第三距离值的比例等于第二显示界面的宽度与第一显示界面的宽度的比例；第二距离值等于第四距离值；基于第二位置，确定触摸操作对应于第一显示窗口的第一用户界面中的第二视图节点。这样，本技术实施例中仅改变控件在界面中显示的位置，而未改变控件的实际位置，即电子设备在布局流程中所获取到的位置。相应的，在对触摸事件进行派发时，电子设备可基于控件在第二用户界面中与第一用户界面中的映射关系，获取到用户实际操作的控件，并执行相应的操作。

25、示例性的，第一显示窗口也可以在第二显示窗口中居中或靠右等任意位置，本技术不做限定。

26、根据第一方面，或者以上第一方面的任意一种实现方式，第一显示窗口的宽高比小于或等于0.5；第二显示窗口的宽高比大于0.5且小于或等于1。这样，应用可以基于宽高比接近直板手机的第一显示窗口，生成视图树，而无需应用适应电子设备实际的显示窗口的尺寸。

27、根据第一方面，或者以上第一方面的任意一种实现方式，第二显示窗口在电子设备的屏幕中全屏显示。

28、根据第一方面，或者以上第一方面的任意一种实现方式，目标应用为电子设备中的任意第三方应用。这样，本技术实施例中的方法通过系统级的处理，无需应用做出修改，可以应用于任意第三方应用。

29、根据第一方面，或者以上第一方面的任意一种实现方式，电子设备为内折叠屏手机、外折叠屏手机、车载设备、可穿戴设备、和/或电视。这样，在折叠屏手机的应用场景中，通过使用本技术实施例中的方法，可以使得折叠屏手机从单屏幕切换到大屏幕时，大屏幕所显示的用户界面中的内容与单屏幕所显示的用户界面中的内容相似，提高屏幕切换时应用的用户界面显示的连贯性。

30、根据第一方面，或者以上第一方面的任意一种实现方式，电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面，包括：电子设备基于第二显示窗口与视图树中的第三视图节点，以及基于第一显示窗口与视图树中除第三视图节点外的其它视图节点，得到第一用户界面。这样，对应一些特殊类型的视图节点，电子设备可基于第二显示窗口进行布局，以使其在布局阶段的宽度适应第二显示窗口的宽度，可以增加特殊类型视图节点的宽度，从而使控件所能显示的区域拉伸。特殊类型的视图节点可以是多行文本类型或者是webview类型。例如，对于多行文本类型的视图节点，电子设备基于第二显示窗口的宽度对其进行布局，使得多行文本获取到更宽的显示区域。

31、根据第一方面，或者以上第一方面的任意一种实现方式，电子设备基于第二显示窗口与视图树中的第三视图节点，以及基于第一显示窗口与视图树中除第三视图节点外的其它视图节点，得到第一用户界面，包括：电子设备获取第三视图节点的布局信息，与其它视图节点的布局信息；其中，第三视图节点的布局信息用于指示第三视图节点在第二显示窗口中的位置与大小，其它视图节点的布局信息用于指示其它视图节点在第一显示窗口中的位置与大小；电子设备基于至少一个视图节点的布局信息，生成第一用户界面。这样，电子设备在生成第一用户界面时，对于一些特殊类型的视图节点，可以使其获得比其它节点更宽的显示区域。并且对于该类特殊类型节点，在后续拉伸过程中可以不对齐进行拉伸处理。

32、第二方面，本技术实施例提供一种电子设备，其特征在于，包括：一个或多个存储器、可折叠显示屏和一个或多个处理器，所述一个或多个存储器与所述一个或多个处理器耦合，所述一个或多个存储器用于存储计算机程序代码，所述程序代码包括计算机指令，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面；其中，第一用户界面的宽度与第一显示窗口的宽度相同，第一用户界面的高度与第一显示窗口的高度相同；视图树中包括至少一个视图节点，第一用户界面中包括至少一个视图节点对应的控件；电子设备拉伸第一用户界面及第一用户界面中的各控件的宽度，得到第二用户界面；第二用户界面中的各控件的高度等于第一用户界面中的各控件的高度；电子设备将第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同；电子设备在第二显示窗口显示第二用户界面；第二用户界面的宽度等于第二显示窗口的宽度，第二用户界面的高度等于第二显示窗口的高度；第二显示窗口的高度等于第一显示窗口的高度，第二显示窗口的宽度大于第一显示窗口的宽度。

33、根据第二方面，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：电子设备获取目标应用生成的视图树，视图树为目标应用基于电子设备传输给目标应用的窗口信息生成的，窗口信息用于指示第一显示窗口的宽度与高度。

34、根据第二方面，或者以上第一方面的任意一种实现方式，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：电子设备获取至少一个视图节点中的每个视图节点的布局信息，布局信息用于指示每个视图节点在第一显示窗口中的大小与位置；电子设备基于每个视图节点的布局信息，生成第一用户界面。

35、根据第二方面，或者以上第一方面的任意一种实现方式，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：电子设备基于每个视图节点的布局信息，创建每个视图节点的画布，并在每个视图节点对应的画布上，绘制每个视图节点对应的控件内容以得到第一用户界面；其中，视图节点的根视图节点对应的画布的高度为第一用户界面的高度，根视图节点对应的画布的宽度为第一用户界面的宽度。

36、根据第二方面，或者以上第一方面的任意一种实现方式，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：电子设备拉伸至少一个视图节点的画布的宽度以得到第二用户界面；其中，至少一个视图节点的画布中的控件内容随着画布拉伸而拉伸。

37、根据第二方面，或者以上第一方面的任意一种实现方式，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：电子设备将第二用户界面中的至少一个子视图节点对应的画布的宽度还原至拉伸前的宽度；至少一个子视图节点属于多个子视图节点。

38、根据第二方面，或者以上第一方面的任意一种实现方式，至少一个子视图节点为文本类型和/或小图片类型；其中，小图片类型用于指示子视图节点对应的画布的宽度小于预设阈值，且子视图节点对应的控件内容为图片；文本类型用于指示子视图节点的画布的控件内容为文本。

39、根据第二方面，或者以上第一方面的任意一种实现方式，视图树中包括根节点和第一视图节点，第一视图节点为大图片类型的视图节点，大图片类型用于指示子视图节点对应的画布的宽度大于或等于预设阈值，且子视图节点对应的控件内容为图片；当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：将第一视图节点的控件内容还原至拉伸前的状态；其中，第一视图节点的画布的宽度为拉伸后的宽度，且还原后的第一视图节点的控件内容在第一视图节点的画布中居中显示；将第一视图节点的画布中除控件内容外的部分填充目标图像。

40、根据第二方面，或者以上第一方面的任意一种实现方式，目标图像与控件内容中的部分内容一致，或者，目标图像为控件内容中的部分内容进行高斯模糊处理后的图像。

41、根据第二方面，或者以上第一方面的任意一种实现方式，第一显示窗口的左边缘与第二显示窗口的左边缘对齐；当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：接收对第二用户界面中的第二视图节点对应的控件的触摸操作；其中，触摸操作在第二显示窗口中的第一位置；第一位置与第二显示窗口的左边缘之间的距离为第一距离值，第一位置与第二显示窗口的上边缘之间的距离为第二距离值；确定第一位置映射在第一显示窗口中的第二位置；第二位置与第一显示窗口的左边缘之间的距离为第三距离值，第二位置与第一显示窗口的上边缘之间的距离为第四距离值；其中，第一距离值与第三距离值的比例等于第二显示界面的宽度与第一显示界面的宽度的比例；第二距离值等于第四距离值；基于第二位置，确定触摸操作对应于第一显示窗口的第一用户界面中的第二视图节点。

42、根据第二方面，或者以上第一方面的任意一种实现方式，第一显示窗口的宽高比小于或等于0.5；第二显示窗口的宽高比大于0.5且小于或等于1。

43、根据第二方面，或者以上第一方面的任意一种实现方式，第二显示窗口在电子设备的屏幕中全屏显示。

44、根据第二方面，或者以上第一方面的任意一种实现方式，目标应用为电子设备中的任意第三方应用。

45、根据第二方面，或者以上第一方面的任意一种实现方式，电子设备为内折叠屏手机、外折叠屏手机、车载设备、可穿戴设备、和/或电视。

46、第二方面以及第二方面的任意一种实现方式分别与第一方面以及第一方面的任意一种实现方式相对应。第二方面以及第二方面的任意一种实现方式所对应的技术效果可参见上述第一方面以及第一方面的任意一种实现方式所对应的技术效果，此处不再赘述。

47、第三方面，本技术实施例提供了一种计算机可读介质，用于存储计算机程序，该计算机程序包括用于执行第一方面或第一方面的任意可能的实现方式中的方法的指令。

48、第四方面，本技术实施例提供了一种计算机程序，该计算机程序包括用于执行第一方面或第一方面的任意可能的实现方式中的方法的指令。

49、第五方面，本技术实施例提供一种芯片，该芯片包括处理电路、收发管脚。其中，该收发管脚、和该处理电路通过内部连接通路互相通信，该处理电路执行第一方面或第一方面的任一种可能的实现方式中的方法，以控制接收管脚接收信号，以控制发送管脚发送信号。