CN116841658A - 界面显示方法及电子设备 - Google Patents

Abstract

本申请实施例提供了一种界面显示方法及电子设备，在该方法中，电子设备基于宽度比实际显示窗口的宽度小的第一显示窗口，生成对应于目标应用的视图树的第一用户界面。电子设备基于第二显示窗口的宽度，对第一用户界面及其中的控件进行拉伸，以得到第二用户界面。电子设备对第二用户界面中的至少一个控件进行还原，以使得第二用户界面适应第二显示窗口的宽度的同时，避免用户界面中的部分控件变形。电子设备在第二显示窗口中显示第二用户界面，从而通过在系统级对应用的用户界面做自适应，可适用于任意应用。本申请中所显示的用户界面，其所包含的控件数量即为应用所要求显示的控件数量，无需减少所显示的控件数量，即可适应宽高比较大的屏幕。

Description

界面显示方法及电子设备

技术领域

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

背景技术

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

发明内容

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

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

示例性的，第一显示窗口可以是本申请实施例中的显示窗口901。

示例性的，第二显示窗口可以是本申请实施例中的显示窗口902。

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

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

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

示例性的，视图树即为本申请实施例中所述的ViewTree。

示例性的，视图节点包括View和/或ViewGroup。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

附图说明

图1为示例性示出的电子设备的硬件结构示意图；

图2为示例性示出的折叠屏手机的示意图；

图3为示例性示出的电子设备的软件结构示意图；

图4为示例性示出的折叠屏手机的用户界面示意图；

图5为示例性示出的应用本申请实施例中的界面显示方法的效果示意图；

图6为示例性示出的界面显示方法流程示意图；

图7a～图7b为示例性示出的ViewTree的结构示意图；

图7c为示例性示出的布局系统处理流程示意图；

图7d为示例性示出的布局阶段示意图；

图7e为示例性示出的绘制阶段示意图；

图7f为示例性示出的用户界面示意图；

图8为示例性示出的界面显示方法流程示意图；

图9a为示例性示出的第一显示窗口与第二显示窗口的示意图；

图9b为示例性示出的基于第一显示窗口进行布局后的用户界面示意图；

图10a为示例性示出的画布拉伸示意图；

图10b为示例性示出的拉伸后的用户界面示意图；

图10c为示例性示出的还原后的用户界面示意图；

图11a～图11b为示例性示出的节点还原过程示意图；

图12a～图12c为示例性示出的图片填充示意图；

图13a～图13b为示例性示出的多行文本类型节点的处理流程示意图；

图14为示例性示出的事件派发流程示意图；

图15为示例性示出的其它应用场景的示意图；

图16为示例性示出的装置的结构示意图。

具体实施方式

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

本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。

本申请实施例的说明书和权利要求书中的术语“第一”和“第二”等是用于区别不同的对象，而不是用于描述对象的特定顺序。例如，第一目标对象和第二目标对象等是用于区别不同的目标对象，而不是用于描述目标对象的特定顺序。

在本申请实施例中，“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。

在本申请实施例的描述中，除非另有说明，“多个”的含义是指两个或两个以上。例如，多个处理单元是指两个或两个以上的处理单元；多个系统是指两个或两个以上的系统。

图1示出了电子设备100的结构示意图。应该理解的是，图1所示电子设备100仅是电子设备的一个范例，并且电子设备100可以具有比图中所示的更多的或者更少的部件，可以组合两个或多个的部件，或者可以具有不同的部件配置。图1中所示出的各种部件可以在包括一个或多个信号处理和/或专用集成电路在内的硬件、软件、或硬件和软件的组合中实现。

电子设备100可以包括：处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A，陀螺仪传感器180B，气压传感器180C，磁传感器180D，加速度传感器180E，距离传感器180F，接近光传感器180G，指纹传感器180H，温度传感器180J，触摸传感器180K，环境光传感器180L，骨传导传感器180M等。

处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processingunit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。

处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。

电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。

天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。

移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。

无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wirelesslocal area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)，蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。

在一些实施例中，电子设备100的天线1和移动通信模块150耦合，天线2和无线通信模块160耦合，使得电子设备100可以通过无线通信技术与网络以及其他设备通信。

电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。

显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emittingdiode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrixorganic light emitting diode的，AMOLED)，柔性发光二极管(flex light-emittingdiode，FLED)，Miniled，MicroLed，Micro-oLed，量子点发光二极管(quantum dot lightemitting diodes，QLED)等。在一些实施例中，电子设备100可以包括1个或N个显示屏194，N为大于1的正整数。示例性的，如图2所示为折叠屏手机的示意图，请参照图2，折叠屏手机包括外显示屏(简称外屏)201和内显示屏(简称内屏)202。外屏201与内屏202的高度相等，内屏202的屏幕宽度为外屏201的屏幕宽度的2倍。当然，图2中的显示屏仅为示意性举例。在其他实施例中，内屏与外屏的屏幕之间的比例也可以为其他比例。例如，外屏201可以是比手机的外壳小的屏幕，例如是正方形屏幕，或者是比图2中所示的外屏201更小的矩形，并设置于手机屏幕外壳的中间或任意区域，而内屏则可以与图2中的相同。具体屏幕的尺寸以及比例设置可根据实际需求设置，本申请不做限定。需要说明的是，折叠屏手机除包括本申请实施例中所示的内折叠屏手机外，折叠屏手机还可以包括其它形态的折叠屏手机，例如外折叠屏手机等，本申请不做限定，下文中不再重复说明。进一步需要说明的是，本申请实施例中仅以折叠屏手机的界面显示为例进行说明。在其他实施例中，本申请实施例中的界面显示方案同样可以应用于平板、车载设备、电视等屏幕的长宽比与直板手机相差较大的设备上，具体实现与折叠手机的内屏显示相同，本申请不再逐一举例说明。

电子设备100可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。

外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。

内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令，从而执行电子设备100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据，电话本等)等。

电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。

音频模块170用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中，音频模块170可以设置于处理器110中，或将音频模块170的部分功能模块设置于处理器110中。

电子设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本申请实施例以分层架构的Android系统为例，示例性说明电子设备100的软件结构。

图3是本申请实施例的电子设备100的软件结构框图。

电子设备100的分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。

应用程序层可以包括一系列应用程序包。

如图3所示，应用程序包可以包括相机，图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息，支付等应用程序。

应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。

如图3所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器，布局系统等。

窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。

内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。

视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。

电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。

资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。

通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，电子设备振动，指示灯闪烁等。

布局系统可基于应用程序的输入的界面元素(也可以称为窗口元素、页面元素等，本申请不做限定)，对各元素进行合理的安排与布局，并绘制界面。

Android Runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。

核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。

应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。

