CN117008752A - 一种显示方法、装置及存储介质 - Google Patents

一种显示方法、装置及存储介质 Download PDF

Info

Publication number
CN117008752A
CN117008752A CN202210461284.9A CN202210461284A CN117008752A CN 117008752 A CN117008752 A CN 117008752A CN 202210461284 A CN202210461284 A CN 202210461284A CN 117008752 A CN117008752 A CN 117008752A
Authority
CN
China
Prior art keywords
control
size
display mode
screen display
scaling
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202210461284.9A
Other languages
English (en)
Inventor
山昌
蔺振超
卢冬
许顺
陆建海
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Huawei Technologies Co Ltd
Original Assignee
Huawei Technologies Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Huawei Technologies Co Ltd filed Critical Huawei Technologies Co Ltd
Priority to CN202210461284.9A priority Critical patent/CN117008752A/zh
Priority to PCT/CN2023/089154 priority patent/WO2023207694A1/zh
Publication of CN117008752A publication Critical patent/CN117008752A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/14Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/147Digital output to display device ; Cooperation and interconnection of the display device with other functional units using display panels
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04MTELEPHONIC COMMUNICATION
    • H04M1/00Substation equipment, e.g. for use by subscribers
    • H04M1/02Constructional features of telephone sets
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04MTELEPHONIC COMMUNICATION
    • H04M1/00Substation equipment, e.g. for use by subscribers
    • H04M1/02Constructional features of telephone sets
    • H04M1/0202Portable telephone sets, e.g. cordless phones, mobile phones or bar type handsets
    • H04M1/026Details of the structure or mounting of specific components
    • H04M1/0266Details of the structure or mounting of specific components for a display module assembly
    • H04M1/0268Details of the structure or mounting of specific components for a display module assembly including a flexible display panel
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048Indexing scheme relating to G06F3/048
    • G06F2203/04806Zoom, i.e. interaction techniques or interactors for controlling the zooming operation

Abstract

一种显示方法、装置及存储介质。该方法包括:终端检测第一触发事件,根据第一触发事件确定第一应用程序处于大屏显示模式;获取第一用户界面中控件内部的元素;确定所述元素的缩放尺寸,根据所述元素的缩放尺寸以及所述大屏显示模式下的屏幕尺寸,确定所述控件内部的元素布局;根据所述元素的缩放尺寸以及所述控件内部的元素的布局,绘制第二用户界面,并显示所述第二用户界面。

Description

