界面显示方法及电子设备技术

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

【技术实现步骤摘要】
界面显示方法及电子设备


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

技术介绍

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

技术实现思路

[0003]本申请实施例提供一种界面显示方法及电子设备，在该方法中，电子设备可在不减少应用所要显示的界面内容的情况下，显示应用的用户界面，提升用户使用体验。
[0004]第一方面，本申请实施例提供一种界面显示方法。该方法包括：电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面。其中，第一用户界面的宽度与第一显示窗口的宽度相同，第一用户界面的高度与第一显示窗口的高度相同。目标应用的视图树中包括至少一个视图节点，第一用户界面中包括至少一个视图节点中的每个节点所对应的控件。电子设备拉伸第一用户界面及第一用户界面中的各控件的宽度，得到第二用户界面。第二用户界面中的各控件的高度等于第一用户界面中的各控件的高度。电子设备将第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同。电子设备在第二显示窗口显示第二用户界面；第二用户界面的宽度等于第二显示窗口的宽度，第二用户界面的高度等于第二显示窗口的高度；第二显示窗口的高度等于第一显示窗口的高度，第二显示窗口的宽度大于第一显示窗口的宽度。这样，本申请实施例中通过在系统级对应用的用户界面做自适应，可适用于任意应用，应用自身无需做修改。并且，本申请实施例中通过拉伸界面得到的用户界面，不会减少应用所要显示的用户界面中的内容。
[0005]示例性的，第一显示窗口可以是本申请实施例中的显示窗口901。
[0006]示例性的，第二显示窗口可以是本申请实施例中的显示窗口902。
[0007]示例性的，电子设备将至少一个控件的宽度还原至与在第一用户界面中的宽度相同，可以理解为是将至少一个控件的宽度还原至拉伸前的宽度。
[0008]示例性的，第二用户界面中的控件与第二用户界面的上边缘的距离，与其在第一用户界面时，与第一用户界面的上边缘的距离相等。第二用户界面中的控件与第二用户界面的下边缘的距离，与其在第一用户界面时，与第一用户界面的下边缘的距离相等。
[0009]示例性的，各显示窗口及空间的高度可选地为纵向方向上的像素值。显示窗口及空间的宽度可选地为横向方向上的像素值。
[0010]示例性的，视图树即为本申请实施例中所述的ViewTree。
[0011]示例性的，视图节点包括View和/或ViewGroup。
[0012]根据第一方面，电子设备基于第一显示窗口与目标应用的视图树，得到第一用户
界面之前，方法还包括：电子设备获取目标应用生成的视图树，视图树为目标应用基于电子设备传输给目标应用的窗口信息生成的，窗口信息用于指示第一显示窗口的宽度与高度。这样，电子设备提供给应用的是第一显示窗口的信息，应用可基于第一显示窗口的高度与宽度生成的视图树，从而对应用的要求降低，无需应用对视图树做修改。
[0013]示例性的，方法还可以包括电子设备中的布局系统向应用传输窗口信息，并接收到应用生成的视图树。
[0014]示例性的，窗口信息仅指示第一显示窗口的宽度与高度，不指示第一显示窗口的位置。
[0015]根据第一方面，或者以上第一方面的任意一种实现方式，电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面，包括：电子设备获取至少一个视图节点中的每个视图节点的布局信息，布局信息用于指示每个视图节点在第一显示窗口中的大小与位置；电子设备基于每个视图节点的布局信息，生成第一用户界面。这样，在布局阶段，电子设备可基于第一显示窗口进行布局，以得到第一用户界面。布局后得到的第一用户界面是符合第一显示窗口的尺寸的，各控件的位置也是在第一显示窗口中的。基于第一显示窗口布局后的第一用户界面接近于直板手机的显示界面。
[0016]示例性的，布局信息指示视图节点在其父节点中的位置，也可以理解为是在第一显示窗口中的位置。示例性的，视图节点的位置包括其与父节点的左、右、上、下四条边的距离。
[0017]示例性的，每个视图节点可以看作为矩形。
[0018]根据第一方面，或者以上第一方面的任意一种实现方式，电子设备基于每个视图节点的布局信息，生成第一用户界面，包括：电子设备基于每个视图节点的布局信息，创建每个视图节点的画布，并在每个视图节点对应的画布上，绘制每个视图节点对应的控件内容以得到第一用户界面；其中，视图节点的根视图节点对应的画布的高度为第一用户界面的高度，根视图节点对应的画布的宽度为第一用户界面的宽度。这样，本申请实施例中通过对节点的画布进行拉伸，以实现对用户界面中的控件的拉伸操作。
[0019]示例性的，用户界面所显示的控件，可以理解为是视图节点所对应的控件。需要说明的是，用户界面上所显示的控件内容，仅为控件的一部分内容，其可能包括未显示的部分，即画布中未填充图像的部分。用户从显示界面中可能看不到画布中除控件内容以外的部分，但是该未显示的部分，同样属于控件的一部分，也可以理解为是视图节点对应的控件的一部分。
[0020]根据第一方面，或者以上第一方面的任意一种实现方式，电子设备拉伸第一用户界面及第一用户界面中的各控件的宽度，得到第二用户界面，包括：电子设备拉伸至少一个视图节点的画布的宽度以得到第二用户界面；其中，至少一个视图节点的画布中的控件内容随着画布拉伸而拉伸。这样，本申请实施例中通过对画布进行拉伸，从而实现对控件的拉伸。本申请实施例中仅改变各视图节点对应的画布，而不改变控件的实际位置，其中，实际位置即为控件在第一显示窗口中的位置。可以理解为，本申请实施例中仅改变各控件在显示窗口中所呈现的内容，而不改变其在布局阶段在显示窗口中的实际位置，从而降低系统处理复杂度。
[0021]根据第一方面，或者以上第一方面的任意一种实现方式，视图树包括根视图节点
以及多个子视图节点，电子设备将第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同，包括：电子设备将第二用户界面中的至少一个子视图节点对应的画布的宽度还原至拉伸前的宽度；至少一个子视图节点属于多个子视图节点。这样，将控件的画布拉伸之后，将部分控件的画布还原，可避免拉伸所导致的控件内容变形。对于一些拉伸后不会影响其显示内容的控件，可仍然保持其拉伸后的宽度，从而有效提高用户界面的美观性。
[0022]根据第一方面，或者以上第一方面的任意一种实现方式，至少一个子视图节点为文本类型和/或小图片类型；其中，小图片类型用于指示子视图节点对应的画布的宽度小于预设阈值，且子视图节点对应的控件内容为图片；文本类型用于指示子视图节点的画布的控件内容为文本。这样，通过对视图节点所对应的控件进行分类，可将控件划分为需要还原的控件以及保本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种界面显示方法，其特征在于，包括：电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面；其中，所述第一用户界面的宽度与所述第一显示窗口的宽度相同，所述第一用户界面的高度与所述第一显示窗口的高度相同；所述视图树中包括至少一个视图节点，所述第一用户界面中包括所述至少一个视图节点对应的控件；所述电子设备拉伸所述第一用户界面及所述第一用户界面中的各控件的宽度，得到第二用户界面；所述第二用户界面中的各控件的高度等于所述第一用户界面中的各控件的高度；所述电子设备将所述第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同；所述电子设备在第二显示窗口显示所述第二用户界面；所述第二用户界面的宽度等于所述第二显示窗口的宽度，所述第二用户界面的高度等于所述第二显示窗口的高度；所述第二显示窗口的高度等于所述第一显示窗口的高度，所述第二显示窗口的宽度大于所述第一显示窗口的宽度。2.根据权利要求1所述的方法，其特征在于，所述电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面之前，方法还包括：所述电子设备获取所述目标应用生成的所述视图树，所述视图树为所述目标应用基于所述电子设备传输给所述目标应用的窗口信息生成的，所述窗口信息用于指示所述第一显示窗口的宽度与高度。3.根据权利要求1或2所述的方法，其特征在于，所述电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面，包括：所述电子设备获取所述至少一个视图节点中的每个视图节点的布局信息，所述布局信息用于指示所述每个视图节点在所述第一显示窗口中的大小与位置；所述电子设备基于所述每个视图节点的布局信息，生成所述第一用户界面。4.根据权利要求3所述的方法，其特征在于，所述电子设备基于所述每个视图节点的布局信息，生成所述第一用户界面，包括：所述电子设备基于所述每个视图节点的布局信息，创建每个视图节点的画布，并在每个视图节点对应的画布上，绘制每个视图节点对应的控件内容以得到所述第一用户界面；其中，所述视图节点的根视图节点对应的画布的高度为所述第一用户界面的高度，所述根视图节点对应的画布的宽度为所述第一用户界面的宽度。5.根据权利要求4所述的方法，其特征在于，所述电子设备拉伸所述第一用户界面及所述第一用户界面中的各控件的宽度，得到第二用户界面，包括：所述电子设备拉伸所述至少一个视图节点的画布的宽度以得到所述第二用户界面；其中，所述至少一个视图节点的画布中的控件内容随着画布拉伸而拉伸。6.根据权利要求5所述的方法，其特征在于，所述视图树包括根视图节点以及多个子视图节点，所述电子设备将所述第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同，包括：所述电子设备将所述第二用户界面中的至少一个子视图节点对应的画布的宽度还原至拉伸前的宽度；所述至少一个子视图节点属于所述多个子视图节点。
7.根据权利要求6所述的方法，其特征在于，所述至少一个子视图节点为文本类型和/或小图片类型；其中，所述小图片类型用于指示子视图节点对应的画布的宽度小于预设阈值，且子视图节点对应的控件内容为图片；所述文本类型用于指示子视图节点的画布的控件内容为文本。8.根据权利要求5所述的方法，其特征在于，所述视图树中包括根节点和第一视图节点，所述第一视图节点为大图片类型的视图节...

【专利技术属性】
技术研发人员：李春东，刘丰恺，缪雨桐，胡雪，
申请(专利权)人：华为技术有限公司，
类型：发明
国别省市：