系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(Media Libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。

表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。

媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式。

三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。

2D图形引擎是2D绘图的绘图引擎。

内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。

可以理解的是，图3示出的系统框架层、系统库与运行时层包含的部件，并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。

图4为示例性示出的折叠屏手机的用户界面示意图。请参照图4，示例性的，以折叠屏手机的外屏401的分辨率为2700*1100像素，折叠屏手机的内屏402的分辨率为2700*2200像素为例，也就是说，内屏402的显示界面的宽度是外屏401的显示界面的宽度的二倍。

如图4的(1)所示，折叠屏手机的外屏401中显示支付应用的用户界面403(也可以称为应用界面、应用显示界面等，本申请不做限定)。其中，用户界面403在外屏401中全屏显示，即，用户界面403对应的分辨率为2700*1100像素，其与外屏401的尺寸相同。需要说明的是，本申请实施例中涉及到的尺寸，例如屏幕的尺寸为屏幕中可用于显示界面内容的尺寸，而非屏幕的实际外观尺寸，下文中不再重复说明。

用户可打开折叠屏，以使得折叠屏从折叠态(即图4的(1)所示的状态)变为展开态(例如图4的(2)或(3)所示)。展开态的折叠屏手机，其在内屏中显示支付应用的用户界面。目前，第三方应用所创建的应用界面通常适用于直板手机的屏幕的横纵比例(也可以称为宽高比例，即屏幕的宽度与高度的比值)，一般情况下，直板手机(或者是折叠屏手机的外屏)的屏幕的宽高比例约为1:2，例如分辨率为2700*1100像素，而折叠屏手机的内屏的宽高比通常情况下为1:1或接近1:1。因此，手机中的第三方应用基于直板手机的宽高比布局的用户界面无法适用于宽高比为1:1(或接近1:1，下文中不再重复说明)的折叠屏内屏。

图4的(2)中为示例性示出的一种内屏的用户界面的显示方式，在图4的(2)所示的示例中，内屏402以多界面的方式(也可以称为平行视界的方式)显示应用的用户界面。请参照图4的(2)，内屏402在显示应用界面时，手机可在内屏402的左半屏(即虚线左半部区域)中显示支付应用的用户界面404a，在内屏402的右半屏(即虚线右半部区域)中显示支付应用的用户界面404b。其中，用户界面404a与用户界面404b的显示内容是不相同的。例如，用户界面404b显示的可以是手机响应于接收到的用户点击用户界面404a中的“发现”控件(也可以称为按钮、组件、元素、选项等，本申请不做限定)后所显示的用户界面。其中，内屏402的左半屏与右半屏的宽高比接近直板手机，例如内屏402的尺寸为2700*2200，则左/右半屏的宽高比均为2700*1100。可以理解为，在图4的(2)所示的示例中，内屏402是以两个与直板手机相同(或相似)的宽高比的显示窗口(即左半屏的显示窗口和右半屏的显示窗口)显示第三方应用的两个用户界面，每个用户界面所对应的显示窗口的尺寸等同于直板手机的显示窗口的尺寸。因此，在该示例中，第三方应用仍然是按照宽高比约为1:2的显示窗口进行布局的，无需第三方应用更改界面布局，并且手机显示的多个页面中的每个页面的内容与直板手机(或折叠屏手机的外壳)显示的内容是相同的。

图4的(3)示例性示出的另一种内屏的用户界面的显示方式。图4的(2)所示的示例中，内屏402以拉伸界面，或可理解为改变用户界面中所显示的内容的方式，显示应用的用户界面。请参照图4的(3)，示例性的，在展开态下，手机的内屏402显示应用的用户界面406。在该示例中，手机在内屏402中显示应用的用户界面时，将用户界面进行适当放大，以使得用户界面适应内屏402的尺寸。但是，如图4的(3)所示，在该显示方式中，内屏402中显示的用户界面406较之外屏401或内屏402的左半屏中显示的用户界面404a中内容相对较少，减小了屏幕展示的信息量。例如图4的(1)所示的外屏401中的用户界面403中包括图片405，而由于用户界面406中的各元素放大显示，使得元素均下移且拉伸显示，导致该图片在用户界面406中显示时，同样被下移且拉伸显示，如图4的(3)中所示的图片407。在该示例中，需要第三方应用基于屏幕的显示窗口的尺寸对用户界面重新进行布局。此外，如图4中所示，目前的显示方法中，都是通过改变显示屏中所显示的界面内容的方式，例如图4的(2)中是通过多界面显示的方式，图4的(3)中则是通过重新排布界面中的元素的方式，以显示用户界面。上述通过改变屏幕中显示的界面内容的方式，可能不符合用户对用户界面显示的预期。

本申请实施例中提供一种界面显示方法，可使得与直板手机的屏幕的比例相差较大的大屏幕(例如图2所示折叠屏的内屏202)中，所显示的用户界面的内容与直板手机的屏幕显示的用户界面的内容相同。即，本申请实施例中的界面显示方法不会通过放大屏幕中用户界面的元素或者是增多用户界面(例如平行视界方式)的元素的方式显示用户界面，从而有效提升用户使用体验。图5为示例性示出的应用本申请实施例中的界面显示方法的效果示意图，请参照图5，仍以内折叠屏手机为例，手机的外屏401中显示支付应用的用户界面403(相关描述可参照图4的(1)，此处不再赘述)，手机响应于接收到的用户打开折叠屏的操作，变为展开态。手机在内屏402中显示支付应用的用户界面408。如图5所示，用户界面408包括的界面元素与用户界面403包括的界面元素是相同的，也可以理解为用户界面中所展示的信息是相同的，从而可以在屏幕尺寸发生变化时不减少信息展示量。在一些实施例中，内屏402中显示的支付应用的用户界面还可以包括更多的内容(具体示例将在下面的实施例中详细说明)，其观感更接近于直板手机。并且，在用户使用折叠屏手机时，折叠屏手机展开态与折叠态所显示的用户界面的内容是相同的，且界面布局也是近似的，相应的，从而使得折叠屏手机的折叠态与展开态互相切换的过程中，可以增强内外屏显示用户界面的连续性。例如，用户在外屏401显示的用户界面403中查看图片405，在图4显示的已有技术中，折叠态变为展开态后，图片405在界面中的位置发生变化，导致折叠态与展开态切换后的用户界面显示的连贯性较差，而本申请实施例中的方案，如图5所示，折叠态切换为展开态之后(当然也可以是展开态切换到折叠态)，其图片405的水平位置未发生变化，可有效增强用户浏览用户界面的连贯性，从而提升用户使用体验。

需要说明的是，本申请实施例中，以内折叠屏手机为例进行介绍。对于外折叠屏手机，在手机由折叠状态变化展开(半展开)状态后，屏幕的尺寸发生变化(变宽)，且屏幕的宽高比发生变化(变大)，同样可以适用本申请实施例中介绍的方法。

在对本申请实施例中的界面显示方法说明之前，首先以直板手机为例，简单介绍一下界面显示的原理及各模块交互流程。图6为示例性示出的界面显示方法流程示意图。请参照图6，具体可以包括但不限于如下步骤：

S601，布局系统向支付应用发送窗口信息。

示例性的，仍以支付应用为例进行说明。用户可点击支付应用的图标，手机响应于接收到的用户操作，运行支付应用。

布局系统向支付应用发送窗口信息，窗口信息用于指示用户界面在手机屏幕上显示的窗口的大小。本示例中以屏幕全屏显示支付应用的用户界面为例进行说明，相应的，布局系统向支付应用发送的窗口信息用于指示手机全屏显示时的用户界面尺寸(即屏幕的尺寸)，例如窗口信息用于指示用户界面在屏幕中显示的尺寸为2700*1100像素。

需要说明的是，本申请实施例中所述的用户界面，所涉及到的描述方式均为界面在屏幕中显示，在其他实施例中，用户界面也可以理解为是在应用窗口(或可称为显示窗口、应用显示窗口等，本申请不做限定)显示。相应的，窗口信息也可以理解为是用于指示显示窗口的大小。

进一步需要说明的是，本实施例以及图8中所示的实施例中均是以各显示屏全屏显示用户界面，即，应用的显示窗口的大小与屏幕的大小相同为例进行说明的。对于显示窗口与屏幕尺寸不相同的实施例，将在下面的实施例中进行说明，此处暂不赘述。

S602，支付应用根据窗口信息，生成ViewTree(视图树)。

S603，支付应用向布局系统发送ViewTree。

示例性的，支付应用接收布局系统发送的窗口信息，可确定用户界面所显示的窗口的大小。支付应用可基于界面元素与窗口信息，生成ViewTree。其中，界面元素可以理解为是将要在显示窗口中显示的界面所包括的元素。可选地，界面元素可以是应用缓存在本地的，也可以是应用从服务器获取的，本申请不做限定。

图7a为示例性示出的ViewTree的结构示意图。请参照图7a，应用的每个界面(或页面)均对应一颗描述其布局结构的ViewTree。View(视图)与ViewGroup(视图组)是ViewTree的组成单元，也可以理解为View与ViewGroup是Android UI(User Interface，用户界面)的基本组件。其中，ViewGroup可以包含View和/或ViewGroup，并且ViewGroup其本身就是View的扩展。ViewGroup和View以树形结构一层一层的嵌套组合，就形成了ViewTree。在本申请实施例中的描述中，ViewTree中的View和/或ViewGroup，也可以称为ViewTree中的节点，在其他实施例中也可以称为组件、元素或控件，也就是说，本申请实施例中所述的“节点”可以是指View，也可以是指ViewGroup，下文中不再重复说明。

以图7a中所显示的ViewTree对应于图5或图4中的用户界面403为例进行说明，需要说明的是，图7a中可选地为用户界面403对应的ViewTree的部分组件，用户界面403对应的ViewTree可包括比图7a中所示的更多或更少的组件，本申请不做限定。

仍参照图7a，示例性的，ViewGroup1为该ViewTree的根节点。根节点ViewGroup1下可包括至少一个ViewGroup和/或至少一个View。例如包括ViewGroup2、View1以及View2。每个ViewGroup下可进一步包括至少一个ViewGroup和/或至少一个View。例如，ViewGroup2下包括View3与View4。其中，ViewGoup1为ViewGroup2、View1以及View2的父节点，相应的，ViewGroup2、View1以及View2为ViewGoup1的子节点。ViewGroup2为View3与View4的父节点，View3与View4为ViewGroup2的子节点。示例性的，ViewTree中的每个节点对应各自的声明信息(也可以称为属性信息或描述信息等，本申请不做限定)，声明信息包括但不限于：用于指示节点所对应的控件(或组件、元素等，下文中不再赘述)在显示窗口(其中，显示窗口即为S601中的窗口信息所指示的窗口)中的布局信息，和，用于指示节点的类型的类型信息。示例性的，节点的类型也可以理解为是节点所对应的控件的类型，下文中不再重复说明。在本申请实施例中，节点(例如View)可以理解为是与控件对应的关系，也可以理解为节点即为控件，本申请不做限定。示例性的，布局信息可以理解为该View在显示窗口中的位置和大小(示例性的，为该View在其父节点View中的位置和大小)，类型信息可以包括根布局类型、文本类型等。例如，ViewGroup1的类型信息为“DecorView”，用于指示其类型为根节点类型。再例如，View4的类型信息为“TextView”，用于指示其类型为文本类型。

可选地，ViewTree中的每个节点对应用户界面中的一个控件(也可以称为组件、元素等，下文中不再重复说明)，举例说明，以图7b为例，示例性的，View3对应于用户界面403中的“扫一扫”控件中的“扫一扫”图标控件701，View4对应于用户界面404中的“扫一扫”控件中的“扫一扫”文本控件702。支付应用生成的ViewTree中，通过对View3与View4设置声明信息，可设置View3与View4的具体内容、类型以及在窗口中的布局等信息。例如，View4对应的声明信息包括但不限于：View4的类型信息、View4的内容信息、以及View4在窗口中的布局信息等。更具体的，View4的类型信息为文本类型，View4的内容信息为文本“扫一扫”，View4在窗口中的布局信息为左对齐，即用于指示View4在其父节点中是靠近左边缘的(也可以包括偏移量等信息)。

示例性的，支付应用创建ViewTree后，将ViewTree(包括ViewTree中的各节点及其声明信息)输出至布局系统。

S604，布局系统基于ViewTree，生成用户界面。

示例性的，布局系统接收到ViewTree后，基于ViewTree执行布局刷新流程。如图7c所示，布局刷新流程可包括：测量(measure)流程、布局(layout)流程以及绘制(draw)流程。

示例性的，测量流程可选地为：布局系统从上至下遍历ViewTree中的各节点(包括View和/或ViewGroup)，基于各节点对应的声明信息，确定各节点在用户界面中的实际尺寸，即节点所需的最大宽度(width)和高度(height)。

示例性的，布局流程可选地为：布局系统从上至下遍历ViewTree中的各节点，基于各节点对应的声明信息，确定各子节点在其父节点中的位置和大小。示例性的，每个节点可以看作是一个矩形，如上文所述，ViewTree中的节点为父子关系，除根节点外的所有节点均对应有父节点。布局系统可计算矩形View或ViewGroup的左(left)、上(top)、右(right)、下(bottom)四条边与其父节点View或ViewGroup的左、上、右、下四条边的距离，从而获取到每个矩形View或ViewGroup在其父节点View或ViewGroup中的位置与大小。其中，根节点对应的位置与大小即为应用的显示窗口对应的位置与大小。举例说明，仍以图7a中的ViewTree为例，布局系统最先遍历根节点ViewGroup1，请参照图7d，在该示例中以屏幕全屏显示应用的用户界面为例，则其对应的显示窗口与屏幕的分辨率相同(例如分辨率为1280*720像素)，相应的，根节点ViewGroup1所对应的位置与大小即与屏幕的显示窗口一致，即分辨率同样为1280*720像素。若应用的用户界面以分屏或者悬浮窗口的形式在屏幕中显示，则对应的显示窗口即为分屏或者悬浮窗口的分辨率的大小，下文中不再重复说明。接着，布局系统继续遍历ViewGroup1下的子节点，包括ViewGroup2、View1和View2。在本申请实施例中，ViewTree的遍历顺序为从上之下，从左至右，在其它实施例中也可以其它遍历顺序，本申请不做限定。以ViewGroup2为例，仍参照图7d，布局系统可基于VewGroup2的宽度与高度(即在测量流程中获取到的)以及声明信息，确定ViewGroup2的左边长与其父节点(即ViewGroup1)的左边长的距离(即左边距)、ViewGroup2的上边长与ViewGroup1的上边长的距离(即上边距)、ViewGroup2的右边长与ViewGroup1的右边长的距离(即右边距)、ViewGroup2的下边长与ViewGroup1的下边长的距离(即下边距)，从而获取到ViewGroup2在其父节点(即ViewGroup1)中的位置与大小(即布局)。接着，布局系统继续遍历ViewGroup2下的子节点，包括View3和View4。以View3为例，布局系统可基于View3的宽度与高度(即测量流程中获取到的结果)以及View3的声明信息，确定View3的左边长与其父节点(即ViewGroup2)的左边长的距离、View3的上边长与ViewGroup2的上边长的距离、View3的右边长与ViewGroup2的右边长的距离、View3的下边长与ViewGroup2的下边长的距离，以得到View3在其父节点ViewGroup2中的位置与大小。

示例性的，绘制流程可选地为布局系统创建一块画布(Canvas)，并基于计算流程中获取到的结果，在画布的对应位置上绘制ViewTree中的各节点的内容，以得到用户界面。需要说明的是，绘制流程与测量流程、布局流程相同，均是从上至下遍历ViewTree中的每个节点。布局系统可依据遍历顺序，依次绘制各节点对应的内容(也可以理解为各节点对应的UI)。进一步需要说明的是，在画布上绘制各节点的过程中，ViewTree中的每个节点对应各自的画布，节点对应的画布的大小与节点的大小相同，即画布的宽度与节点的宽度相同，画布的高度与节点的高度相同，节点的宽度与高度是在上文所述的测量流程中获取到的。布局系统可在每个节点对应的画布上，绘制每个节点对应的内容。需要说明的是，根节点ViewGroup1对应的画布的尺寸与应用的显示窗口(概念可参照上文，此处不再赘述)的尺寸是相同的。举例说明：请参照图7e，布局系统创建根节点ViewGroup1的画布703，并在画布703上绘制根节点ViewGroup1对应的内容。例如，若根节点ViewGroup1对应的内容为“红色”，则布局系统可将画布703填充红色，以作为用户界面的底色。接着，根据ViewTree的结构，布局系统继续遍历ViewGroup2，布局系统可基于ViewGroup2在其父节点ViewGroup1中的位置和大小(即布局流程中获取到的结果)，在ViewGroup1的画布703的相应位置上，绘制ViewGroup2的用户界面。具体为：请参照图7e，布局系统在相应的位置绘制ViewGroup2的画布，且ViewGroup2的画布中绘制有ViewGroup2对应的内容。布局系统还依次遍历View1和View2，并按照布局流程中获取到的View1在ViewGroup1中的位置和大小，以及View2在ViewGroup1中的位置和大小，在ViewGroup1的相应位置上，绘制View1和View2的用户界面(图中未示出)。仍参照图7e，示例性的，布局系统遍历至View3，布局系统可基于布局流程中获取到的结果，确定View3(可以理解为是View3的画布或者是用户界面)在其父节点ViewGroup2的位置与大小。布局系统在相应的位置上，绘制View3的UI(也可以称为是View3的图像、View3的视图、View3的图形等，本申请不做限定，下文中不再重复说明)，即为上文所述的“扫一扫”图标控件701。

示例性的，布局系统继续按照上述方式，对ViewTree的各节点进行遍历及绘制，以得到图7f的(1)中所示的用户界面(也可以理解为是ViewTree对应的用户界面)。请参照图7f的(2)，布局系统生成用户界面704后，布局系统将用户界面704输出至相关模块进行渲染等处理，并在屏幕中全屏显示用户界面704。

可选地，在Android系统中，布局系统可调用ViewRoot类的成员函数-PerformTraversals来执行测量、布局和绘制流程，本申请不做限定。

可选地，本申请的各实施例中均以16ms(对应的帧率为60帧/s)触发一次布局刷新流程为例，在其他实施例中，根据帧率不同，刷新间隔也不同，可根据实际需求设置，本申请不做限定，下文中不再重复说明。也就是说，在本申请的实施例中，布局系统每隔16ms，重新执行图7c中所示的测量、布局以及绘制流程，以刷新屏幕中显示的用户界面。可选地，若在刷新周期，布局系统检测到用户界面未发生变化，布局系统可以不执行图7c的流程，以节省耗电量。

下面结合附图，对本申请实施例中的界面显示方法进行详细说明。图8为示例性示出的界面显示方法流程示意图。请参照图8，具体包括：

S801，布局系统向支付应用发送窗口信息。

在本申请实施例中，布局系统向支付应用发送的窗口信息，与S601的不同的是，S601中发送的显示窗口的信息，即为用户界面将要显示的窗口对应的信息。例如图7f中，用户界面704在显示屏中全屏显示，则其所对应的显示窗口的大小与手机屏幕的分辨率是相同的。相应的，S601中布局系统发送的显示窗口信息所携带的分辨率大小，即与手机屏幕的分辨率相同，以使得应用可基于窗口信息所指示的大小进行布局。而本申请实施例中，布局系统向支付应用发送的窗口信息所指示的显示窗口高度与实际显示窗口的高度相同，而窗口信息中所指示的显示窗口的宽度小于实际显示窗口的宽度。示例性的，为区分实际的显示窗口大小，下文中将该窗口信息指示的显示窗口标识为第一显示窗口，实际显示窗口标识为第二显示窗口。在本申请实施例中，窗口信息所指示的第一显示窗口的大小以接近直板手机的显示尺寸为目的，使得应用仍然可以基于接近直板手机的显示窗口进行布局。

在本实例中，布局系统向支付应用发送的窗口信息中所指示的窗口宽度为实际将要显示的窗口的宽度的一半(即50％)，窗口信息中所指示的窗口高度与实际将要显示的窗口的高度相同为例进行说明。在其他实施例中，窗口信息所指示的第一显示窗口的宽度也可以是第二显示窗口(即实际显示窗口)的宽度比例也可以大于50％或小于50％，例如可以是第二显示窗口的宽度的三分之一，也可以是三分之二，主要目的是使布局系统发送给应用的窗口信息所指示的窗口接近直板手机。需要说明的是，直板手机的宽高比也都不相同，因此，本申请实施例中的窗口信息所指示的显示窗口是在高度与实际显示窗口一致的情况下，宽度与高度的比值接近直板手机(或者是内部为大屏幕的折叠屏的手机外屏)。

举例说明，请参照图9a，示例性的，折叠屏手机的内屏902的分辨率为2700*2200像素，本实例中仍以在内屏902中全屏显示用户界面为例进行说明，也就是说，支付应用的用户界面的实际显示窗口的分辨率为2700*2200像素。布局系统向支付应用发送的窗口信息所指示的显示窗口的分辨率为2700*1100像素，即，布局系统发送的窗口信息所描述的第一显示窗口901的宽度为实际显示窗口(即第二显示窗口)的宽度的二分之一，而长度(即高度)是相同的。

需要说明的是，布局系统发送给支付应用的窗口信息只包括第一显示窗口的高度和宽度，其并未指示第一显示窗口在实际显示窗口中的位置，图9a中所示的虚线仅为示意性示出第一显示窗口的宽度与第二显示窗口的宽度之间的关系。

进一步需要说明的是，本申请实施例中以支付应用为例进行说明，在其他实施例中，本申请实施例中可用于其它应用的界面显示，例如购物应用、社交应用、出行应用等，本申请不做限定。

S802，支付应用根据窗口信息，生成ViewTree。

S803，支付应用向布局系统发送ViewTree。

示例性的，支付应用接收到布局系统输入的窗口信息。支付应用可根据窗口信息生成ViewTree，并将ViewTree输出至布局系统。具体细节可参照S602与S603的相关描述，此处不再赘述。

需要说明的是，如上文所述，应用获取到的窗口信息所指示的尺寸是第一显示窗口的尺寸，即为实际显示窗口(即第二显示窗口)的宽度的一半(高度相同)，因此，支付应用所生成的ViewTree也是基于第一显示窗口生成的。

S804，布局系统基于ViewTree，生成第一用户界面。

示例性的，布局系统接收到ViewTree后，基于ViewTree执行布局刷新流程，即测量、布局以及绘制流程。

在该示例中，测量流程与布局流程与S604中的相同，在该示例中，布局系统可基于窗口信息对ViewTree进行布局。也就是说，布局系统在执行测量与布局流程之后，获取到的是ViewTree中的各节点在第一显示窗口中的布局(包括位置与大小)。举例说明，测量与布局流程的结果仍以图9a中所示的示意图为例，布局系统基于第一窗口901的尺寸，依次对ViewTree(仍以图7a中的ViewTree为例)的各个节点执行测量与布局流程，以ViewGroup1、ViewGroup2以及View3为例。布局系统获取到ViewGroup1(即根节点)的布局与第一显示窗口的布局相同，即大小与位置均与第一显示窗口相同。布局系统继续遍历ViewTree，以获取ViewGroup2在ViewGroup1中的位置与大小。如图9a所示，布局系统可计算出ViewGroup2在ViewGroup1中的位置与大小，接着，布局系统可计算出View3在其父节点ViewGroup2中的位置与大小。具体获取方式可参照图6中的相关描述，此处不再赘述。如图9a所示，布局系统获取到的布局结果是基于第一显示窗口得到的，也就是说，布局系统所测算出的各View的位置与大小是在第一显示窗口中的，而第一显示窗口的宽度为第二显示窗口(即实际显示的窗口)的宽度的二分之一。

需要说明的是，如上文所述，应用基于第一显示窗口的窗口信息创建的ViewTree，其仅获取到第一显示窗口的高度与宽度，但该信息并不能指示第一显示窗口在屏幕中的位置。示例性的，布局系统在进行测量和布局流程中，其可基于第一显示窗口在屏幕中的实际位置进行测量与布局。可以理解为，布局系统所获取到的测量与布局结果，即为该节点对应的节点(或元素等)在显示屏上的实际位置与大小。在本申请实施例中，以布局系统将第一显示窗口的实际显示位置靠第二显示窗口的左侧为例进行说明，在其他实施例中，第一显示窗口的位置也可以在第二显示窗口的其他位置，例如可以是居中，也可以是靠右侧，本申请不做限定。

如图9b为基于第一显示窗口进行布局后的用户界面示意图，需要说明的是，该示意图仅为使本领域技术人员更好的理解本方案，布局系统实际上未绘制出该用户界面。请参照图9b，示例性的，布局系统基于第一显示窗口进行用户界面布局，其布局后的效果是与直板手机中的显示效果接近的。也就是说，本申请实施例中，布局系统基于窗口信息执行测量与布局流程，可使得用户界面中的各元素(即组件)的布局接近直板手机中的界面的布局。请继续参照图9b，示例性的，第一显示窗口对应的用户界面如果在内屏902中显示，其将占据内屏902的二分之一的屏幕大小，即第一显示窗口的高度与全屏显示的窗口的高度相同，而宽度(即1100)则为全屏显示窗口(即第二显示窗口)的宽度(即2200)的二分之一。

在本申请实施例中，布局系统在绘制流程中，布局系统将ViewTree中的各节点(包括ViewGroup和View)对应的画布的宽度设置为第一显示窗口的宽度的两倍，各节点对应的画布的高度设置为与第一显示窗口的高度相同。可以理解为，在本申请实施例中，布局系统如果按照布局流程获取到的结果进行绘制，即根节点的画布的尺寸与第一窗口的尺寸相同(方法可参照图6中的描述)，得到的示意图如图9b所示，即用户界面的宽度等于内屏902宽度的二分之一，而本申请实施例中，通过将画布进行横向拉伸(纵向保持不变)，即将根节点及各子节点的画布设置为第一显示窗口的宽度的二倍，即，与第二显示窗口(即实际显示的窗口)的宽度相同，从而使得绘制后的用户界面的宽度是与第二显示窗口的宽度相同的。

为使得本领域人员更好的理解本申请实施例中的画布拉伸方案，下面结合附图进行详细说明。请参照图10a的(1)，示例性的，布局系统基于支付应用输入的ViewTree及其声明信息，执行测量与布局流程，可获取到各节点在第一显示窗口中的布局(实际上是各节点在其父节点中的位置与大小)，具体描述可参照图9a，此处不再赘述。请参照图10a的(1)，布局系统执行测量与布局流程后，可获取到在第一显示窗口1001中，ViewGroup1的宽度为w11、ViewGoup2的宽度为w12、View3的宽度为w13。其中，w11等于第一显示窗口的宽度(例如为1100像素)。示例性的，布局系统在绘制流程中，将各节点的画布宽度拉伸为布局结果中的宽度的两倍。

如图10a的(2)所示，布局系统依次遍历ViewTree，布局系统创建ViewGroup1的画布1002。其中，根节点ViewGroup1的画布1002的宽度w21为布局结果中ViewGroup1宽度w11的二倍。布局系统可在ViewGroup1的画布上绘制ViewGroup1对应的内容。

布局系统继续遍历ViewTree，布局系统创建ViewGroup2的画布1003，画布1003的宽度w22为布局结果中ViewGroup2宽度w12的二倍。布局系统可在ViewGroup2的画布1003上绘制ViewGroup2对应的内容。

接着，布局系统按照上述方式，创建View3的画布1004，其中，画布1004的宽度w23为w13的二倍。布局系统可在View3的画布上绘制View3对应的内容(例如为“扫一扫”图标)。

需要说明的是，图10a中仅以ViewTree中的部分节点为例进行说明，其它节点可以做相同或相似的处理，此处不再逐一举例说明。

进一步需要说明的是，上述过程中各节点的画布只做横向拉伸，各节点的上边长和其父节点的上边长之间的上边距以及下边长与其父节点的下变长之间的下边距是不变的。并且，各节点的高度也不变。

进一步需要说明的是，如上文所述，本申请实施例中是以第一显示窗口在第二显示窗口的左侧为例进行说明的，相应的，在布局流程中，布局系统获取到的各节点的位置信息是针对第一显示窗口在第二显示窗口的左侧的场景中获取到的。相应的，在该示例中，图10a所示的拉伸过程可以理解为是将各节点的画布向右侧拉伸。在其他实施例中，布局系统对画布的拉伸是基于第一显示窗口在第二显示窗口中的位置的，例如，若第一显示窗口在第二显示窗口的居中位置，则画布拉伸流程中，可以理解为是将画布向两侧拉伸。再例如，若第一显示窗口在第二显示窗口的右侧，则画布拉伸流程中，可以理解为是将画布向左侧拉伸。

请参照图10b，布局系统遍历ViewTree结束后，可得到第一用户界面1005。示例性的，第一用户界面1005的尺寸(也可以理解为是根节点ViewGroup1对应的画布尺寸)与第二显示窗口(即实际的显示窗口)的尺寸相同，例如分辨率均为2700*2200。第一用户界面1005中包括但不限于：根节点ViewGroup1对应的UI、View3对应的UI(即“扫一扫”图标控件1006)、View4对应的UI(即“扫一扫”文本控件1007)、以及其它View所对应的UI，例如可以包括：图片控件1008(也可以称为图片组件或图片元素等，本申请不做限定)、文本控件1009、背景控件1010以及输入框控件1011等。由图10b可看出，画布1005上绘制出的用户界面中所包括的内容，是与第一显示窗口中包含的内容大致相同的。并且，每个控件对应的图像均是被拉伸后的结果。

可选地，在本申请实施例中，布局系统可通过Canvas.scale方法拉伸画布。例如，在本申请的各示例中，以各显示窗口、画布以及屏幕的左上角作为坐标原点，水平方向为横轴，竖直方向为纵轴为例。布局系统通过Canvas.scale方法，可将各View的画布在横轴方向上放大2倍，纵轴方向上不变(即上文所述的上边距、下边距以及高度不变)，以获取拉伸后的用户界面。

示例性的，由于画布被横向拉伸，可能会造成部分控件变形。布局系统可对每个View进行分类，并对需要进行还原的类型(简称还原类型)的View所对应的画布进行还原，以得到第二用户界面，如图10c所示的第二用户界面1012。

可选地，布局系统可通过Canvas.scale方法，可将还原类型的View的画布在横轴方向上缩小2倍，纵轴方向上不变(即上边距、下边距以及高度不变)，以获取还原后的用户界面(例如第二用户界面1012)。

示例性的，在本申请实施例中，布局系统可基于表1对各节点进行分类，并按照各节点分类所对应的策略进行还原或保持拉伸状态等处理。需要说明的是，如上文所述，在本申请实施例中，节点也可以理解为是控件，相应的，节点类型也可以理解为是控件类型，下文中不再重复说明。

表1

控件类型	策略
		根布局类型	保持拉伸状态
文本类型	还原
		大图片类型	保持拉伸状态
小图片类型	还原
		ViewGroup类型	保持拉伸状态
输入框类型	保持拉伸状态
		其它类型	保持拉伸状态

示例性的，如表1所示，控件类型包括但不限于：根布局类型、文本类型、大图片类型、小图片类型、ViewGroup类型、输入框类型以及其它类型。需要说明的是，本申请实施例中仅以表格的方式为例进行说明，在其他实施例中，布局系统也可以以其它形式维护类型与策略之间的对应关系。

示例性的，根布局类型(也可以称为根布局控件类型)，即为根节点所对应的类型。根节点的声明信息中的类型信息为“DecorView”。布局系统基于该类型信息，可确定ViewTree中的根节点，例如图7a中的ViewGroup1的类型信息为“DecorView”。根节点类型对应的策略为保持拉伸状态。例如图10b中的根节点对应的画布1005(也可以称为第一用户界面1005)，在还原流程中，布局系统识别到ViewGroup1的类型为“DecorView”，通过检索表1，确定对应的策略为保持当前的拉伸状态。则ViewGroup1在图10c所示的第二用户界面1012中的图形仍然保持拉伸状态，即，ViewGroup1的画布宽度为拉伸后的宽度，例如图10a中的w21。

示例性的，文本类型(也可以称为文本控件类型)，节点对应的类型信息中标识为“TextView”。该类型控件对应的策略为还原。也就是说，布局系统将该类控件的画布宽度还原为拉伸前的宽度，而上边距、下边距(概念可参照上文，此处不再赘述)以及高度保持不变。举例说明，以图10b中的“扫一扫”文本控件1007为例，请参照图11a的(1)，在第一用户界面1005中，View4对应的“扫一扫”文本控件1007的宽度为w24，该宽度为拉伸后的宽度，画布拉伸的描述可参照上文，此处不再赘述。请参照图11a的(2)，示例性的，在还原流程中，布局系统检测到View4的类型为文本类型，对应的策略为还原。布局系统将View4的画布的横向宽度还原为拉伸前的宽度，即测量与布局流程获取到的结果，例如宽度为w14(获取的方式可参照上文，此处不再赘述)。其中，w24为w14的二倍。如图11a的(2)所示，“扫一扫”文本控件1007的图形随着View4的画布还原，其图像从拉伸状态变为还原状态。需要说明的是，View4的画布，即“扫一扫”文本控件1007所属的画布的上边距、下边距以及高度保持不变。

示例性的，大图片类型(也可以称为大图片控件类型)，可选地为宽度大于或大于等于阈值的图片类型的节点，该类型对应的策略为保持拉伸状态。本申请实施例中以阈值为显示窗口的50％为例进行说明。布局系统可以根据布局流程之后得出的结果进行判断，以确定图片是否为大图片。举例说明，以图10b中的图片1008为例，布局系统基于测量与布局流程获取到的结果，确定图片1008在第一显示窗口1001中的宽度，大于第一显示窗口的宽度的50％，布局系统可确定图片1008为大图片。可选地，布局系统也可以基于拉伸后的结果进行判断，例如在图10b中，拉伸后的图片1008的宽度超过第二显示窗口(也就是画布1005)的宽度的50％，布局系统可确定图片1008为大图片。本申请中的阈值仅为适宜性举例，具体阈值可根据实际需求设置，本申请不做限定。示例性的，布局系统确定节点对应的类型为大图片类型后，可将该节点的画布保持拉伸状态。

示例性的，小图片类型(也可以称为小图片控件类型)，可选地为宽度小于或小于等于阈值的图片。例如图10b中的“扫一扫”图标控件1006，其节点的类型为图片类型。布局系统基于其宽度，检测到该图片的宽度小于阈值，可确定“扫一扫”图标控件903为小图片类型。具体判定方式与大图片类似，此处不再重复说明。

示例性的，ViewGroup类型(也可以称为ViewGroup控件类型)，节点对应的类型信息中标识为“ViewGroup”，其对应的策略为保持拉伸状态。示例性的，布局系统检测到节点的类型为“ViewGroup”后，通过检索表1，可确定其还原策略为保持拉伸状态。具体描述与根节点类型类似，此处不再赘述。

示例性的，输入框类型，即节点对应的类型信息中标识为“EditText”，其对应的策略为保持拉伸状态。例如图10b中的输入框控件1011，其在图10c所示的第二用户界面1012中仍保持拉伸后的状态。

示例性的，对于其它类型控件，即不满足上述任意类型的控件的归类条件的控件，其对应的策略可选地为保持拉伸状态，或者可选地为还原。

需要说明的是，在本申请实施例中，在还原过程中，各节点还原后的对齐方式默认为左对齐。举例说明，请参照图11b的(1)，其示例性示出View4，即“扫一扫”文本控件1007拉伸后的状态。请参照图11b的(2)，区域1101为拉伸区域，拉伸区域的位置与大小与View4拉伸后的位置与大小相同，需要说明的是图11b的(2)中，View4的画布挡住区域1101的一部分区域，也就是说，View4包含在区域1101中。可以理解为，拉伸区域即为View4拉伸后所占的区域。在本申请实施例中，布局系统将View4的画布还原后，默认为View4的对齐方式为左对齐。即，如图11b的(2)所示，View4的画布，即“扫一扫”文本控件1007还原到拉伸前的尺寸之后，其位置向区域1101的左侧偏移，即，View4的左边长与区域1101的左边长对齐、上边长与区域1101的上边长对齐、下边长与区域1101的下边长对齐。

在一种可能的实现方式中，对于策略为还原的类型的节点(本申请实施例中简称为还原类型)，在还原过程中，布局系统可基于其在未拉伸前在父节点中的对齐方式，对节点进行对齐。对齐方式包括上文所述的左对齐方式，还包括居中对齐方式以及右对齐方式等。需要说明的是，布局系统可在布局流程中获取到各节点在父节点中的对齐方式。

居中对齐方式可参照图11b的(3)，示例性的，布局系统将View4还原后，其位置向区域1101的中间偏移。即，View4的中心点与区域1101的中心点重合、上边长与区域1101的上边长对齐、下边长与区域1101的下边长对齐。

右对齐方式可参照图11b的(4)，示例性的，布局系统将View还原后，其位置向区域1101的右侧偏移。即，View4的右边长与区域1101的右边长对齐、上边长与区域1101的上边长对齐、下边长与区域1101的下边长对齐。

各还原类型的节点的对齐方式可以是默认的，例如默认为左对齐。在本申请实施例中，如上文所述，各节点的对齐方式参照布局流程中的对齐方式。例如，在还原过程中，布局系统是依次对各节点进行遍历，并进行还原或保持拉伸的。布局系统在对节点进行处理时，例如以ViewGroup2为例，布局系统可获取ViewGroup2中的各节点的对齐方式。例如，View3在ViewGroup2中的对齐方式为居中，则布局系统在对View3进行还原后，可将View3在拉伸区域中居中对齐。

需要说明的是，对于一些声明中未定义对齐方式的控件，可以采用左对齐、居中以及右对齐等任意对齐方式，本申请不做限定。

可选地，布局系统可通过Canvas.translate方法将View对应的画布进行对齐。

在一种可能的实现方式中，对于大图片类型的控件，如上文所述，其对应的策略为保持拉伸状态。一个示例中，对于纯色的大图片类型控件，可以使其保持在当前的拉伸状态，例如图10c中的背景控件1010，其为纯色图片(当然也可以是渐变色)，其在保持拉伸状态的情况下，图片模糊程度较小，属于可接受范围内，因此可保持当前的拉伸状态。另一个示例中，对于非纯色的大图片类型控件，例如图10b与图10c中的图片控件1008，布局系统可将图片进行还原，并对画布中除图片内容外的其它部分进行填充。本申请实施例中的填充方式可以包括：高斯模糊填充方式、背景色填充方式等。

举例说明，请参照图12a，布局系统对大图片控件1201进行图片识别，可识别到大图片控件1201的左边缘区域1202为纯色填充(也可以是渐变色)，右边缘区域1203同样为纯色填充。左右边缘的填充色可以相同，也可以不同，本申请不做限定。示例性的，布局系统将大图片控件1201还原至拉伸前的尺寸。需要说明的是，该步骤可以理解为是将View中的图片内容进行还原并居中，其画布保持拉伸后的宽度。如图12a所示，大图片控件1201(具体是指图片内容)还原并居中后，布局系统可将还原后的大图片控件1201的左边长与该控件所属的View对应的画布1204的左边长之间的区域1205进行填充，填充的内容与大图片控件1201的左边缘区域1202的内容(可以是图案、颜色或渐变色等，本申请不做限定)相同。相应的，布局系统将还原后的大图片控件1201的右边长与该控件所属的节点对应的画布1204的右边长之间的区域1206进行填充，填充的内容与大图片控件1201的右边缘区域1203的内容(可以是图案、颜色或渐变色等，本申请不做限定)相同。

再举例说明，请参照图12b，布局系统对大图片控件1207进行图片识别，可识别到大图片控件1207的背景色为纯色(也可以是渐变色等)。布局系统可将大图片控件1207的图片内容还原并居中，以及，布局系统将大图片控件1207所属的节点对应的画布1208中，除还原后的大图片控件1207以外的区域进行填充，填充的内容即为大图片控件1207的背景色。

再举例说明，请参照图12c，布局系统对大图片控件1209进行识别，可识别到大图片控件1209中的中间区域1210为相似的图案或填充色等，而大图片控件1209的两侧为人物图像(也可以是其它图像，本申请不做限定)。布局系统在拉伸大图片控件1209的过程中，可以将大图片控件1209的中间区域1210进行拉伸，而人物图像区域保持不变。

可选地，对于不满足上述任意处理条件的图片，例如图片的中间区域不相似、边缘区域非纯色(或渐变色等)填充、背景色为复杂背景色(即非纯色或渐变色等填充)，则布局系统可将图片控件中的图片内容还原并居中，并对画布中除图片内容以外的部分进行高斯模糊填充。高斯模糊的图形可以是基于图片内容的边缘区域，也可以是基于整个图片内容，还可以是基于图片中的任意区域的图形，本申请不做限定。

在本申请实施例中，对于一些以列表方式呈现的控件(例如上述实施例中介绍的小图片类型)，由于控件中的元素未展示完毕，因此当屏幕尺寸变化时，可以根据实际屏幕尺寸展示更多/更少元素。例如，当折叠屏手机展开后，图10c所示实施例中“更多”选项1012可以展开显示，增加了界面展示的信息量。

在本申请实施例中，对于一些特殊类型的控件，可设置有特殊的处理策略，其处理方式与上文中的各类型的策略不相同。特殊类型包括但不限于：WebView类型控件以及多行文本控件。示例性的，特殊的处理策略可选地为：布局系统在布局流程中，将特殊类型的控件对应的显示窗口宽度设置为第二显示窗口的宽度，并且，在绘制过程中，无需对特殊类型的控件进行拉伸处理。

举例说明，以多行文本类型控件为例。请参照图13a的(1)，示例性的，如上文所述，布局系统在测量流程中，可获取到各View对应的宽度与高度，例如布局系统可获取到View1302、View1303以及View1304在第一显示窗口1301中的宽度与高度。例如，布局系统可获取到View1303的高度为a1，宽度为b1(图中未示出)。

布局系统还可在测量过程中，获取到View1303中的内容为文本，并且进一步检测到文本为多行文本。如图13a的(1)所示，View1303中包括三行文本内容，该文本内容仅为示意性举例，本申请不做限定。

布局系统可对View1303进行重新测量，重新测量的过程中将View1303对应的显示窗口设置为第二显示窗口1304。如图13a的(2)所示，布局系统对View1303重新测量后，获取到的结果为：View1303的高度为a2，宽度为b2(图中未示出)。其中，a2小于a1，例如，a2可以是a1的二分之一，本申请不做限定，并且，宽度b2大于b1。从而使得View1303中的多行文本的行数可以减少，例如本实施例中View1303的高度缩小且宽度增大后，其三行文本可减少到在一行内显示。示例性的，在布局流程中，布局系统可基于测量后的结果，逐一对ViewTree中的各节点进行布局。其中，布局系统在对View1303进行布局时，是基于重新测量得到的结果进行布局的，布局流程与上文相同，此处不再赘述。在绘制流程中，如图13b所示，布局系统对各节点(例如View1302和View1304)进行拉伸以及还原等处理，而对于View1303，布局系统在第二用户界面1305中绘制的View1303对应的UI，即为基于布局流程计算出的结果进行绘制的。也就是说，布局系统基于布局流程中获取到的View1303的位置与大小进行绘制，并未在绘制流程中对View1303进行拉伸以及还原等处理。需要说明的是，在布局流程中，ViewTree中依据遍历顺序，在View1303之后的节点，均是基于View1303的布局结果进行布局的。举例说明，请参照图13a的(1)，如果布局系统按照原有测量结果进行布局，即View1303的宽度仍然为a1，高度为b1，则View1302、View1303以及View1304的位置与大小如图13a的(1)所示。而在本申请实施例中，布局系统对View1303进行测量后，将View1303的高度减小至a2，其中，a2小于a1，即，高度缩小x1。如图13的(2)所示，在布局流程中，布局系统基于View1303的测量结果进行布局，其高度为a2，宽度为b2，并获取到View1303在其父节点中的位置与大小。需要说明的是，View1303的位置与大小可以在其父节点之中，也可以在父节点之外或部分重合，本申请不做限定。仍参照图13a的(2)，示例性的，布局系统在对View1304进行布局时，基于View1303的布局结果进行布局，其位置较之13a的(1)中的位置，在纵轴方向上向上偏移，偏移量可选地为View1303的高度的缩小量x1。这样，在该场景中，由于WebView的高度缩小，可使得其它部分节点上移，相应的，布局系统所生成的用户界面所包含的内容可以比高度相同的直板手机中显示的内容更多。

可选地，对于View1303，布局系统对其进行测量时，也可以不改变其高度，例如高度仍然为a1，而宽度变为b2。其它细节与上文相同，此处不再赘述。

示例性的，如上文所述，布局系统在布局过程中是基于第一显示窗口进行布局的，而在绘制过程中，是将各节点进行拉伸与还原处理后得到的第二用户界面。也就是说，本申请实施例中仅改变控件的显示位置，而未改变控件的实际位置。因此，各节点所对应的控件在第二用户界面中显示的位置，与布局系统实际获取到的节点的位置(即在布局流程中获取到的位置)是不相同的。相应的，在事件派发(事件包括触摸事件、点击事件等)的过程中，布局系统基于第二用户界面中的坐标点与第一显示窗口中的坐标点之间的映射关系，以获取到用户实际操作的位置。举例说明，请参照图14的(1)，如上文所述，布局系统进行布局后，其对应的效果如图14的(1)所示，具体描述可参照图9b的相关描述，此处不再赘述。需要说明的是，图14的(1)仅为示意性示出第一显示窗口1403中的界面布局情况，布局系统并未绘制该示意图。请参照图14的(2)，示例性的，用户点击内屏1401中的“存款”图标控件。手机响应于接收到的用户操作，可确定用户点击的坐标点为(x2，y2)。其中，本申请实施例中是以内屏1401的左上角为坐标原点，水平方向为x轴，竖直方向为y轴建立坐标系，该坐标系仅为示意性举例，本申请不做限定。在本申请实施例中，在绘制过程中，绘图系统是将各节点的宽度拉伸为2倍，高度保持不变。相应的，图14的(1)中的坐标点与图14的(2)中的坐标点之间的映射关系为：图14的(1)中的坐标系中的x轴坐标点的数值为图14的(2)中的x轴坐标点的数值的二分之一(在本申请实施例中是二分之一，仅以二分之一为例进行说明)，y轴坐标点相同。因此，手机基于映射关系，确定用户点击的坐标点在第一显示窗口中对应的坐标为(x1，y1)，其中，x1为x2的二分之一，y1与y2相等。手机可基于该坐标点，确定用户点击的是“存款”控件，并显示存款界面。

需要说明的是，如上文所述，本申请实施例中是以布局系统在布局流程中，以第一显示窗口在第二显示窗口的左侧为例进行说明。相应的，第二显示窗口中的坐标与第一显示窗口中的坐标的映射关系为：第二显示窗口中的横坐标为第一显示窗口中的横坐标的二分之一。在其他实施例中，若在布局流程中，第一显示窗口在第二显示窗口的右侧(也可以是其它位置，仅以右侧为例说明，本申请不再逐一举例)，则第二显示窗口的横坐标为第一显示窗口中的横坐标的二分之一，再加上偏移量。偏移量即为第一显示窗口的左上角与坐标原点在x轴上的距离。

需要说明的是，本申请实施例中均是第一显示窗口的宽度第二显示窗口的二倍，相应的，在绘制流程中拉伸倍数同样二倍为例进行说明的，因此，第一显示窗口中的坐标点与第二显示窗口(即第二用户界面)的坐标点在横轴方向上是二分之一的关系。在其他实施例中，若绘制流程中，画布的拉伸倍数为其它数值，例如三倍，则第二显示窗口的宽度为第一显示窗口的宽度的三倍，相应的，第二显示窗口(即第二用户界面)的坐标点在横轴方向上是第一显示窗口中的坐标点的三倍。举例说明，请参照图15，以车载屏幕显示场景为例进行说明，车载屏幕1501的尺寸为1280*1080像素，仍以车载屏幕中全屏显示应用的用户界面为例进行说明。示例性的，布局系统向应用发送的窗口信息所指示的第一显示窗口1502的尺寸为1280*720像素，当然也可以是1280*700像素，或者是1280*800像素，本申请仅以第一显示窗口的宽度为第二显示窗口的宽度的三分之二为例进行说明。相应的，应用可基于接收到的窗口信息进行布局并生成ViewTree。布局系统可对ViewTree进行测量、布局等流程。在绘制流程中，布局系统可将根节点及其下属节点的画布的宽度均拉伸至当前的二分之三倍(高度均不变)，例如，根节点的画布宽度拉伸至1080像素。接着，布局系统可将各View进行还原及对齐等步骤。在使用过程中，若用户点击屏幕1501上的点，则布局系统可基于第一显示窗口与第二显示窗口的比例关系，确定用户点击的第二显示窗口中的点映射到第一显示窗口中的点，例如，用户在屏幕1501上点击的坐标点为(x3,y3)，则布局系统可获取到对应的第一显示窗口中的点为(x4,y3)，其中，x4为x3的三分之二。未描述部分可参照上文实施例中的相关内容，此处不再赘述。

在一种可能的实现方式中，本申请实施例提供的方法还可以应用于跨设备界面投屏场景(例如第一设备向第二设备投屏的场景)中。其中，第一设备与第二设备的屏幕尺寸不同。例如，在应用A的界面由手机投屏至笔记本电脑之后，用于显示应用A的界面的屏幕尺寸发生变化(变长变宽)，且屏幕的宽高比发生变化(变大)。

在一种可能的实现方式中，本申请实施例中的手机还可以设置智慧显示选项。可选地，智慧显示选项中可包括开关选项，用于开启或关闭本申请实施例中的界面显示流程。例如，用户可点击开关选项，以启动或关闭本申请实施例中的界面显示流程。若用户关闭智慧显示选项，则手机可按照图4中所示的任意方式，在内屏中显示用户界面。可选地，智慧显示选项中除包括开关选项(用于开启或关闭)外，还可以包括但不限于允许智慧显示应用列表，用户可在智慧显示应用列表中设置可应用本申请实施例中的界面显示流程的应用。可选地，第三方应用可通过设置界面的配置文件，以指示需要应用本申请实施例中的界面显示方案的界面，和/或，不需要应用本申请实施例中的界面显示方案的界面。可选地，智慧显示选项可以设置于设置应用、桌面、负一屏、下拉菜单、控制中心以及侧边栏中，本申请不做限定。

在另一种可能的实现方式中，如上文所述，本申请实施例中的界面显示方案仅以折叠屏为例进行说明，在其他实施例中，本申请中的界面显示方案还可以应用于其他设备、例如平板、车载设备、可穿戴设备、智能家居设备等。可选地，本申请实施例中的界面方案还可以应用与手机的横竖屏转换场景。举例说明，手机处于竖屏状态时，手机可基于图6中所示的方案显示应用的用户界面。当手机切换为横屏状态时，手机可基于图8中所示的方案显示应用的用户界面，具体细节可参照图8中的描述，此处不再赘述。当然，在另一些实施例中，本申请实施例中的界面方案还可以应用于悬浮窗以及分屏等场景中，本申请不做限定。

可以理解的是，电子设备为了实现上述功能，其包含了执行各个功能相应的硬件和/或软件模块。结合本文中所公开的实施例描述的各示例的算法步骤，本申请能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。

示例性的，图16示出了本申请实施例的一种装置1600的示意性框图装置1600可包括：处理器1601和收发器/收发管脚1602，可选地，还包括存储器1603。

装置1600的各个组件通过总线1604耦合在一起，其中总线1604除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图中将各种总线都称为总线1604。

可选地，存储器1603可以用于前述方法实施例中的指令。该处理器1601可用于执行存储器1603中的指令，并控制接收管脚接收信号，以及控制发送管脚发送信号。

装置1600可以是上述方法实施例中的电子设备或芯片。

其中，上述方法实施例涉及的各步骤的所有相关内容均可以援引到对应功能模块的功能描述，在此不再赘述。

本实施例还提供一种计算机存储介质，该计算机存储介质中存储有计算机指令，当该计算机指令在电子设备上运行时，使得电子设备执行上述相关方法步骤实现上述实施例中的方法。

本实施例还提供了一种计算机程序产品，当该计算机程序产品在计算机上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的方法。

另外，本申请的实施例还提供一种装置，这个装置具体可以是芯片，组件或模块，该装置可包括相连的处理器和存储器；其中，存储器用于存储计算机执行指令，当装置运行时，处理器可执行存储器存储的计算机执行指令，以使芯片执行上述各方法实施例中的方法。

其中，本实施例提供的电子设备、计算机存储介质、计算机程序产品或芯片均用于执行上文所提供的对应的方法，因此，其所能达到的有益效果可参考上文所提供的对应的方法中的有益效果，此处不再赘述。

通过以上实施方式的描述，所属领域的技术人员可以了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。

本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。

在本申请实施例中，“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。

在本申请实施例的描述中，除非另有说明，“多个”的含义是指两个或两个以上。例如，多个处理单元是指两个或两个以上的处理单元；多个系统是指两个或两个以上的系统。

上面结合附图对本申请的实施例进行了描述，但是本申请并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本申请的启示下，在不脱离本申请宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本申请的保护之内。

Claims (18)

1.一种界面显示方法，其特征在于，包括：

电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面；其中，所述第一用户界面的宽度与所述第一显示窗口的宽度相同，所述第一用户界面的高度与所述第一显示窗口的高度相同；所述视图树中包括至少一个视图节点，所述第一用户界面中包括所述至少一个视图节点对应的控件；

所述电子设备拉伸所述第一用户界面及所述第一用户界面中的各控件的宽度，得到第二用户界面；所述第二用户界面中的各控件的高度等于所述第一用户界面中的各控件的高度；

所述电子设备将所述第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同；

所述电子设备在第二显示窗口显示所述第二用户界面；所述第二用户界面的宽度等于所述第二显示窗口的宽度，所述第二用户界面的高度等于所述第二显示窗口的高度；所述第二显示窗口的高度等于所述第一显示窗口的高度，所述第二显示窗口的宽度大于所述第一显示窗口的宽度。

2.根据权利要求1所述的方法，其特征在于，所述电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面之前，方法还包括：

所述电子设备获取所述目标应用生成的所述视图树，所述视图树为所述目标应用基于所述电子设备传输给所述目标应用的窗口信息生成的，所述窗口信息用于指示所述第一显示窗口的宽度与高度。

3.根据权利要求1或2所述的方法，其特征在于，所述电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面，包括：

所述电子设备获取所述至少一个视图节点中的每个视图节点的布局信息，所述布局信息用于指示所述每个视图节点在所述第一显示窗口中的大小与位置；

所述电子设备基于所述每个视图节点的布局信息，生成所述第一用户界面。

4.根据权利要求3所述的方法，其特征在于，所述电子设备基于所述每个视图节点的布局信息，生成所述第一用户界面，包括：

所述电子设备基于所述每个视图节点的布局信息，创建每个视图节点的画布，并在每个视图节点对应的画布上，绘制每个视图节点对应的控件内容以得到所述第一用户界面；其中，所述视图节点的根视图节点对应的画布的高度为所述第一用户界面的高度，所述根视图节点对应的画布的宽度为所述第一用户界面的宽度。

5.根据权利要求4所述的方法，其特征在于，所述电子设备拉伸所述第一用户界面及所述第一用户界面中的各控件的宽度，得到第二用户界面，包括：

所述电子设备拉伸所述至少一个视图节点的画布的宽度以得到所述第二用户界面；其中，所述至少一个视图节点的画布中的控件内容随着画布拉伸而拉伸。

6.根据权利要求5所述的方法，其特征在于，所述视图树包括根视图节点以及多个子视图节点，所述电子设备将所述第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同，包括：

所述电子设备将所述第二用户界面中的至少一个子视图节点对应的画布的宽度还原至拉伸前的宽度；所述至少一个子视图节点属于所述多个子视图节点。

7.根据权利要求6所述的方法，其特征在于，所述至少一个子视图节点为文本类型和/或小图片类型；其中，所述小图片类型用于指示子视图节点对应的画布的宽度小于预设阈值，且子视图节点对应的控件内容为图片；所述文本类型用于指示子视图节点的画布的控件内容为文本。

8.根据权利要求5所述的方法，其特征在于，所述视图树中包括根节点和第一视图节点，所述第一视图节点为大图片类型的视图节点，所述大图片类型用于指示所述子视图节点对应的画布的宽度大于或等于预设阈值，且子视图节点对应的控件内容为图片；所述电子设备将所述第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同，包括：

将所述第一视图节点的控件内容还原至拉伸前的状态；其中，所述第一视图节点的画布的宽度为拉伸后的宽度，且还原后的所述第一视图节点的控件内容在所述第一视图节点的画布中居中显示；

将所述第一视图节点的画布中除所述控件内容外的部分填充目标图像。

9.根据权利要求8所述的方法，其特征在于，所述目标图像与所述控件内容中的部分内容一致，或者，所述目标图像为所述控件内容中的部分内容进行高斯模糊处理后的图像。

10.根据权利要求1所述的方法，其特征在于，第一显示窗口的左边缘与所述第二显示窗口的左边缘对齐；所述方法还包括：

接收对所述第二用户界面中的第二视图节点对应的控件的触摸操作；其中，所述触摸操作在所述第二显示窗口中的第一位置；所述第一位置与所述第二显示窗口的左边缘之间的距离为第一距离值，所述第一位置与所述第二显示窗口的上边缘之间的距离为第二距离值；

确定所述第一位置映射在所述第一显示窗口中的第二位置；所述第二位置与所述第一显示窗口的左边缘之间的距离为第三距离值，所述第二位置与所述第一显示窗口的上边缘之间的距离为第四距离值；其中，所述第一距离值与所述第三距离值的比例等于所述第二显示界面的宽度与所述第一显示界面的宽度的比例；所述第二距离值等于所述第四距离值；

基于所述第二位置，确定所述触摸操作对应于所述第一显示窗口的第一用户界面中的所述第二视图节点。

11.根据权利要求1所述的方法，其特征在于，第一显示窗口的宽高比小于或等于0.5；第二显示窗口的宽高比大于0.5且小于或等于1。

12.根据权利要求1所述的方法，其特征在于，所述第二显示窗口在所述电子设备的屏幕中全屏显示。

13.根据权利要求1所述的方法，其特征在于，所述目标应用为所述电子设备中的任意第三方应用。

14.根据权利要求1所述的方法，其特征在于，所述电子设备为内折叠屏手机、外折叠屏手机、车载设备、可穿戴设备、和/或电视。

15.一种电子设备，其特征在于，包括：一个或多个存储器、可折叠显示屏和一个或多个处理器，所述一个或多个存储器与所述一个或多个处理器耦合，所述一个或多个存储器用于存储计算机程序代码，所述程序代码包括计算机指令，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如权利要求1-14任一项所述的方法。

16.一种计算机存储介质，其特征在于，包括计算机指令，当所述计算机指令在电子设备上运行时，使得所述电子设备执行如权利要求1-14任一项所述的方法。

17.一种计算机程序产品，其特征在于，当所述计算机程序产品在计算机上运行时，使得所述计算机执行如权利要求1-14任一项所述的方法。

18.一种芯片，其特征在于，包括一个或多个接口电路和一个或多个处理器；所述接口电路用于从电子设备的存储器接收信号，并向所述处理器发送所述信号，所述信号包括存储器中存储的计算机指令；当所述处理器执行所述计算机指令时，使得所述电子设备执行权利要求1-14任一项所述的方法。