CN111651109A - 显示界面布局调整方法、装置、电子设备及存储介质 - Google Patents

显示界面布局调整方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN111651109A
CN111651109A CN202010393374.XA CN202010393374A CN111651109A CN 111651109 A CN111651109 A CN 111651109A CN 202010393374 A CN202010393374 A CN 202010393374A CN 111651109 A CN111651109 A CN 111651109A
Authority
CN
China
Prior art keywords
display area
content
function key
display interface
size
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
CN202010393374.XA
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.)
Guangzhou Shiyuan Electronics Thecnology Co Ltd
Guangzhou Shikun Electronic Technology Co Ltd
Original Assignee
Guangzhou Shiyuan Electronics Thecnology Co Ltd
Guangzhou Shikun Electronic Technology 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 Guangzhou Shiyuan Electronics Thecnology Co Ltd, Guangzhou Shikun Electronic Technology Co Ltd filed Critical Guangzhou Shiyuan Electronics Thecnology Co Ltd
Priority to CN202010393374.XA priority Critical patent/CN111651109A/zh
Publication of CN111651109A publication Critical patent/CN111651109A/zh
Pending legal-status Critical Current

Links

Images

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/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
    • 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
    • G06F3/0488Interaction 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 using a touch-screen or digitiser, e.g. input of commands through traced gestures

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供一种显示界面布局调整方法、装置、电子设备及存储介质。其中,所述方法包括:根据显示屏的尺寸确定目标显示界面中内容显示区域的尺寸配置信息;基于尺寸配置信息在目标显示界面中展示功能按键和内容显示区域的内容,其中,内容显示区域设置于第一图层,功能按键设置于第二图层,第二图层叠加在第一图层之上,功能按键用于触发与内容显示区域的内容相关的功能。可以实现目标显示界面的内容显示区域的尺寸的自动适配,无需对内容显示区域与功能按键之间的布局进行调整,减少开发时的人力物力资源。

Description