一种显示方法、装置及存储介质
技术领域
本申请涉及通信技术领域,尤其涉及一种显示方法、装置及存储介质。
背景技术
随着显示技术的发展,大屏终端应运而生,比如各手机生产厂商相继推出了折叠屏手机。一些折叠屏手机配置有可折叠的柔性屏,柔性屏通过铰链等方式可以被折叠为小屏或者展开为大屏,给使用者带来了既是手机又是平板电脑的全新体验。
但是,目前对于这种大屏终端,应用程序的用户界面还做不到对终端大屏的很好适配,影响折叠屏手机用户的使用体验。
发明内容
本申请实施例提供一种显示方法、装置及存储介质,用以实现应用程序用户界面的显示与大屏显示相适配。
第一方面,提供一种显示方法,包括:终端检测第一触发事件,根据所述第一触发事件确定第一应用程序处于大屏显示模式;获取第一用户界面中控件内部的元素;确定所述元素的缩放尺寸,根据所述元素的缩放尺寸以及所述大屏显示模式下所述控件的尺寸,确定所述控件内部的元素布局;根据所述元素的缩放尺寸、所述控件内部的元素的布局,绘制第二用户界面,并显示所述第二用户界面。
可选的,所述第一用户界面为所述第一应用程序在所述大屏显示模式下的原生用户界面。
上述实现方式中,终端在根据第一触发事件确定第一应用程序处于大屏显示模式的情况下,可以对控件内的元素进行缩放处理,并对缩放后的元素进行重新布局,显示调整后的用户界面(上述第二用户界面),从而使得第二用户界面能够与大屏显示模式向匹配。
在一种可能的实现方式中,所述大屏显示模式下所述控件的尺寸,包括所述大屏显示模式下所述控件的宽度。所述大屏显示模式下所述控件的宽度,与所述大屏显示模式下的屏幕宽度关联,比如在第一应用程序全屏显示的场景下;或者,所述大屏显示模式下所述控件的宽度,与所述大屏显示模式下所述第一应用程序的窗口宽度关联,比如第一应用程序所在窗口为多窗口模式中的一个窗口的场景下;或者,所述控件作为子控件嵌套于第一控件,所述大屏显示模式下所述控件的宽度与所述第一控件在所述大屏显示模式下确定出的所述子控件的缩放宽度关联。
在一种可能的实现方式中,若所述第一用户界面中包括第一弹窗,则所述方法还包括:终端获取所述第一弹窗中控件内部的元素,确定所述元素的缩放尺寸,根据所述元素的缩放尺寸确定所述第一弹窗中控件的缩放尺寸,根据所述第一弹窗中控件的缩放尺寸确定所述第一弹窗的缩放尺寸;基于所述第一弹窗的缩放尺寸,确定所述第一弹窗被缩放后的位置;根据所述第一弹窗的尺寸以及所述第一弹窗被缩放后的位置,绘制第二弹窗,所述第二弹窗包括在所述第二用户界面中,所述第二弹窗中包括基于所述第一弹窗中控件内部的元素的缩放尺寸缩放后的元素。
上述实现方式中,针对用户界面中存在弹窗的情况,也可以在大屏显示模式下对该弹窗的大小和位置进行调整,以适配大屏显示。
在一种可能的实现方式中,所述确定所述元素的缩放尺寸,包括:获取所述元素的类型;根据所述元素的类型,获取与所述元素的类型对应的缩放策略;根据所述控件在所述大屏显示模式下的尺寸以及所述缩放策略,确定所述元素的缩放尺寸。
上述实现方式中,根据元素所属的类型确定对应的缩放策略,可以使得基于不同类型元素的显示特点,对不同类型的元素进行差异化缩放处理,使得第二用户界面能够适配大屏显示。
在一种可能的实现方式中,所述元素的类型为文字类型和图片类型中的一种;若所述元素类型为图片类型,则所述图片类型为多个子类型中的一种,所述多个子类型分别与图片的宽高比关联。
上述实现方式中,对于图片类型的元素可以进一步根据图片的宽高比划分多个子类型,针对不同子类型设置不同的缩放策略,可以根据不同子类型图片的显示特点,对不同子类型的图片进行差异化错放处理,从而可以提高用户观看体验。
在一种可能的实现方式中,所述元素缩放前后的宽度缩放比,与所述元素缩放前后的高度缩放比相等。通过上述实现方式可以实现对元素的等比例缩放效果,从而可以避免元素变形。
在一种可能的实现方式中,若所述控件为视图翻页控件,则所述确定所述元素的缩放尺寸,包括:获取所述视图翻页控件内部的元素的数量;根据所述视图翻页控件内部的元素的数量、所述大屏显示模式下所述视图翻页控件的尺寸,以及所述视图翻页控件在所述大屏显示模式下的显示效果,确定在所述第二用户界面中所述视图翻页控件内的元素数量以及每个元素的缩放尺寸。
基于上述实现方式,对于用于翻页显示的控件,可以根据大屏模式下需要的翻页显示效果,动态确定在第二用户界面中该控件内显示的元素的数量以及元素的缩放尺寸,从而可以使得该控件的显示与大屏模式相匹配,提高用户观看体验。
在一种可能的实现方式中,所述确定所述元素的缩放尺寸之前,所述方法还包括:若所述元素的尺寸小于或等于设定阈值,和/或所述元素不是指定类型的元素,则放弃对所述元素进行缩放。
通过上述实现方式,可以仅对满足设定要求的元素进行缩放,对于不满足该要求的元素可以放弃对其进行缩放处理,从而可以使得第二用户界面与大屏模式相匹配。例如,若元素的尺寸较大(比如元素宽度大于宽度阈值和/或元素高度大于高度阈值),则需要对该元素进行缩放;若该元素的尺寸较小(比如元素宽度小于或等于宽度阈值和/或元素高度小于或等于高度阈值),则无需对该元素进行缩放,从而可以使得该控件内部的元素与大屏模式相匹配,提高用户观看体验。
在一种可能的实现方式中,所述确定所述元素的缩放尺寸,包括:若所述元素的尺寸小于或等于设定阈值,则确定放大所述元素,并根据所述设定阈值确定所述元素的缩放尺寸,所述元素按照所述缩放尺寸被放大后的尺寸不小于所述设定阈值。
通过上述实现方式,当元素的尺寸较小(比如元素宽度小于宽度阈值和/或元素高度小于高度阈值)时,可以将该元素进行放大,将该元素被放大到与该阈值相当;当元素的尺寸较大(比如元素宽度大于宽度阈值和/或元素高度大于高度阈值)时,可以将该元素进行缩小,从而可以使得该控件内部的元素与大屏模式相匹配,提高用户观看体验。
在一种可能的实现方式中,所述确定所述元素的缩放尺寸之后,所述方法还包括:若所述元素的缩放尺寸小于或等于设定阈值,则放弃对所述元素进行缩放;或者,若所述元素的缩放尺寸小于或等于设定阈值,则根据所述设定阈值确定所述元素的缩放尺寸,所述元素按照所述缩放尺寸缩放后的尺寸不小于所述设定阈值。
通过上述实现方式,当确定出元素的缩放尺寸后,若该缩放尺寸较小(比如缩小后的宽度小于或等于宽度阈值,和/或缩小后的高度小于或等于高度阈值),则可以放弃对该元素进行缩放,也可以根据设定阈值重新确定该元素的缩放尺寸,使得该元素被缩放处理后,其尺寸可以与设定阈值对应的尺寸相当,从而可以使得该控件内部的元素与大屏模式相匹配,提高用户观看体验。
在一种可能的实现方式中,所述元素的缩放尺寸小于所述元素在所述第一用户界面中的尺寸;所述第二用户界面中的元素的数量大于所述第一用户界面中的元素的数量。由于通过缩放处理减小了元素的尺寸,可以使得第二用户界面相较于第一用户界面可以显示更多的元素,进而使得第二用户界面与大屏显示相适配。
在一种可能的实现方式中,所述确定第一应用程序处于大屏显示模式,包括:获取所述第一应用程序的窗口宽度;若所述窗口宽度大于或等于设定阈值,则确定所述第一应用程序处于大屏显示模式。
在一种可能的实现方式中,所述第一触发事件,包括:所述终端从折叠态切换到展开态;或者,所述终端从竖屏状态切换到横屏状态;或者,所述终端的屏幕全部被点亮;或者,所述终端的屏幕被投屏到大屏幕;或者,所述第一应用程序处于所述大屏显示模式时,所述第一应用程序的数据发生更新;或者,所述第一应用程序处于所述大屏显示模式时,检测到用户的屏幕操作事件;或者,检测到在所述终端处于大屏状态下取消多窗口显示模式,所述第一应用程序被全屏显示;其中,在所述多窗口显示模式下,所述终端的屏幕上显示至少两个窗口,所述至少两个窗口中的一个窗口用于显示所述第一应用程序。
在一种可能的实现方式中,所述根据所述第一触发事件确定第一应用程序处于大屏显示模式之前,所述方法还包括:确定所述第一应用程序是否被允许在大屏显示模式下进行用户界面调整;所述根据所述第一触发事件确定第一应用程序处于大屏显示模式,包括:若所述第一应用程序被允许在大屏显示模式下进行用户界面调整,则确定所述第一应用程序是否处于大屏显示模式。
通过以上实现方式,可以针对只被允许在大屏显示模式下进行用户界面调整的应用程序,当需要在大屏显示模式下显示该应用程序的用户界面时,才针对大屏显示模式对该应用程序的用户界面进行调整,从而可以提高系统灵活性,可以满足用户的不同需求。
在一种可能的实现方式中,所述控件包括线性布局控件;所述线性布局控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放尺寸以及所述大屏显示模式下所述线性布局控件的尺寸,确定所述内部元素的线性布局。
在一种可能的实现方式中,所述控件包括循环视图控件;所述循环视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放宽度以及所述大屏显示模式下所述循环视图控件的宽度,确定所述内部元素的列数以及列间距。
在一种可能的实现方式中,所述控件包括列表视图控件;列表视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放尺寸以及所述大屏显示模式下所述列表视图控件的宽度,确定所述内部元素的列数以及列间距。
在一种可能的实现方式中,所述控件包括网格视图控件;所述网格视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放尺寸以及所述大屏显示模式下所述网格视图控件的宽度,确定所述内部元素的列数以及列间距。
在一种可能的实现方式中,所述控件包括视图翻页控件;所述视图翻页控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的数量、所述内部元素的缩放尺寸、所述大屏显示模式下所述视图翻页控件的尺寸以及显示效果,确定所述内部元素的布局。
在一种可能的实现方式中,所述控件包括图像视图控件;所述图像视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据缩放后的所述内部元素调整控件高度,根据缩放后的所述内部元素确定所述图像视图控件内部元素的布局。
第二方面,提供一种终端,包括:检测模块,用于检测第一触发事件,根据所述第一触发事件确定第一应用程序处于大屏显示模式;处理模块,用于获取第一用户界面中控件内部的元素,确定所述元素的缩放尺寸,根据所述元素的缩放尺寸以及所述大屏显示模式下所述控件的尺寸,确定所述控件内部的元素布局;以及,根据所述元素的缩放尺寸、所述控件内部的元素的布局,绘制第二用户界面;显示模块,用于显示所述第二用户界面。
在一种可能的实现方式中,所述大屏显示模式下所述控件的尺寸,包括所述大屏显示模式下所述控件的宽度;所述大屏显示模式下所述控件的宽度,与所述大屏显示模式下的屏幕宽度关联;或者,所述大屏显示模式下所述控件的宽度,与所述大屏显示模式下所述第一应用程序的窗口宽度关联;或者,所述控件作为子控件嵌套于第一控件,所述大屏显示模式下所述控件的宽度与所述第一控件在所述大屏显示模式下确定出的所述子控件的缩放宽度关联。
在一种可能的实现方式中,若所述第一用户界面中包括第一弹窗,则所述处理模块还用于:获取所述第一弹窗中控件内部的元素,确定所述元素的缩放尺寸,根据所述元素的缩放尺寸确定所述第一弹窗中控件的缩放尺寸,根据所述第一弹窗中控件的缩放尺寸确定所述第一弹窗的缩放尺寸;基于所述第一弹窗的缩放尺寸,确定所述第一弹窗被缩放后的位置;根据所述第一弹窗的尺寸以及所述第一弹窗被缩放后的位置,绘制第二弹窗,所述第二弹窗包括在所述第二用户界面中,所述第二弹窗中包括基于所述第一弹窗中控件内部的元素的缩放尺寸缩放后的元素。
在一种可能的实现方式中,所述处理模块,具体用于:获取所述元素的类型;根据所述元素的类型,获取与所述元素的类型对应的缩放策略;根据所述控件在所述大屏显示模式下的尺寸以及所述缩放策略,确定所述元素的缩放尺寸。
在一种可能的实现方式中,所述元素的类型为文字类型和图片类型中的一种;若所述元素类型为图片类型,则所述图片类型为多个子类型中的一种,所述多个子类型分别与图片的宽高比关联。
在一种可能的实现方式中,所述元素缩放前后的宽度缩放比,与所述元素缩放前后的高度缩放比相等。
在一种可能的实现方式中,若所述控件为视图翻页控件,则所述处理模块,具体用于:获取所述视图翻页控件内部的元素的数量;根据所述视图翻页控件内部的元素的数量、所述大屏显示模式下所述视图翻页控件的尺寸,以及所述视图翻页控件在所述大屏显示模式下的显示效果,确定在所述第二用户界面中所述视图翻页控件内的元素数量以及每个元素的缩放尺寸。
在一种可能的实现方式中,所述处理模块,还用于:若所述元素的尺寸小于或等于设定阈值,和/或所述元素不是指定类型的元素,则放弃对所述元素进行缩放。
在一种可能的实现方式中,所述处理模块,具体用于:若所述元素的尺寸小于或等于设定阈值,则确定放大所述元素,并根据所述设定阈值确定所述元素的缩放尺寸,所述元素按照所述缩放尺寸被放大后的尺寸不小于所述设定阈值。
在一种可能的实现方式中,所述处理模块,还用于:若所述元素的缩放尺寸小于或等于设定阈值,则放弃对所述元素进行缩放;或者,若所述元素的缩放尺寸小于或等于设定阈值,则根据所述设定阈值确定所述元素的缩放尺寸,所述元素按照所述缩放尺寸缩放后的尺寸不小于所述设定阈值。
在一种可能的实现方式中,所述元素的缩放尺寸小于所述元素在所述第一用户界面中的尺寸;所述第二用户界面中的元素的数量大于所述第一用户界面中的元素的数量。
在一种可能的实现方式中,所述检测模块,具体用于:获取所述第一应用程序的窗口宽度;若所述窗口宽度大于或等于设定阈值,则确定所述第一应用程序处于大屏显示模式。
在一种可能的实现方式中,所述第一触发事件,包括:所述终端从折叠态切换到展开态;或者,所述终端从竖屏状态切换到横屏状态;或者,所述终端的屏幕全部被点亮;或者,所述终端的屏幕被投屏到大屏幕;或者,所述第一应用程序处于所述大屏显示模式时,所述第一应用程序的数据发生更新;或者,所述第一应用程序处于所述大屏显示模式时,检测到用户的屏幕操作事件;或者,检测到在所述终端处于大屏状态下取消多窗口显示模式,所述第一应用程序被全屏显示;其中,在所述多窗口显示模式下,所述终端的屏幕上显示至少两个窗口,所述至少两个窗口中的一个窗口用于显示所述第一应用程序。
在一种可能的实现方式中,所述处理模块,还用于:根据所述第一触发事件确定第一应用程序处于大屏显示模式之前,确定所述第一应用程序是否被允许在大屏显示模式下进行用户界面调整;若所述第一应用程序被允许在大屏显示模式下进行用户界面调整,则确定所述第一应用程序是否处于大屏显示模式。
在一种可能的实现方式中,所述控件包括线性布局控件;所述线性布局控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放尺寸以及所述大屏显示模式下所述线性布局控件的尺寸,确定所述内部元素的线性布局。
在一种可能的实现方式中,所述控件包括循环视图控件;所述循环视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放宽度以及所述大屏显示模式下所述循环视图控件的宽度,确定所述内部元素的列数以及列间距。
在一种可能的实现方式中,所述控件包括列表视图控件;列表视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放尺寸以及所述大屏显示模式下所述列表视图控件的宽度,确定所述内部元素的列数以及列间距。
在一种可能的实现方式中,所述控件包括网格视图控件;所述网格视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放尺寸以及所述大屏显示模式下所述网格视图控件的宽度,确定所述内部元素的列数以及列间距。
在一种可能的实现方式中,所述控件包括视图翻页控件;所述视图翻页控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的数量、所述内部元素的缩放尺寸、所述大屏显示模式下所述视图翻页控件的尺寸以及显示效果,确定所述内部元素的布局。
在一种可能的实现方式中,所述控件包括图像视图控件;所述图像视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据缩放后的所述内部元素调整控件高度,根据缩放后的所述内部元素确定所述图像视图控件内部元素的布局。
第三方面,提供一种通信装置,包括:一个或多个处理器;所述一个或多个存储器存储有一个或多个计算机程序,所述一个或多个计算机程序包括指令,当所述指令被所述一个或多个处理器执行时,使得所述通信装置执行如第一方面中任意一项所述的方法。
第四方面,提供一种计算机可读存储介质,包括计算机程序,当所述计算机程序在电子设备上运行时,使得所述电子设备执行如第一方面中任意一项所述的方法。
第五方面,提供一种计算机程序产品,当其在电子设备上运行时,使得所述电子设备执行如第一方面中任意一项所述的方法。
第六方面,提供一种芯片系统,包括:存储器,用于存储计算机程序;处理器;当处理器从存储器中调用并运行计算机程序后,使得安装有该芯片系统的电子设备执行如第一方面中任意一项所述的方法。
以上第二方面至第六方面的有益效果请参见第一方面的有益效果,不重复赘述。
附图说明
图1a、图1b、图1c分别为折叠屏手机的示意图;
图2为平板电脑的示意图;
图3为基于线性布局(LinearLayout)控件实现的用户界面布局的示意图;
图4为进入信箱模式后的大屏显示效果示意图;
图5为采用约束布局的大屏显示效果示意图;
图6为本申请实施例中的终端硬件结构示意图;
图7为本申请实施例中的终端的软件系统架构示意图;
图8a为本申请实施例提供的显示方法的流程示意图;
图8b为本申请实施例提供的在大屏显示模式下对弹窗的位置和尺寸进行调整的流程示意图;
图9为本申请实施例中基于系统原生的LinearLayout控件和基于本申请实施例提供的LinearLayout控件进行大屏显示自适应调节的效果对比示意图;
图10为本申请实施例中基于系统原生的RecyclerView控件和基于本申请实施例提供的RecyclerView控件进行大屏显示自适应调节的效果对比示意图;
图11为本申请实施例中基于系统原生的ViewPager控件和基于本申请实施例提供的ViewPager控件进行大屏显示自适应调节的效果对比示意图;
图12为本申请实施例中基于系统原生ListView控件和基于本申请实施例提供的ListView控件进行大屏显示自适应调节的效果对比示意图;
图13为本申请实施例中基于系统原生的GridView控件和基于本申请实施例提供的GridView控件进行大屏显示自适应调节的效果对比示意图;
图14本申请实施例中基于系统原生ImageView控件和基于本申请实施例提供的ImageView控件进行大屏显示自适应调节的效果对比示意图;
图15为本申请实施例提供的控件的功能结构示意图;
图16为本申请实施例提供的LineaLayout控件的一种逻辑处理流程;
图17为本申请实施例提供的RecyclerView控件的一种逻辑处理流程;
图18为本申请实施例提供的GridView控件的一种逻辑处理流程;
图19为本申请实施例提供的ListView控件的一种逻辑处理流程;
图20为本申请实施例提供的ViewPager控件的一种逻辑处理流程;
图21为本申请实施例提供的ImageView控件的一种逻辑处理流程;
图22、图23为在小屏显示切换到大屏显示时的用户界面显示效果对比示意图之一;
图24、图25为在小屏显示切换到大屏显示时的用户界面显示效果对比示意图之二;
图26为本申请实施例提供的一种终端的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述。以下实施例中所使用的术语只是为了描述特定实施例的目的,而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样,单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括例如“一个或多个”这种表达形式,除非其上下文中明确地有相反指示。还应当理解,在本申请实施例中,“一个或多个”是指一个、两个或两个以上;“和/或”,描述关联对象的关联关系,表示可以存在三种关系;例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B的情况,其中A、B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。
在本说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此,在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例,而是意味着“一个或多个但不是所有的实施例”,除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”,除非是以其他方式另外特别强调。
本申请实施例涉及的多个,是指大于或等于两个。需要说明的是,在本申请实施例的描述中,“第一”、“第二”等词汇,仅用于区分描述的目的,而不能理解为指示或暗示相对重要性,也不能理解为指示或暗示顺序。
下面首先对本申请实施例中涉及的技术术语进行介绍。
(1)大屏终端
本申请实施例中的大屏终端可以包括配置有大屏幕的终端,比如包括折叠屏终端(比如折叠屏手机)、平板电脑、折叠屏计算机等电子设备。
图1a示例性示出了一种折叠屏手机的示意图。折叠屏手机的屏幕可在0度到180度区间内任意角度弯折(图中的虚线可以为折叠结构),当屏幕被折叠时(称为折叠态),其屏幕尺寸与传统手机的屏幕尺寸相当,当屏幕被展开时(称为展开态),其屏幕尺寸相比于传统手机的屏幕尺寸更大,在一些可能的情况下,屏幕显示区域的宽度可达2000像素(px)或2000px以上,既可以给使用者以手机的使用体验,还可以给使用者以平板电脑的使用体验。折叠屏手机一般有外折屏和内折屏两种折叠方式。如图1b所示,外折的折叠屏,在折叠后,柔性屏会相背对呈现;如图1c所示,内折的折叠屏,在折叠后,柔性屏会相面对呈现,本申请对折叠形式不做限定,例如三折屏等其他折叠形态。
本申请的一些实施例中,对于单一应用程序采用全屏显示方式的场景,可选地将该应用程序在折叠屏手机展开态下的显示模式称为大屏显示模式,将该应用程序在折叠屏手机折叠态下的显示模式称为小屏显示模式。
图2示例性示出了一种平板电脑的示意图。平板电脑也叫便携式电脑(TabletPersonal Computer,Tablet PC),是一种小型、方便携带的个人电脑,以触摸屏作为基本的输入设备。平板电脑的屏幕尺寸较大,并可以在横屏状态和竖屏状态间切换。当在横屏状态下,屏幕显示区域的宽度可达2000px以上。
本申请实施例中,终端的显示状态包括大屏状态和小屏状态。在一些示例中,对于折叠屏手机来说,折叠态称为小屏状态,展开态称为大屏状态;再例如,对于平板电脑来说,竖屏状态称为小屏状态,横屏状态称为大屏状态。
本申请实施例的一些场景中,对于单一应用程序采用全屏显示方式的场景,将该应用程序在终端大屏状态时的显示模式称为大屏显示模式,将该应用程序在终端小屏状态时的显示模式称为小屏显示模式。比如,应用程序在平板电脑处于横屏状态时的显示模式称为大屏显示模式,将该应用程序在平板电脑处于竖屏状态时的显示模式称为小屏显示模式。再比如,应用程序在折叠屏手机处于展开态时的显示模式称为大屏显示模式,将该应用程序在折叠屏手机处于折叠态时的显示模式称为小屏显示模式。在另一些场景下,折叠屏终端的屏幕可以被部分点亮或全部点亮,比如折叠屏终端包括一个可以折叠的屏幕,当这个屏幕通过折叠结构使得这个屏幕可以相对折叠在一起(屏幕的两个折叠部分正面相对)或相背折叠在一起(屏幕的两个折叠部分背面相对),也可以展开呈一个大屏幕。当屏幕呈展开状态时,屏幕可以全部被点亮,也可以仅点亮屏幕的一部分,当屏幕全部被点亮时,如果应用程序的窗口尺寸较大(比如宽度大于设定阈值),或者应用程序采用全屏显示,则该应用程序的显示模式称为大屏显示模式。
在一些示例中,如果应用程序的窗口尺寸较大(比如宽度大于设定阈值),或者应用程序采用全屏显示,则该应用程序的显示模式称为大屏显示模式。
在一些实例中,如果应用程序的窗口尺寸较小(比如宽度小于设定阈值),则该应用程序的显示模式称为小屏显示模式。
需要说明的是,在有些场景下,终端当前处于大屏状态(比如折叠屏手机的展开态,或者平板电脑为横屏状态),并且采用了多窗口显示,比如分屏模式或画中画模式等,则对于其中一个窗口来说(比如分屏模式下的一个分屏窗口),若该窗口的尺寸满足设定要求(比如宽度大于设定阈值),则该应用程序的显示模式也被认为是大屏显示模式。
(2)控件
在计算机编程当中,控件(或称部件,组件,widget或control)是一种图形用户界面元素,其显示的信息排列可以由用户改变,例如视窗或文本框。控件是一种基本的可视构件块,包含在应用程序中,控制着该应用程序处理的所有数据以及关于这些数据的交互操作。控件的不同组合通常打包在部件工具箱中,程序员可以构建图形用户界面(graphicuser interfaces,GUIs)。大多操作系统包括一套用于程序设计的控件,程序员可以将它们加入应用程序,并指定它们的行为。控件通常定义为面向对象编程(object orientedprogrammin,OOP)的类。因此许多控件产生于类继承。
以安卓系统为例,以下为系统提供的一些典型的控件的示例:
线性布局(LinearLayout)控件:用以实现流式布局,可以控制放置在控件中的元素水平或垂直排列。
列表视图(ListView)控件:用来以列表方式显示元素(或称对象,可以包含文字和图片)。通过此控件,可以将元素组成带有或不带有列标头的列,并显示伴随的图标和文字。可以使用ListView控件将称作ListItem元素(可以包含文字和图片)的列表条目组织成下列四种不同的视图之一:1.大(标准)图标,2.小图标,3.列表,4.报表。另外,该控件还可以管理列表中元素的排序方法和选定元素的外观。
网格视图(GridView)控件:用来以网格方式显示元素(或称对象,可以包含文字和图片)。
循环视图(RecyclerView)控件:可以以列表方式、网格方式等显示元素(或称对象,可以包含文字和图片)。相较于ListView控件,RecyclerView控件具有更强大的元素复用机制,提供更多种布局管理器(LayoutMananger)用来处理多种布局,可以自定义布局管理器来决定条目的排布规则,比如可以提供:1.与ListView控件类似的线性布局,实现横向或纵向列表方向的元素布局;2.网格布局,可以指定元素数量;3.瀑布流布局,可以指定列表方向,也可以指定同方向的元素数量。
视图翻页(ViewPager)控件:提供多页面切换的效果。该控件是容器类,可以在该控件中添加其它控件。ViewPager控件需要PagerAdapter适配器类为它提供数据,可以通过创建适配器(adapter)给该控件填充多个视图(view),当用户进行左右滑动操作时,可以切换不同的视图(view)。
图像视图(ImageView)控件:用来显示图像(图片)。
在一个用户界面中,根据布局的需要,可以使用一种或多种控件,也可以在一个控件内部嵌套使用控件。下面以LinearLayout控件为例,结合图3进行说明。如图3所示,首先基于LinearLayout控件设置一个水平布局的视图30,该视图30为父视图;在视图30上基于LinearLayout控件设置两个高度等于父视图高度的子视图31和子视图32,两个子视图的布局方式都设置为垂直排列;在子视图32中基于LinearLayout控件设置子视图33和子视图34,这两个子视图沿垂直方向排列于父视图之上,并且宽度与父视图相等。
需要说明的是,以上仅为一种控件嵌套使用的示例,在其它示例中,实现父视图的控件与实现子视图的控件,也可以是不同类型的控件,本申请实施例对此不作限制。
(3)元素、子元素
控件用于对用户界面中的元素(或称对象,或数据等)进行布局。本申请实施例中,如果将控件看做容器,那么放置于其中的对象(比如文字或图片等),则称为元素。由于控件可以嵌套使用,则子控件(或子视图)中的元素相对于父控件(或父视图)来说,就称为子元素。仍以图3为例,子视图34中可以进一步基于ImageView控件设置一个图片35,这样该图片相对于该ImageView控件来说,是该ImageView控件的内部元素,而相对于子视图34来说,则为该子视图内部的子元素。
本申请实施例中,定义了几种元素类型,以便针对不同类型的元素采用对应的处理策略进行缩放处理。可选的,本申请实施例中,元素类型可以包括文字和图片。可选的,对于图片类型,可以基于图片的尺寸特征(比如宽高比),对图片进行子类型划分。
示例性的,对于图片,可以定义以下几种子类型:
-沉浸式大图:满足的条件为:图片宽度=屏幕宽度;即,若图片的宽度等于屏幕宽度,则该图片为“沉浸式大图”;
-宽图片:满足的条件为:高≤宽×α,α>1,比如,α=1.2;即,若图片的宽度大于或等于该图片高度的α倍,则该图片是“宽图片”;
-长图片:满足的条件:高>宽×β,β>1,比如,β=1.2;即,若图片的高度大于或等于该图片宽度的β倍,则该图片是“长图片”;
-小图标:满足的条件:宽和高均小于50dp;即,若图片的宽度和高度均小于50dp,则该图片是“小图标”。
需要说明的是,以上仅为元素类型分类的示例,本申请实施例对元素类型的分类方式不做限制。
需要说明的是,本申请实施例中,在一些场景下,对元素进行的“缩放处理”操作具体是缩小元素的尺寸,在另一些场景下,对元素进行的“缩放处理”操作具体是放大元素的尺寸。
针对单应用程序全屏显示,为了能够自适应屏幕大小,在一些实施例中看,可以采用以下几种方式进行界面自适应调整:信箱模式、自适应布局(包括约束布局(ConstraintLayout)。
信箱模式:如果某个应用程序请求了固定的屏幕方向或者屏幕尺寸不可调整,并且其最大宽高比或最小宽高比与设备屏幕的宽高比不兼容,则该应用程序会进入信箱模式,即该应用程序的用户界面在屏幕上居中显示,应用程序四周未使用的屏幕区域会用磨砂黑边框填充,如图4所示。应用程序在大屏上保持小屏的屏幕尺寸,导致屏幕两边大部分区域被浪费,并没有增高应用程序在大屏上的可见内容。
约束布局(ConstraintLayout):根据布局中视图之间的空间关系,指定每个视图的位置和大小。该方式中,为一个视图添加至少一个水平约束条件和一个垂直约束条件,每个约束条件均表示该视图与其他视图、父布局或隐形引导线之间连接或对齐方式。通过这种方式,当终端屏幕尺寸改变时,所有视图都可以一起移动和拉伸。例如图5中,图5中的图片(1)示出了折叠屏手机在折叠态下显示的一个用户界面示意图,图5中的图片(2)示出了该折叠屏手机在展开态下显示的该用户界面示意图。可以看出,用户界面中各视图保持页面内视图之间的水平和垂直位置关系,在大屏上保持小屏的布局关系,但并没有提供动态调整大小的能力,所有视图大小关系都是事先预设好的,大屏上的显示信息内容与小屏上的显示内容一致,在大屏上并没有得到更多的内容。
上述几种界面自适应调整方案,在大屏显示模式下,相对于小屏显示模式,并没有增加显示内容。在有些情况下,在大屏上显示的界面无法适配大屏尺寸,存在有大量留白现象。
为了实现应用程序用户界面的显示与大屏相适配,本申请实施例提供了一种显示方法以及能够实现该方法的相关装置。本申请实施例中,在应用程序处于大屏显示模式下,可以对该应用程序的用户界面中的元素进行缩放,并根据元素缩放后的尺寸重新进行界面布局,以使得用户界面的显示与大屏相适配,提高用户的使用感受。
本申请实施例提供的显示方法,可以应用于电子设备中,例如具有大屏幕的终端,比如可以应用于折叠屏终端(比如包括折叠屏手机等)、平板电脑等大屏设备上。
图6示例性示出了本申请实施例提供的一种终端的内部硬件结构示意图。图6以移动设备100(比如折叠屏手机或平板电脑)为例描述。如图6所示,移动设备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。
可以理解,本申请实施例示意的结构并不构成对移动设备100的具体限定。在本申请另一些实施例中,移动设备100可以包括比图示更多或更少的部件,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。图示的部件可以以硬件、软件或软件和硬件的组合实现。
充电管理模块140用于从充电器接收充电输入。电源管理模块141用于连接电池142,充电管理模块140与处理器110。移动设备100的无线通信功能可以通过天线1,天线2,移动通信模块150,无线通信模块160,调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。移动设备100中的每个天线可以用于覆盖单个或多个通信频带。不同的天线还可以复用,以提高天线的利用率。例如,可以将天线1复用为无线局域网的分集天线。在另外一些实施例中,天线可以和调谐开关结合使用。
移动通信模块150可以提供应用在移动设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器,开关,功率放大器,低噪声放大器(low noise amplifier,LNA)等。移动通信模块150可以由天线1接收电磁波,并对接收的电磁波进行滤波,放大等处理,传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大,经天线1转为电磁波辐射出去。在一些实施例中,移动通信模块150的至少部分功能模块可以被设置于处理器110中。
调制解调处理器可以包括调制器和解调器。其中,调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后,被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A,受话器170B等)输出声音信号,或通过显示屏194显示图像或视频。在一些实施例中,调制解调处理器可以是独立的器件。在另一些实施例中,调制解调处理器可以独立于处理器110,与移动通信模块150或其他功能模块设置在同一个器件中。
无线通信模块160可以提供应用在移动设备100上的包括无线局域网(wirelesslocal area networks,WLAN)(如Wi-Fi网络),蓝牙(bluetooth,BT),全球导航卫星系统(global navigation satellite system,GNSS),调频(frequency modulation,FM),近距离无线通信技术(near field communication,NFC),红外技术(infrared,IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波,将电磁波信号调频以及滤波处理,将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号,对其进行调频,放大,经天线2转为电磁波辐射出去。
在一些实施例中,移动设备100的天线1和移动通信模块150耦合,天线2和无线通信模块160耦合,使得移动设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(global system for mobile communications,GSM),通用分组无线服务(general packet radio service,GPRS),码分多址接入(codedivision multiple access,CDMA),宽带码分多址(wideband code division multipleaccess,WCDMA),时分码分多址(time-division code division multiple access,TD-SCDMA),长期演进(long term evolution,LTE),BT,GNSS,WLAN,NFC,FM,和/或IR技术等。所述GNSS可以包括全球卫星定位系统(global positioning system,GPS),全球导航卫星系统(global navigation satellite system,GLONASS),北斗卫星导航系统(beidounavigation satellite system,BDS),准天顶卫星系统(quasi-zenith satellitesystem,QZSS)和/或星基增强系统(satellite based augmentation systems,SBAS)。
移动设备100可以通过ISP、摄像头193、视频编解码器、GPU、显示屏194以及应用处理器等实现拍摄功能。
外部存储器接口120可以用于连接外部存储卡,例如Micro SD卡,实现扩展移动设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信,实现数据存储功能。例如将音乐,视频等文件保存在外部存储卡中。
移动设备100可以通过音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,以及应用处理器等实现音频功能。例如音乐播放,录音等。
本申请实施例中,在移动设备100中的应用程序处于大屏显示模式下,处理器110可以对该应用程序的用户界面中的元素进行缩放,并重新进行界面布局,以使得用户界面的显示与大屏相适配,提高用户的使用感受。
图7示例性示出了本申请实施例提供的一种终端的软件系统架构示意图。如图7所示,终端的软件结构可以是分层架构,例如可以将软件分成若干个层,每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中,软件系统分为四层,从上至下分别为应用程序层,应用程序框架层(framework,FWK),系统运行时和系统库,以及内核层。
应用程序层可以包括一系列应用程序包。如图7所示,应用程序层可以包括相机、设置、皮肤模块、用户界面(user interface,UI)、三方应用程序等。其中,三方应用程序可以包括微信、QQ、图库,日历,通话,地图,导航,WLAN,蓝牙,音乐,视频,短信息等。
本申请实施例中,应用程序的用户界面可以基于控件对元素的调整来实现。比如在折叠屏手机从折叠态切换到展开态时,或者在平板电脑从竖屏状态切换到横屏状态时,基于控件对该应用程序的用户界面中的元素进行调整(例如缩放),并重新进行界面布局,以使得用户界面的显示与大屏相适配,提高用户的使用感受。
应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface,API)和编程框架。应用程序框架层可以包括一些预先定义的函数。如图7所示,应用程序框架层可以包括窗口管理器,内容提供器,视图系统,电话管理器,资源管理器,通知管理器等。
Android runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。
核心库包含两部分:一部分是java语言需要调用的功能函数,另一部分是安卓的核心库。应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理,堆栈管理,线程管理,安全和异常的管理,以及垃圾回收等功能。
系统库可以包括多个功能模块。例如:表面管理器(surface manager),媒体库(media libraries),三维图形处理库(例如:OpenGL ES),2D图形引擎(例如:SGL)等。
内核层是硬件和软件之间的层。内核层至少包含显示驱动,摄像头驱动,音频驱动,传感器驱动。
硬件层可以包括各类传感器,例如本申请实施例中涉及的陀螺仪传感器、触摸传感器等。
图8a示例性示出了本申请实施例提供的一种显示方法的流程示意图。该流程可以由终端或者终端内部用于实现该显示方法的装置或模块实现。用于实现该显示方法的装置或模块,可以由软件方式实现。本流程中,应用程序的显示模式包括大屏显示模式和小屏显示模式。
本申请实施例中,对于第一应用程序来说,将该应用程序在处于大屏显示模式下的原生用户界面称为第一用户界面,换言之,本申请实施例中将在大屏显示模式下,没有采用本申请实施例提供的方法生成的用户界面称为第一用户界面,又或者说将在大屏显示模式下采用系统默认方式生成的用户界面称为第一用户界面。示例性的,例如图5中右侧显示的用户界面称为第一用户界面;再例如图22中右侧显示的用户界面为第一用户界面。本申请实施例中,将该应用程序在处于大屏显示模式下采用本申请实施例提供的方法显示的用户界面称为第二用户界面。
第一用户界面中包含的元素的尺寸称为第一尺寸,用户界面的布局(即用户界面中的元素的布局)称为第一布局。第二用户界面中包含的元素的尺寸称为第二尺寸,用户界面的布局称为第二布局。可以理解,第一尺寸是元素在大屏显示模式下的原生尺寸,第二尺寸是在大屏显示模式下元素经过本申请实施例提供的控件进行缩放处理后的尺寸。比如,对于第一用户界面中的N个(N为大于1的整数)图片,其尺寸为宽度×高度=a×b(单位为像素),该N个图片采用线性布局,一行中包括有2个图片;在第二用户界面中,该N个图片在第二用户界面中显示为宽度×高度=0.25a×0.25b(单位为像素),该N个图片采用线性布局,一行中包括有4个图片。
在一些示例中,以下流程中涉及的“元素”也可以被替换为“子元素”。
如图8a所示,该流程可以包括以下步骤:
S801:终端检测第一触发事件,根据第一触发事件确定第一应用程序处于大屏显示模式。
所述第一触发事件用于触发在大屏显示模式下显示所述第一应用程序。可以理解,在大屏显示模式下显示所述第一应用程序,是指第一应用程序的窗口尺寸满足设定要求,比如窗口宽度大于或等于设定阈值。该设定阈值可以根据终端处于大屏状态下(比如在折叠屏手机的屏幕展开态下,或者在平板电脑为横屏状态下)时的屏幕尺寸来设置,比如,如果终端处于大屏状态下时的屏幕宽度不会低于2000px,则可以将该设定阈值设置为2000px。第一应用程序处于大屏显示模式的一种示例为:在终端处于大屏状态下,第一应用程序全屏显示;第一应用程序处于大显示模式的另一种示例为:在终端处于大屏状态下并采用多窗口模式(比如分屏模式等其它类型的多窗口模式),第一应用程序所在的窗口的宽度大于设定阈值。
在一种实现方式中,所述第一触发事件可能是:终端从小屏状态切换到大屏状态。例如,如果该终端为折叠屏手机,则该第一触发事件为该终端的屏幕从折叠状到展开态。再例如,如果该终端为平板电脑,则该第一触发事件为从竖屏状态切换到横屏状态。
在另一种实现方式中,所述第一触发事件可能是:对终端进行投屏,将该终端的屏幕上显示的内容投射到大屏幕设备上进行显示。
在另一种实现方式中,所述第一触发事件可能是:终端的屏幕全部被点亮。在一些场景下,折叠屏终端的屏幕可以被部分点亮或全部点亮,比如折叠屏终端包括一个可以折叠的屏幕,当这个屏幕通过折叠结构使得这个屏幕可以相对折叠在一起(屏幕的两个折叠部分正面相对)或相背折叠在一起(屏幕的两个折叠部分背面相对),也可以展开呈一个大屏幕。当屏幕呈展开状态时,屏幕可以全部被点亮,也可以仅点亮屏幕的一部分。
在另一种实现方式中,所述第一触发事件可能是:在第一应用程序处于大屏显示模式下,检测到用户的屏幕操作事件。比如,检测到用户进行了滑动操作。
在另一种实现方式中,所述第一触发事件可能是:在第一应用程序处于大屏显示模式下,第一应用程序的数据发生了更新,并且需要在当前用户界面中显示更新后的数据。例如,第一应用程序为网络购物应用程序,若当前用户界面中展示的一个或多个商品的状态发生了变化(比如商品的库存量从库存充足变化为库存紧张),则第一触发事件发生,此时需要更新当前用户界面中该商品的状态。再例如,第一应用程序为网络购物应用程序,若当前用户界面中展示的一个或多个商品被下架,被从商品列表中删除,则第一触发事件发生,此时需要更新当前用户界面中的商品列表。
在另一种实现方式中,终端处于大屏状态,且当前采用多窗口显示模式,在多窗口显示模式下,终端的屏幕上显示至少两个窗口,该至少两个窗口中的一个窗口用于显示第一应用程序。所述第一触发事件可能是:在终端处于大屏状态下时,取消多窗口显示模式,比如取消分屏模式,第一应用程序被全屏显示。
在一些示例中,该步骤中,当第一触发事件发生后,可以判断第一应用程序是否处于大屏显示模式,若处于大屏显示模式,则执行本流程的后续步骤,否则可以结束本流程。进一步的,结束本流程后,可以按照常已有的方式进行处理。
S802:终端获取第一用户界面中控件内部的元素。
该步骤中,终端可选地从用户界面的上部开始,按照从上到下的顺序,获取第一用户界面中的控件,以及控件内部的元素(或子元素),并针对获取到的控件以及控件内部的元素(或子元素)执行后续步骤。这样,可以从用户界面上部的控件开始进行用户界面的调整,通过这种方式可以减少用户界面的刷新操作,从用户感受的角度看,可以降低或避免屏幕闪烁感觉。
S803:终端确定元素的缩放尺寸,根据元素的缩放尺寸以及大屏显示模式下该控件的尺寸,确定控件内部的元素布局。
在大屏显示模式下该控件的尺寸,包括在大屏显示模式下该控件的宽度和高度。
可选的,在大屏显示模式下的一些场景中,该控件的宽度与大屏显示模式下的屏幕宽度关联,或者说该控件的宽度由大屏显示模式下的屏幕宽度决定。比如,在终端处于大屏状态下时,第一应用程序全屏显示,此种场景下,该控件的宽度与屏幕宽度相当,比如该控件的宽度与屏幕宽度相等。
可选的,在大屏显示模式下的一些场景中,该控件的宽度与第一应用程序的窗口宽度关联,或者说该控件的宽度由第一应用程序的窗口宽度决定。比如,在终端处于大屏状态下时,采用多窗口模式,其中第一应用程序的窗口尺寸大于设定阈值,即,第一应用程序处于大屏显示模式,此种场景下,该控件的宽度与第一应用程序的窗口宽度相当,比如该控件的宽度与第一应用程序的窗口宽度相等。
可选的,在该控件作为子控件嵌套于第一控件的情况下,该控件的宽度与第一控件在大屏显示模式下确定出的该子控件的缩放宽度关联,或者说该子控件的宽度由其父控件在大屏显示模式下确定出的该子控件的缩放宽度决定。也就是说,在大屏显示模式下,父控件(第一控件)确定其内部的子控件的缩放尺寸,使得该子控件可以根据该子控件的宽度对该子控件内部的元素进行缩放处理以及布局。
若将缩放前的尺寸为第一尺寸,将缩放后的尺寸为第二尺寸,则可选的,第二尺寸小于第一尺寸,也就是说将元素进行缩小处理。示例性的,可以仅将元素的宽度缩小,也可以仅将元素的高度缩小,还可以将元素的宽度和高度同时缩小。可选的,在另一些场景中,第二尺寸大于第一尺寸,也就是说将元素进行放大处理。示例性的,可以仅将元素的宽度放大,也可以仅将元素的高度放大,还可以将元素的宽度和高度同时放大。在一些场景下,用户界面中的全部元素的尺寸被缩小。在另一些场景下,仅用户界面中部分元素的尺寸被缩小,其它元素的尺寸可以保持不变,或者也可能被放大。比如,对于用户界面中尺寸较大的图片,可能被缩小,对于尺寸较小的图标,可能保持其尺寸不变。
在一种实现方式中,第二尺寸相较于第一尺寸的缩放比例,与元素的类型相关联。示例性的,终端可以获取元素的类型,根据该元素的类型,获取与该元素的类型对应的缩放策略,根据大屏显示模式下的屏幕尺寸以及该缩放策略,确定该元素的缩放尺寸。
可选的,每种元素类型对应的缩放策略可预先设置。可选的,不同元素类型对应的缩放策略可能相同也可能不同。由于根据元素所属的类型确定对应的缩放策略,可以使得基于不同类型元素的显示特点,对不同类型的元素进行差异化缩放处理,使得第二用户界面能够更加适配大屏显示。
可选的,元素的类型可以包括文字类型和图片类型,以便分别对文字和图片设置不同的缩放策略,从而使得缩放后的元素与大屏显示模式相适配。
可选的,若元素类型为图片类型,则图片类型可以进一步包括多个子类型。示例性的,可以根据图片的宽高比进行子类型的划分,使得子类型与图片的宽高比关联。示例性的,对于图片类型来说,其对应的子类型可以包括:沉浸式大图、宽图片、长图片、小图标等。上述子类型的划分方式可以参见前述实施例。
针对图片,下面示例性给出了上述各子类型对应的缩放策略。
-若图片为“沉浸式大图”,则将该图片的高度调整为:大屏显示模式下屏幕显示区域高度×a1,或者调整为:大屏显示模式下应用程序的窗口高度×a1;该图片的宽度进行等比例调整。其中,a1大于0且小于1,比如,a1=0.25。
-若图片为“宽图片”,则将该图片的高度调整为:大屏显示模式下屏幕显示区域高度×a2,或者调整为:大屏显示模式下应用程序的窗口高度×a2;该图片的宽度进行等比例调整。其中,a2大于0且小于1,比如,a2=0.2。
-若图片为“长图片”,则将该图片的高度调整为:大屏显示模式下屏幕显示区域高度×a3,或者调整为:大屏显示模式下应用程序的窗口高度×a3;该图片的宽度进行等比例调整。其中,a3大于0且小于1,比如,a3=0.25。
-若图片为“小图标”,则将该图片的高度调整为:大屏显示模式下屏幕显示区域高度×a4,或者调整为:大屏显示模式下应用程序的窗口高度×a4;该图片的宽度进行等比例调整。其中,a4大于0且小于1,比如,a4=0.1。
示例性的,对于文字,可以采用如下缩放策略:将文字高度调整为:大屏显示模式下屏幕显示区域高度×a5,或者调整为:大屏显示模式下应用程序的窗口高度×a5。其中,a5大于0且小于1,比如,a5=0.1。
需要说明的是,以上仅为缩放比例的示例,本申请实施例对于缩放比例不做限制。
再需要说明的是,若控件被嵌套使用,则位于最外层控件可以根据大屏显示模式下的屏幕尺寸(或应用程序窗口的尺寸)以及与元素(子元素)类型对应的缩放策略对元素(或子元素)进行缩放处理。对于位于内层的控件,则可以根据该内层控件的尺寸以及元素(子元素)类型对应的缩放策略对该内层控件中包含的元素(或子元素)进行缩放处理。其中,内层控件作为其外层控件内部的元素,其尺寸可以由外层控件来控制,比如,在大屏显示模式下,由外层控件根据屏幕尺寸以及内部嵌套控件容纳的元素的类型,基于对应的缩放策略调整该内层嵌套的控件的尺寸。
在一种可能的实现方式中,可以通过控件类型确定该控件中包括的元素类型(比如确定元素类型是图片还是文字)。比如,可以通过调用用于获取控件类型的函数获得控件类型。例如,若控件类型为ImageView,则可以确定该控件中的元素为图片,如果控件类型为TextView,则可以确定该控件中的元素为文字。需要说明的是,以上仅为一种确定元素类型的方法示例,本申请实施例对确定元素类型的方法不做限制。
可选的,本申请实施例中,元素缩放前后的宽度缩放比,与该元素缩放前后的高度缩放比相等。换言之,本申请实施例可以采用等比例的缩放方式调整元素的尺寸,可以保证缩放后的元素的宽高比与缩放处理前相同,从而减少或避免元素变形,进而保证用户使用体验。
在一种实现方式中,对于用于实现翻页显示的控件(即通过该控件可以以翻页显示方式显示该控件内部的元素),可以根据该控件在大屏显示模式下的显示效果,以及大屏显示模式下的屏幕尺寸(比如在大屏状态下的屏幕显示宽度)或应用程序窗口的尺寸,以及该控件内部包括的元素的数量,确定该元素的缩放尺寸。基于上述实现方式,对于用于翻页显示的控件,可以根据大屏模式下需要的翻页显示效果,动态确定在第二用户界面中该控件内显示的元素的数量以及元素的缩放尺寸,从而可以使得该控件的显示与大屏模式相匹配,提高用户观看体验。
示例性的,对于用于实现翻页显示的控件,调整元素尺寸的方法可以包括以下步骤:根据该控件内包括的元素的数量、大屏显示模式下翻页区域的尺寸,以及该控件在第二用户界面中的翻页显示效果(比如显示的元素的数量,元素的大小以及分布),确定每个元素的第二尺寸(即缩放后的尺寸);根据每个元素的第二尺寸,对每个元素进行缩放。其中,大屏显示模式下翻页区域的尺寸,可以是大屏模式下翻页区域的宽度,示例性的,大屏模式下翻页区域的宽度可能与屏幕宽度相当(比如在全屏显示模式的情况下),也可能小于屏幕宽度(比如在多窗口显示模式的情况下)。
示例性的,根据该控件内元素的数量不同,采用的缩放处理方法也不同,示例性的,可以包括以下几种情况:
情况1:如果在大屏显示模式下的翻页显示效果为:当该控件内的元素的数量大于或等于3时,完整显示当前元素并局部显示前一个元素和后一个元素,则一种可能的缩放方式为:
根据终端在大屏状态下的屏幕显示区域宽度,依据需要的翻页显示效果,确定该控件内元素的缩放尺寸(或缩放比例),使得在大屏显示模式下的翻页显示区域中,能够完整显示一个缩放后的元素,以及在该元素的相邻位置(比如左右两侧或上下两侧)能够分别局部显示一个元素。可选的,所述局部显示,可以是显示缩放后的元素的x%的面积,x大于0小于1,比如,x%=50%。
可选的,若该控件内的元素的数量大于3,则还可以在大屏显示模式下的翻页显示区域中显示导航标识,用于引导用户通过屏幕操作(比如左右滑动或上下滑动)进行翻页。
情况2:如果在大屏显示模式下的翻页显示效果为:当元素的数量等于2时,完整显示这2个元素,则一种可能的缩放方式为:
根据终端在大屏状态下的屏幕显示区域宽度,依据需要的翻页显示效果,确定该控件内的元素的缩放尺寸(或缩放比例),使得在大屏显示模式下的翻页显示区域中,能够完整显示两个缩放后的元素。可选的,这两个缩放后的元素可以在大屏显示模式下的翻页显示区域中均匀分布。
情况3:如果在大屏显示模式下的翻页显示效果为:当该控件内的元素的数量等于1时,完整显示该元素,则一种可能的缩放方式为:
根据终端在大屏状态下的屏幕显示区域宽度,依据需要的翻页显示效果,确定该控件内元素的缩放尺寸(或缩放比例),使得在大屏显示模式下的翻页显示区域中,能够完整显示该缩放后的元素。可选的,该缩放后的元素可以在大屏显示模式下的翻页显示区域中居中分布。
可选的,在确定元素的缩放尺寸之前,该流程还可以包括以下步骤:确定控件内的元素是否满足设定要求。在上述流程的S803中,若该元素满足该设定要求,则确定该元素的缩放尺寸,以及进行后续的处理过程,否则可以放弃对该元素进行缩放处理。
可选的,在一些实现方式中,在以下情形下认为元素满足该设定要求:元素的尺寸大于设定阈值(比如元素的宽度大于宽度阈值,和/或元素的高度大于高度阈值)。可选的,在另一些实现方式中,在以下情形下认为元素满足该设定要求:元素的类型为指定类型(比如元素为图片类型)。可选的,在另一些实现方式中,在以下情形下认为元素满足该设定要求:元素的尺寸大于设定阈值,并且元素的类型为指定类型。
通过上述实现方式,可以仅对满足设定要求的元素进行缩放,对于不满足该要求的元素可以放弃对其进行缩放处理,从而可以使得第二用户界面与大屏模式相匹配。例如,若元素的尺寸较大(比如元素宽度大于宽度阈值和/或元素高度大于高度阈值),则需要对该元素进行缩小处理;若该元素的尺寸较小(比如元素宽度小于或等于宽度阈值和/或元素高度小于或等于高度阈值),则无需对该元素进行缩小处理,从而可以使得该控件内部的元素与大屏模式相匹配,提高用户观看体验。
可选的,在确定元素的缩放尺寸之前,该流程还可以包括以下步骤:确定控件内的元素的尺寸是否小于或等于设定阈值,比如,确定元素的宽度是否小于或等于宽度阈值,或者确定元素的高度是否小于或等于高度阈值,或者确定元素的宽度是否小于或等于宽度阈值以及元素的高度是否小于或等于高度阈值。在上述流程的S803中,若该元素的尺寸小于或等于设定阈值,则确定对该元素进行放大,并根据该设定阈值确定该元素的缩放尺寸,该元素按照该缩放尺寸被放大后的尺寸不小于该设定阈值对应的尺寸。若该元素的尺寸大于该设定阈值,可以按照上述方法对该元素进行缩小处理。可选的,所述宽度阈值与所述高度阈值相同或不同。
通过上述实现方式,当元素的尺寸较小(比如元素宽度小于或等于宽度阈值和/或元素高度小于或等于高度阈值)时,可以将该元素进行放大,将该元素被放大到与该阈值相当;当元素的尺寸较大(比如元素宽度大于宽度阈值和/或元素高度大于高度阈值)时,可以将该元素进行缩小,从而可以使得该控件内部的元素与大屏模式相匹配,提高用户观看体验。
可选的,在确定元素的缩放尺寸之后,该流程还可以包括以下步骤:确定元素的缩放尺寸是否小于或等于设定阈值,比如,确定元素的宽度是否小于或等于宽度阈值,或者确定元素的高度是否小于或等于高度阈值,或者确定元素的宽度是否小于或等于宽度阈值以及元素的高度是否小于或等于高度阈值。若元素的缩放尺寸小于或等于设定阈值,则可以放弃对该元素进行缩放,或者也可以根据该设定阈值确定元素的缩放尺寸,使得该元素按照该缩放尺寸缩放后,其尺寸不小于该设定阈值。
通过上述实现方式,当确定出元素的缩放尺寸后,若该缩放尺寸较小(比如缩小后的宽度小于或等于宽度阈值,和/或缩小后的高度小于或等于高度阈值),则可以放弃对该元素进行缩放,也可以根据设定阈值重新确定该元素的缩放尺寸,使得该元素被缩放处理后,其尺寸可以与设定阈值对应的尺寸相当(比如放大后的宽度与宽度阈值相等,和/或,放大后的高度与高度阈值相同),从而可以使得该控件内部的元素与大屏模式相匹配,提高用户观看体验。
S804:终端根据该控件内的元素的缩放尺寸、该控件内部的元素的布局,绘制第二用户界面。
示例性的,该步骤中,终端可以根据控件内部的元素的宽度和高度,以及元素的布局,绘制第二用户界面。
可选的,如果第一应用程序的用户界面中包括多个控件,则终端在绘制第二用户界面时,可以针对每个控件,根据控件内的元素的缩放尺寸以及控件内部的元素的布局执行绘制操作,从而得到第二用户界面。
可选的,在大屏显示模式下,当终端检测到用户操作时,可以根据该用户操作,对第一应用程序的用户界面进行刷新。可选的,所述用户操作可以是向上滑动的用户操作,或者向上滑动的用户操作,或者其它能够触发对用户界面进行刷新的用户操作。
示例性的,根据用户操作对第一应用程序的用户界面进行刷新的过程可以包括:根据用户操作确定第一应用程序的用户界面的目标位置,根据该目标位置获取第一用户界面中的控件内部的元素,根据元素的缩放尺寸以及大屏显示模式下该控件的尺寸,确定控件内部的元素布局,根据该控件内的元素的缩放尺寸、该控件内部的元素的布局,绘制该目标位置对应的第二用户界面。该刷新过程中对元素进行缩放处理以及布局的具体实现方式,可以参见前述流程中的相关步骤。
S805:终端显示第二用户界面。
可选的,由于对第一用户界面中的元素进行了缩放处理并重新进行布局,因此在有些场景下,第二用户界面中的元素的数量大于第一用户界面中的元素的数量,从而使得第二用户界面相较于第一用户界面更适配大屏显示。
可选的,第二用户界面中的元素的数量大于第一用户界面中的元素的数量的一种示例是:第二用户界面中元素的列数大于第一用户界面中元素的列数。例如,通过元素尺寸缩放以及重新布局,可以将元素的列数从2列增加到4列。
可选的,第二用户界面中的元素的数量大于第一用户界面中的元素的数量的一种示例是:第二用户界面中至少一行元素的数量,大于第一用户界面中一行元素的数量。例如,通过元素尺寸缩放以及重新布局,可以将每行元素的数量从2个增加到4个。由于第二用户界面中的元素的列数,相较于第一用户界面中元素的列数有所增加,因此第二用户界面相较于第一用户界面与大屏显示更加适配。
可选的,第二用户界面中的元素的数量大于第一用户界面中的元素的数量的一种示例是:第二用户界面中的翻页显示区域中的元素数量大于第一用户界面中的翻页显示区域中的元素数量。示例性的,第一用户界面中的第一布局中包括第一翻页显示区域,第一翻页显示区域中包括第一尺寸的第一元素;第二用户界面中的第二布局中包括第二翻页显示区域,第二翻页显示区域中包括第二尺寸的第一元素,以及第二尺寸的第二元素和第二尺寸的第三元素,第二元素为第一元素的上一个元素(或上一页),第三元素为第一元素的下一个元素(或下一页)。其中,第二尺寸的第一元素被完整显示,第二尺寸的第二元素和第二尺寸的第三元素分别与第二尺寸的第一元素相邻,且均被局部显示(比如仅显示50%的面积)。由于第二用户界面中的翻页显示区域中的元素数量,相较于第一用户界面中翻页显示区域中的元素的数量有所增加,因此第二用户界面相较于第一用户界面与大屏显示更加适配。
可选的,第二用户界面的一种可能的显示效果为:在图片显示区域,为缩放后的图片设置背景图片。示例性的,第一布局中包括第一图像显示区域,第一图像显示区域中包括第一尺寸的第一图片。第二布局中包括第二图像显示区域,第二图像显示区域中包括背景图片以及第二尺寸的第一图片,该背景图片为经模糊化处理的图片,该背景图片的主色调与该第一图片的主色调相同或相近。由于第二用户界面中的图片显示区域不仅显示第二尺寸的第一图片,还显示该图片的背景图片,由于该背景图片为经模糊化处理的图片,且主色调与第一图片的主色调相同或相近,因此可以增加美观度,使得第二用户界面能够与大屏显示适配,提高用户观看感受。
图8a所示的流程中,当发生第一触发事件,且第一应用程序处于大屏显示模式时,基于第一应用界面中的元素的尺寸进行缩放处理,并进行重新布局,得到第二用户界面,并显示该第二用户界面,从而使得第二用户界面与大屏显示相适配。
在本申请的一种可能的实现方式中,上述流程中,终端在确定出控件内部的元素的缩放尺寸以及布局(比如包括多少行元素,各行之间的间隔)后,还可以根据该控件内的元素的缩放尺寸以及该控件内部的元素的布局,确定该控件的高度,以便后续绘制用户界面中的该控件。该方法可以适用于控件高度非动态变化的场景。
在本申请的一种可能的实现方式中,在根据第一触发事件确定第一应用程序处于大屏显示模式之前,该方法还包括以下步骤:终端确定第一应用程序是否被允许在大屏显示模式下进行用户界面调整。相应的,若第一应用程序被允许在大屏显示模式下进行用户界面调整,则执行上述流程中的后续步骤(比如包括:确定第一应用程序处于大屏显示模式,以及后续的步骤)。否则,放弃采用本申请实施例方式对用户界面进行调整。
示例性的,可以预先设置应用程序列表,该应用程序列表中包括至少一个应用程序(比如列表中包括应用程序的标识等信息),该列表中的应用程序被允许在大屏显示模式下进行用户界面调整。终端在检测到第一触发事件后,可以获取当前在前台运行的应用程序的信息(比如应用程序的标识),根据该应用程序的信息查询该列表,如果该应用程序在该列表中,则执行本申请实施例上述流程中的后续步骤,以对该用户界面进行调整,以使其适应大屏显示模式。
通过以上实现方式,可以针对只被允许在大屏显示模式下进行用户界面调整的应用程序,当需要在大屏显示模式下显示该应用程序的用户界面时,才针对大屏显示模式对该应用程序的用户界面进行调整,从而可以提高系统灵活性,可以满足用户的不同需求。
在一些场景下,第一应用程序的用户界面中包括弹窗。弹窗是指在应用程序运行时自动弹出的窗口。相对于用户界面所在的原有图层,弹窗被绘制在上层图层,如果弹窗采用小窗口方式显示,则该弹窗将部分遮挡其下面图层中的用户界面。弹窗也可以全屏显示。
针对用户界面中包含弹窗的情况,本申请的一些实施例中,在第一应用程序处于大屏显示模式下时,可以对弹窗的位置和尺寸进行调整,以适应大屏显示模式。
在一种可能的实现方式中,当终端检测第一触发事件,并根据该第一触发事件确定第一应用程序处于大屏显示模式的情况下,如果第一应用程序的用户界面中包括第一弹窗,则本申请实施例可以采用如图8b所示的方法对弹窗的位置和尺寸进行调整:
S810:终端获取第一弹窗中控件内部的元素,确定该元素的缩放尺寸,根据该元素的缩放尺寸确定第一弹窗中控件的缩放尺寸,根据第一弹窗中控件的缩放尺寸确定第一弹窗的缩放尺寸。
可选的,对于第一弹窗中的控件,确定其内部元素的缩放尺寸的具体实现方式,可以参照前述实例中确定元素的缩放尺寸的相关内容。
确定出元素的缩放尺寸后,可以根据控件内部的元素的缩放尺寸,确定该控件的缩放尺寸,比如该控件的宽度和/或高度。根据第一弹窗中控件的尺寸,可以确定该第一弹窗的缩放尺寸。以第一弹窗中包括ImageView控件为例,终端可以根据该ImageView控件内的图片所属的子类型,采用对应的缩放策略确定该图片的缩放尺寸,根据该图片的缩放尺寸确定该ImageView控件的缩放尺寸,使得该ImageView控件被缩放后的尺寸与该图片被缩放后的尺寸相当;再根据该ImageView控件的缩放尺寸确定出该第一弹窗的缩放尺寸,使得该第一弹窗被缩放后的尺寸与该ImageView控件被缩放后的尺寸相当。
S811:基于第一弹窗的缩放尺寸,确定第一弹窗被缩放后的位置。
可选的,可以采用以下方法确定第一弹窗被缩放后的位置:获取第一用户界面中第一弹窗的位置,根据该位置确定第一弹窗的中心点的坐标,根据第一弹窗的缩放尺寸以及该中心点的坐标,确定第一弹窗被缩放后所在位置的坐标。这样可以使得第一弹窗在缩放前后保持中心点的相对位置不变。
需要说明的是,也可以采用其它方法确定第一弹窗被缩放后的位置,本申请实施例不做限制。
S812:根据第一弹窗的尺寸以及一弹窗被缩放后的位置,绘制第二弹窗。第二弹窗包括在第二用户界面中,第二弹窗中包括按照元素的缩放尺寸被缩放的元素。
示例性的,第二弹窗所在的图层可以位于顶层,以保证该第二弹窗不会被遮挡。
示例性的,上述流程可以应用在以下场景中:
场景1:第一应用程序已经处于大屏显示模式下,第一应用程序当前弹出弹窗,在该场景下,针对当前弹出的弹窗可以通过如图8b所示的流程,将缩放后的弹窗进行显示。
场景2:第一应用程序的用户界面中已经包含有弹窗,第一应用程序从小屏显示模式切换到大屏显示模式,在该场景下,对第一应用程序的用户界面进行调整以适应于大屏显示模式的流程,包括如图8a所示的流程以及如图8b所示的流程。
根据上述图8a和图8b所示的流程,以折叠屏手机为例,图24和图25示例性的示出了采用本申请实施例前以及采用本申请实施例后的效果对比。
参见图24,图24左侧(1)为折叠屏手机在折叠状态下,手机屏幕上显示的应用程序的用户界面。该用户界面中包括弹窗2401,弹窗2401由系统原生ImageView控件实现。
当该折叠屏手机从折叠态切换到展开态后,该用户界面可如图24右侧(2)所示。可以看出,在未使用本申请实施例的情况下(比如使用系统原生控件的情况下),折叠屏手机从折叠态切换到展开态,在大屏中的用户界面中弹窗2402的尺寸较大,与大屏显示不相适应。
参见图25,图25左侧(1)为折叠屏手机在折叠状态下,手机屏幕上显示的应用程序的用户界面。该用户界面中包括弹窗2501,弹窗2501由本申请实施例提供的ImageView控件实现。
当该折叠屏手机从折叠态切换到展开态后,该用户界面可如图25右侧(2)所示。可以看出,在使用本申请实施例的情况下(即使用本申请实施例提供的控件的情况下),折叠屏手机从折叠态切换到展开态,在大屏中的用户界面中,弹窗2502相比于图24中的弹窗2402,其尺寸与当前展开态下的大屏显示相适配。
本申请的一些实施例中,可以使用基于具备扩展功能的控件来解决大屏显示适配的问题。所述具备扩展功能的控件,既具备系统原生控件具有的功能(比如设置元素位置、布局、显示效果等),又具备本申请扩展的功能,所述扩展功能可以包括响应第一触发事件进行用户界面调整的能力,以使得调整后的用户界面与大屏显示相适配。
可选的,可以通过对原生控件进行功能增强,使其具备扩展功能。以安卓系统为例,本申请的一些实施例基于安卓/>原生控件进行功能增强,使得该控件具备能够感知第一触发事件的功能,并可以对感知到的第一触发事件进行响应操作,通过该响应操作使得该控件的内部元素(或子元素)能够对大屏显示进行显示尺寸、布局等方面的自适应调节,以适配大屏显示。本申请实施例中,具备上述功能的控件开发完成后可以被发布到公共平台,使得应用程序开发者能够获得该控件,并可以在应用程序开发过程中,使用该控件对应用程序的用户界面进行编程设计。
可选的,本申请实施例提供的控件可以感知第一触发事件,并可以独立于其它控件,对本控件内部的元素进行尺寸和布局方面的调整,以便适配大屏显示。示例性的,以第一应用程序中包括第一控件,该第一控件中包括第一元素(第一元素的数量可以是一个或多个)为例,该第一控件用于响应于第一触发事件,检测第一应用程序处于大屏显示模式,将第一控件中的第一元素从第一尺寸调整到第二尺寸,将第一控件中的第一元素的布局从第一布局调整为第二布局。
可选的,以安卓系统为例,本申请实施例提供的控件可以包括以下一种或多种:线性布局控件(以下称为LinearLayout控件)、循环视图控件(以下称为RecyclerView控件)、视图翻页控件(以下称为ViewPager控件)、列表视图控件(以下称为ListView控件)、网格视图控件(以下称为GridView控件)、图像视图控件(以下称为ImageView控件)。
下面分别对这几种控件进行说明。
(1)LinearLayout控件
LinearLayout控件,可以在根据第一触发事件确定第一应用程序处于大屏显示模式的情况下,确定内部元素的缩放尺寸(比如可以根据元素类型获取对应的缩放策略,根据该缩放策略确定元素的缩放尺寸),根据内部元素的缩放尺寸(比如缩放宽度)以及该控件在大屏模式下的尺寸(如该控件在大屏显示模式下的宽度),确定内部元素的流式布局(也称为线性布局)。
在用户界面开发时,LinearLayout控件可以被用来对固定数量的元素(或子元素)进行布局。比如,用户界面中包括4个文字显示区域用于显示固定的文本,则可以使用LinearLayout控件对这4个文字显示区域进行布局设计。
可选的,可以通过对系统原生LinearLayout控件进行功能增强,增加根据感知到的第一触发事件对控件内部的元素(子元素)进行显示尺寸、布局等方面的调节以适配大屏显示的功能,从而得到本申请实施例中的LinearLayout控件。
图9示例性示出了基于系统原生的LinearLayout控件和基于本申请实施例提供的LinearLayout控件进行大屏显示自适应调节的效果对比示意图。如图所示,同样在大屏显示模式下(即采用系统原生控件时的大屏尺寸与采用本申请实施例提供的控件时的大屏尺寸相同),基于本申请实施例提供的LinearLayout控件,可以根据当前大屏的尺寸对该控件内部的4个元素(或子元素)的尺寸进行缩放,并按照水平流式调整该4个元素(或子元素)的布局,比如将该4个元素(或子元素)按照顺序排列为一行。可选的,若元素数量较多,一行排列不下,则可以进行换行处理,直至排列完所有元素(或子元素)。
在一些实施例中,LinearLayout控件的调整过程可以和图16关联。
(2)RecyclerView控件
RecyclerView控件,可以在根据第一触发事件确定第一应用程序处于大屏显示模式的情况下,确定内部元素的缩放尺寸(比如可以根据元素类型获取对应的缩放策略,根据该缩放策略确定元素的缩放尺寸),根据内部元素的缩放尺寸(比如缩放宽度)以及该控件在大屏显示模式下的尺寸(如该控件在大屏显示模式下的宽度),确定内部元素的列数以及列间距,实现列数扩展。
在用户界面开发时,RecyclerView控件可以被用来对动态元素(或子元素)进行布局。比如,某个网络购物应用的商品搜索结果界面中包括若干商品展示区域,根据被搜索的商品的不同,搜索结果页面中包括的商品展示区域的数量也可能不同,这种情况下,可以使用RecyclerView控件对商品展示区域进行布局设计。
可选的,可以通过对系统原生的RecyclerView控件进行功能增强,增加根据感知到的第一触发事件对控件内部的元素(子元素)进行显示尺寸、布局方面的调节以适配大屏显示的功能,从而得到本申请实施例中的RecyclerView控件。
图10示例性示出了基于系统原生的RecyclerView控件和基于本申请实施例提供的RecyclerView控件进行大屏显示自适应调节的效果对比示意图。如图所示,同样在大屏显示模式下(即采用系统原生控件时的大屏尺寸与采用本申请实施例提供的控件时的大屏尺寸相同),基于本申请实施例提供的RecyclerView控件,可以根据当前大屏的尺寸对该控件内部的元素(或子元素)的尺寸缩小,并根据缩小后的尺寸确定元素(或子元素)的列数,缩小尺寸后的元素(子元素)的列数有所增加,从而可以显示更多的元素(子元素)。
在一些实施例中,RecyclerView控件的调整过程可以和图17关联。
(3)ViewPager控件
ViewPager控件,可以在根据第一触发事件确定第一应用程序处于大屏显示模式的情况下,确定内部元素的缩放尺寸(比如可以根据大屏显示模式下该控件的尺寸,内部元素的数量,以及该控件在大屏显示模式下的显示效果,确定该控件内部的元素数量以及每个元素的缩放尺寸),根据该控件内部的元素数量、每个元素的缩放尺寸、大屏显示模式下该控件的尺寸和显示效果,确定内部元素的布局。
通过该控件可以实现同时显示当前页、局部上一页和局部下一页。在用户界面开发时,如果需要进行多页切换,比如通过左右滑动以切换不同的视图(view),则可以使用ViewPager控件实现。
可选的,可以通过对系统原生的ViewPager控件进行功能增强,增加根据感知到的第一触发事件对控件内部的元素(子元素)进行显示尺寸、布局等方面的调节以适配大屏显示的功能,从而得到本申请实施例中的ViewPager控件。
图11示例性示出了基于系统原生的ViewPager控件和基于本申请实施例提供的ViewPager控件进行大屏显示自适应调节的效果对比示意图。如图所示,同样在大屏显示模式下(即采用系统原生控件时的大屏尺寸与采用本申请实施例提供的控件时的大屏尺寸相同),基于本申请实施例提供的ViewPager控件,若该控件内部包括三个或三个以上视图(view),则在大屏显示模式下,根据当前大屏的尺寸,各视图(view)均被缩小,并且当前视图(view)显示完整且位于中间,其上一页视图和下一页视图显示在两边且仅显示出50%;若该控件内部包括两个视图(view),则在大屏显示模式下,各视图(view)均被缩小,并且者两个视图(view)显示完整;若该控件内部包括一个视图(view),则在大屏显示模式下,该视图(view)均被缩小,并被完整显示。相较于ViewPager控件,采用本申请实施例提供的ViewPager控件,可以在大屏显示模式下,显示更多的元素(子元素)。
在一些实施例中,ViewPager控件的调整过程可以和图20关联。
(4)ListView控件
ListView控件,可以在根据第一触发事件确定第一应用程序处于大屏显示模式的情况下,确定内部元素的缩放尺寸(比如可以根据元素类型获取对应的缩放策略,根据该缩放策略确定元素的缩放尺寸),根据内部元素的缩放尺寸(比如缩放宽度)以及该控件在大屏显示模式下的尺寸(如该控件在大屏显示模式下的宽度),确定该内部元素的列数以及列间距,实现列数扩展。
在用户界面开发时,使用该控件可以将一组元素(子元素)组成带有或不带有列标头的列,并显示伴随的图标和文字。
可选的,可以通过对系统原生的ListView控件进行功能增强,增加根据感知到的第一触发事件对控件内部的元素(子元素)进行显示尺寸、布局等方面的调节以适配大屏显示的功能,从而得到本申请实施例中的ListView控件。
图12示例性示出了基于系统原生ListView控件和基于本申请实施例提供的ListView控件进行大屏显示自适应调节的效果对比示意图。如图所示,同样在大屏显示模式下(即采用系统原生控件时的大屏尺寸与采用本申请实施例提供的控件时的大屏尺寸相同),基于本申请实施例提供的ListView控件,在大屏显示模式下,根据当前大屏的尺寸,该控件内部的元素(或子元素)可以被缩小尺寸,缩小尺寸后的元素(子元素)的列数有所增加,从而可以显示更多的元素(子元素)。
在一些实施例中,ListView控件的调整过程可以和图19关联。
(5)GridView控件
GridView控件,可以在根据第一触发事件确定第一应用程序处于大屏显示模式的情况下,确定内部元素的缩放尺寸(比如可以根据元素类型获取对应的缩放策略,根据该缩放策略确定元素的缩放尺寸),根据内部元素的缩放尺寸(比如缩放宽度)以及该控件在大屏显示模式下的尺寸(如该控件在大屏显示模式下的宽度),确定该内部元素的列数以及列间距,实现列数扩展。
在用户界面开发时,若元素(或子元素)的排列方式为网格形式,则可以使用GridView控件实现这些元素(或子元素)的布局。通过GridView控件,可以在二维可滚动的网格中展示内容(即元素或子元素)。
可选的,可以通过对系统原生的GridView控件进行功能增强,增加根据感知到的第一触发事件对控件内部的元素(子元素)进行显示尺寸、布局等方面的调节以适配大屏显示的功能,从而得到本申请实施例中的GridView控件。
图13示例性示出了基于系统原生的GridView控件和基于本申请实施例提供的GridView控件进行大屏显示自适应调节的效果对比示意图。如图所示,同样在大屏显示模式下(即采用系统原生控件时的大屏尺寸与采用本申请实施例提供的控件时的大屏尺寸相同),基于本申请实施例提供的GridView控件,在大屏显示模式下,根据当前大屏的尺寸,该控件内部的元素(或子元素)可被缩小尺寸,缩小尺寸后的元素(子元素)的列数有所增加,从而可以显示更多的元素(子元素)。
在一些实施例中,GridView控件的调整过程可以和图18关联。
(6)ImageView控件
ImageView控件,可以在根据第一触发事件确定第一应用程序处于大屏显示模式的情况下,确定内部元素(图片)的缩放尺寸(比如可以根据元素类型获取对应的缩放策略,根据该缩放策略确定元素的缩放尺寸),根据缩放后的所述内部元素调整控件高度,根据缩放后的元素确定该控件内部元素的布局。
可选的,ImageView控件还可以根据缩放后的元素(图片)生成背景元素(背景图片)。在确定该控件内部元素的布局时,可以根据缩放后的元素以及背景元素(背景图片)确定该控件内部元素的布局。
通过该控件能够自动调节图片尺寸,可选的,还可以实现两边高斯模糊效果。在用户界面开发时,该控件可以用来显示一个图像。
可选的,可以通过对系统原生的ImageView控件进行功能增强,增加根据感知到的第一触发事件对控件内部的元素(子元素)进行显示尺寸、布局等方面的调节以适配大屏显示的功能,从而得到本申请实施例中的GridView控件。
在一些实施例中,ImageView控件的调整过程可以和图21关联。
图14示例性示出了基于系统原生ImageView控件和基于本申请实施例提供的ImageView控件进行大屏显示自适应调节的效果对比示意图。如图所示,同样在大屏显示模式下(即采用系统原生控件时的大屏尺寸与采用本申请实施例提供的控件时的大屏尺寸相同),基于本申请实施例提供的ImageView控件,在大屏显示模式下,根据当前大屏的尺寸,该控件内部的元素(或子元素)(即图片)可以被缩小尺寸,该图片两侧的区域显示高斯模糊处理后的背景图片,以提高用户的观看感受。
本申请实施例中,对于一个用户界面来说,根据该用户界面中包含的内容的种类(比如图片、文字等)以及内容的布局要求,可以使用上述一种或多种控件进行用户界面编程设计。上述控件中,有些控件属于容器类控件(比如ViewPager控件),对于容器类控件,可以进一步的在其中添加其它控件。
需要说明的是,本申请实施例对以上控件的命名方式不做限制。
还需要说明的是,以上控件仅为示例,本申请实施例还可以提供其它类型的控件,以用于在对用户界面提供布局功能的同时,还能够实现在大屏显示模式下的用户界面自适应调节功能。
根据以上描述,总体来说,本申请实施例提供的控件可以实现以下功能:获取终端屏幕尺寸以及应用程序窗口尺寸的功能,识别控件内部元素的类别的功能,根据终端屏幕尺寸、应用程序窗口尺寸以及该控件内部的元素类别,确定该控件内部元素的缩放尺寸以及布局的功能,从而使得终端内的图形管理器能够根据该控件内部元素的缩放尺寸以及布局,绘制适配于大屏显示的用户界面。
根据以上功能,图15示例性示出了本申请实施例提供的控件的功能架构示意图。如图所示,控件中可包括以下功能模块:确定模块1501,识别模块1502、布局调整模块1503,上述各模块的功能如下:
确定模块1501,用于响应于第一触发事件,确定第一应用程序处于大屏显示模式。可选的,确定模块1501可以获取当前终端屏幕尺寸以及第一应用程序窗口尺寸,根据终端屏幕尺寸以及第一应用程序窗口尺寸,确定第一应用程序是否处于屏显示模式。可选的,确定模块1501可以从窗口管理模块获取当前终端屏幕尺寸以及第一应用程序的窗口尺寸,以便确定第一应用程序是否处于大屏显示模式。
识别模块1502,用于识别控件内部元素的类别。
布局调整模块1503,用于根据终端屏幕尺寸、第一应用程序窗口尺寸以及该控件内部的元素类别,确定该控件内部元素的缩放尺寸以及布局。
示例性的,控件内部的元素(或子元素)可以包括图片或文字等。根据图片的宽高比,本申请实施例对图片划分了几种类型,并针对每种类型设置了对应的缩放比例或缩放策略,以使得布局调整模块1503可以根据识别得到的图片类型,按照对应的缩放比例或缩放策略进行缩放处理。
以下示例性示出了几种图片类型以及对应的缩放比例或缩放策略。
-“沉浸式大图”:图片宽度=图片宽度;缩放策略为:将该图片的高度调整为:屏幕显示区域高度×a1,或者调整为:大屏显示模式下应用程序的窗口的高度×a1,并对该图片的宽度进行等比例调整。其中,a1大于0且小于1,比如,a1=0.25。
-“宽图片”:图片高度≤图片宽度×α,α>1,比如,α=1.2;缩放策略为:将该图片的高度调整为:屏幕显示区域高度×a2,或者调整为:大屏显示模式下应用程序的窗口的高度×a2,并对该图片的宽度进行等比例调整。其中,a2大于0且小于1,比如,a2=0.2。
-“长图片”:图片高度>图片宽度×β,β>1,比如,β=1.2;缩放策略为:将该图片的高度调整为:屏幕显示区域高度×a3,或者调整为:大屏显示模式下应用程序的窗口的高度×a3,并对该图片的宽度进行等比例调整。其中,a3大于0且小于1,比如,a3=0.25。
-“小图标”:图片宽度和图片高度均小于50dp;缩放策略:将该图片的高度调整为:屏幕显示区域高度×a4,或者调整为:大屏显示模式下应用程序的窗口的高度×a4,并对该图片的宽度进行等比例调整。其中,a4大于0且小于1,比如,a4=0.1。
示例性的,若控件内部的元素(或子元素)为文字,则可以按照以下缩放策略进行缩放:将文字高度调整为:屏幕显示区域高度×a5。其中,a5大于0且小于1,比如,a5=0.1。
需要说明的是,以上仅为缩放比例的示例,本申请实施例对于缩放比例不做限制。
再需要说明的是,若控件被嵌套使用,则位于最外层控件可以根据大屏显示模式下的屏幕显示区域的尺寸以及与元素(子元素)类型对应的缩放比例(或缩放策略)对元素(或子元素)进行缩放处理。对于位于内层的控件,则可以根据该内层控件的尺寸以及元素(子元素)类型对应的缩放比例(或缩放策略)对该内层控件中包含的元素(或子元素)进行缩放处理。其中,内层控件作为其外层控件内部的元素,其尺寸可以由外层控件来控制,比如,在大屏显示模式下,由外层控件根据屏幕尺寸以及内部嵌套控件容纳的元素的类型,以及该元素的种类,基于对应的缩放策略调整该内层嵌套的控件的尺寸。
上述各模块的具体实现方式可以参见前述实施例的描述。
下面以本申请实施例提供的上述六种控件为例,对每种控件的逻辑处理流程进行说明。
需要说明的是,以下流程中涉及的“元素”也可以被替换为“子元素”。
(1)LineaLayout控件
示例性的,图16示出了LineaLayout控件的一种逻辑处理流程。该逻辑处理流程可以包括以下三个阶段:测量阶段(如图中的onMeasure阶段)、布局阶段(如图中的onLayout阶段)、绘制阶段(如图中的onDraw阶段)。每个阶段可以通过相应的函数实现,比如,测量阶段的流程由onMeasure函数实现,布局阶段的流程由onLayout函数实现,绘制阶段的流程由onDraw函数实现。示例性的,在应用程序运行过程中,LineaLayout控件对应的线程可以通过调用这些函数实现该控件调整内部元素的尺寸和布局以适应大屏显示的功能。
可选的,可以通过在原生LineaLayout控件的onMeasure阶段和onLayout阶段增加本申请实施例提供的新增业务逻辑来实现本申请实施例中的LineaLayout控件。相较于原生LineaLayout控件,本申请实施例提供的LineaLayout控件添加了以下逻辑处理能力:
在onMeasure阶段,添加了获取当前终端屏幕尺寸和当前应用程序的窗口尺寸,并以此来判断当前终端是否处于大屏显示模式的逻辑处理能力;还添加了识别控件内部元素的类型的逻辑处理能力;以及,确定内部元素缩放尺寸的逻辑处理能力;
在onLayout阶段,添加了根据该控件内部元素缩放后的尺寸对该控件内部元素重新布局(比如以流式方式对元素进行布局)的逻辑处理能力。
如图16所示,LineaLayout控件的逻辑处理流程可以包括如下步骤:
测量阶段(onMeasure):在1601,基于接收到的第一触发事件,判断终端是否处于大屏显示模式,若判断是大屏显示模式,则转入1602。在1602,识别内部元素的类型,在接下来的1603,根据内部元素的类型确定内部元素的缩放尺寸,并根据确定出的缩放尺寸进行缩放处理。若在1601中判断不是大屏显示模式,则结束本申请实施例对原生控件扩展的处理流程,进一步的,接下来可以按照原生控件既有的流程进行处理。可选地,在执行onMeasure之前,已经获得应用程序处于大屏显示模式,则不必执行步骤1601。
布局阶段(onLayout):在1604,判断终端当前是否处于大屏显示模式,若是大屏显示模式,则转入1605。在1605,根据缩放后的元素尺寸(元素的宽度),以及大屏显示模式下该控件对应的显示区域宽度(比如包括大屏显示模式下的屏幕宽度,或者对于内层控件来说,根据该内层控件被其外层响应控件调整后的宽度),确定一行中能排放的元素的数量,以及相邻元素之间的平均间距,以流式方式对该控件内部元素进行布局,比如,可以按照从左到右的顺序对缩放后的元素(子元素)进行排列,若一行排不下则可以排列到下一行,直到所有元素(子元素)排完,一行中可以排列的元素(子元素)的数量,根据当前屏幕宽度而定。若在1604中判断不是大屏显示模式,则结束本申请实施例对原生控件扩展的处理流程,按照原生控件既有的流程进行处理。
在绘制阶段(onLayout),在1606,基于重新调整后的元素尺寸以及元素布局,通过调用onLayout函数进行界面绘制,以实现对该控件内部的尺寸缩放后的元素按照流式方式布局。
需要说明的是,上述流程中,步骤1601或步骤1604为可选步骤。比如,若在onMeasure阶段执行了步骤1601,则在onLayout阶段可以不再执行步骤1604,而是在步骤1603之后执行步骤1605。
上述LineaLayout控件的测量阶段(onMeasure)、布局阶段(onLayout)和绘制阶段(onMeasure)所涉及的具体实现方式,可以参照前述实施例,在此不再重复。
需要说明的是,图16所示的流程中,测量阶段(onMeasure)和布局阶段(onLayout)的逻辑处理流程相对独立,因此在布局阶段(onLayout)需要再次判断终端当前是否处于大屏显示模式,以保证逻辑处理的准确性。以上仅为一种示例,在其它逻辑处理流程中,判断终端当前是否处于大屏显示模式的步骤也可以仅执行一次,本申请实施例对此不做限制。
(2)RecyclerView控件
示例性的,图17示出了RecyclerView控件的一种逻辑处理流程。该逻辑处理流程可以包括以下三个阶段:测量阶段(如图中的onMeasure阶段)、布局阶段(如图中的onLayout阶段)、绘制阶段(如图中的onDraw阶段)。每个阶段可以通过相应的函数实现,比如,测量阶段的流程由onMeasure函数实现,布局阶段的流程由onLayout函数实现,绘制阶段的流程由onDraw函数实现。示例性的,在应用程序运行过程中,RecyclerView控件对应的线程可以通过调用这些函数实现该控件调整内部元素的尺寸和布局以适应大屏显示的功能。
可选的,可以通过在原生RecyclerView控件的onMeasure阶段增加本申请实施例提供的新增业务逻辑来实现本申请实施例中的RecyclerView控件。相较于原生RecyclerView控件,本申请实施例提供的RecyclerView控件添加了以下逻辑处理能力:
在onMeasure阶段,添加了获取当前终端屏幕尺寸和当前应用程序的窗口尺寸,并以此来判断当前终端是否处于大屏显示模式的逻辑处理能力;还添加了识别控件内部元素的类型的逻辑处理能力;以及,确定内部元素缩放尺寸以及根据缩放后的尺寸确定元素布局(比如包括确定元素列数以及列间距)的逻辑处理能力。可选地,在执行onMeasure之前,已经获得应用程序处于大屏显示模式,则不必执行步骤1701。
如图17所示,RecyclerView控件的逻辑处理流程可以包括如下步骤:
测量阶段(onMeasure):在1701,基于接收到的第一触发事件,判断终端是否处于大屏显示模式,若判断是大屏显示模式,则转入1702。在1702,识别内部元素的类型,在接下来的1703,根据内部元素的类型确定内部元素的缩放尺寸,并在接下来的1704,根据缩放后的元素尺寸(元素的宽度),以及大屏显示模式下该控件对应的显示区域宽度(比如包括大屏显示模式下的屏幕宽度,或者对于内层控件来说,根据该内层控件被其外层响应控件调整后的宽度),确定元素的列数以及列间距。若在1701中判断不是大屏显示模式,则结束本申请实施例对原生控件扩展的处理流程,进一步的,接下来可以按照原生控件既有的流程进行处理。
布局阶段(onLayout):在1705,根据元素列数以及列间距,得到该控件内部元素的布局。
在绘制阶段(onLayout),在1706,基于重新调整后的元素尺寸以及元素布局,通过调用onLayout函数进行界面绘制。
上述RecyclerView控件的测量阶段(onMeasure)、布局阶段(onLayout)和绘制阶段(onMeasure)所涉及的具体实现方式,可以参照前述实施例,在此不再重复。
需要说明的是,以上仅为一种示例,在其它逻辑处理流程中,确定列间距的步骤和确定元素布局的步骤,也可以在布局阶段(onLayout)执行,本申请实施例对此不做限制。
(3)GridView控件
示例性的,图18示出了GridView控件的一种逻辑处理流程。该逻辑处理流程可以包括以下三个阶段:测量阶段(如图中的onMeasure阶段)、布局阶段(如图中的onLayout阶段)、绘制阶段(如图中的onDraw阶段)。每个阶段可以通过相应的函数实现,比如,测量阶段的流程由onMeasure函数实现,布局阶段的流程由onLayout函数实现,绘制阶段的流程由onDraw函数实现。示例性的,在应用程序运行过程中,GridView控件对应的线程可以通过调用这些函数实现该控件调整内部元素的尺寸和布局以适应大屏显示的功能。
可选的,可以通过在原生GridView控件的onMeasure阶段增加本申请实施例提供的新增业务逻辑来实现本申请实施例中的GridView控件。相较于原生GridView控件,本申请实施例提供的GridView控件添加了以下逻辑处理能力:
在onMeasure阶段,添加了获取当前终端屏幕尺寸和当前应用程序的窗口尺寸,并以此来判断当前终端是否处于大屏显示模式的逻辑处理能力;还添加了识别控件内部元素的类型的逻辑处理能力;以及,确定内部元素缩放尺寸以及根据缩放后的尺寸确定元素布局(比如确定元素列数以及列间距)的逻辑处理能力。可选地,在执行onMeasure之前,已经获得应用程序处于大屏显示模式,则不必执行步骤1801。
如图18所示,GridView控件的逻辑处理流程可以包括如下步骤:
测量阶段(onMeasure):在1801,基于接收到的第一触发事件,判断终端是否处于大屏显示模式,若判断是大屏显示模式,则转入1802。在1802,识别内部元素的类型,在接下来的1803,根据内部元素的类型确定内部元素的缩放尺寸,比如基于元素的高度缩放比例,对元素进行等比缩放,并在接下来的1804,根据缩放后的元素尺寸(元素的宽度),以及大屏显示模式下该控件对应的显示区域宽度(比如包括大屏显示模式下的屏幕宽度,或者对于内层控件来说,根据该内层控件被其外层响应控件调整后的宽度),确定元素的列数以及列间距。若在1801中判断不是大屏显示模式,则结束本申请实施例对原生控件扩展的处理流程,进一步的,接下来可以按照原生控件既有的流程进行处理。
布局阶段(onLayout):在1805,根据元素列数以及列间距,得到该控件内部元素的布局。
在绘制阶段(onLayout),在1806,基于重新调整后的元素尺寸以及元素布局,通过调用onLayout函数进行界面绘制。
上述GridView控件的测量阶段(onMeasure)、布局阶段(onLayout)和绘制阶段(onMeasure)所涉及的具体实现方式,可以参照前述实施例,在此不再重复。
需要说明的是,以上仅为一种示例,在其它逻辑处理流程中,确定列间距的步骤和确定元素布局的步骤,也可在布局阶段(onLayout)执行,本申请实施例对此不做限制。
(4)ListView控件
示例性的,图19示出了ListView控件的一种逻辑处理流程。该逻辑处理流程可以包括设置适配器阶段(如图中的setAdapter)。该阶段可以通过setAdapter函数实现。示例性的,在应用程序运行过程中,ListView控件对应的线程可以通过调用setAdapter函数实现该控件调整内部元素的尺寸和布局以适应大屏显示的功能。
可选的,可以通过在原生ListView控件的setAdapter阶段增加本申请实施例提供的新增业务逻辑来实现本申请实施例中的ListView控件。相较于原生ListView控件,本申请实施例提供的ListView控件添加了以下逻辑处理能力:
在setAdapter阶段,添加了获取当前终端屏幕尺寸和当前应用程序的窗口尺寸,并以此来判断当前终端是否处于大屏显示模式的逻辑处理能力;还添加了识别控件内部元素的类型的逻辑处理能力;以及,确定内部元素缩放尺寸以及根据缩放后的尺寸确定元素布局(比如确定元素列数以及列间距)的逻辑处理能力。可选地,在执行setAdapter之前,已经获得应用程序处于大屏显示模式,则不必执行步骤1901。
如图19所示,ListView控件的逻辑处理流程可以包括如下步骤:
设置适配器阶段(setAdapter):在1901,基于接收到的第一触发事件,判断终端是否处于大屏显示模式,若判断是大屏显示模式,则转入1902。在1902,识别内部元素的类型,在接下来的1903,根据内部元素的类型确定内部元素的缩放尺寸,比如根据元素高度缩放比例对元素进行等比例缩放,并在接下来的1904,根据缩放后的元素尺寸(元素的宽度),以及大屏显示模式下该控件对应的显示区域宽度(比如包括大屏显示模式下的屏幕宽度,或者对于内层控件来说,根据该内层控件被其外层响应控件调整后的宽度),确定元素的列数以及列间距,得到调整后的元素布局,接下来在1905,按照常规流程处理,比如基于重新调整后的元素尺寸以及元素布局进行界面绘制。若在1901中判断不是大屏显示模式,则结束本申请实施例对原生控件扩展的处理流程,进一步的,接下来可以按照原生控件既有的流程进行处理。
上述ListView控件的设置适配器阶段(setAdapter)所涉及的具体实现方式,可以参照前述实施例,在此不再重复。
(5)ViewPager控件
示例性的,图20示出了ViewPager控件的一种逻辑处理流程。该逻辑处理流程可以包括以下三个阶段:测量阶段(如图中的onMeasure阶段)、布局阶段(如图中的onLayout阶段)、绘制阶段(如图中的onDraw阶段)。每个阶段可以通过相应的函数实现,比如,测量阶段的流程由onMeasure函数实现,布局阶段的流程由onLayout函数实现,绘制阶段的流程由onDraw函数实现。示例性的,在应用程序运行过程中,ViewPager控件对应的线程可以通过调用这些函数实现该控件调整内部元素的尺寸和布局以适应大屏显示的功能。
可选的,可以通过在原生ViewPager控件的onMeasure阶段增加本申请实施例提供的新增业务逻辑来实现本申请实施例中的ViewPager控件。相较于原生ViewPager控件,本申请实施例提供的ViewPager控件添加了以下逻辑处理能力:
在onMeasure阶段,添加了获取当前终端屏幕尺寸和当前应用程序的窗口尺寸,并以此来判断当前终端是否处于大屏显示模式的逻辑处理能力;还添加了确定内部元素缩放尺寸,以及根据缩放后的尺寸确定元素布局的逻辑处理能力。
如图20所示,ViewPager控件的逻辑处理流程可以包括如下步骤:
测量阶段(onMeasure):在2001,基于接收到的第一触发事件,判断终端是否处于大屏显示模式,若判断是大屏显示模式,则转入2002。在2002,识别内部元素的类型,在接下来的2003,根据内部元素的数量以及大屏显示模式下该控件对应的显示区域宽度(比如包括大屏显示模式下的屏幕宽度,或者对于内层控件来说,根据该内层控件被其外层响应控件调整后的宽度),确定内部元素的缩放尺寸(比如基于元素高度的缩放比例,对元素进行等比缩放),并在接下来的2004,根据内部元素的数量确定元素的布局,比如确定元素两侧的填充(padding)值,即,确定该元素两侧的上一个元素和下一个元素的大小;在接下来的2005,根据调整后的元素大小和间距重新测量ViewPager控件大小;在接下来的2006,根据内部元素的数量确定是否设置导航标识,如果需要设置导航标识,则根据2005的测量结果进行导航标识的设置。
示例性的,在ViewPager控件内部的元素的数量较多的情况下(比如三个或三个以上),可以设置导航标识,一方面通过导航标识可以指示ViewPager控件内部的元素数量较多,使得用户可以通过相应的屏幕触摸操作(比如滑动操作)在多个元素间进行选择,另一方面,还可以通过导航标识来指示当前显示的元素在ViewPager控件内的所有元素中的位置,比如当前显示的元素是第一个元素,还是最后一个元素,还是中间位置的元素。导航标识的呈现形式可以有多种,本申请实施例不做限制。示例性的,以在ViewPager控件内部的元素的数量为三个或三个以上为例,导航标识的一种呈现形式为排列为一行的三个圆点,如图22或图23中的导航点所示。该三个圆点中只能有一个圆点为实心圆点,其它两个为空心圆点。若中间位置的圆点为实心圆点,表示当前显示的元素为ViewPager控件中的中间位置的元素;若左侧位置的圆点为实心圆点,表示当前显示的元素为ViewPager控件中的第一个元素;若右侧位置的圆点为实心圆点,表示当前显示的元素为ViewPager控件中的最后一个元素。
若在2001中判断不是大屏显示模式,则结束本申请实施例对原生控件扩展的处理流程,进一步的,接下来可以按照原生控件既有的流程进行处理。可选地,在执行onMeasure之前,已经获得应用程序处于大屏显示模式,则不必执行步骤2001。
布局阶段(onLayout):在2007,确定控件内部元素的布局。
绘制阶段(onLayout),在2008,基于重新调整后的元素尺寸以及元素布局,通过调用onLayout函数进行界面绘制。
上述ViewPager控件的测量阶段(onMeasure)、布局阶段(onLayout)和绘制阶段(onMeasure)所涉及的具体实现方式,可以参照前述实施例,在此不再重复。
需要说明的是,以上仅为一种示例,在其它逻辑处理流程中,确定列间距的步骤和确定元素布局的步骤,也可以在布局阶段(onLayout)执行,本申请实施例对此不做限制。
(6)ImageView控件
示例性的,图21示出了ImageView控件的一种逻辑处理流程。该逻辑处理流程可以包括绘制阶段(如图中的onDraw阶段)。绘制阶段的流程由onDraw函数实现。示例性的,在应用程序运行过程中,ImageView控件对应的线程可以通过调用该函数实现该控件调整内部元素的尺寸和布局以适应大屏显示的功能。
可选的,可以通过在原生ImageView控件的onMeasure阶段增加本申请实施例提供的新增业务逻辑来实现本申请实施例中的ImageView控件。相较于原生ImageView控件,本申请实施例提供的ImageView控件添加了以下逻辑处理能力:
在onDraw阶段,添加了获取当前终端屏幕尺寸和当前应用程序的窗口尺寸,并以此来判断当前终端是否处于大屏显示模式的逻辑处理能力;还添加了确定内部元素缩放尺寸以及设置背景的处理能力,并根据缩放后的尺寸以及背景确定元素布局的逻辑处理能力。可选地,在执行onDraw之前,已经获得应用程序处于大屏显示模式,则不必执行步骤2101。
如图21所示,ImageView控件的逻辑处理流程可以包括如下步骤:
绘制阶段(onDraw):在2101,基于接收到的第一触发事件,判断终端是否处于大屏显示模式,若判断是大屏显示模式,则转入2102。在2102,根据大屏显示模式下该控件对应的显示区域高度(比如包括大屏显示模式下的屏幕宽度,或者对于内层控件来说,根据该内层控件被其外层响应控件调整后的宽度),确定该控件内部的图像的缩放尺寸;在接下来的2103,获取该图片的主色调,基于该主色调对该图片进行高斯模糊处理,根据高斯模糊处理后的图片绘制第一层位图(bitmap),该第一层bitmap的高度为确定出的缩放后的高度,宽度为该控件在大屏中的显示区域宽度;在接下来的2104,将缩放后的图片绘制成第二层位图(bitmap);在接下来的2105,将第二层bitmap居中并覆盖在第一层bitmap上。若在2101中判断不是大屏显示模式,则结束本申请实施例对原生控件扩展的处理流程,进一步的,接下来可以按照原生控件既有的流程进行处理。
上述ImageView控件的绘制阶段(onDraw)所涉及的具体实现方式,可以参照前述实施例,在此不再重复。
需要说明的是,上述流程中的2103为可选步骤,如果不存在步骤2103,则在2105中,将2104中绘制的位图居中布局。
根据本申请的上述一个或多个实施例,以折叠屏手机为例,图22和图23示例性的示出了采用本申请实施例前以及采用本申请实施例后的效果对比。
参见图22,图22左侧(1)为折叠屏手机在折叠状态下,手机屏幕上显示的应用程序的用户界面。该用户界面中包括翻页区域2210以及视频资源展示区域2211,翻页区域2210中包括导航标识2212。翻页区域2210由系统原生ViewPager控件实现,视频资源展示区域2211中包括多个视频资源的图片,视频资源展示区域2211由系统原生LinearLayout控件实现。
当该折叠屏手机从折叠态切换到展开态后,该用户界面可如图22右侧(2)所示。可以看出,在未使用本申请实施例的情况下(即使用系统原生控件的情况下),折叠屏手机从折叠态切换到展开态,在大屏中的用户界面,显示内容没有增加,该用户界面与大屏显示不相适应。
参见图23,图23左侧(1)为折叠屏手机在折叠状态下,手机屏幕上显示的应用程序的用户界面。该用户界面中包括翻页区域2310以及视频资源展示区域2311,翻页区域2310中包括导航标识2312。翻页区域2310由本申请实施例提供的ViewPager控件实现,视频资源展示区域2311中包括多个视频资源的图片,视频资源展示区域2311由本申请实施例提供的LinearLayout控件实现。
当该折叠屏手机从折叠态切换到展开态后,该用户界面可如图23右侧(2)所示。可以看出,相较于图22中的图片(2),在使用本申请实施例的情况下(即使用本申请实施例提供的控件的情况下),折叠屏手机从折叠态切换到展开态,在大屏中的用户界面中,翻页区域显示出当前图片以及上一页图片和下一页图片,在视频资源展示区域,视频资源图片被缩小,并按照流式方式重新布局,使得一行可以容纳更多的时频资源图片。可以看出,采用本申请实施例后,在手机从折叠态切换到展开态后,用户界面进行了重新布局,使得该用户界面与当前展开态下的大屏显示相适配。
基于相同的技术构思,本申请实施例还提供了一种终端,该终端可以实现本申请实施例中终端实现的功能和方法。
参见图26,为本申请实施例提供的终端的结构示意图。该终端可包括:检测模块2601、处理模块2602、显示模块2603。
检测模块2601用于检测第一触发事件,根据所述第一触发事件确定第一应用程序处于大屏显示模式。处理模块2602用于获取第一用户界面中控件内部的元素,确定所述元素的缩放尺寸,根据所述元素的缩放尺寸以及所述大屏显示模式下所述控件的尺寸,确定所述控件内部的元素布局;以及,根据所述元素的缩放尺寸、所述控件内部的元素的布局,绘制第二用户界面。显示模块2603用于显示所述第二用户界面。
上述检测模块2601检测第一触发事件以及根据所述第一触发事件确定第一应用程序处于大屏显示模式的具体实现方式,可以参见图8a、图8b所述流程中的相关内容。
上述处理模块2602对元素进行缩放处理以及布局处理的具体实现方式,可以参见图8a、图8b所述流程中的相关内容。
上述显示模块2603显示第二用户界面的具体实现方式,可以参见图8a、图8b所述流程中的相关内容。
本申请实施例还提供一种计算机可读存储介质,所述计算机可读存储介质用于存储计算机程序,该计算机程序被计算机执行时,所述计算机可以实现上述方法实施例提供的方法。
本申请实施例还提供一种计算机程序产品,所述计算机程序产品用于存储计算机程序,该计算机程序被计算机执行时,所述计算机可以实现上述方法实施例提供的方法。
本申请实施例还提供一种芯片,包括处理器,所述处理器与存储器耦合,用于调用所述存储器中的程序使得所述芯片实现上述方法实施例提供的方法。
本领域内的技术人员应明白,本申请的实施例可提供为方法、系统、或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
显然,本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的范围。这样,倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内,则本申请也意图包含这些改动和变型在内。

