一种界面的自适应显示方法及终端设备与流程

未命名 10-09 阅读:120 评论:0
1.本技术实施例涉及终端
技术领域
:,尤其涉及一种界面的自适应显示方法及终端设备。
背景技术
::2.随着个人电子设备(如手机、平板、大屏、车载设备等)的多样化发展,终端设备屏幕尺寸(如宽高比例)等也愈发多样。3.通常,应用程序(application,app)界面(以下简称应用界面)等界面的布局是预先开发好的。但是,对于具有多样化尺寸(如宽高比例)屏幕的终端设备,同一界面(如应用界面)在多个终端设备上的布局可能会不相同,这就导致一些布局可能会不合理,如存在展示内容少、画面畸变等问题,影响用户体验。4.如图1所示,同一界面在进行显示时,由于屏幕1与屏幕2的尺寸不同,导致界面在图1中的(a)所示屏幕1上的布局与在图1中的(b)所示屏幕2上的布局不同。其中,如图1中的(b)所示,由于屏幕2尺寸与预先开发好的界面布局不适配,界面在图1中的(b)所示屏幕2上布局时展示内容少。技术实现要素:5.本技术提供一种界面的自适应显示方法及终端设备,可以实现同一界面在不同宽高比例终端设备上的自适应适配。6.为达到上述目的,本技术实施例采用如下技术方案:7.第一方面,提供一种界面的自适应显示方法,该方法包括:初始情况下,终端设备在第一屏上显示第一界面,其中,第一屏的尺寸为第一尺寸,第一界面上包括一个或多个控件和元素;在检测到屏幕尺寸由上述第一尺寸变化为第二尺寸后,终端设备获取第一界面上控件的布局类型和元素的类型;终端设备根据控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素。8.示例性的,第一界面上包括的控件如菜单栏、菜单、搜索框、搜索键等,本技术不做限定。9.示例性的,第一界面上包括的元素如子控件、图标、字符(如文字)等,本技术不做限定。10.示例性的,第一界面上包括的控件中还包括一个或多个元素。11.上述第一方面提供的方案,终端设备可以在屏幕尺寸发生变化时,针对待显示界面上的不同类型的控件和元素,采用不同拉伸、平移、对齐等策略,以采用适配布局在变化后的屏幕上接续显示界面。例如,在屏幕尺寸变大时,避免界面展示的信息量变少的问题。又如,在屏幕尺寸变小时,避免界面展示的信息量过于拥挤的问题。另外,该方法可以基于已有的开发好的界面,通过通用的自适应算法(如自由拉伸算法、等比拉伸算法、宫格等分算法、对齐算法、平移算法、文本控件补位重排算法等),实现同一界面在不同宽高比例终端设备上的自适应适配,无需应用开发者而额外投入精力进行大量的屏幕尺寸适配工作,且应用覆盖面更广、适配度更高且通用性更强。12.在一种可能的实现方式中,上述控件的布局类型包括以下中的一种或多种:普通布局、宫格布局、列表布局。本技术提供的方案中,针对待显示界面上的不同类型的控件和元素,例如针对普通布局、宫格布局、列表布局等布局类型,终端设备可以采用不同拉伸、平移、对齐等策略,以适配于变化后的屏幕尺寸,从而获得更加合理的界面布局效果。13.在一种可能的实现方式中,上述第一界面上包括第一控件,第一控件的布局类型是宫格布局,第一控件中包括等间距排布的多个元素;上述终端设备根据控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素,具体包括:终端设备根据宽高拉伸系数(ws,hs)对第一控件对应区域的宽度和高度进行对应倍数的拉伸;终端设备根据宽高拉伸系数(ws,hs)对第一控件中元素所占据的控件区域的宽度和高度进行对应倍数的拉伸;终端设备根据宽高拉伸系数的最小值min(ws,hs)对第一控件中的元素进行等比拉伸;终端设备将第一控件中的元素居中显示在拉伸后的对应元素所占据的控件区域。通过自由拉伸算法可以保证宫格布局的控件主体适配于变化后的屏幕尺寸,通过等比拉伸算法可以保证宫格中的元素以原生宽高比例显示,不会发生变形。14.在一种可能的实现方式中,上述第一界面上包括第二控件,第二控件的布局类型是列表布局,第二控件中包括以动态加载方式呈现的多个元素;上述终端设备根据控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素,具体包括:终端设备根据宽高拉伸系数(ws,hs)对第二控件对应区域的宽度和高度进行对应倍数的拉伸;终端设备根据宽高拉伸系数(ws,hs)调整第二控件中元素的行数和/或列数;终端设备根据调整后的行数和/或列数在拉伸后的第二控件对应区域中显示第二控件中的元素。通过自由拉伸算法可以保证宫格布局的控件主体适配于变化后的屏幕尺寸,通过对列表控件中元素行数和/或列数的适应性调整,可以保证列表控件中的元素以更加适配于变化后屏幕尺寸的数量布局合理显示。15.在一种可能的实现方式中,上述第一界面上包括第三控件,该第三控件的布局类型是普通布局;上述终端设备根据控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素,具体包括:终端设备根据宽高拉伸系数对第三控件的宽度和高度进行对应倍数的拉伸。对于不会影响视觉变形等问题的控件,可以通过自由拉伸算法调整控件,以适配变化后的屏幕尺寸。16.在一种可能的实现方式中,上述第一界面上包括预设图标;上述终端设备根据控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素,具体包括:终端设备根据宽高拉伸系数的最小值min(ws,hs)等比拉伸预设图标。对于可能会产生视觉上变形的控件或元素,通过等比拉伸算法,可以保证控件或元素以原生宽高比例显示,不会发生变形。17.在一种可能的实现方式中,上述第一界面上包括文本框,该文本框中包括多行文本;上述终端设备根据控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素,具体包括:终端设备根据宽高拉伸系数(ws,hs)对文本框的宽度和高度进行对应倍数的拉伸;终端设备根据拉伸后的文本框计算多行文本的布局方式,其中布局方式用于表征多行文本的行数和列数;终端设备根据多行文本的布局方式调整文本框的高度。通过文本控件补位重排,可以避免由于屏幕尺寸变化导致的文本重新布局与文本框拉伸不匹配,导致文本框和文本显示尺寸不协调或者浪费屏幕显示区域的问题。18.在一种可能的实现方式中,上述宽高拉伸系数(ws,hs)用于表征第二尺寸与第一尺寸的尺寸关系。示例性的,假设第一尺寸表示宽度为a,高度为b,第二尺寸表示宽度为2a,高度为b,则宽高拉伸系数为(2a/a,b/b),即(2,1)。在控件或元素自适应拉伸时,通过考虑屏幕尺寸的具体变化程度,可以保证控件和元素适配于变化后的屏幕尺寸。19.在一种可能的实现方式中,上述第一界面上包括第四控件和第五控件,在终端设备在第一屏上显示第一界面时,第四控件以第一对齐方式与第五控件对齐;上述终端设备根据控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素,具体包括:终端设备分别根据第四控件和第五控件的布局类型和控件中元素的类型,采用对应自适应算法进行控件拉伸和元素拉伸;终端设备调整第四控件和/或第五控件的位置,使得第四控件以上述第一对齐方式与第五控件对齐。通过该方法,可以保证控件在界面上与其它控件的相对位置关系不发生变化,获得好的界面视觉效果。20.在一种可能的实现方式中,上述第一对齐方式包括:左对齐、右对齐或者居中对齐。21.在一种可能的实现方式中,上述终端设备是折叠屏设备,第一尺寸是终端设备处于第一状态时的屏幕尺寸,第二尺寸是终端设备处于第二状态时的屏幕尺寸。本技术提供的方案可以适用于折叠屏设备,例如适用于折叠屏手机从折叠状态变化为展开状态的场景中,或者应用于折叠屏手机从展开状态变化为折叠状态的场景中,以避免由于屏幕尺寸发生变化造成的界面显示不合理的问题。22.在一种可能的实现方式中,上述第一状态是折叠状态,第二状态是展开状态,第一尺寸小于第二尺寸。示例性的,本技术提供的方案可以适用于折叠设备从折叠状态变化为展开状态的场景中,以避免由于屏幕尺寸发生变化造成的界面显示不合理的问题。23.第二方面,提供一种终端设备,该终端设备包括:显示屏,用于在终端设备处于第一状态时,在第一屏上显示第一界面,其中,在终端设备处于所述第一状态时上述显示屏的尺寸为第一尺寸,第一界面上包括一个或多个控件和元素;检测单元,用于检测终端设备的状态或上述显示屏的尺寸变化;处理单元,用于在检测单元检测到屏幕尺寸由第一尺寸变化为第二尺寸后,获取第一界面上控件的布局类型和元素的类型;以及,根据控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素。24.示例性的,检测单元可以用于检测终端设备的状态,进一步的,处理单元可以在检测单元检测到终端设备的状态发生变化时,确定屏幕尺寸由第一尺寸变化为第二尺寸。25.示例性的,检测单元可以用于直接检测显示屏的尺寸变化。26.上述第二方面提供的方案,终端设备可以在屏幕尺寸发生变化时,针对待显示界面上的不同类型的控件和元素,采用不同拉伸、平移、对齐等策略,以采用适配布局在变化后的屏幕上接续显示界面。例如,在屏幕尺寸变大时,避免界面展示的信息量变少的问题。又如,在屏幕尺寸变小时,避免界面展示的信息量过于拥挤的问题。另外,该方法可以基于已有的开发好的界面,通过通用的自适应算法(如自由拉伸算法、等比拉伸算法、宫格等分算法、对齐算法、平移算法、文本控件补位重排算法等),实现同一界面在不同宽高比例终端设备上的自适应适配,无需应用开发者而额外投入精力进行大量的屏幕尺寸适配工作,且应用覆盖面更广、适配度更高且通用性更强。27.在一种可能的实现方式中,上述控件的布局类型包括以下中的一种或多种:普通布局、宫格布局、列表布局。本技术提供的方案中,针对待显示界面上的不同类型的控件和元素,例如针对普通布局、宫格布局、列表布局等布局类型,终端设备可以采用不同拉伸、平移、对齐等策略,以适配于变化后的屏幕尺寸,从而获得更加合理的界面布局效果。28.在一种可能的实现方式中,上述第一界面上包括第一控件,第一控件的布局类型是宫格布局,第一控件中包括等间距排布的多个元素;上述处理单元根据控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素,具体包括:处理单元根据宽高拉伸系数(ws,hs)对第一控件对应区域的宽度和高度进行对应倍数的拉伸;处理单元根据宽高拉伸系数(ws,hs)对第一控件中元素所占据的控件区域的宽度和高度进行对应倍数的拉伸;处理单元根据宽高拉伸系数的最小值min(ws,hs)对第一控件中的元素进行等比拉伸;处理单元将第一控件中的元素居中显示在拉伸后的对应元素所占据的控件区域。通过自由拉伸算法可以保证宫格布局的控件主体适配于变化后的屏幕尺寸,通过等比拉伸算法可以保证宫格中的元素以原生宽高比例显示,不会发生变形。29.在一种可能的实现方式中,上述第一界面上包括第二控件,第二控件的布局类型是列表布局,第二控件中包括以动态加载方式呈现的多个元素;上述处理单元根据控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素,具体包括:处理单元根据宽高拉伸系数(ws,hs)对第二控件对应区域的宽度和高度进行对应倍数的拉伸;处理单元根据宽高拉伸系数(ws,hs)调整第二控件中元素的行数和/或列数;处理单元根据调整后的行数和/或列数在拉伸后的第二控件对应区域中显示第二控件中的元素。通过自由拉伸算法可以保证宫格布局的控件主体适配于变化后的屏幕尺寸,通过对列表控件中元素行数和/或列数的适应性调整,可以保证列表控件中的元素以更加适配于变化后屏幕尺寸的数量布局合理显示。30.在一种可能的实现方式中,上述第一界面上包括第三控件,该第三控件的布局类型是普通布局;上述处理单元根据控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素,具体包括:处理单元根据宽高拉伸系数对第三控件的宽度和高度进行对应倍数的拉伸。对于不会影响视觉变形等问题的控件,可以通过自由拉伸算法调整控件,以适配变化后的屏幕尺寸。31.在一种可能的实现方式中,上述第一界面上包括预设图标;上述处理单元根据控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素,具体包括:处理单元根据宽高拉伸系数的最小值min(ws,hs)等比拉伸预设图标。对于可能会产生视觉上变形的控件或元素,通过等比拉伸算法,可以保证控件或元素以原生宽高比例显示,不会发生变形。32.在一种可能的实现方式中,上述第一界面上包括文本框,该文本框中包括多行文本;上述处理单元根据控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素,具体包括:处理单元根据宽高拉伸系数(ws,hs)对文本框的宽度和高度进行对应倍数的拉伸;处理单元根据拉伸后的文本框计算多行文本的布局方式,其中布局方式用于表征多行文本的行数和列数;处理单元根据多行文本的布局方式调整文本框的高度。通过文本控件补位重排,可以避免由于屏幕尺寸变化导致的文本重新布局与文本框拉伸不匹配,导致文本框和文本显示尺寸不协调或者浪费屏幕显示区域的问题。33.在一种可能的实现方式中,上述宽高拉伸系数(ws,hs)用于表征第二尺寸与第一尺寸的尺寸关系。示例性的,假设第一尺寸表示宽度为a,高度为b,第二尺寸表示宽度为2a,高度为b,则宽高拉伸系数为(2a/a,b/b),即(2,1)。在控件或元素自适应拉伸时,通过考虑屏幕尺寸的具体变化程度,可以保证控件和元素适配于变化后的屏幕尺寸。34.在一种可能的实现方式中,上述第一界面上包括第四控件和第五控件,在终端设备在第一屏上显示第一界面时,第四控件以第一对齐方式与第五控件对齐;上述处理单元根据控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素,具体包括:处理单元分别根据第四控件和第五控件的布局类型和控件中元素的类型,采用对应自适应算法进行控件拉伸和元素拉伸;处理单元调整第四控件和/或第五控件的位置,使得第四控件以上述第一对齐方式与第五控件对齐。通过该方法,可以保证控件在界面上与其它控件的相对位置关系不发生变化,获得好的界面视觉效果。35.在一种可能的实现方式中,上述第一对齐方式包括:左对齐、右对齐或者居中对齐。36.在一种可能的实现方式中,上述终端设备是折叠屏设备,第二尺寸是终端设备处于第二状态时的屏幕尺寸。本技术提供的方案可以适用于折叠屏设备,例如适用于折叠屏手机从折叠状态变化为展开状态的场景中,或者应用于折叠屏手机从展开状态变化为折叠状态的场景中,以避免由于屏幕尺寸发生变化造成的界面显示不合理的问题。37.在一种可能的实现方式中,上述第一状态是折叠状态,第二状态是展开状态,第一尺寸小于第二尺寸。示例性的,本技术提供的方案可以适用于折叠设备从折叠状态变化为展开状态的场景中,以避免由于屏幕尺寸发生变化造成的界面显示不合理的问题。38.第三方面,提供一种终端设备,该终端设备包括:通信接口,用于进行无线电信号发送和接收;显示器,用于显示界面(如第一界面);存储器,用于存储计算机程序指令;处理器,用于执行所述计算机程序指令,以支持所述终端设备实现如第一方面任一种可能的实现方式中的方法。39.第四方面,提供一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序指令,该计算机程序指令被处理器执行时实现如第一方面任一种可能的实现方式中的方法。40.第五方面,提供一种芯片系统,该芯片系统包括处理器、存储器,存储器中存储有计算机程序指令;所述计算机程序指令被所述处理器执行时,实现如第一方面任一种可能的实现方式中的方法。该芯片系统可以由芯片构成,也可以包含芯片和其他分立器件。附图说明41.图1为一种常规的界面显示效果示意图;42.图2为本技术实施例提供的一种折叠屏终端的形态示意图;43.图3为本技术实施例提供的一种应用场景示意图;44.图4为本技术实施例提供的一种终端设备的硬件结构示意图;45.图5为本技术实施例提供的一种终端设备的软件结构框图;46.图6a为一种常规的界面的显示过程示意图;47.图6b为本技术实施例提供的一种界面的显示过程示意图;48.图7为本技术实施例提供的另一种界面的显示过程示意图;49.图8为一种常规的应用界面显示过程示意图;50.图9为本技术实施例提供的一种应用界面显示过程示意图;51.图10为本技术实施例提供的一种控件参数示例图;52.图11为本技术实施例提供的一种界面的自适应显示方法流程图;53.图12为本技术实施例提供的一种包括多个控件的界面示意图;54.图13为本技术实施例提供的一种控件拉伸示例示意图;55.图14为本技术实施例提供的一种界面的自适应显示效果示意图;56.图15为本技术实施例提供的一种宫格布局的控件自适应调整过程示意图;57.图16为本技术实施例提供的另一种界面的自适应显示效果示意图;58.图17为本技术实施例提供的一种多行文本补位重排过程示意图;59.图18为本技术实施例提供的一种终端设备的结构框图。具体实施方式60.下面将结合本技术实施例中的附图,对本技术实施例中的技术方案进行描述。其中,在本技术实施例的描述中,除非另有说明,“/”表示或的意思,例如,a/b可以表示a或b;本文中的“和/或”仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,a和/或b,可以表示:单独存在a,同时存在a和b,单独存在b这三种情况。另外,在本技术实施例的描述中,“多个”是指两个或多于两个。61.以下,术语“第一”、“第二”仅用于描述目的,而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此,限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本实施例的描述中,除非另有说明,“多个”的含义是两个或两个以上。62.本技术实施例中,界面可以包括但不限于应用界面、小程序界面、功能界面等界面。可以理解,应用界面、小程序界面、功能界面等界面的布局通常是预先开发好的。例如,应用界面和小程序界面通常由应用程序开发者预先开发好,如根据终端设备的市场主流宽高比例预先开发。又如,功能界面通常由操作系统开发者预先开发好,如根据终端设备的市场主流宽高比例预先开发。63.为了使得界面在不同宽高比例终端设备上合理显示,作为一种可能的实现方式,可以采用针对多种宽高比例,开发对应的多种界面布局的方式。但是,上述针对性适配的方式工作量大、周期长,且只能针对已有终端设备进行针对性适配,因此存在明显滞后性。64.基于常规技术中存在的上述问题,本技术实施例提供一种界面的自适应显示方法,该方法通过针对界面上的不同类型的控件,采用不同拉伸、平移、对齐策略,以适配于屏幕尺寸。该方法可以基于已有的开发好的界面,实现同一界面在不同宽高比例终端设备上的自适应适配,提供用户体验度。65.作为一种可能的情况,本技术实施例提供的一种界面的自适应显示方法可以应用于折叠屏终端从折叠状态变化为展开状态的场景中,或者应用于折叠屏终端从展开状态变化为折叠状态的场景中。66.示例性的,折叠屏终端如柔性折叠屏终端。折叠屏终端可以包括外折折叠屏终端和内折折叠屏终端。其中,外折折叠屏终端的触摸屏沿折叠边可以折叠成第一屏和第二屏,折叠后的折叠屏终端的第一屏和第二屏朝外。内折折叠屏终端可以包括外屏和内屏,在内折折叠屏终端沿折叠边折叠之后,折叠后的内折折叠屏终端包括朝外的外屏和折叠起来的内屏;在内折折叠屏终端沿折叠边展开之后,展开后的内折折叠屏终端的一面包括外屏,一面包括展开的内屏。通常,内折折叠屏终端的内屏尺寸大于外屏尺寸。67.以外折折叠屏终端为例,其中,折叠屏终端从折叠状态变化为展开状态后,屏幕的尺寸通常会变大。折叠屏终端从展开状态变化为折叠状态后,屏幕的尺寸通常会变小。进一步的,在一些情况下,折叠屏终端从折叠状态变化为展开状态后,以及折叠屏终端从展开状态变化为折叠状态后,屏幕的宽高比通常会发生变化。68.例如,如图2所示,图2以折叠屏手机200为例,示出了本技术实施例示出的一种折叠屏终端的形态示意图。其中,图2中的(a)是手机200沿折叠边折叠后的形态示意图。如图2中的(a)所示,手机200沿折叠边折叠后可以折叠成第一屏和第二屏。图2中的(b)是手机200沿折叠边展开(半展开)的形态示意图。参考图2中的(b),手机200沿折叠边展开后,第一屏和第二屏组成一个屏幕。其中,图2中的(a)和图2中的(b)所示的黑色区域为手机200的屏幕。如图2所示,在手机200由图2中的(a)所示折叠状态变化为图2中的(b)所示展开(半展开)状态后,屏幕的尺寸发生变化(变宽),且屏幕的宽高比发生变化(变大)。69.作为另一种可能的情况,本技术实施例提供的一种界面的自适应显示方法可以应用于跨设备界面投屏场景(例如第一设备向第二设备投屏的场景)中。其中,第一设备与第二设备的屏幕尺寸不同。70.例如,如图3所示,本技术实施例提供的一种界面的自适应显示方法可以应用于图3所示手机300a(即第一设备)向笔记本电脑300b(即第二设备)投屏应用a的界面的场景中。其中,图3所示手机300a与笔记本电脑300b之间建立有通信连接。如图3所示,在应用a的界面由手机300a投屏至笔记本电脑300b之后,用于显示应用a的界面的屏幕尺寸发生变化(变长变宽),且屏幕的宽高比发生变化(变大)。71.又如,本技术实施例提供的一种界面的自适应显示方法可以应用于车载背景下的界面投屏场景中。示例性的,第一设备如车辆主驾驶屏设备,第二设备如副驾驶显屏设备或者后排显示设备。主驾驶屏设备可以向副驾驶显示设备和/或后排显示设备进行界面投屏。72.其中,在本技术实施例中,终端设备可以包括但不限定于智能手机(如折叠屏手机)、上网本、平板电脑、车载设备、可穿戴设备(如智能手表、智能手环、智能眼镜等)、相机(如单反相机、卡片式相机等)、个人计算机(personalcomputer,pc)、掌上电脑、智能电视、个人数字助理(personaldigitalassistant,pda)、便携式多媒体播放器(portablemultimediaplayer,pmp)、投影设备、智慧屏设备、增强现实(augmentedreality,ar)/虚拟现实(virtualreality,vr)设备、混合现实(mixedreality,mr)设备、电视机或人机交互场景中的体感游戏机等。本技术对终端设备的具体功能和结构不做限定。73.作为一种示例,请参考图4,图4以折叠屏手机为例,示出了本技术实施例提供的一种终端设备的硬件结构示意图。如图4所示,终端设备可以包括处理器410,外部存储器接口420,内部存储器421,通用串行总线(universalserialbus,usb)接口430,充电管理模块440,电源管理模块441,电池442,天线1,天线2,移动通信模块450,无线通信模块460,音频模块470,扬声器470a,受话器470b,麦克风470c,耳机接口470d,传感器模块480,按键490,马达491,指示器492,摄像头493,显示屏494,以及用户标识模块(subscriberidentificationmodule,sim)卡接口495等。其中传感器模块480可以包括压力传感器480a,陀螺仪传感器480b,气压传感器480c,磁传感器480d,加速度传感器480e,距离传感器480f,接近光传感器480g,指纹传感器480h,温度传感器480j,触摸传感器480k,环境光传感器480l,骨传导传感器480m等。74.可以理解的是,本技术实施例示意的结构并不构成对终端设备的具体限定。在本技术另一些实施例中,终端设备可以包括比图示更多或更少的不见,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。图示的部件可以以硬件、软件或软件和硬件的组合实现。75.处理器410可以包括一个或多个处理单元,例如:处理器410可以包括应用处理器(applicationprocessor,ap),调制解调处理器,图形处理器(graphicsprocessiong,gpu),图像信号处理器(imagesignalprocessor,isp),音频处理器/数字处理器(theaudioprocessor),控制器、存储器、视频编解码器、音频编解码器,数字信号处理器(digitalsignalprocessor,dsp),基带处理器器,和/或神经网络出合理器(neural-networkprocessingunit,npu)等。其中,不同的处理单元可以是独立的器件,也可以集成在一个或多个处理器中。76.其中,控制器可以是终端设备的神经中枢和指挥中心。控制器可以根据用户操作指令的操作码和时序信号,产生操作控制信号,完成取指令和执行指令的控制。例如,处理器410中还可以设置存储器,用于存储指令和数据。在一些实施例中,处理器410中的存储器为高速缓冲存储器。该存储器可以保存处理器410刚用过或循环使用的指令或数据。如果处理器410需要再次使用该指令或数据,可从所述存储器中直接调用。避免了重复存取,减少了处理器410的等待事件,因而提高了系统的效率。77.在一些实施例中,处理器410可以包括一个或多个接口。接口可以包括集成电路(inter-intergratedcircuit,i2c)接口,集成电路内置音频(inter-intergratedcircuitsound,i2s)接口,脉冲编码调制(plusecodemodulation,pcm)接口,通用异步收发传输器(universalasynchronousreceiver/transmitter,uart)接口,移动产业处理器接口(mobileindustryprocessorinterface,mipi),通用输入输出(general-purposeinput/output,gpio),用户标识模块接口,和/或通用串行总线接口等。78.i2c接口是一种双向同步串行总线,包括一根串行数据线(serialdataline,sda)和一根串行时钟线(derailclockline,scl)。在一些实施例中,处理器410可以包含多组i2c总线。处理器410可以通过不同的i2c总线接口分别耦合触摸传感器480k,麦克风,摄像头493等。例如,处理器410可以通过i2c接口耦合触摸传感器480k,使处理器410与触摸传感器480k通过i2c总线接口通信,实现终端设备的触摸功能。79.应理解,本技术实施例示意的各模块间的接口连接关系,只是示意性说明,并不构成对终端设备的结构限定。在本技术另一些实施例中,终端设备也可以采用上述实施例中不同的接口连接方式,或多种接口连接方式的组合。80.充电管理模块440用于从充电器接收充电输入。电源管理模块441用于连接电池442,充电管理模块440与处理器410。电源管理模块441接收电池442和/或充电管理模块440的输入,为处理器410,内部存储器421,外部存储器,显示屏494,摄像头493,和无线通信模块463等供电。81.终端设备的无线通信功能可以通过天线1,天线2,移动通信模块450,无线通信模块460,调制解调处理器以及基带处理器等实现。82.天线1和天线2用于发射和接收电磁波信号。终端设备中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用,以提高天线的利用率。移动通信模块450可以提供应用在终端设备上的包括2g/3g/4g/5g等无线通信的解决方案。83.调制解调处理器可以包括调制器和解调器。其中,调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接受的电磁波信号解调为低频基带信号。无线通信模块460可以提供应用在终端设备上的包括无线局域网(wirelesslocalareanetworks,wlan)(如无线保真(wirelessfidelity,wi-fi)网络),蓝牙(bluetooth,bt),北斗卫星导航系统(beidounavigationsatellitesystem,bds),全球导航卫星系统(globalnavigationsatellitesystem,gnss),调频(frequencymodulation,fm),近距离无线通信技术(nearfieldcommunication,nfc),红外技术(infrared,ir)等无线通信的解决方案。84.终端设备通过图形处理器(graphicsprocessingunit,gpu),显示屏494,以及应用处理器等实现显示功能。gpu为图像处理的微处理器,连接显示屏494和应用处理器。gpu用于执行数据和几何计算,用于图形渲染。处理器410可以包括一个或多个gpu,其执行程序指令以生成或改变显示信息。85.显示屏494用于显示图像,视频等。显示屏494包括显示面板。显示面板可以采用液晶显示屏(liquidcrystaldisplay,lcd),有机发光二极管(organiclight-emittingdiode,oled),有源矩阵有机发光二极体(active-matrixorganiclightemittingdiode,amoled),柔性发光二极管(flexlight-emittingdiode,fled),量子点发光二极管(quantumdotlightemittingdiodes,qled)等。86.在本技术实施例中,显示屏494可以用于显示界面(如应用界面、小程序界面、功能界面等)。87.终端设备可以通过图像信号处理器(imagesignalprocessor,isp),摄像头493,视频编解码器,gpu,显示屏494以及应用处理器等实现拍摄功能。在本技术中,摄像头493可以包括终端设备的前置摄像头和后置摄像头,其可以是光学变焦镜头等,本技术对此不作限定。88.外部存储器接口420可以用于连接外部存储卡,例如microsd卡,实现扩展终端设备的存储能力。外部存储卡通过外部存储器接口420与处理器410通信,实现数据存储功能。例如将音频、视频等文件保存在外部存储卡中。89.内部存储器421可以用于存储计算机程序的可执行程序代码。示例性的,计算机程序可以包括操作系统程序和应用程序。操作系统可包括但不限于可以包括操作系统程序和应用程序。操作系统可包括但不限于苹果os等操作系统。其中,可执行程序代码包括指令。处理器410通过运行存储在内部存储器421的指令,从而执行终端设备的各种功能应用以及数据处理。内部存储器421可以包括存储程序区和存储数据区。其中,存储程序区可存储操作系统,至少一个功能所需的应用程序(比如音频播放功能,图像播放功能等)等。存储数据去可存储终端设备使用过程中所创建的数据(比如应用数据,用户数据等)等。此外,内部存储器421可以包括高速随机存取存储器,还可以包括非易失性存储器,例如,至少一个磁盘存储器件,闪存器件,通用闪存存储器(universalflashstorage,ufs)等。90.终端设备可以通过音频模块470,扬声器470a,受话器470b,麦克风470c,耳机接口470d,以及应用处理器等实现音频功能。例如,音频播放,录音等。91.触摸传感器480k,也称“触控面板”。触摸传感器480k可以设置于显示屏494,由触摸传感器480k与显示屏494组成触摸屏,也称“触控屏”。触摸传感器480k用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作(包括触摸位置、触摸力度、接触面积和触摸时长等信息)传递给处理器(如dsp等),以确定触摸事件类型。可以通过显示屏494提供与触摸操作相关的视觉输出。在另一些实施例中,触摸传感器480k也可以设置于终端设备的表面,与显示屏494所处的位置不同。92.例如,在本技术的实施例中,终端设备可以通过触摸传感器480k检测用户指示打开应用/小程序/功能的操作、用户在应用/小程序/功能界面上的操作等。93.可以理解的是,本技术实施例示意的结构并不构成对终端设备的具体限定。在本技术另一些实施例中,终端设备可以包括比图示更多或更少的部件,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。图示的部件可以以硬件,软件或软件和硬件的组合实现。94.图5以系统为例,示出了本技术实施例的一种终端设备的软件结构框图。示例性的,可以基于分层架构将软件分成若干个层,每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中,如图5所示,可以基于分层架构将系统从上至下分别为应用程序层,应用程序框架层(framework),安卓运行时(androidruntime)和系统库,以及内核层。95.其中,应用程序层可以包括一系列应用程序。如图5所示相机,图库,日历,通话,地图,导航,wlan,蓝牙,音乐,视频,短信息等应用程序。其中,图5所示应用程序仅作为示例,应用程序还可以是第三方应用程序。96.应用程序框架层(framework)用于为应用程序层的应用程序提供应用编程接口(applicationprogramminginterface,api)和编程框架。应用程序框架层包括一些预先定义的函数。如图5所示,应用程序框架层可以包括窗口管理器,内容提供器,视图系统,电话管理器,资源管理器,通知管理器等。97.窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小,判断是否有状态栏,锁定屏幕,截取屏幕等。98.内容提供器用来存放和获取数据,并使这些数据可以被应用程序访问。数据可以包括视频,图像,音频,拨打和接听的电话,浏览历史和书签,电话簿等。99.视图系统包括可视控件,例如显示文字的控件,显示图片的控件等。视图系统可用于构建应用程序界面。显示界面可以由一个或多个视图组成的。例如,包括短信通知图标的显示界面,可以包括显示文字的视图以及显示图片的视图。100.电话管理器用于提供终端设备的通信功能。例如通话状态的管理(包括接通,挂断等)。101.资源管理器为应用程序提供各种资源,比如本地化字符串,图标,图片,布局文件,视频文件等等。102.通知管理器使应用程序可以在状态栏中显示通知信息,可以用于传达告知类型的消息,可以短暂停留后自动消失,无需用户交互。比如通知管理器被用于告知下载完成,消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知,例如后台运行的应用程序的通知,还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息,发出提示音,设备振动,指示灯闪烁等。103.androidruntime包括核心库和虚拟机。runtime负责系统的调度和管理。104.核心库包含两部分:一部分是java语言需要调用的功能函数,另一部分是的核心库。105.系统库可以包括多个功能模块。例如:表面管理器(surfacemanager),媒体库(medialibraries),三维图形处理库(例如:opengles),2d图形引擎(例如:sgl)等。106.表面管理器用于对显示子系统进行管理,并且为多个应用程序提供了2d和3d图层的融合。107.媒体库支持多种常用的音频,视频格式回放和录制,以及静态图像文件等。媒体库可以支持多种音视频编码格式,例如:mpeg4,h.264,mp3,aac,amr,jpg,png等。108.三维图形处理库用于实现三维图形绘图,图像渲染,合成,和图层处理等。109.2d图形引擎是2d绘图的绘图引擎。110.内核层是硬件层和上述软件层之间的层。内核层可以包含显示驱动,输入/输出设备驱动(例如,键盘、触摸屏、耳机、扬声器、麦克风等),摄像头驱动,音频驱动以及传感器驱动等。用户通过输入设备(如触摸屏、键盘、麦克风等)进行输入操作,内核层可以根据输入操作产生相应的输入事件。111.通常,如图6a所示,界面的显示需要经过以下步骤1-步骤5:112.步骤1:测量,用于计算界面上各个控件和/或元素的显示大小,例如根据应用的xml布局文件和代码中对控件和/或元素属性的设置,获取以及保存界面上控件和/或元素的尺寸。113.其中,界面上的元素如子控件、图标、字符(如文字)等,本技术不做限定。控件如菜单栏、菜单、搜索框、搜索键等,本技术不做限定。114.步骤2:布局,用于根据测量获取的信息,确定界面上控件和/或元素的具体位置范围。115.步骤3:绘制,用于在确定界面上控件和/或元素的位置范围后,在画布(canvas)上绘制各个控件和/或元素,构造绘制指令。116.步骤4:渲染,用于对绘制后的图层进行例如亮度、对比度、饱和度等的调整。117.步骤5:送显,用于将渲染后的图层送往显示屏显示。118.为了支持本技术实施例提供的一种界面的自适应显示方法,如图6b所示,界面的显示需要经过以下步骤a-步骤e:119.步骤a:测量。120.相比于常规技术,如图6b所示,测量阶段除了用于计算界面上各个控件和/或元素的显示大小,还用于进行布局还原。121.示例性的,在测量阶段,终端设备可以通过对屏幕尺寸相关参数进行修改,如修改为初始尺寸,使得系统认为将在初始尺寸的屏幕上显示界面。122.其中,初始尺寸如应用/小程序/功能开发时预定义的原生屏幕尺寸。或者,初始尺寸如应用/小程序/功能界面最近一次(如折叠前、展开前、投屏前等)送显时的屏幕尺寸。本技术不作具体限定。123.步骤b:布局。124.相比于常规技术,如图6b所示,布局阶段除了用于根据测量获取的信息,确定各个控件和/或元素的具体位置范围,还用于进行布局分类和布局拉伸。125.其中,布局分类是指识别当前界面上各个控件和/或元素的布局类型并归类,以确定后续的拉伸策略。布局拉伸是指基于布局类型分类结果,执行相应拉伸、对齐、平移等自适应策略,调用对应自适应算法进行控件和/或元素位置、大小、对齐方式等的修改。126.作为一种示例,上述自适应算法等可以预先设置在操作系统中,例如预先设置在终端设备的应用程序框架层中。127.步骤c:绘制。128.在一些实施例中,绘制阶段用于在确定界面上控件和/或元素的位置范围后,在画布(canvas)上绘制各个控件和/或元素,构造绘制指令。129.在另一些实施例中,进一步的,如图6b所示,绘制阶段还用于对特殊元素进行保持形状比例、多行文本补位重排等针对性处理。示例性的,特殊元素如包含多行文本内容的控件、包含特殊形状的控件等。130.步骤d:渲染。131.其中,渲染阶段用于对绘制后的图层进行例如亮度、对比度、饱和度等的调整。132.步骤e:送显。133.其中,送显阶段用于将渲染后的图层送往显示屏显示。134.可以理解,本技术实施例提供的一种界面的自适应显示方法通过对测量和布局两个阶段进行改进,以实现针对界面上的不同类型的控件,采用不同拉伸、平移、对齐策略执行相应操作,以适配于屏幕尺寸,实现同一界面在不同宽高比例终端设备上的自适应适配的效果。135.进一步的,在一些实施例中,本技术实施例提供的一种界面的自适应显示方法还可以通过对绘制阶段进行改进,以实现对包含多行文本内容的控件、列表类型控件等元素的补位重排,实现更加友好的界面显示效果。136.在一些实施例中,为了基于应用/小程序/功能粒度进行界面自适应显示能力管理,如图7所示,界面的显示过程还包括步骤a':137.步骤a':界面配置。138.其中,界面配置阶段用于设置自适应显示能力白名单。例如,若应用/小程序/功能被设置在自适应显示能力白名单中,则应用/小程序/功能可以执行图7所示步骤a-步骤e进行界面自适应显示;若应用/小程序/功能未被设置在自适应显示能力白名单中,或者被设置在自适应显示能力黑名单中,则应用/小程序/功能执行图6b所示步骤a-步骤e进行界面显示。139.作为一种可能的实现方式,上述步骤a-步骤e可以基于终端设备应用程序框架层(如图5所示视图系统)实现。关于测量、布局、绘制、渲染和送显的具体过程和介绍,可以参考常规技术中的解释和说明,本技术不做赘述。140.以下将结合附图,对本技术实施例提供的一种界面的自适应显示方法进行具体介绍。141.以界面是应用界面为例,图8和图9分别示出了在显示屏幕尺寸发生变化时,常规的应用界面显示过程和本技术实施例提供的应用界面显示过程对比效果。142.其中,图8示出了一种常规的应用界面显示过程示意图。如图8所示,在应用启动之后,首先终端设备会进行视图树(viewtree(也称treeview))的创建。例如,应用通过遍历应用的xml布局文件进行视图树(viewtree)的创建。然后,终端设备通过遍历视图树(viewtree)以对视图树(viewtree)中的每一个控件进行测量、布局、绘制以及后续处理(如渲染和送显等)。143.其中,viewtree是由不同的view组件(viewitem)和/或view组(viewgroup)彼此组合、嵌套形成的树形结构。其中,viewtree中的viewitem或viewgroup用于呈现viewtree用户界面(userinterface,ui)(以下简称ui界面)中的控件或者元素。viewgroup可以包含一组viewitem和/或viewgroup,并且viewgroup其本身就是view的扩展。viewitem或viewgroup是根据实际应用界面需求自定义预先设置的。viewitem如静态定义的树、动态构造的树以及数据绑定的树等,本技术不限定。示例性的,viewitem用于呈现ui界面上的菜单、搜索键、图标、字符(如文字)等。viewgroup用于呈现ui界面上的菜单栏、搜索栏、文字框等。144.通常,viewtree包括三种基本的组件类型:根组件、父组件和叶组件。其中,根组件是viewtree中顶级的父节点。根组件是viewtree中带有子节点且parent属性值为空的节点。父组件是viewtree中的特定节点,父组件带有子节点。叶组件是viewtree中没有子节点的节点。示例性的,根组件用于呈现ui界面上的菜单栏,父组件用于呈现菜单栏中的菜单,叶组件用于呈现菜单对应的文字。145.通常,控件的位置和大小主要由参数a、参数b、参数c和参数d表示。146.以当前控件是控件a,控件a是控件b的子节点为例,如图10所示,参数a用于表示当前控件自身可布局区域的最左端相对于父组件最左端的距离,参数a如left参数。参数b用于表示当前控件自身可布局区域的最顶端相对于父组件最顶端的距离,参数b如top参数。参数性c用于表示当前控件自身可布局区域的最右端相对于父组件最左端的距离,参数c如right参数。参数d用于表示当前控件自身可布局区域的最底端相对于父组件最顶端的距离,参数d如bottom参数。如图10所示,由(参数a,参数b,参数c,参数d)所描述的矩形区域即为当前控件a在父组件(即控件b)中可布局的区域。147.在一些实施例中,控件的位置和大小还可以由参数a、参数b、参数e和参数f表示。其中,如图10所示,参数e用于表示当前控件的宽度,参数e如width参数。参数f用于表示当前控件的高度,参数f如height参数。148.在另一些实施例中,控件的位置和大小还可以由参数c、参数d、参数e和参数f表示。在另一些实施例中,控件的位置和大小还可以由参数a、参数d、参数e和参数f表示在另一些实施例中,控件的位置和大小还可以由参数c、参数b、参数e和参数f表示149.其中,width=right-left,即参数e=参数c-参数a。height=bottom-top,即参数f=参数d-参数b。150.相比于图8所示常规应用界面显示过程,如图9所示,本技术实施例提供的应用界面显示方法可以包括:151.首先,在应用启动之后,终端设备会进行视图树(viewtree)的创建。例如,应用通过遍历应用的xml布局文件进行视图树(viewtree)的创建。152.然后,终端设备通过遍历视图树(viewtree)以对视图树(viewtree)中的每一个控件进行控件测量以及布局还原,以使得系统认为将在初始尺寸的屏幕上显示界面。153.之后,终端设备确定控件的具体位置范围,确定布局分类和进行布局拉伸。例如,终端设备可以通过分析视图树(viewtree)各个节点的类型、大小、布局参数等,确定自适应场景以及各节点对应的拉伸系数。进一步的,终端设备可以基于确定的自适应场景以及拉伸系数对对应节点进行自适应调整,包括位置、大小、对齐方式等的修改。154.最后,终端设备对界面进行绘制以及后续处理(如渲染和送显等)。155.在一些实施例中,终端设备还可以在应用启动以后,判断是否执行界面的自适应流程,即判断是否启动自适应调整算法。156.示例性的,如图9所示,在应用启动以后,终端设备可以判断是否启动自适应调整算法。若确定启动自适应调整算法,终端设备保存屏幕尺寸发生变化之前的屏幕尺寸(以下简称原屏幕尺寸),以及继续执行后续视图树(viewtree)的创建步骤;若确定不启动自适应调整算法,终端设备继续执行后续视图树(viewtree)的创建步骤。157.进一步的,如图9所示,在视图树(viewtree)创建成功之后,终端设备可以再次判断是否启动自适应调整算法。若确定启动自适应调整算法,终端设备将屏幕尺寸相关参数修改为原屏幕尺寸,以及继续执行后续遍历视图树(viewtree)进行测量的步骤;若确定不启动自适应调整算法,终端设备继续执行后续遍历视图树(viewtree)进行测量的步骤。158.作为一种示例,终端设备可以在屏幕尺寸(如屏幕宽高比)发生变化时,确定执行界面的自适应流程。159.作为另一种示例,终端设备可以在屏幕尺寸(如屏幕宽高比)发生变化,且当前界面所属的应用/小程序/功能位于自适应显示能力白名单时,确定执行界面的自适应流程。160.作为另一种示例,终端设备可以在屏幕尺寸(如屏幕宽高比)发生变化,且当前界面所属的应用/小程序/功能没有位于自适应显示能力黑名单时,确定执行界面的自适应流程。161.示例性的,以折叠屏终端的屏幕由折叠状态展开为展开状态为例,假设在初始时刻,处于折叠状态的折叠屏终端在折叠屏上显示界面;当屏幕由折叠状态展开为展开状态之后,折叠屏终端执行本技术实施例提供的界面的自适应显示方法,在展开屏上自适应显示上述界面。162.示例性的,以折叠屏终端的屏幕由展开状态折叠为折叠状态为例,假设在初始时刻,处于展开状态的折叠屏终端在展开屏上显示界面;当屏幕由展开状态折叠为折叠状态之后,折叠屏终端执行本技术实施例提供的界面的自适应显示方法,在折叠屏上自适应显示上述界面。163.以折叠屏终端的屏幕由折叠状态的展开为展开状态,或者由展开状态折叠为折叠状态为例,如图11所示,本技术实施例提供的一种界面的自适应显示方法可以包括以下s1101-s1104。164.s1101:折叠屏终端在第一屏上显示第一界面,第一屏的尺寸为第一尺寸。第一界面上包括一个或多个控件和/或元素。165.其中,第一界面可以是应用界面(包括轻应用、快应用等)、小程序界面、功能界面等,本技术不做限定。166.示例性的,元素如子控件、图标(icon)、字符(如文字)等,本技术不做限定。子控件如菜单栏、菜单、搜索框、搜索键等,本技术不做限定。167.以第一界面如图12所示界面为例,如图12所示,第一界面上包括多个控件:控件1-控件6。其中,控件1中包括搜索框;控件2中包括多个图标,每个图标对应有文字;控件3中包括图标和文字框,文字框中包括多行文字;控件4中包括图标和文字框;控件5中包括多个图标;控件6中包括多个图标。168.示例性的,若在初始时刻,折叠屏终端处于折叠状态,则第一屏是折叠屏。若在初始时刻,折叠屏终端处于展开状态,则第一屏是展开屏。169.s1102:在检测到屏幕尺寸由第一尺寸变化为第二尺寸后,折叠屏终端修改屏幕尺寸相关参数,使得界面的初始画布尺寸为第一尺寸。170.例如,在检测到屏幕由折叠状态展开为展开状态后,折叠屏终端修改屏幕尺寸相关参数,使得界面的初始画布尺寸为折叠状态下的折叠屏的尺寸,即第一尺寸是折叠屏的尺寸。其中,在这种情况下,第二尺寸是展开屏的尺寸。171.又如,在检测到屏幕由展开状态折叠为折叠状态后,折叠屏终端修改屏幕尺寸相关参数,使得界面的初始画布尺寸为展开状态下的展开屏的尺寸,即第一尺寸是展开屏的尺寸。其中,在这种情况下,第二尺寸是折叠屏的尺寸。172.作为一种示例,折叠屏终端可以通过遍历视图树(viewtree)以对视图树(viewtree)中的每一个控件和元素进行测量以及布局还原,以使得系统认为将在初始尺寸的屏幕(即第一屏)上显示界面。作为一种示例,屏幕尺寸相关参数可以位于displaymetrics中。折叠屏终端可以通过修改displaymetrics中的屏幕尺寸相关参数为原屏幕(即第一屏)尺寸,使得界面的初始画布尺寸为第一尺寸。173.其中,displaymetrics是操作系统(如系统)中的一个类。displaymetrics用于提供一种关于显示的通用信息,如显示大小,分辨率和字体等。关于displaymetrics的具体介绍,可以参考常规技术,本技术实施例不做赘述。174.s1103:折叠屏终端获取上第一界面上控件的布局类型和元素的类型。布局类型包括但不限于普通布局、宫格布局、列表布局。元素的类型包括但不限于特殊形状、多行文本、子控件。175.其中,普通布局是指能够支持自由拉伸的布局方式。普通布局的控件通常不会因为自由拉伸变形。示例性的,图12中的控件1、控件3和控件4的布局类型即为普通布局。176.宫格布局是指控件展示的元素有限(如展示有n个元素,n为正整数,且n≥2),且已经全部展示完毕的控件,其中,n个元素大小相等。在一些实施例中,宫格布局的控件中的n个元素还可以等间距排布。示例性的,图12中的控件2和控件6的布局类型即为宫格布局。177.列表布局是指控件展示的元素以动态加载的列表方式呈现,且未展示完毕的控件。示例性的,图12中的控件5的布局类型即为列表布局。178.特殊形状如需要保持自身比例(如宽高比例)的元素。示例性的,图12中的控件3和控件4中的特殊图标需要保持自身宽高比例,为特殊形状。又如,特殊形状还可以如用户头像等。179.多行文本如图12中的控件3中的文本内容。180.s1104:折叠屏终端根据获取的控件的布局类型和元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素。181.其中,第二尺寸是第二屏的尺寸。182.作为一种示例,折叠屏终端可以根据上述一个或多个控件的布局类型和元素的类型,执行相应控件拉伸、对齐、平移等自适应策略,调用对应自适应算法进行控件位置、大小、对齐方式等的修改。示例性的,在本技术实施例中,可以通过平移操作进行控件位置的修改,通过拉伸操作进行控件位置和大小的修改,通过对齐操作进行对齐方式的修改。对齐方式可以包括但不限于左对齐方式、右对齐方式和居中对齐方式。183.以下将结合控件的具体布局类型或元素的类型,介绍对应自适应算法:184.(1)示例性的,对于布局类型是普通布局的控件,可以基于自由拉伸算法,根据宽高拉伸系数对控件进行成倍放缩。185.其中,对于第一尺寸与第二尺寸宽高比不同的情况,在自由拉伸之后,控件的宽高比例往往会发生变化,如图14中的(a)和图14中的(b)中的控件1所示。但是,这种宽高比例的变化不会造成视觉变形。186.其中,宽高拉伸系数与第一屏的尺寸(即第一尺寸)和第二屏的尺寸(即第二尺寸)相关。以折叠屏终端的屏幕由折叠状态展开为展开状态为例,假设第一屏的宽度为a,高度为b,第二屏的宽度为2a,高度为b,则宽高拉伸系数为(2a/a,b/b),即(2,1)。以折叠屏终端的屏幕由展开状态折叠为折叠状态为例,假设第一屏的宽度为2a,高度为b,第二屏的宽度为a,高度为b,则宽高拉伸系数为(a/2a,b/b),即(0.5,1)。187.以图13中的(a)所示包括子控件a的控件b为例,假设宽高拉伸系数为(ws,hs),在拉伸之后,如图13中的(b)所示,控件的参数a'=参数a*ws,参数b'=参数b*hs,参数c'=参数c*ws,参数d'=参数d*hs。其中,参数a、参数b、参数c和参数d分别是拉伸之前控件的参数。188.(2)示例性的,对于布局类型是宫格布局的控件,可以基于宫格等分策略,先确定控件对应区域中元素(如子控件)所占据的控件区域,然后对每一个元素进行等比拉伸,并在各自所在控件区域中居中显示。189.作为一种示例,折叠屏终端可以先根据自由拉伸算法计算得到控件对应区域中元素所占据的控件区域。然后,根据等比拉伸算法对每一个元素进行等比拉伸。最后,在各个元素所在控件区域中居中显示对应元素。其中,等比拉伸算法的核心思想是:根据宽高拉伸系数的较小值min(ws,hs)(即ws和hs中的较小值)对控件对应区域中的元素进行拉伸。例如,假设宽高拉伸系数为(1,2),则根据宽高拉伸系数1(即min(1,2))对控件对应区域中的元素进行拉伸。190.可以理解,如图14中的(a)所示,若采用自由拉伸算法,宫格布局的控件2和控件6对应区域中的多个元素会发生比例变形(例如由圆形变成椭圆形),影响显示效果。而采用等比拉伸算法,如图14中的(b)所示,宫格布局的控件6中的多个元素会以原生宽高比例显示,不会发生变形。191.可以理解,对于布局类型是宫格布局的控件,由于控件对应区域中的元素已经全部展示完毕,因此在屏幕尺寸发生变化时,可以采用宫格等分策略重新布局。其中,如图15所示,宫格等分策略的核心思想是:首先,根据宽高拉伸系数(ws,hs)(例如,(2,1))将控件对应区域(如图15所示初始状态下的区域1)进行自由拉伸。然后,采用等比拉伸算法,根据宽高拉伸系数min(ws,hs),即1将控件对应区域中的元素(如图15所示初始状态下的控件a、控件b和控件c)和对应显示区域(如图15所示初始状态下的区域a、区域b和区域c)进行等比拉伸,得到图15所示中间状态下的控件。如图15中的中间状态所示,控件a、控件b和控件c分别居左位于显示区域a、区域b和区域c中,因此,需要做进一步修正。即,最后,将控件对应区域中的元素(如图15中所示中间状态下的控件a、控件b和控件c)向右平移offset,得到图15所示最终状态下的元素居中显示效果。其中,offset=(ws-1)/2*(参数c-参数a)。192.需要说明的是,对于布局类型是宫格布局的控件,若控件中的子控件对应有文字,则在等比拉伸时,子控件对应的文字采用与该子控件一致的策略进行处理。例如,对于图14中的(a)所示控件2,文字与对应子控件可以作为一体进行等比拉伸以及在子控件所在控件区域中居中显示,得到图14中的(b)所示控件2的显示效果。193.在一些实施例中,对于需要采用等比拉伸算法进行处理的控件,若控件在初始状态下居中/左对齐/右对齐显示在界面上,为了保证控件在界面上与其它控件的相对位置关系,该控件可以保持初始状态下的对齐方式。194.以居中对齐为例,作为一种示例,可以以控件中心点锚定控件位置实现控件居中对齐。195.例如,对于宽高拉伸系数为(ws,hs)的情况,可以采用以下计算式1.1-计算式1.6实现控件居中对齐:196.参数e'=参数e*min(ws,hs);(计算式1.1)197.参数f'=参数f*min(ws,hs);(计算式1.2)198.参数a'=参数a*min(ws,hs)+参数e*min(ws,hs)-参数e';(计算式1.3)199.参数b'=参数b*min(ws,hs)+参数f*min(ws,hs)-参数f';(计算式1.4)200.参数c'=参数a'+参数e';(计算式1.5)201.参数d'=参数b'+参数f'。(计算式1.6)202.以左对齐为例,作为一种示例,可以以控件左上角顶点锚定控件位置实现控件左对齐。203.例如,对于宽高拉伸系数为(ws,hs)的情况,可以采用以下计算式2.1-计算式2.6实现控件左对齐:204.参数e'=参数e*min(ws,hs);(计算式2.1)205.参数f'=参数f*min(ws,hs);(计算式2.2)206.参数a'=参数a*min(ws,hs);(计算式2.3)207.参数b'=参数b*min(ws,hs);(计算式2.4)208.参数c'=参数a'+参数e';(计算式2.5)209.参数d'=参数b'+参数f'。(计算式2.6)210.作为一种示例,可以以控件右上角顶点锚定控件位置实现控件右对齐。211.例如,对于宽高拉伸系数为(ws,hs)的情况,可以采用以下计算式3.1-计算式3.6实现控件右对齐:212.参数e'=参数e*min(ws,hs);(计算式3.1)213.参数f'=参数f*min(ws,hs);(计算式3.2)214.参数c'=参数c*min(ws,hs);(计算式3.3)215.参数b'=参数b*min(ws,hs);(计算式3.4)216.参数a'=参数c'-参数e';(计算式3.5)217.参数d'=参数b'+参数f'。(计算式3.6)218.(3)示例性的,对于布局类型是列表布局的控件,由于控件对应区域中的元素未展示完毕,因此可以基于展示列数/行数放缩策略,对控件展示列数/行数进行成倍放缩,以根据实际屏幕尺寸展示更多/更少元素。219.作为一种示例,折叠屏终端可以先根据宽高拉伸系数将控件对应区域进行自由拉伸;然后根据宽高拉伸系数修改控件展示列数/行数,以展示更多/更少元素。例如,若宽高拉伸系数为(2,1),将列数增加1倍。220.其中,本技术实施例提供的对列表布局控件的自适应处理方法,既适用于上下滑动动态加载方式的列表控件,又适用于左右滑动动态加载方式的列表布局控件。221.在一些实施例中,用于决定控件展示列数/行数的参数如spancount。基于此,在本技术实施例中,可以通过修改参数spancount以改变控件展示列数/行数。222.以图14中的(a)所示上下滑动动态加载方式的列表控件5为例,在根据宽高拉伸系数将控件5对应区域进行自由拉伸,根据宽高拉伸系数(2,1)将展示列数的参数(如spancount)增加1倍之后,控件5显示图14中的(b)所示控件5的显示效果。223.又如,以图16中的(a)所示上下滑动动态加载方式的列表控件b为例,在根据宽高拉伸系数将控件b对应区域进行自由拉伸,根据宽高拉伸系数(2,1)将展示列数的参数(如spancount)增加1倍之后,控件b显示图16中的(b)所示控件b的显示效果。224.又如,以图16中的(a)所示左右滑动动态加载方式的列表布局控件a为例,在折叠屏终端可以先根据宽高拉伸系数将控件a对应区域进行自由拉伸;然后根据宽高拉伸系数(2,1)将展示列数的参数(如spancount)增加1倍之后,控件显示图16中的(b)所示控件a的显示效果。225.(4)示例性的,对于类型为特殊形状的元素,可以根据具体情况进行针对性处理。226.例如,特殊形状如需要保持自身比例(如宽高比例)的图标(icon),对于这种情况,可以根据等比拉伸算法对该元素进行等比拉伸,以保持元素的宽高比不变。227.示例性的,图12中的控件3和控件4中的特殊图标需要保持自身宽高比,对于这种情况,折叠屏终端可以先根据宽高拉伸系数将控件对应区域和控件中文字可布局区域进行自由拉伸;然后根据等比拉伸算法对控件中左侧圆形进行等比拉伸。228.(5)示例性的,对于类型为多行文本的元素,可以进行文本控件补位重排。229.示例性的,对于类型为多行文本的元素,可以先根据宽高拉伸系数将控件对应区域和控件中文字可布局区域进行自由拉伸。例如,自由拉伸后的文字可布局区域的宽度为:参数e'=ws*(参数c-参数a)。然后,基于新的可布局区域重新计算文字布局方式,确定文本行数,进而确定文本实际高度。最后,基于计算得到的文字布局方式更新控件和文字可布局区域的高度。230.其中,在本技术实施例中,基于计算得到的文字布局方式更新控件和文字可布局区域的高度可以包括但不限于:保持初始状态下控件和文字可布局区域的宽度不变,根据文字布局方式(如文本行数)重新计算控件和文字可布局区域的高度等。231.以横向多行文本为例,如图17所示,由于横向多行文本布局时依赖文字可布局区域的宽度,因此在本技术实施例中,进行文本控件补位重排的核心思想是:首先,根据宽高拉伸系数(ws,hs)将控件对应区域(如图17所示初始状态下的区域1)和控件中文字可布局区域(如图17所示初始状态下的区域2)进行自由拉伸,得到图17中的中间状态下的控件对应区域(如图17所示中间状态下的区域1)和控件中文字可布局区域(如图17所示中间状态下的区域2)。然后,基于新的文字可布局区域(如图17所示中间状态下的区域2)确定每一行文本的数量,从而确定文本行数,进而确定文本实际高度。最后,根据确定的文本行数调整控件对应区域和文字可布局区域的高度(如减小为原始状态下的高度),得到图17中的最终状态下的控件对应区域(如图17所示最终状态下的区域1)和控件中文字可布局区域(如图17所示最终状态下的区域2)。其中,如图17所示,在初始状态下,文本显示为多行文本。但是,在对文字可布局区域进行自由拉伸之后,文字可布局区域变宽,文本转为单行显示,因此需要根据确定的文本行数调整控件对应区域和文字可布局区域的高度,以得到更加合理的显示效果。232.作为一种示例,上述自适应算法(如自由拉伸算法、等比拉伸算法、宫格等分算法、对齐算法、平移算法、文本控件补位重排算法等)可以预先设置在操作系统中,例如预先设置在终端设备的应用程序框架层中。233.可以理解,在屏幕尺寸(如宽高比例)发生变化时,基于常规的界面显示方法,会导致界面在初始屏幕上的布局与在最终屏幕上的布局不同。例如,以图1所示示例为例,由于最终屏幕的宽度是初始屏幕宽度的2倍,但是屏幕高度相同,因此应用布局对于屏幕宽度较敏感,故界面在最终屏幕上布局时,各个元素大小均为在初始屏幕时的2倍,最终导致虽然屏幕尺寸变大了,但是界面展示的信息量约为在初始屏幕时的50%。又如,基于常规的界面显示方法,还会导致特殊形状的控件或元素等发生畸变、文本行布局不合理等问题。234.而采用本技术实施例提供的界面的自适应显示方法,终端设备可以针对界面上的不同类型的控件,采用不同拉伸、平移、对齐等策略,以适配于屏幕尺寸。例如,在屏幕尺寸变大时,避免界面展示的信息量变少的问题。又如,在屏幕尺寸变小时,避免界面展示的信息量过于拥挤的问题。235.示例性的,以图14所示界面自适应显示效果为例,在采用本技术实施例提供的进行界面自适应布局之后,如图14中的(b)所示,控件2和控件6在不发生畸变,均匀化布局的前提下,以占据合理区域的形式进行布局;控件3在行数布局合理的前提下,以占据合理区域的形式进行布局;控件5在不发生畸变,均匀化布局的前提下,以占据合理区域从而展示更多元素的形式进行布局。或者,以图16所示界面自适应显示效果为例,在采用本技术实施例提供的进行界面自适应布局之后,如图16中的(b)所示,控件a和控件b在不发生畸变,均匀化布局的前提下,以占据合理区域从而展示更多元素的形式进行布局。236.另外,该方法无需应用开发者而额外投入精力进行大量的屏幕尺寸适配工作,而是从系统层解决适配问题。该方法可以基于已有的开发好的界面,通过通用的自适应算法(如自由拉伸算法、等比拉伸算法、宫格等分算法、对齐算法、平移算法、文本控件补位重排算法等),实现同一界面在不同宽高比例终端设备上的自适应适配,应用覆盖面更广、适配度更高且通用性更强。237.需要说明的是,本技术图13-图17仅以屏幕尺寸变大作为示例,对于屏幕尺寸变小的情况,也可以参考本技术上述实施例中介绍的方法。例如,对于布局类型是普通布局的控件,若屏幕尺寸变小,可以基于自由拉伸算法,根据宽高拉伸系数对控件进行成倍缩小。又如,对于布局类型是宫格布局的控件,可以基于等比拉伸算法,先确定控件对应区域中元素所占据的控件区域,然后对每一个元素进行等比缩小。又如,对于布局类型是列表布局的控件,可以对控件展示列数/行数进行成倍缩小,以根据实际屏幕尺寸展示更少元素。又如,对于需要保持自身比例(如宽高比例)的元素,可以根据等比拉伸算法对该元素进行等比缩小,以保持元素的宽高比不变。又如,对于文本(包括多行文本和单行文本),可以先根据宽高拉伸系数将控件对应区域和控件中文字可布局区域进行自由缩小;然后基于新的可布局区域重新计算文字布局方式,确定文本行数(如增加文本行数),进而确定文本实际高度;最后,基于计算得到的文字布局方式更新控件和文字可布局区域的高度(如增加高度)。238.另外,需要说明的是,本技术上述实施例仅以折叠屏终端的屏幕由折叠状态的展开为展开状态,或者由展开状态折叠为折叠状态作为示例,对于跨设备界面投屏场景,也可以参考本技术上述实施例中介绍的方法。以第一设备向第二设备投屏的场景为例示例,第一设备的尺寸即上述第一尺寸,第二设备的尺寸即上述第二尺寸。第二设备可以获取投屏界面上一个或多个控件的布局类型和控件对应区域中元素的类型,从而根据上述一个或多个控件的布局类型和控件中的元素的类型,采用对应自适应算法在第二尺寸的画布上布局并绘制投屏界面上的控件。示例性的,第一设备如手机,第二设备如笔记本电脑。又如,第一设备如车辆主驾驶屏设备,第二设备如副驾驶显示设备或后排显示设备。239.应理解,本技术实施例的各个方案可以进行合理的组合使用,并且实施例中出现的各个术语的解释或说明可以在各个实施例中互相参考或解释,对此不作限定。240.还应理解,在本技术的各种实施例中,上述各过程的序号的大小并不意味着执行顺序的先后,各过程的执行顺序应以其功能和内在逻辑确定,而不应对本技术实施例的实施过程构成任何限定。241.可以理解的是,终端设备为了实现上述任一个实施例的功能,其包含了执行各个功能相应的硬件结构和/或软件模块。本领域技术人员应该很容易意识到,结合本文中所公开的实施例描述的各示例的单元及算法步骤,本技术能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能,但是这种实现不应认为超出本技术的范围。242.本技术实施例可以对终端设备进行功能模块的划分,例如,可以对应各个功能划分各个功能模块,也可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块既可以采用硬件的形式实现,也可以采用软件功能模块的形式实现。需要说明的是,本技术实施例中对模块的划分是示意性的,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式。243.比如,以采用集成的方式划分各个功能模块的情况下,如图18所示,为本技术实施例提供的一种终端设备的结构框图。如图18所示,该输入设备可以包括显示屏1810、通信单元1820、处理单元1830和存储单元1840。244.其中,显示屏1810用于支持终端设备进行界面显示,如显示第一界面和/或与本技术实施例相关的其它界面。通信单元1820用于支持终端设备进行无线电信号接收和发送,如发送或接收投屏数据和/或投屏相关指令,和/或与本技术实施例相关的其它过程。处理单元1830用于支持终端设备获取第一界面上控件的布局类型和元素的类型,根据控件的布局类型和元素的类型确定对应自适应算法,根据确定的自适应算法在第二尺寸的画布上布局并绘制第一界面的控件和元素,和/或与本技术实施例相关的其它过程。存储单元1840用于存储与本技术实施例相关的计算机程序指令和相关数据。245.作为一种示例,上述通信单元1820可以包括射频电路。具体的,终端设备可以通过射频电路进行无线信号的接收和发送。通常,射频电路包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器、双工器等。此外,射频电路还可以通过无线通信和其它设备通信。所述无线通信可以使用任一通信标准或协议,包括但不限于全球移动通讯系统、通用分组无线服务、码分多址、宽带码分多址、长期演进、电子邮件、短消息服务等。246.应理解,终端设备中的各个模块可以通过软件和/或硬件形式实现,对此不作具体限定。换言之,输入设备是以功能模块的形式来呈现。这里的“模块”可以指特定应用集成电路asic、电路、执行一个或多个软件或固件程序的处理器和存储器、集成逻辑电路,和/或其它可以提供上述功能的器件。247.在一种可选的方式中,当使用软件实现数据传输时,可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时,全部或部分地实现本技术实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其它可编程装置。所述计算机指令可以存储在计算机可读存储介质中,或者从一个计算机可读存储介质向另一个计算机可读存储介质传输,例如,所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线((digitalsubscriberline,dsl))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质,(例如软盘、硬盘、磁带)、光介质(例如数字化视频光盘(digitalvideodisk,dvd))、或者半导体介质(例如固态硬盘solidstatedisk(ssd))等。248.结合本技术实施例所描述的方法或者算法的步骤可以硬件的方式来实现,也可以是由处理器执行软件指令的方式来实现。软件指令可以由相应的软件模块组成,软件模块可以被存放于ram存储器、闪存、rom存储器、eprom存储器、eeprom存储器、寄存器、硬盘、移动硬盘、cd-rom或者本领域熟知的任何其它形式的存储介质中。一种示例性的存储介质耦合至处理器,从而使处理器能够从该存储介质读取信息,且可向该存储介质写入信息。当然,存储介质也可以是处理器的组成部分。处理器和存储介质可以位于asic中。另外,该asic可以位于电子设备中。当然,处理器和存储介质也可以作为分立组件存在于终端设备中。249.通过以上的实施方式的描述,所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。当前第1页12当前第1页12
技术特征:
1.一种界面的自适应显示方法,其特征在于,所述方法包括:所述终端设备在第一屏上显示第一界面,其中,所述第一屏的尺寸为第一尺寸,所述第一界面上包括一个或多个控件和元素;在检测到屏幕尺寸由所述第一尺寸变化为第二尺寸后,所述终端设备获取所述第一界面上控件的布局类型和元素的类型;所述终端设备根据所述控件的布局类型和元素的类型,采用对应自适应算法在所述第二尺寸的画布上布局并绘制所述第一界面的控件和元素。2.根据权利要求1所述的方法,其特征在于,所述控件的布局类型包括以下中的一种或多种:普通布局、宫格布局、列表布局。3.根据权利要求2所述的方法,其特征在于,所述第一界面上包括第一控件,所述第一控件的布局类型是宫格布局,所述第一控件中包括等间距排布的多个元素;所述终端设备根据所述控件的布局类型和元素的类型,采用对应自适应算法在所述第二尺寸的画布上布局并绘制所述第一界面的控件和元素,具体包括:所述终端设备根据宽高拉伸系数(w
s
,h
s
)对所述第一控件对应区域的宽度和高度进行对应倍数的拉伸;所述终端设备根据所述宽高拉伸系数(w
s
,h
s
)对所述第一控件中元素所占据的控件区域的宽度和高度进行对应倍数的拉伸;所述终端设备根据宽高拉伸系数的最小值min(w
s
,h
s
)对所述第一控件中的元素进行等比拉伸;所述终端设备将所述第一控件中的元素居中显示在拉伸后的对应元素所占据的控件区域。4.根据权利要求2或3所述的方法,其特征在于,所述第一界面上包括第二控件,所述第二控件的布局类型是列表布局,所述第二控件中包括以动态加载方式呈现的多个元素;所述终端设备根据所述控件的布局类型和元素的类型,采用对应自适应算法在所述第二尺寸的画布上布局并绘制所述第一界面的控件和元素,具体包括:所述终端设备根据宽高拉伸系数(w
s
,h
s
)对所述第二控件对应区域的宽度和高度进行对应倍数的拉伸;所述终端设备根据所述宽高拉伸系数(w
s
,h
s
)调整所述第二控件中元素的行数和/或列数;所述终端设备根据调整后的行数和/或列数在拉伸后的所述第二控件对应区域中显示所述第二控件中的元素。5.根据权利要求2-4中任一项所述的方法,其特征在于,所述第一界面上包括第三控件,所述第三控件的布局类型是普通布局;所述终端设备根据所述控件的布局类型和元素的类型,采用对应自适应算法在所述第二尺寸的画布上布局并绘制所述第一界面的控件和元素,具体包括:所述终端设备根据宽高拉伸系数对所述第三控件的宽度和高度进行对应倍数的拉伸。6.根据权利要求2-5中任一项所述的方法,其特征在于,所述第一界面上包括预设图标;所述终端设备根据所述控件的布局类型和元素的类型,采用对应自适应算法在所述第
二尺寸的画布上布局并绘制所述第一界面的控件和元素,具体包括:所述终端设备根据宽高拉伸系数的最小值min(w
s
,h
s
)等比拉伸所述预设图标。7.根据权利要求2-6中任一项所述的方法,其特征在于,所述第一界面上包括文本框,所述文本框中包括多行文本;所述终端设备根据所述控件的布局类型和元素的类型,采用对应自适应算法在所述第二尺寸的画布上布局并绘制所述第一界面的控件和元素,具体包括:所述终端设备根据宽高拉伸系数(w
s
,h
s
)对所述文本框的宽度和高度进行对应倍数的拉伸;所述终端设备根据拉伸后的所述文本框计算所述多行文本的布局方式,所述布局方式用于表征所述多行文本的行数和列数;所述终端设备根据所述多行文本的布局方式调整所述文本框的高度。8.根据权利要求2-7中任一项所述的方法,其特征在于,所述宽高拉伸系数(w
s
,h
s
)用于表征所述第二尺寸与所述第一尺寸的尺寸关系。9.根据权利要求2-8中任一项所述的方法,其特征在于,所述第一界面上包括第四控件和第五控件,在所述终端设备在所述第一屏上显示所述第一界面时,所述第四控件以第一对齐方式与所述第五控件对齐;所述终端设备根据所述控件的布局类型和元素的类型,采用对应自适应算法在所述第二尺寸的画布上布局并绘制所述第一界面的控件和元素,具体包括:所述终端设备分别根据所述第四控件和所述第五控件的布局类型和控件中元素的类型,采用对应自适应算法进行控件拉伸和元素拉伸;所述终端设备调整所述第四控件和/或所述第五控件的位置,使得所述第四控件以所述第一对齐方式与所述第五控件对齐。10.根据权利要求9所述的方法,其特征在于,所述第一对齐方式包括:左对齐、右对齐或者居中对齐。11.根据权利要求1-10中任一项所述的方法,其特征在于,所述终端设备是折叠屏设备,所述第一尺寸是所述终端设备处于第一状态时的屏幕尺寸,所述第二尺寸是所述终端设备处于第二状态时的屏幕尺寸。12.根据权利要求11所述的方法,其特征在于,所述第一状态是折叠状态,所述第二状态是展开状态,所述第一尺寸小于所述第二尺寸。13.一种终端设备,其特征在于,所述终端设备包括:显示屏,用于在所述终端设备处于第一状态时,在第一屏上显示第一界面,其中,在所述终端设备处于所述第一状态时所述显示屏的尺寸为第一尺寸,所述第一界面上包括一个或多个控件和元素;检测单元,用于检测所述终端设备的状态或所述显示屏的尺寸变化;处理单元,用于在所述检测单元检测到屏幕尺寸由所述第一尺寸变化为第二尺寸后,获取所述第一界面上控件的布局类型和元素的类型;以及,根据所述控件的布局类型和元素的类型,采用对应自适应算法在所述第二尺寸的画布上布局并绘制所述第一界面的控件和元素。14.根据权利要求13所述的终端设备,其特征在于,所述控件的布局类型包括以下中的
一种或多种:普通布局、宫格布局、列表布局。15.根据权利要求14所述的终端设备,其特征在于,所述第一界面上包括第一控件,所述第一控件的布局类型是宫格布局,所述第一控件中包括等间距排布的多个元素;所述处理单元根据所述控件的布局类型和元素的类型,采用对应自适应算法在所述第二尺寸的画布上布局并绘制所述第一界面的控件和元素,具体包括:所述处理单元根据宽高拉伸系数(w
s
,h
s
)对所述第一控件对应区域的宽度和高度进行对应倍数的拉伸;所述处理单元根据所述宽高拉伸系数(w
s
,h
s
)对所述第一控件中元素所占据的控件区域的宽度和高度进行对应倍数的拉伸;所述处理单元根据宽高拉伸系数的最小值min(w
s
,h
s
)对所述第一控件中的元素进行等比拉伸;所述处理单元将所述第一控件中的元素居中显示在拉伸后的对应元素所占据的控件区域。16.根据权利要求14或15所述的终端设备,其特征在于,所述第一界面上包括第二控件,所述第二控件的布局类型是列表布局,所述第二控件中包括以动态加载方式呈现的多个元素;所述处理单元根据所述控件的布局类型和元素的类型,采用对应自适应算法在所述第二尺寸的画布上布局并绘制所述第一界面的控件和元素,具体包括:所述处理单元根据宽高拉伸系数(w
s
,h
s
)对所述第二控件对应区域的宽度和高度进行对应倍数的拉伸;所述处理单元根据所述宽高拉伸系数(w
s
,h
s
)调整所述第二控件中元素的行数和/或列数;所述处理单元根据调整后的行数和/或列数在拉伸后的所述第二控件对应区域中显示所述第二控件中的元素。17.根据权利要求14-16中任一项所述的终端设备,其特征在于,所述第一界面上包括第三控件,所述第三控件的布局类型是普通布局;所述处理单元根据所述控件的布局类型和元素的类型,采用对应自适应算法在所述第二尺寸的画布上布局并绘制所述第一界面的控件和元素,具体包括:所述处理单元根据宽高拉伸系数对所述第三控件的宽度和高度进行对应倍数的拉伸。18.根据权利要求14-17中任一项所述的终端设备,其特征在于,所述第一界面上包括预设图标;所述处理单元根据所述控件的布局类型和元素的类型,采用对应自适应算法在所述第二尺寸的画布上布局并绘制所述第一界面的控件和元素,具体包括:所述处理单元根据宽高拉伸系数的最小值min(w
s
,h
s
)等比拉伸所述预设图标。19.根据权利要求14-18中任一项所述的终端设备,其特征在于,所述第一界面上包括文本框,所述文本框中包括多行文本;所述处理单元根据所述控件的布局类型和元素的类型,采用对应自适应算法在所述第二尺寸的画布上布局并绘制所述第一界面的控件和元素,具体包括:所述处理单元根据宽高拉伸系数(w
s
,h
s
)对所述文本框的宽度和高度进行对应倍数的
拉伸;所述处理单元根据拉伸后的所述文本框计算所述多行文本的布局方式,所述布局方式用于表征所述多行文本的行数和列数;所述处理单元根据所述多行文本的布局方式调整所述文本框的高度。20.根据权利要求14-19中任一项所述的终端设备,其特征在于,所述宽高拉伸系数(w
s
,h
s
)用于表征所述第二尺寸与所述第一尺寸的尺寸关系。21.根据权利要求14-20中任一项所述的终端设备,其特征在于,所述第一界面上包括第四控件和第五控件,在所述终端设备在所述第一屏上显示所述第一界面时,所述第四控件以第一对齐方式与所述第五控件对齐;所述处理单元根据所述控件的布局类型和元素的类型,采用对应自适应算法在所述第二尺寸的画布上布局并绘制所述第一界面的控件和元素,具体包括:所述处理单元分别根据所述第四控件和所述第五控件的布局类型和控件中元素的类型,采用对应自适应算法进行控件拉伸和元素拉伸;所述处理单元调整所述第四控件和/或所述第五控件的位置,使得所述第四控件以所述第一对齐方式与所述第五控件对齐。22.根据权利要求21所述的终端设备,其特征在于,所述第一对齐方式包括:左对齐、右对齐或者居中对齐。23.根据权利要求13-22中任一项所述的终端设备,其特征在于,所述终端设备是折叠屏设备,所述第二尺寸是所述终端设备处于第二状态时的屏幕尺寸。24.根据权利要求23所述的终端设备,其特征在于,所述第一状态是折叠状态,所述第二状态是展开状态,所述第一尺寸小于所述第二尺寸。25.一种终端设备,其特征在于,所述终端设备包括:显示屏,用于显示第一界面;存储器,用于存储计算机程序指令;处理器,用于执行所述计算机程序指令,以支持所述终端设备实现如权利要求1-12中任一项所述的方法。26.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质上存储有计算机程序代码,所述计算机程序代码被处理电路执行时实现如权利要求1-12中任一项所述的方法。27.一种包含指令的计算机程序产品,其特征在于,当所述计算机程序产品在计算机上运行时,使得所述计算机执行如权利要求1-12中任一项所述的方法。28.一种芯片系统,其特征在于,所述芯片系统包括处理电路、存储介质,所述存储介质中存储有计算机程序指令;所述计算机程序指令被所述处理电路执行时实现如权利要求1-12中任一项所述的方法。

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


技术研发人员:缪雨桐 李春东 刘丰恺
受保护的技术使用者:华为技术有限公司
技术研发日:2022.03.25
技术公布日:2023/10/7
版权声明

本文仅代表作者观点,不代表航家之家立场。
本文系作者授权航家号发表,未经原创作者书面授权,任何单位或个人不得引用、复制、转载、摘编、链接或以其他任何方式复制发表。任何单位或个人在获得书面授权使用航空之家内容时,须注明作者及来源 “航空之家”。如非法使用航空之家的部分或全部内容的,航空之家将依法追究其法律责任。(航空之家官方QQ:2926969996)

航空之家 https://www.aerohome.com.cn/

飞机超市 https://mall.aerohome.com.cn/

航空资讯 https://news.aerohome.com.cn/

分享:

扫一扫在手机阅读、分享本文

相关推荐