显示界面布局调整方法、装置、电子设备及存储介质
技术领域
本申请涉及电子技术领域,尤其涉及一种显示界面布局调整方法、装置、电子设备及存储介质。
背景技术
在相关技术中,显示屏所显示的部分显示界面包括内容显示区域和功能按键,内容显示区域与功能按键独立分布在显示界面内,功能按键可以在接收到触摸事件时,触发与内容显示区域的内容相关的功能。例如,智能油烟机上设置的显示屏,其所显示的显示界面中,内容显示区域可以显示烹饪菜谱的文字、图片或者视频,功能按键可以在接收到用户的触摸操作来控制烹饪菜谱的显示进度或者播放进度。
然而,在开发过程中,针对不同尺寸、形状的显示屏,不仅需要对显示界面的内容显示区域的尺寸大小进行人工调整,还需要对内容显示区域与功能按键之间的布局结构进行人工调整,调整的过程繁琐,需要耗费大量的人力物力资源。
发明内容
为克服相关技术中存在的问题,本申请提供了一种显示界面布局调整方法、装置、电子设备及存储介质。
根据本申请实施例的第一方面,提供一种显示界面布局调整方法,所述方法包括:
根据显示屏的尺寸确定目标显示界面中内容显示区域的尺寸配置信息;
基于所述尺寸配置信息在所述目标显示界面中展示功能按键和所述内容显示区域的内容,其中,所述功能按键设置于所述内容显示区域所在第一图层上叠加的第二图层,用于触发与所述内容显示区域所显示的内容相关的功能。
根据本申请实施例的第二方面,提供一种显示界面布局调整装置,所述装置包括:
确定模块,被配置为根据显示屏的尺寸确定目标显示界面中内容显示区域的尺寸配置信息;
显示模块,被配置为基于所述尺寸配置信息在所述目标显示界面中展示功能按键和所述内容显示区域的内容,其中,所述内容显示区域设置于第一图层,所述功能按键设置于第二图层,所述第二图层叠加在所述第一图层之上,所述功能按键用于触发与所述内容显示区域所显示的内容相关的功能。
根据本申请实施例的第三方面,提供一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述程序时实现以下步骤:
根据显示屏的尺寸确定目标显示界面中内容显示区域的尺寸配置信息;
基于所述尺寸配置信息在所述目标显示界面中展示功能按键和所述内容显示区域的内容,其中,所述内容显示区域设置于第一图层,所述功能按键设置于第二图层,所述第二图层叠加在所述第一图层之上,所述功能按键用于触发与所述内容显示区域所显示的内容相关的功能。
根据本申请实施例的第四方面,提供一种计算机可读存储介质,其上存储有计算机程序,所述程序被处理器执行时实现以下步骤:
根据显示屏的尺寸确定目标显示界面中内容显示区域的尺寸配置信息;
基于所述尺寸配置信息在所述目标显示界面中展示功能按键和所述内容显示区域的内容,其中,所述内容显示区域设置于第一图层,所述功能按键设置于第二图层,所述第二图层叠加在所述第一图层之上,所述功能按键用于触发与所述内容显示区域所显示的内容相关的功能。
本申请的实施例提供的技术方案可以包括以下有益效果:
本技术方案中,通过获取显示屏的尺寸大小确定目标显示界面中内容显示区域的尺寸配置信息,可以实现目标显示界面的内容显示区域的尺寸的自动适配,则无需对不同尺寸的显示屏单独进行调整,能够有效减少开发时的人力物力资源;并且,由于功能按键所在的图层叠加在内容显示区域所在的图层之上,无需对内容显示区域与功能按键之间的布局进行调整,也可以扩大内容显示区域的尺寸,以使内容显示区域所显示的内容可以更加丰富,从而提高用户体验。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本申请。
附图说明
此处的附图被并入说明书中并构成本申请的一部分,示出了符合本申请的实施例,并与说明书一起用于解释本申请的原理。
图1(a)至1(c)为相关技术中不同尺寸的显示屏的内容显示区域和功能按键的布局示意图。
图2为本申请一示例性实施例示出的一种显示界面布局调整方法的流程图。
图3(a)至3(c)为本申请一示例性实施例示出的不同尺寸的显示屏的内容显示区域和功能按键的布局示意图。
图4(a)至4(b)为本申请一示例性实施例示出的显示界面布局的应用场景图。
图5(a)至5(b)为本申请另一示例性实施例示出的显示界面布局的应用场景图。
图6为本申请一示例性实施例示出的一种显示界面布局调整装置的结构框图。
图7为本申请一示例性实施例示出的一种电子设备的结构框图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
这里将详细地对示例性实施例进行说明,其示例表示在附图中。下面的描述涉及附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
在本申请使用的术语是仅仅出于描述特定实施例的目的,而非旨在限制本申请。在本申请和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式,除非上下文清楚地表示其他含义。还应当理解,本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解,尽管在本申请可能采用术语第一、第二、第三等来描述各种信息,但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如,在不脱离本申请范围的情况下,第一信息也可以被称为第二信息,类似地,第二信息也可以被称为第一信息。取决于语境,如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
在相关技术中,显示屏所显示的部分显示界面包括内容显示区域和功能按键,内容显示区域与功能按键独立分布在显示界面内,功能按键可以在接收到触摸事件时,触发与内容显示区域的内容相关的功能。例如,智能油烟机上设置的显示屏,其所显示的显示界面中,内容显示区域可以显示烹饪菜谱的文字、图片或者视频,功能按键可以在接收到用户的触摸操作来控制烹饪菜谱的显示进度或者播放进度。
然而,在开发过程中,针对不同尺寸、形状的显示屏,不仅需要对显示界面的内容显示区域的尺寸大小进行人工调整,还需要对内容显示区域与功能按键之间的布局结构进行人工调整,调整的过程繁琐,需要耗费大量的人力物力资源。图1(a)至1(c)为相关技术中不同尺寸的显示屏的内容显示区域和功能按键的布局示意图。如图1(a)至1(c)所示,分别展示了三种尺寸的显示屏的显示界面中内容显示区域和功能按键的尺寸大小和布局。
可以看出,针对不同尺寸的显示屏,其显示界面中的内容显示区域的尺寸大小、内容显示区域和功能按键的布局也会有所调整。例如,图1(a)中尺寸较小的显示屏,其显示界面中的功能按键设置在内容显示区域的短边右侧,功能按键的尺寸、功能按键之间的间距也会调整得较小;又如,图1(b)中尺寸中等的显示屏,其显示界面中的功能按键设置在内容显示区域的长边下方,功能按键的尺寸、功能按键之间的间距相应调整得较大;再如,图1(c)中尺寸较大的显示屏,其显示界面中的功能按键设置在内容显示区域的短边下方,功能按键的尺寸、功能按键之间的间距相应调整得较小。在开发人员针对不同显示屏的设备开发应用时,需要在具体的显示界面的布局文件中对这些配置信息进行调整。
本申请为了解决上述问题,提供了一种显示界面布局调整方法、装置、电子设备及存储介质。下面结合附图,对本申请的显示界面布局调整方法、装置、电子设备及存储介质进行详细说明。在不冲突的情况下,下述的实施例及实施方式中的特征可以相互组合。
本申请提供了一种显示界面布局调整方法,可以应用于具有触摸显示屏的电子设备,例如,可以是手机、平板电脑等手持设备,也可以是油烟机、烤箱、微波炉、电磁炉等等智能家电设备,本申请不作具体的限定。图2为本申请一示例性实施例示出的一种显示界面布局调整方法的流程图。如图2所示,该显示界面布局调整方法包括以下步骤201至202:
步骤201,根据显示屏的尺寸确定目标显示界面中内容显示区域的尺寸配置信息。
步骤202,基于所述尺寸配置信息在所述目标显示界面中展示功能按键和所述内容显示区域的内容,其中,所述内容显示区域设置于第一图层,所述功能按键设置于第二图层,所述第二图层叠加在所述第一图层之上,所述功能按键用于触发与所述内容显示区域所显示的内容相关的功能。
显示屏可以显示至少一个显示界面,显示界面可以是仅包括内容显示区域的界面,其中,内容显示区域可以显示应用图标、文字、图片、视频等数据;显示界面还可以是包括内容显示区域和功能按键的界面。本实施例中的目标显示界面是指包括内容显示区域和功能按键的界面,与仅包括内容显示区域的界面不同的是,目标显示界面中内容显示区域所显示的内容可以对应有功能,并且可以通过功能按键触发对应的功能。例如,可以是针对视频的播放功能,如暂停播放、停止播放、播放上集、播放下集等功能。又如,可以是针对烤箱加热的功能,如暂停加热、停止加热等功能。应该理解的是,目标显示界面可以包括一个功能按键,也可以包括不止一个功能按键,每个按键可以触发不同的功能,本申请对功能按键的数量不作具体限定。
在本实施例中,可以是在显示屏跳转到目标显示界面时,根据该显示屏的尺寸大小确定目标显示界面的内容显示区域的尺寸配置信息。尺寸配置信息至少包括内容显示区域的尺寸大小,如内容显示区域的宽和高,还可以包括内容显示区域所显示内容的显示大小、显示比例等等。根据所确定的内容显示区域的尺寸配置信息,在目标显示界面中展示内容显示区域的内容,并且,在内容显示区域上可以悬浮显示功能按键,示例的,在内容显示区域所在的第一图层上叠加有一个第二图层,第二图层用于展示功能按键。
图3(a)至3(c)为本申请一示例性实施例示出的不同尺寸的显示屏的内容显示区域和功能按键的布局示意图,其分别是对图1(a)至1(c)所示的三种不同尺寸的显示屏应用本申请的显示界面布局调整方法后所改进的布局示意图。
根据图3(a)至3(c)可以理解,内容显示区域和功能按键处于不同的图层,并且它们所在的图层是叠加的两个图层,功能按键所在的图层叠加在内容显示区域所在的图层之上,那么,在视觉上功能按键设置于内容显示区域内,但实际是功能按键“悬浮”于内容显示区域之上,由此无需将目标显示界面分为独立的两个区域,一个用于布局内容显示区域,一个用于布局功能按键,而可以直接将整个目标显示界面作为内容显示区域。
上述实施例的显示界面布局调整方法,通过获取显示屏的尺寸大小确定目标显示界面中内容显示区域的尺寸配置信息,可以实现目标显示界面的内容显示区域的尺寸的自动适配,则无需对不同尺寸的显示屏单独进行调整,能够有效减少开发时的人力物力资源;并且,由于功能按键所在的图层叠加在内容显示区域所在的图层之上,无需对内容显示区域与功能按键之间的布局进行调整,也可以扩大内容显示区域的尺寸,以使内容显示区域所显示的内容可以更加丰富,从而提高用户体验。
在本申请一示例性实施例中,所述第二图层可以为透明图层。这样,可以避免第二图层阻挡第一图层的内容显示区域的展示。功能按键发生触摸事件并被监听到时,可以触发响应对应的功能。触摸事件可以是用户利用手指、触控笔等在显示屏上进行点击操作所产生的触摸事件,点击操作包括但不限于单击操作、双击操作。功能按键的背景效果可以是非透明效果,以便能够清楚识别。功能按键上可以显示有字符或者图案,用于标识按键所对应的功能。
为了减小功能按键遮挡内容显示区域的内容的影响,在本申请一示例性实施例中,所述功能按键的背景效果可以是半透明效果。在本申请另一示例性实施例中,所述功能按键的背景效果可以是高斯模糊效果。这样,可以透过功能按键的背景显示部分内容显示区域的内容,避免完全阻挡,以提高用户体验。
显示屏的尺寸除了作为确定内容显示区域的尺寸配置信息的依据之外,还可以作为确定功能按键的尺寸配置信息。在本申请一示例性实施例中,在所述目标显示界面中展示功能按键之前,所述方法还包括:根据显示屏的尺寸确定所述功能按键的尺寸配置信息。功能按键的尺寸配置信息可以包括功能按键的尺寸大小、功能按键上显示字体的大小。
应该理解的是,根据显示屏的尺寸确定所述功能按键的尺寸配置信息可以与上述的步骤201同时执行,也可以不同时执行,本申请不作限定。
在本申请一示例性实施例中,显示界面的布局信息可以存储于布局文件中,即布局文件存储有与加载显示界面的布局相关的信息,布局信息可以报考内容显示区域的尺寸配置信息、功能按键的尺寸配置信息等等。显示屏尺寸不同的设备共享同一份布局文件,所述内容显示区域的尺寸配置信息和所述功能按键的尺寸配置信息由所述布局文件中的屏幕适配策略确定。这样,针对具有不同尺寸显示屏的不同设备,无需采用多份布局文件对显示界面的布局信息作具体的配置,通过设定显示界面的布局信息根据屏幕适配策略确定,只需采用一份布局文件即可对不同尺寸的显示屏进行自动适配,从而减少开发的人力物力资源。
在本申请一示例性实施例中,屏幕适配策略可以包括内容显示区域的尺寸与显示屏的尺寸相同,即内容显示区域占满整个显示屏;屏幕适配策略还可以包括功能按键的尺寸根据显示屏的尺寸按设定比例缩放,以根据显示屏的尺寸调整功能按键的大小,具体效果可以再次参见图3(a)至3(c),可以避免功能按键在小尺寸的显示屏中展示的尺寸过大,或者在大尺寸的显示屏中展示的尺寸过小。
为了避免功能按键持续阻挡内容显示区域某个特定位置所显示的内容,在本申请一示例性实施例中,所述功能按键可以设置为可移动的效果,具体可以再次参见图3(a)至3(c)。应该理解的是,功能按键在第二图层上移动,功能按键的移动不会影响到内容显示区域所显示的内容的位置产生变化,但随着功能按键的移动,可以避免固定在某个位置时持续阻挡内容显示区域对应的该位置所显示的内容。例如,所述功能按键可以在设定范围内沿指定方向移动;又如,所述功能按键可以沿任意方向随机移动。这样,不仅能够避免持续阻挡内容显示区域某个特定位置所显示的内容,还使得功能按键具有灵活性,视觉上具有灵动的效果,能够提高用户体验。
为了避免造成对内容显示区域所显示主要内容的阻挡,在本申请一示例性实施例中,还根据显示屏的尺寸确定功能按键的移动范围。例如,针对图3(a)和图3(b)所示的显示屏,其横向的长度值大于纵向的长度值,可以确定功能按键的移动范围为横向方向的两端;又如,针对图3(c)所示的显示屏,其横向的长度值小于纵向的长度值,可以确定功能按键的移动范围为纵向方向的两端。这样,可以减少对内容显示区域中部展示的主要内容的阻挡。
需要说明的是,当监听到所述功能按键上发生触摸事件时,可以触发功能按键所对应的功能。在本申请一示例性实施例中,当监听到所述功能按键上发生触摸事件时,停止所述功能按键移动。这样,能够向用户反馈已接收到触摸事件,提高交互的识别性。在本申请一示例性实施例中,所述功能按键停止移动的时长与所述触摸事件的时长相同。也就是说,当用户持续点击该功能按键时,功能按键持续暂停移动,当用户松手时,功能按键恢复移动。这样,可以提高显示屏与用户的交互性。
应该理解的是,所述触摸事件的时长与用户的操作有关,例如,用户利用手指或者触控笔在显示屏上点击并持续停留,其停留的时长与触摸事件的时长相对应。
在本申请一示例性实施例中,当所述功能按键的位置与所述内容显示区域的边缘位置重合时,调整所述功能按键沿远离所述内容显示区域的边缘的方向移动。这样,可以避免功能按键“消失”,以使用户无法使用到功能按键对应的功能。从用户的视觉角度上看,当功能按键的边缘触碰到内容显示区域的边缘时,功能按键可以“反弹”,朝反方向移动,使得功能按键更具有灵活性,进一步提高用户体验。
在本申请一示例性实施例中,可以通过显示屏的坐标获取接口来获取功能按键的坐标(X坐标和Y坐标),并与内容显示区域的边缘对应的坐标进行判断,判断功能按键的位置与内容显示区域的边缘位置是否重合。例如,功能按键的坐标可以是功能按键的中心坐标,可以根据功能按键的中心坐标是否与内容显示区域的边缘坐标小于设定的坐标阈值来判断位置是否重合。又如,功能按键的坐标可以是功能按键的边缘坐标,即功能按键的轮廓边缘的坐标,根据功能按键的边缘坐标是否与内容显示区域的边缘坐标相等来判断位置是否重合。
上述任意实施例的显示界面布局调整方法可以应用于Andriod、Windows、iOS、Linux等操作系统中,本申请不作具体限定。
在本申请一示例性实施例中,本申请的显示界面布局调整方法可以利用Android所提供的服务组件实现。
例如,可以在布局文件中设置内容显示区域的layout_width、layout_height属性为match_parent,设定屏幕适配策略。
例如,可以利用FrameLayout(帧布局)组件生成两个叠加的图层,下层为内容显示区域,上层为功能按键。
例如,可以通过XML布局文件中指定的功能按键ID获取功能按键。
例如,可以通过View.OnClickListener接口监听获取功能按键上发生的触摸事件。
例如,可以通过ARBG(Alpha Red Blue Green)设置功能按键的背景的透明度。
例如,可以通过RenderScript(渲染脚本)组件设置功能按键的背景效果为高斯模糊效果。可以通过以下代码实现:
(1)创建RenderScript内核对象;
RenderScript rs=RenderScript.create(context);
(2)创建一个模糊效果的RenderScript的工具对象;
ScriptIntrinsicBlur blurScript=ScriptIntrinsicBlur.create(rs,Element.U8_4(rs));
(3)使用Allocation类创建和分配内存空间;
Allocation tmpIn=Allocation.createFromBitmap(rs,inputBitmap);
Allocation tmpOut=Allocation.createFromBitmap(rs,outputBitmap);
(4)设置渲染的模糊程度;
blurScript.setRadius(blurRadius);
(5)设置输入流;
blurScript.setInput(tmpIn);
(6)把输入数据保存到输出流中;
blurScript.forEach(tmpOut);
(7)将数据填充到Allocation中。
tmpOut.copyTo(outputBitmap);
例如,可以通过getX、getY接口获取功能按键的位置;又如,通过动画属性改变功能按键的位置和移动方向。
为了更加清楚地理解本申请的技术方案,本说明书还列举了具体的应用场景进行详细说明。图4(a)至4(b)、图5(a)至5(b)分别为本申请两个示例性实施例示出的显示界面布局的应用场景图。
如图4(a)至4(b)所示,烤箱40的面板上设置有显示屏410,在显示屏410中,当显示屏根据接收到的用户操作跳转“底加热“功能的显示界面时,获取显示界面的布局文件,根据显示屏的尺寸大小确定目标显示界面中内容显示区域的尺寸大小、内容的显示大小、功能按键的尺寸大小等,并在该显示界面中展示内容显示区域的内容和功能按键。其中,如图4(b)所示,显示屏410中的圆角矩形为显示界面,方格所表示的背景和“底加热48℃预热中“图标为内容显示区域所显示的内容,“停止”、“暂停”图标为该“底加热“功能的显示界面的功能按键,其“悬浮于”内容显示区域之上。可以看出,“停止”和“暂停”图标的背景效果为半透明效果,且可移动(图未示),避免阻挡内容显示区域所展示的内容。
如图5(a)至5(b)所示,抽油烟机50的面板上设置有显示屏510,在显示屏510中,当显示屏根据接收到的用户操作跳转到“烹饪视频播放功能”的显示界面时,获取显示界面的布局文件,根据显示屏的尺寸大小确定目标显示界面中内容显示区域的尺寸大小、视频的显示大小、功能按键的尺寸大小等,并在该显示界面中展示内容显示区域的内容和功能按键。其中,如图5(b)所示,显示屏510中的圆角矩形为显示界面,内容显示区域所显示的内容为烹饪视频,“停止”、“暂停”、“上集”、“下集”图标为该烹饪视频播放功能的显示界面的功能按键,其“悬浮于”内容显示区域之上。可以看出,上述图标的背景效果为半透明效果,且可移动(图未示),避免阻挡内容显示区域所展示的内容。
上述应用场景利用本申请的显示界面布局调整方法,无需针对不同尺寸的显示屏均对内容显示区域与功能按键的尺寸、布局进行调整,可以有效减少开发时消耗的人力物力资源,并且,可以扩大内容显示区域的尺寸,提高内容的分辨率,以使内容显示区域所显示的内容可以更加丰富,从而提高用户体验。
与前述方法的实施例相对应,本申请还提供了装置及其所应用的电子设备的实施例。
本申请还提供了一种显示界面布局调整装置,图6为本申请一示例性实施例示出的一种显示界面布局调整装置的结构框图。如图6所示,所述装置60包括:
确定模块610,被配置为根据显示屏的尺寸确定目标显示界面中内容显示区域的尺寸配置信息;
显示模块620,被配置为基于所述尺寸配置信息在所述目标显示界面中展示功能按键和所述内容显示区域的内容,其中,所述内容显示区域设置于第一图层,所述功能按键设置于第二图层,所述第二图层叠加在所述第一图层之上,所述功能按键用于触发与所述内容显示区域所显示的内容相关的功能。
在本申请一示例性实施例中,所述确定模块,还被配置为根据显示屏的尺寸确定所述功能按键的尺寸配置信息。
在本申请一示例性实施例中,显示屏尺寸不同的设备共享同一份布局文件,所述内容显示区域的尺寸配置信息和所述功能按键的尺寸配置信息由所述布局文件中的屏幕适配策略确定。
在本申请一示例性实施例中,所述屏幕适配策略包括以下至少一种:
内容显示区域的尺寸与显示屏的尺寸相同;
功能按键的尺寸根据显示屏的尺寸按设定比例缩放。
在本申请一示例性实施例中,所述第二图层为透明图层。
在本申请一示例性实施例中,所述功能按键在设定范围内沿指定方向移动或者沿任意方向随机移动。
在本申请一示例性实施例中,所述装置还包括:
停止模块,被配置为当监听到所述功能按键上发生触摸事件时,停止所述功能按键移动。
在本申请一示例性实施例中,所述功能按键停止移动的时长与所述触摸事件的时长相同。
在本申请一示例性实施例中,所述装置还包括:
调整模块,被配置为当所述功能按键的位置与所述内容显示区域的边缘位置重合时,调整所述功能按键沿远离所述内容显示区域的边缘的方向移动。
在本申请一示例性实施例中,所述功能按键的背景效果为:半透明或者高斯模糊。
上述装置中各个模块的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程,在此不再赘述。
对于装置实施例而言,由于其基本对应于方法实施例,所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的,其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的,作为模块显示的部件可以是或者也可以不是物理模块,即可以位于一个地方,或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本申请方案的目的。本领域普通技术人员在不付出创造性劳动的情况下,即可以理解并实施。
本申请还提供了一种电子设备,该电子设备可以是具有显示屏的手机、平板电脑、抽油烟机、烤箱、微波炉、电磁炉等设备,本申请不作具体的限定。图7为本申请一示例性实施例示出的一种电子设备的结构框图。如图7所示,所述电子设备70包括:
处理器;
存储器,用于存储所述处理器可执行的计算机程序;
其中所述处理器执行所述计算机程序实现以下步骤:
根据显示屏的尺寸确定目标显示界面中内容显示区域的尺寸配置信息;
基于所述尺寸配置信息在所述目标显示界面中展示功能按键和所述内容显示区域的内容,其中,所述内容显示区域设置于第一图层,所述功能按键设置于第二图层,所述第二图层叠加在所述第一图层之上,所述功能按键用于触发与所述内容显示区域所显示的内容相关的功能。
本申请还提供了一种计算机可读存储介质,其上存储有计算机程序,所述程序被处理器执行时实现以下步骤:
根据显示屏的尺寸确定目标显示界面中内容显示区域的尺寸配置信息;
基于所述尺寸配置信息在所述目标显示界面中展示功能按键和所述内容显示区域的内容,其中,所述内容显示区域设置于第一图层,所述功能按键设置于第二图层,所述第二图层叠加在所述第一图层之上,所述功能按键用于触发与所述内容显示区域所显示的内容相关的功能。
本申请实施例可采用在一个或多个其中包含有程序代码的可读介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。计算机可用可读介质包括永久性和非永久性、可移动和非可移动媒体,可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的可读介质的例子包括但不限于:相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。
上述对本申请特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下,在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外,在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中,多任务处理和并行处理也是可以的或者可能是有利的。
本领域技术人员在考虑说明书及实践这里申请的发明后,将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未申请的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本申请的真正范围和精神由下面的权利要求指出。
应当理解的是,本申请并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。
以上所述实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本申请记载的范围。
以上所述仅为本申请的较佳实施例而已,并不用以限制本申请,凡在本申请的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本申请保护的范围之内。