Claims (44)

1.一种显示方法,其特征在于,包括:
检测第一触发事件,根据所述第一触发事件确定第一应用程序处于大屏显示模式;
获取第一用户界面中控件内部的元素;
确定所述元素的缩放尺寸,根据所述元素的缩放尺寸以及所述大屏显示模式下所述控件的尺寸,确定所述控件内部的元素布局;
根据所述元素的缩放尺寸、所述控件内部的元素的布局,绘制第二用户界面,并显示所述第二用户界面。
2.如权利要求1所述的方法,其特征在于,所述大屏显示模式下所述控件的尺寸,包括所述大屏显示模式下所述控件的宽度;
所述大屏显示模式下所述控件的宽度,与所述大屏显示模式下的屏幕宽度关联;或者
所述大屏显示模式下所述控件的宽度,与所述大屏显示模式下所述第一应用程序的窗口宽度关联;或者
所述控件作为子控件嵌套于第一控件,所述大屏显示模式下所述控件的宽度与所述第一控件在所述大屏显示模式下确定出的所述子控件的缩放宽度关联。
3.如权利要求1-2任一项所述的方法,其特征在于,若所述第一用户界面中包括第一弹窗,则所述方法还包括:
获取所述第一弹窗中控件内部的元素,确定所述元素的缩放尺寸,根据所述元素的缩放尺寸确定所述第一弹窗中控件的缩放尺寸,根据所述第一弹窗中控件的缩放尺寸确定所述第一弹窗的缩放尺寸;
基于所述第一弹窗的缩放尺寸,确定所述第一弹窗被缩放后的位置;
根据所述第一弹窗的尺寸以及所述第一弹窗被缩放后的位置,绘制第二弹窗,所述第二弹窗包括在所述第二用户界面中,所述第二弹窗中包括基于所述第一弹窗中控件内部的元素的缩放尺寸缩放后的元素。
4.如权利要求1-3任一项所述的方法,其特征在于,所述确定所述元素的缩放尺寸,包括:
获取所述元素的类型;
根据所述元素的类型,获取与所述元素的类型对应的缩放策略;
根据所述控件在所述大屏显示模式下的尺寸以及所述缩放策略,确定所述元素的缩放尺寸。
5.如权利要求4所述的方法,其特征在于,所述元素的类型为文字类型和图片类型中的一种;
若所述元素类型为图片类型,则所述图片类型为多个子类型中的一种,所述多个子类型分别与图片的宽高比关联。
6.如权利要求1-5任一项所述的方法,其特征在于,所述元素缩放前后的宽度缩放比,与所述元素缩放前后的高度缩放比相等。
7.如权利要求1-6任一项所述的方法,其特征在于,若所述控件为视图翻页控件,则所述确定所述元素的缩放尺寸,包括:
获取所述视图翻页控件内部的元素的数量;
根据所述视图翻页控件内部的元素的数量、所述大屏显示模式下所述视图翻页控件的尺寸,以及所述视图翻页控件在所述大屏显示模式下的显示效果,确定在所述第二用户界面中所述视图翻页控件内的元素数量以及每个元素的缩放尺寸。
8.如权利要求1-7任一项所述的方法,其特征在于,所述确定所述元素的缩放尺寸之前,所述方法还包括:
若所述元素的尺寸小于或等于设定阈值,和/或所述元素不是指定类型的元素,则放弃对所述元素进行缩放。
9.如权利要求1-7任一项所述的方法,其特征在于,所述确定所述元素的缩放尺寸,包括:
若所述元素的尺寸小于或等于设定阈值,则确定放大所述元素,并根据所述设定阈值确定所述元素的缩放尺寸,所述元素按照所述缩放尺寸被放大后的尺寸不小于所述设定阈值。
10.如权利要求1-9任一项所述的方法,其特征在于,所述确定所述元素的缩放尺寸之后,所述方法还包括:
若所述元素的缩放尺寸小于或等于设定阈值,则放弃对所述元素进行缩放;或者
若所述元素的缩放尺寸小于或等于设定阈值,则根据所述设定阈值确定所述元素的缩放尺寸,所述元素按照所述缩放尺寸缩放后的尺寸不小于所述设定阈值。
11.如权利要求1-10任一项所述的方法,其特征在于,所述元素的缩放尺寸小于所述元素在所述第一用户界面中的尺寸;
所述第二用户界面中的元素的数量大于所述第一用户界面中的元素的数量。
12.如权利要求1-11任一项所述的方法,其特征在于,所述确定第一应用程序处于大屏显示模式,包括:
获取所述第一应用程序的窗口宽度;
若所述窗口宽度大于或等于设定阈值,则确定所述第一应用程序处于大屏显示模式。
13.如权利要求1-12任一项所述的方法,其特征在于,所述第一触发事件,包括:
所述终端从折叠态切换到展开态;或者
所述终端从竖屏状态切换到横屏状态;或者
所述终端的屏幕全部被点亮;或者
所述终端的屏幕被投屏到大屏幕;或者
所述第一应用程序处于所述大屏显示模式时,所述第一应用程序的数据发生更新;或者
所述第一应用程序处于所述大屏显示模式时,检测到用户的屏幕操作事件;或者
检测到在所述终端处于大屏状态下取消多窗口显示模式,所述第一应用程序被全屏显示;其中,在所述多窗口显示模式下,所述终端的屏幕上显示至少两个窗口,所述至少两个窗口中的一个窗口用于显示所述第一应用程序。
14.如权利要求1-13任一项所述的方法,其特征在于,所述根据所述第一触发事件确定第一应用程序处于大屏显示模式之前,所述方法还包括:
确定所述第一应用程序是否被允许在大屏显示模式下进行用户界面调整;
所述根据所述第一触发事件确定第一应用程序处于大屏显示模式,包括:
若所述第一应用程序被允许在大屏显示模式下进行用户界面调整,则确定所述第一应用程序是否处于大屏显示模式。
15.如权利要求1-14任一项所述的方法,其特征在于,所述控件包括线性布局控件;
所述线性布局控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放尺寸以及所述大屏显示模式下所述线性布局控件的尺寸,确定所述内部元素的线性布局。
16.如权利要求1-14任一项所述的方法,其特征在于,所述控件包括循环视图控件;
所述循环视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放宽度以及所述大屏显示模式下所述循环视图控件的宽度,确定所述内部元素的列数以及列间距。
17.如权利要求1-14任一项所述的方法,其特征在于,所述控件包括列表视图控件;
列表视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放尺寸以及所述大屏显示模式下所述列表视图控件的宽度,确定所述内部元素的列数以及列间距。
18.如权利要求1-14任一项所述的方法,其特征在于,所述控件包括网格视图控件;
所述网格视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放尺寸以及所述大屏显示模式下所述网格视图控件的宽度,确定所述内部元素的列数以及列间距。
19.如权利要求1-14任一项所述的方法,其特征在于,所述控件包括视图翻页控件;
所述视图翻页控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的数量、所述内部元素的缩放尺寸、所述大屏显示模式下所述视图翻页控件的尺寸以及显示效果,确定所述内部元素的布局。
20.如权利要求1-14任一项所述的方法,其特征在于,所述控件包括图像视图控件;
所述图像视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据缩放后的所述内部元素调整控件高度,根据缩放后的所述内部元素确定所述图像视图控件内部元素的布局。
21.一种终端,其特征在于,包括:
检测模块,用于检测第一触发事件,根据所述第一触发事件确定第一应用程序处于大屏显示模式;
处理模块,用于获取第一用户界面中控件内部的元素,确定所述元素的缩放尺寸,根据所述元素的缩放尺寸以及所述大屏显示模式下所述控件的尺寸,确定所述控件内部的元素布局;以及,根据所述元素的缩放尺寸、所述控件内部的元素的布局,绘制第二用户界面;
显示模块,用于显示所述第二用户界面。
22.如权利要求21所述的终端,其特征在于,所述大屏显示模式下所述控件的尺寸,包括所述大屏显示模式下所述控件的宽度;
所述大屏显示模式下所述控件的宽度,与所述大屏显示模式下的屏幕宽度关联;或者
所述大屏显示模式下所述控件的宽度,与所述大屏显示模式下所述第一应用程序的窗口宽度关联;或者
所述控件作为子控件嵌套于第一控件,所述大屏显示模式下所述控件的宽度与所述第一控件在所述大屏显示模式下确定出的所述子控件的缩放宽度关联。
23.如权利要求21-22任一项所述的终端,其特征在于,若所述第一用户界面中包括第一弹窗,则所述处理模块还用于:
获取所述第一弹窗中控件内部的元素,确定所述元素的缩放尺寸,根据所述元素的缩放尺寸确定所述第一弹窗中控件的缩放尺寸,根据所述第一弹窗中控件的缩放尺寸确定所述第一弹窗的缩放尺寸;
基于所述第一弹窗的缩放尺寸,确定所述第一弹窗被缩放后的位置;
根据所述第一弹窗的尺寸以及所述第一弹窗被缩放后的位置,绘制第二弹窗,所述第二弹窗包括在所述第二用户界面中,所述第二弹窗中包括基于所述第一弹窗中控件内部的元素的缩放尺寸缩放后的元素。
24.如权利要求21-23任一项所述的终端,其特征在于,所述处理模块,具体用于:
获取所述元素的类型;
根据所述元素的类型,获取与所述元素的类型对应的缩放策略;
根据所述控件在所述大屏显示模式下的尺寸以及所述缩放策略,确定所述元素的缩放尺寸。
25.如权利要求24所述的终端,其特征在于,所述元素的类型为文字类型和图片类型中的一种;
若所述元素类型为图片类型,则所述图片类型为多个子类型中的一种,所述多个子类型分别与图片的宽高比关联。
26.如权利要求21-25任一项所述的终端,其特征在于,所述元素缩放前后的宽度缩放比,与所述元素缩放前后的高度缩放比相等。
27.如权利要求21-26任一项所述的终端,其特征在于,若所述控件为视图翻页控件,则所述处理模块,具体用于:
获取所述视图翻页控件内部的元素的数量;
根据所述视图翻页控件内部的元素的数量、所述大屏显示模式下所述视图翻页控件的尺寸,以及所述视图翻页控件在所述大屏显示模式下的显示效果,确定在所述第二用户界面中所述视图翻页控件内的元素数量以及每个元素的缩放尺寸。
28.如权利要求21-27任一项所述的终端,其特征在于,所述处理模块,还用于:
若所述元素的尺寸小于或等于设定阈值,和/或所述元素不是指定类型的元素,则放弃对所述元素进行缩放。
29.如权利要求21-27任一项所述的终端,其特征在于,所述处理模块,具体用于:
若所述元素的尺寸小于或等于设定阈值,则确定放大所述元素,并根据所述设定阈值确定所述元素的缩放尺寸,所述元素按照所述缩放尺寸被放大后的尺寸不小于所述设定阈值。
30.如权利要求21-29任一项所述的终端,其特征在于,所述处理模块,还用于:
若所述元素的缩放尺寸小于或等于设定阈值,则放弃对所述元素进行缩放;或者
若所述元素的缩放尺寸小于或等于设定阈值,则根据所述设定阈值确定所述元素的缩放尺寸,所述元素按照所述缩放尺寸缩放后的尺寸不小于所述设定阈值。
31.如权利要求21-30任一项所述的终端,其特征在于,所述元素的缩放尺寸小于所述元素在所述第一用户界面中的尺寸;
所述第二用户界面中的元素的数量大于所述第一用户界面中的元素的数量。
32.如权利要求21-31任一项所述的终端,其特征在于,所述检测模块,具体用于:
获取所述第一应用程序的窗口宽度;
若所述窗口宽度大于或等于设定阈值,则确定所述第一应用程序处于大屏显示模式。
33.如权利要求21-32任一项所述的终端,其特征在于,所述第一触发事件,包括:
所述终端从折叠态切换到展开态;或者
所述终端从竖屏状态切换到横屏状态;或者
所述终端的屏幕全部被点亮;或者
所述终端的屏幕被投屏到大屏幕;或者
所述第一应用程序处于所述大屏显示模式时,所述第一应用程序的数据发生更新;或者
所述第一应用程序处于所述大屏显示模式时,检测到用户的屏幕操作事件;或者
检测到在所述终端处于大屏状态下取消多窗口显示模式,所述第一应用程序被全屏显示;其中,在所述多窗口显示模式下,所述终端的屏幕上显示至少两个窗口,所述至少两个窗口中的一个窗口用于显示所述第一应用程序。
34.如权利要求21-33任一项所述的终端,其特征在于,所述处理模块,还用于:
根据所述第一触发事件确定第一应用程序处于大屏显示模式之前,确定所述第一应用程序是否被允许在大屏显示模式下进行用户界面调整;
若所述第一应用程序被允许在大屏显示模式下进行用户界面调整,则确定所述第一应用程序是否处于大屏显示模式。
35.如权利要求21-34任一项所述的终端,其特征在于,所述控件包括线性布局控件;
所述线性布局控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放尺寸以及所述大屏显示模式下所述线性布局控件的尺寸,确定所述内部元素的线性布局。
36.如权利要求21-34任一项所述的终端,其特征在于,所述控件包括循环视图控件;
所述循环视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放宽度以及所述大屏显示模式下所述循环视图控件的宽度,确定所述内部元素的列数以及列间距。
37.如权利要求21-34任一项所述的终端,其特征在于,所述控件包括列表视图控件;
列表视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放尺寸以及所述大屏显示模式下所述列表视图控件的宽度,确定所述内部元素的列数以及列间距。
38.如权利要求21-34任一项所述的终端,其特征在于,所述控件包括网格视图控件;
所述网格视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的缩放尺寸以及所述大屏显示模式下所述网格视图控件的宽度,确定所述内部元素的列数以及列间距。
39.如权利要求21-34任一项所述的终端,其特征在于,所述控件包括视图翻页控件;
所述视图翻页控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据所述内部元素的数量、所述内部元素的缩放尺寸、所述大屏显示模式下所述视图翻页控件的尺寸以及显示效果,确定所述内部元素的布局。
40.如权利要求21-34任一项所述的终端,其特征在于,所述控件包括图像视图控件;
所述图像视图控件,用于根据所述第一触发事件确定所述第一应用程序处于大屏显示模式时,确定内部元素的缩放尺寸,根据缩放后的所述内部元素调整控件高度,根据缩放后的所述内部元素确定所述图像视图控件内部元素的布局。
41.一种通信装置,其特征在于,包括:一个或多个处理器;所述一个或多个存储器存储有一个或多个计算机程序,所述一个或多个计算机程序包括指令,当所述指令被所述一个或多个处理器执行时,使得所述通信装置执行如权利要求1-20中任意一项所述的方法。
42.一种计算机可读存储介质,其特征在于,包括计算机程序,当所述计算机程序在电子设备上运行时,使得所述电子设备执行如权利要求1-20中任意一项所述的方法。
43.一种计算机程序产品,其特征在于,当其在电子设备上运行时,使得所述电子设备执行如权利要求1-20中任意一项所述的方法。
44.一种芯片系统,其特征在于,包括:存储器,用于存储计算机程序;处理器;当处理器从存储器中调用并运行计算机程序后,使得安装有该芯片系统的电子设备执行如权利要求1-20中任意一项所述的方法。
CN202210461284.9A 2022-04-28 2022-04-28 一种显示方法、装置及存储介质 Pending CN117008752A (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN202210461284.9A CN117008752A (zh) 2022-04-28 2022-04-28 一种显示方法、装置及存储介质
PCT/CN2023/089154 WO2023207694A1 (zh) 2022-04-28 2023-04-19 一种显示方法、装置及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210461284.9A CN117008752A (zh) 2022-04-28 2022-04-28 一种显示方法、装置及存储介质

Publications (1)

Publication Number Publication Date
CN117008752A true CN117008752A (zh) 2023-11-07

Family

ID=88517664

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210461284.9A Pending CN117008752A (zh) 2022-04-28 2022-04-28 一种显示方法、装置及存储介质

Country Status (2)

Country Link
CN (1) CN117008752A (zh)
WO (1) WO2023207694A1 (zh)

Family Cites Families (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TWI366130B (en) * 2008-10-17 2012-06-11 Htc Corp Method for adjusting page displaying manner, mobile electronic device, and computer program product using the method thereof
CN103744595B (zh) * 2013-12-30 2017-03-22 广州华多网络科技有限公司 自适应显示方法和装置
CN103927143B (zh) * 2014-04-04 2017-04-19 福建星网视易信息系统有限公司 一种基于屏幕分辨率自适应调整界面布局的方法及装置
CN109783181B (zh) * 2019-01-31 2019-12-20 掌阅科技股份有限公司 屏幕适配显示方法、电子设备及计算机存储介质
CN110554816A (zh) * 2019-07-25 2019-12-10 华为技术有限公司 一种界面生成方法及设备
CN110597510B (zh) * 2019-08-09 2021-08-20 华为技术有限公司 一种界面的动态布局方法及设备
CN114089932B (zh) * 2020-06-29 2023-11-17 华为技术有限公司 多屏显示方法、装置、终端设备及存储介质
CN114077429A (zh) * 2020-08-18 2022-02-22 华为技术有限公司 一种显示界面的布局方法及电子设备
CN114327701A (zh) * 2020-09-29 2022-04-12 华为技术有限公司 一种应用界面的布局方法及电子设备
CN114356258A (zh) * 2020-09-30 2022-04-15 华为技术有限公司 电子设备及其投屏方法和介质
CN113268303A (zh) * 2021-05-27 2021-08-17 北京大米科技有限公司 界面元素配置方法、装置、存储介质及电子设备

Also Published As

Publication number Publication date
WO2023207694A1 (zh) 2023-11-02

Similar Documents

Publication Publication Date Title
WO2021027747A1 (zh) 一种界面显示方法及设备
US20210048939A1 (en) Icon display method, device, and terminal
US20220269515A1 (en) Dynamic Interface Layout Method and Device
WO2021047251A1 (zh) 显示方法及电子设备
WO2022022177A1 (zh) 一种显示方法及电子设备
CN114115769A (zh) 一种显示方法及电子设备
CN114253491A (zh) 显示方法及电子设备
CN113038141A (zh) 视频帧处理方法及电子设备
CN117008752A (zh) 一种显示方法、装置及存储介质
CN113360122B (zh) 移动终端及其文本显示方法
CN112799557B (zh) 一种水墨屏显示控制方法、终端及计算机可读存储介质
CN116700655B (zh) 一种界面显示方法及电子设备
CN116347229B (zh) 图像拍摄的方法及电子设备
WO2024066990A1 (zh) 屏幕壁纸的显示方法及电子设备
CN114764357B (zh) 界面显示过程中的插帧方法及终端设备
CN116578375B (zh) 卡片显示方法及终端设备
CN116708931B (zh) 图像处理方法及电子设备
CN116672707B (zh) 生成游戏预测帧的方法和电子设备
WO2024036998A1 (zh) 显示方法、存储介质及电子设备
CN113179362B (zh) 电子设备及其图像显示方法
WO2023241282A1 (zh) 壁纸设置方法和电子设备
US20240086035A1 (en) Display Method and Electronic Device
CN117519858A (zh) 一种应用显示方法及电子设备
CN117389437A (zh) 一种多窗口显示方法及设备
CN117492609A (zh) 一种显示方法、可读存储介质、程序产品及电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination