一种界面的自适应显示方法及终端设备技术

本申请公开了一种界面的自适应显示方法及终端设备，涉及终端技术领域，可以实现同一界面在不同宽高比例终端设备上的自适应适配。本申请中，终端设备可以在屏幕尺寸发生变化时，针对待显示界面上的不同类型的控件和元素，采用不同拉伸、平移、对齐等策略，以采用适配布局在变化后的屏幕上接续显示界面。其中，该方案可以基于已有的开发好的界面，通过通用的自适应算法，实现同一界面在不同宽高比例终端设备上的自适应适配，无需应用开发者而额外投入精力进行大量的屏幕尺寸适配工作，且应用覆盖面更广、适配度更高且通用性更强。适配度更高且通用性更强。适配度更高且通用性更强。

【技术实现步骤摘要】
一种界面的自适应显示方法及终端设备
[0001]本申请是分案申请，原申请的申请号是202210302733.5，原申请日是2022年3月25日，原申请的全部内容通过引用结合在本申请中。


[0002]本申请实施例涉及终端
，尤其涉及一种界面的自适应显示方法及终端设备。

技术介绍

[0003]随着个人电子设备(如手机、平板、大屏、车载设备等)的多样化发展，终端设备屏幕尺寸(如宽高比例)等也愈发多样。
[0004]通常，应用程序(application，APP)界面(以下简称应用界面)等界面的布局是预先开发好的。但是，对于具有多样化尺寸(如宽高比例)屏幕的终端设备，同一界面(如应用界面)在多个终端设备上的布局可能会不相同，这就导致一些布局可能会不合理，如存在展示内容少、画面畸变等问题，影响用户体验。
[0005]如图1所示，同一界面在进行显示时，由于屏幕1与屏幕2的尺寸不同，导致界面在图1中的(a)所示屏幕1上的布局与在图1中的(b)所示屏幕2上的布局不同。其中，如图1中的(b)所示，由于屏幕2尺寸与预先开发好的界面布局不适配，界面在图1中的(b)所示屏幕2上布局时展示内容少。

技术实现思路