Claims (13)

1.一种显示界面布局调整方法,其特征在于,所述方法包括:
根据显示屏的尺寸确定目标显示界面中内容显示区域的尺寸配置信息;
基于所述尺寸配置信息在所述目标显示界面中展示功能按键和所述内容显示区域的内容,其中,所述内容显示区域设置于第一图层,所述功能按键设置于第二图层,所述第二图层叠加在所述第一图层之上,所述功能按键用于触发与所述内容显示区域所显示的内容相关的功能。
2.根据权利要求1所述的显示界面布局调整方法,其特征在于,在所述目标显示界面中展示功能按键之前,所述方法还包括:
根据显示屏的尺寸确定所述功能按键的尺寸配置信息。
3.根据权利要求2所述的显示界面布局调整方法,其特征在于,显示屏尺寸不同的设备共享同一份布局文件,所述内容显示区域的尺寸配置信息和所述功能按键的尺寸配置信息由所述布局文件中的屏幕适配策略确定。
4.根据权利要求3所述的显示界面布局调整方法,其特征在于,所述屏幕适配策略包括以下至少一种:
内容显示区域的尺寸与显示屏的尺寸相同;
功能按键的尺寸根据显示屏的尺寸按设定比例缩放。
5.根据权利要求1所述的显示界面布局调整方法,其特征在于,所述第二图层为透明图层。
6.根据权利要求1所述的显示界面布局调整方法,其特征在于,所述功能按键在设定范围内沿指定方向移动或者沿任意方向随机移动。
7.根据权利要求6所述的显示界面布局调整方法,其特征在于,所述方法还包括:
当监听到所述功能按键上发生触摸事件时,停止所述功能按键移动。
8.根据权利要求7所述的显示界面布局调整方法,其特征在于,所述功能按键停止移动的时长与所述触摸事件的时长相同。
9.根据权利要求6所述的显示界面布局调整方法,其特征在于,所述方法还包括:
当所述功能按键的位置与所述内容显示区域的边缘位置重合时,调整所述功能按键沿远离所述内容显示区域的边缘的方向移动。
10.根据权利要求1至9任一项中所述的显示界面布局调整方法,其特征在于,所述功能按键的背景效果为:半透明或者高斯模糊。
11.一种显示界面布局调整装置,其特征在于,所述装置包括:
确定模块,被配置为根据显示屏的尺寸确定目标显示界面中内容显示区域的尺寸配置信息;
显示模块,被配置为基于所述尺寸配置信息在所述目标显示界面中展示功能按键和所述内容显示区域的内容,其中,所述内容显示区域设置于第一图层,所述功能按键设置于第二图层,所述第二图层叠加在所述第一图层之上,所述功能按键用于触发与所述内容显示区域所显示的内容相关的功能。
12.一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述处理器执行所述程序时实现权利要求1至10任一项中所述的显示界面布局调整方法的步骤。
13.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述程序被处理器执行时实现权利要求1至10任一项中所述的显示界面布局调整方法的步骤。
CN202010393374.XA 2020-05-11 2020-05-11 显示界面布局调整方法、装置、电子设备及存储介质 Pending CN111651109A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010393374.XA CN111651109A (zh) 2020-05-11 2020-05-11 显示界面布局调整方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010393374.XA CN111651109A (zh) 2020-05-11 2020-05-11 显示界面布局调整方法、装置、电子设备及存储介质

Publications (1)

Publication Number Publication Date
CN111651109A true CN111651109A (zh) 2020-09-11

Family

ID=72346899

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010393374.XA Pending CN111651109A (zh) 2020-05-11 2020-05-11 显示界面布局调整方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN111651109A (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112817507A (zh) * 2021-01-26 2021-05-18 广州虎牙科技有限公司 控件适配方法、装置、电子设备及存储介质
CN114327701A (zh) * 2020-09-29 2022-04-12 华为技术有限公司 一种应用界面的布局方法及电子设备
CN114911547A (zh) * 2021-02-09 2022-08-16 武汉斗鱼鱼乐网络科技有限公司 一种挂件互斥显示方法及相关装置
WO2023025060A1 (zh) * 2021-08-26 2023-03-02 维沃移动通信有限公司 界面显示的适配处理方法、装置和电子设备
WO2023130921A1 (zh) * 2022-01-05 2023-07-13 华为技术有限公司 一种适配多设备的页面布局的方法及电子设备

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101488333A (zh) * 2009-01-22 2009-07-22 中兴通讯股份有限公司 一种图像显示设备及其显示输出方法
EP3373136A1 (en) * 2017-03-10 2018-09-12 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Mobile terminal and method and device for controlling to display in the same
CN108874478A (zh) * 2017-05-12 2018-11-23 武汉斗鱼网络科技有限公司 悬浮显示自定义信息的方法、存储介质、电子设备及系统
CN109582409A (zh) * 2018-10-15 2019-04-05 广东宝莱特医用科技股份有限公司 一种基于双缓冲的显示叠加方法
CN109814768A (zh) * 2018-12-14 2019-05-28 中国平安财产保险股份有限公司 悬浮框的位置优化的方法、装置、计算机设备和存储介质
CN109976759A (zh) * 2019-03-29 2019-07-05 珠海豹好玩科技有限公司 页面显示方法和装置
CN110312985A (zh) * 2017-02-17 2019-10-08 三星电子株式会社 电子设备和用于显示其屏幕的方法

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101488333A (zh) * 2009-01-22 2009-07-22 中兴通讯股份有限公司 一种图像显示设备及其显示输出方法
CN110312985A (zh) * 2017-02-17 2019-10-08 三星电子株式会社 电子设备和用于显示其屏幕的方法
EP3373136A1 (en) * 2017-03-10 2018-09-12 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Mobile terminal and method and device for controlling to display in the same
CN108874478A (zh) * 2017-05-12 2018-11-23 武汉斗鱼网络科技有限公司 悬浮显示自定义信息的方法、存储介质、电子设备及系统
CN109582409A (zh) * 2018-10-15 2019-04-05 广东宝莱特医用科技股份有限公司 一种基于双缓冲的显示叠加方法
CN109814768A (zh) * 2018-12-14 2019-05-28 中国平安财产保险股份有限公司 悬浮框的位置优化的方法、装置、计算机设备和存储介质
CN109976759A (zh) * 2019-03-29 2019-07-05 珠海豹好玩科技有限公司 页面显示方法和装置

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114327701A (zh) * 2020-09-29 2022-04-12 华为技术有限公司 一种应用界面的布局方法及电子设备
CN112817507A (zh) * 2021-01-26 2021-05-18 广州虎牙科技有限公司 控件适配方法、装置、电子设备及存储介质
CN112817507B (zh) * 2021-01-26 2023-11-03 广州虎牙科技有限公司 控件适配方法、装置、电子设备及存储介质
CN114911547A (zh) * 2021-02-09 2022-08-16 武汉斗鱼鱼乐网络科技有限公司 一种挂件互斥显示方法及相关装置
WO2023025060A1 (zh) * 2021-08-26 2023-03-02 维沃移动通信有限公司 界面显示的适配处理方法、装置和电子设备
WO2023130921A1 (zh) * 2022-01-05 2023-07-13 华为技术有限公司 一种适配多设备的页面布局的方法及电子设备

Similar Documents

Publication Publication Date Title
CN111651109A (zh) 显示界面布局调整方法、装置、电子设备及存储介质
CN110716680B (zh) 智能交互平板的控制方法和装置
CN109164964B (zh) 内容分享方法、装置、终端及存储介质
US20200097135A1 (en) User Interface Spaces
CN104285195B (zh) 过扫描显示设备以及使用该过扫描显示设备的方法
CN108829327B (zh) 交互智能设备的书写方法和装置
CN109844707A (zh) 桌面启动器中的页面导航
CN106662965A (zh) 应用窗口的基于区的大小调整和定位
JP2022520094A (ja) インタフェース表示方法及びその装置、端末並びにコンピュータプログラム
KR20120053335A (ko) 직관적인 폴더 편집 및 열람을 위한 사용자 인터페이스 표시 방법 및 장치
CN106896997B (zh) 滑动控件控制方法及装置、滑块选择器
CN108668175B (zh) 一种弹幕文字的发布方法及装置
CN102934065A (zh) 信息处理装置
CN109215098B (zh) 笔迹擦除方法和装置
CN110968227B (zh) 智能交互平板的控制方法和装置
CN108845855A (zh) 用户界面显示方法、装置、终端及存储介质
CN110941382B (zh) 智能交互平板的显示操作方法、装置、设备和存储介质
CN103135913A (zh) 在屏幕上显示对象的方法和系统
CN111782114B (zh) 文稿编辑应用中的元素展示方法、装置、设备及介质
CN110471611B (zh) 键盘启动的方法、装置、终端设备和存储介质
CN110795015A (zh) 操作提示方法、装置、设备及存储介质
JP6078243B2 (ja) 表示システムおよび表示プログラム
US11243678B2 (en) Method of panning image
CN105824550B (zh) 一种屏幕保护界面控制方法和装置
CN109117072B (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
RJ01 Rejection of invention patent application after publication

Application publication date: 20200911

RJ01 Rejection of invention patent application after publication