[0006]本申请提供一种界面的自适应显示方法及终端设备，可以实现同一界面在不同宽高比例终端设备上的自适应适配。
[0007]为达到上述目的，本申请实施例采用如下技术方案：
[0008]第一方面，提供一种界面的自适应显示方法，该方法包括：初始情况下，终端设备在第一屏上显示第一界面，其中，第一屏的尺寸为第一尺寸，第一界面上包括一个或多个控件和元素；在检测到屏幕尺寸由上述第一尺寸变化为第二尺寸后，终端设备获取第一界面上控件的布局类型和元素的类型；终端设备根据控件的布局类型和元素的类型，采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素。
[0009]示例性的，第一界面上包括的控件如菜单栏、菜单、搜索框、搜索键等，本申请不做限定。
[0010]示例性的，第一界面上包括的元素如子控件、图标、字符(如文字)等，本申请不做限定。
[0011]示例性的，第一界面上包括的控件中还包括一个或多个元素。
[0012]上述第一方面提供的方案，终端设备可以在屏幕尺寸发生变化时，针对待显示界面上的不同类型的控件和元素，采用不同拉伸、平移、对齐等策略，以采用适配布局在变化后的屏幕上接续显示界面。例如，在屏幕尺寸变大时，避免界面展示的信息量变少的问题。
又如，在屏幕尺寸变小时，避免界面展示的信息量过于拥挤的问题。另外，该方法可以基于已有的开发好的界面，通过通用的自适应算法(如自由拉伸算法、等比拉伸算法、宫格等分算法、对齐算法、平移算法、文本控件补位重排算法等)，实现同一界面在不同宽高比例终端设备上的自适应适配，无需应用开发者而额外投入精力进行大量的屏幕尺寸适配工作，且应用覆盖面更广、适配度更高且通用性更强。
[0013]在一种可能的实现方式中，上述控件的布局类型包括以下中的一种或多种：普通布局、宫格布局、列表布局。本申请提供的方案中，针对待显示界面上的不同类型的控件和元素，例如针对普通布局、宫格布局、列表布局等布局类型，终端设备可以采用不同拉伸、平移、对齐等策略，以适配于变化后的屏幕尺寸，从而获得更加合理的界面布局效果。
[0014]在一种可能的实现方式中，上述第一界面上包括第一控件，第一控件的布局类型是宫格布局，第一控件中包括等间距排布的多个元素；上述终端设备根据控件的布局类型和元素的类型，采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素，具体包括：终端设备根据宽高拉伸系数(w
s
，h
s
)对第一控件对应区域的宽度和高度进行对应倍数的拉伸；终端设备根据宽高拉伸系数(w
s
，h
s
)对第一控件中元素所占据的控件区域的宽度和高度进行对应倍数的拉伸；终端设备根据宽高拉伸系数的最小值min(w
s
，h
s
)对第一控件中的元素进行等比拉伸；终端设备将第一控件中的元素居中显示在拉伸后的对应元素所占据的控件区域。通过自由拉伸算法可以保证宫格布局的控件主体适配于变化后的屏幕尺寸，通过等比拉伸算法可以保证宫格中的元素以原生宽高比例显示，不会发生变形。
[0015]在一种可能的实现方式中，上述第一界面上包括第二控件，第二控件的布局类型是列表布局，第二控件中包括以动态加载方式呈现的多个元素；上述终端设备根据控件的布局类型和元素的类型，采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素，具体包括：终端设备根据宽高拉伸系数(w
s
，h
s
)对第二控件对应区域的宽度和高度进行对应倍数的拉伸；终端设备根据宽高拉伸系数(w
s
，h
s
)调整第二控件中元素的行数和/或列数；终端设备根据调整后的行数和/或列数在拉伸后的第二控件对应区域中显示第二控件中的元素。通过自由拉伸算法可以保证宫格布局的控件主体适配于变化后的屏幕尺寸，通过对列表控件中元素行数和/或列数的适应性调整，可以保证列表控件中的元素以更加适配于变化后屏幕尺寸的数量布局合理显示。
[0016]在一种可能的实现方式中，上述第一界面上包括第三控件，该第三控件的布局类型是普通布局；上述终端设备根据控件的布局类型和元素的类型，采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素，具体包括：终端设备根据宽高拉伸系数对第三控件的宽度和高度进行对应倍数的拉伸。对于不会影响视觉变形等问题的控件，可以通过自由拉伸算法调整控件，以适配变化后的屏幕尺寸。
[0017]在一种可能的实现方式中，上述第一界面上包括预设图标；上述终端设备根据控件的布局类型和元素的类型，采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素，具体包括：终端设备根据宽高拉伸系数的最小值min(w
s
，h
s
)等比拉伸预设图标。对于可能会产生视觉上变形的控件或元素，通过等比拉伸算法，可以保证控件或元素以原生宽高比例显示，不会发生变形。
[0018]在一种可能的实现方式中，上述第一界面上包括文本框，该文本框中包括多行文本；上述终端设备根据控件的布局类型和元素的类型，采用对应自适应算法在第二尺寸的
画布上布局并绘制第一界面的控件和元素，具体包括：终端设备根据宽高拉伸系数(w
s
，h
s
)对文本框的宽度和高度进行对应倍数的拉伸；终端设备根据拉伸后的文本框计算多行文本的布局方式，其中布局方式用于表征多行文本的行数和列数；终端设备根据多行文本的布局方式调整文本框的高度。通过文本控件补位重排，可以避免由于屏幕尺寸变化导致的文本重新布局与文本框拉伸不匹配，导致文本框和文本显示尺寸不协调或者浪费屏幕显示区域的问题。
[0019]在一种可能的实现方式中，本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种界面的自适应显示方法，其特征在于，所述方法包括：所述终端设备在第一屏上显示第一界面，其中，所述第一屏的尺寸为第一尺寸，所述第一界面上包括一个或多个控件；在检测到屏幕尺寸由所述第一尺寸变化为第二尺寸时，所述终端设备根据所述一个或多个控件的布局类型对所述一个或多个控件进行调整；所述终端设备在第二屏上显示第二界面，所述第二界面包括调整后的所述一个或多个控件，其中，所述第二屏的尺寸为所述第二尺寸。2.根据权利要求1所述的方法，其特征在于，所述一个或多个控件的布局类型包括以下中的一种或多种：普通布局、宫格布局、列表布局。3.根据权利要求1或2所述的方法，其特征在于，所述一个或多个控件包括第二控件，所述第二控件的布局类型是列表布局，所述第二控件中包括以动态加载方式呈现的多个元素；所述终端设备根据所述一个或多个控件的布局类型对所述一个或多个控件进行调整，包括：所述终端设备根据宽度拉伸系数，调整所述第二控件中元素的列数。4.根据权利要求3所述的方法，其特征在于，所述动态加载方式为上下滑动动态加载方式。5.根据权利要求3或4所述的方法，其特征在于，所述终端设备根据宽度拉伸系数，调整所述第二控件中元素的列数，包括：所述终端设备根据以下公式调整所述第二控件中元素的列数：C2＝w
s
*C1，其中，C1为调整前所述第二控件中元素的列数，C2为调整后所述第二控件中元素的列数，w
s
为所述宽度拉伸系数。6.根据权利要求5所述的方法，其特征在于，所述宽度拉伸系数为所述第二屏的第二宽度和所述第一屏的第一宽度的比例。7.根据权利要求1或2所述的方法，其特征在于，所述一个或多个控件包括第二控件，所述第二控件的布局类型是列表布局，所述第二控件中包括以动态加载方式呈现的多个元素；所述终端设备根据所述一个或多个控件的布局类型对所述一个或多个控件进行调整，包括：所述终端设备根据高度拉伸系数，调整所述第二控件中元素的行数。8.根据权利要求7所述的方法，其特征在于，所述动态加载方式为左右滑动动态加载方式。9.根据权利要求7或8所述的方法，其特征在于，所述终端设备根据高度拉伸系数，调整所述第二控件中元素的行数，包括：所述终端设备根据以下公式调整所述第二控件中元素的行数：R2＝h
s
*R1，其中，R1为调整前所述第二控件中元素的行数，R2为调整后所述第二控件中元素的行数，h
s
为所述高度拉伸系数。10.根据权利要求9所述的方法，其特征在于，所述高度拉伸系数为所述第二屏的第二高度和所述第一屏的第一高度的比例。
11.根据权利要求2
‑
10中任一项所述的方法，其特征在于，所述一个或多个控件包括第一控件，所述第一控件的布局类型是宫格布局，所述第一控件中包括等间距排布的多个元素；所述终端设备根据所述一个或多个控件的布局类型对所述一个或多个控件进行调整，包括：所述终端设备根据宽高拉伸系数(w
s
，h
s
)对所述第一控件对应区域的宽度和高度进行对应倍数的拉伸，其中，w
s
为所述第二屏的第二宽度和所述第一屏的第一宽度的比例，h
s
为所述第二屏的第二高度和所述第一屏的第一高度的比例；所述终端设备根据所述宽高拉伸系数(w
s
，h
s
)对所述第一控件中元素所占据的控件区域的宽度和高度进行对应倍数的拉伸；所述终端设备根据宽高拉伸系数的最小值min(w
s
，h
s
)对所述第一控件中的元素进行等比拉伸；所述终端设备在第二屏上显示第二界面，包括：所述终端设备将所述第一控件中的元素居中显示在拉伸后的对应元素所占据的控件区域。12.根据权利要求2
‑
11中任一项所述的方法，其特征在于，所述一个或多个控件包括第三控件，所述第三控件的布局类型是普通布局；所述终端设备根据所述一个或...

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