CN108647069B - 界面显示方法和装置、存储介质及电子装置 - Google Patents

界面显示方法和装置、存储介质及电子装置 Download PDF

Info

Publication number
CN108647069B
CN108647069B CN201810338721.1A CN201810338721A CN108647069B CN 108647069 B CN108647069 B CN 108647069B CN 201810338721 A CN201810338721 A CN 201810338721A CN 108647069 B CN108647069 B CN 108647069B
Authority
CN
China
Prior art keywords
display
width
area
display area
interface
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.)
Active
Application number
CN201810338721.1A
Other languages
English (en)
Other versions
CN108647069A (zh
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.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen 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 Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201810338721.1A priority Critical patent/CN108647069B/zh
Publication of CN108647069A publication Critical patent/CN108647069A/zh
Application granted granted Critical
Publication of CN108647069B publication Critical patent/CN108647069B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • 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

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本发明公开了一种界面显示方法和装置、存储介质及电子装置。其中,该方法包括:获取界面加载请求,其中,界面加载请求用于请求在显示屏幕上加载显示目标应用中待显示的目标界面;响应界面加载请求获取显示屏幕的分辨率;在根据显示屏幕的分辨率确定出显示屏幕中包括第一显示区域及第二显示区域的情况下,在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素。本发明解决了相关技术提供的界面显示方法中存在受用户终端的操作面板的布局影响而导致的显示信息丢失的技术问题。

Description

界面显示方法和装置、存储介质及电子装置
技术领域
本发明涉及计算机领域,具体而言,涉及一种界面显示方法和装置、存储介质及电子装置。
背景技术
为了使终端应用所显示的用户界面(User Interface,简称UI)与用户终端的显示屏幕相适配,通常终端应用会采用以下方式来控制UI的适配显示:将UI中的界面元素始终显示在显示屏幕中的相对位置,例如始终相对显示屏幕的一侧边沿显示。
然而,由于不同的用户终端中的显示屏幕可能会被配置为不同的布局,例如可以配置为全面屏、刘海屏等,若仍然采用上述方式控制显示UI,则可能导致UI中的界面元素受显示屏幕的布局影响,而无法完整显示,从而导致人机交互操作无法完成的问题。也就是说,相关技术所提供的UI显示方法仅适用于普通的显示屏幕,存在适配显示范围受限的问题。
针对上述的问题,目前尚未提出有效的解决方案。
发明内容
本发明实施例提供一种界面显示方法和装置、存储介质及电子装置,以至少解决相关技术提供的界面显示方法中存在受用户终端的操作面板的布局影响而导致的显示信息丢失的技术问题。
根据本发明实施例的一个方面,提供了一种界面显示方法,包括:获取界面加载请求,其中,上述界面加载请求用于请求在显示屏幕上加载显示目标应用中待显示的目标界面;响应上述界面加载请求获取上述显示屏幕的分辨率;在根据上述显示屏幕的分辨率确定出上述显示屏幕中包括第一显示区域及第二显示区域的情况下,在上述第一显示区域中显示上述目标界面中的界面元素,在上述第二显示区域中显示上述目标界面之外的填充元素。
根据本发明实施例的另一方面,还提供了一种界面显示装置,包括:第一获取单元,用于获取界面加载请求,其中,上述界面加载请求用于请求在显示屏幕上加载显示目标应用中待显示的目标界面;第二获取单元,用于响应上述界面加载请求获取上述显示屏幕的分辨率;显示单元,用于在根据上述显示屏幕的分辨率确定出上述显示屏幕中包括第一显示区域及第二显示区域的情况下,在上述第一显示区域中显示上述目标界面中的界面元素,在上述第二显示区域中显示上述目标界面之外的填充元素。
根据本发明实施例的又一方面,还提供了一种存储介质,该存储介质中存储有计算机程序,其中,该计算机程序被设置为运行时执行上述方法。
根据本发明实施例的又一方面,还提供了一种电子装置,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其中,上述处理器通过计算机程序执行上述的方法。
在本发明实施例中,由于采用了获取界面加载请求;响应界面加载请求获取显示屏幕的分辨率;在根据显示屏幕的分辨率确定出显示屏幕中包括第一显示区域及第二显示区域的情况下,在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素,其中,界面加载请求用于请求在显示屏幕上加载显示目标应用中待显示的目标界面的方法,从而可以在显示屏幕的第一显示区域与第二显示区域分别显示不同的内容,达到了可以在第一显示区域中显示重要的目标界面中的界面元素,在第二显示区域显示填充元素的效果。通过在第一显示区域中可以显示所有重要的目标界面中的界面元素,解决了相关技术提供的界面显示方法中存在受用户终端的操作面板的布局影响而导致的显示信息丢失的技术问题。
附图说明
此处所说明的附图用来提供对本发明的进一步理解,构成本申请的一部分,本发明的示意性实施例及其说明用于解释本发明,并不构成对本发明的不当限定。在附图中:
图1是根据本发明实施例的一种界面显示方法的应用环境的示意图;
图2是根据本发明实施例的一种可选的界面显示方法的流程示意图;
图3是根据本发明实施例的一种可选的界面显示方法的示意图;
图4是根据本发明实施例的另一种可选的界面显示方法的示意图;
图5是根据本发明实施例的又一种可选的界面显示方法的示意图;
图6是根据本发明实施例的又一种可选的界面显示方法的示意图;
图7是根据本发明实施例的又一种可选的界面显示方法的示意图;
图8是根据本发明实施例的又一种可选的界面显示方法的示意图;
图9是根据本发明实施例的又一种可选的界面显示方法的示意图;
图10是根据本发明实施例的又一种可选的界面显示方法的示意图;
图11是根据本发明实施例的又一种可选的界面显示方法的示意图;
图12是根据本发明实施例的一种可选的界面显示方法的流程图;
图13是根据本发明实施例的一种可选的界面显示装置的结构示意图;
图14是根据本发明实施例的一种可选的电子装置的结构示意图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分的实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本发明保护的范围。
需要说明的是,本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
根据本发明实施例的一个方面,提供了一种界面显示方法,作为一种可选的实施方式,上述界面显示方法可以应用于如图1所示的应用环境中。
终端102获取界面加载请求,其中,界面加载请求用于请求在显示屏幕上加载显示目标应用中待显示的目标界面;其中,终端102通过网络104从服务器106上获取上述目标界面。终端102响应界面加载请求获取显示屏幕的分辨率;以及终端102根据显示屏幕的分辨率确定出显示屏幕中包括第一显示区域及第二显示区域的情况下,在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素。
需要说明的是,相关技术中由于不同的终端的显示屏幕可能被配置为不同的布局。因此,UI中的界面元素收到显示屏幕的布局的影响,而无法完整显示,从而导致人机交互的操作无法完成,降低了人机交互的效率。而本申请通过上述界面显示方法,通过获取界面加载请求,其中,界面加载请求用于请求在显示屏幕上加载显示目标应用中待显示的目标界面;响应界面加载请求获取显示屏幕的分辨率;在根据显示屏幕的分辨率确定出显示屏幕中包括第一显示区域及第二显示区域的情况下,在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素,从而可以在显示屏幕的第一显示区域与第二显示区域分别显示不同的内容,通过在第一显示区域显示重要的目标界面中的界面元素,第二显示区域显示填充元素,使第一显示区域的界面元素不会被遮挡,解决了相关技术中存在的UI的界面元素无法完整显示,而无法完成人机交互操作的问题,提高了终端的显示屏幕的显示效率。
可选地,在本实施例中,作为一种可选的实施方式,如图2所示,上述界面显示方法可以包括:
S202,获取界面加载请求,其中,界面加载请求用于请求在显示屏幕上加载显示目标应用中待显示的目标界面;
S204,响应界面加载请求获取显示屏幕的分辨率;
S206,在根据显示屏幕的分辨率确定出显示屏幕中包括第一显示区域及第二显示区域的情况下,在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素。
可选地,上述界面显示方法可以但不限于应用于在终端的显示屏幕上显示界面元素的过程中。以终端显示界面元素为例,终端通过获取界面加载请求;响应界面加载请求获取显示屏幕的分辨率;在根据显示屏幕的分辨率确定出显示屏幕中包括第一显示区域及第二显示区域的情况下,在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素,从而可以在显示屏幕的第一显示区域与第二显示区域分别显示不同的内容,进一步达到了可以在第一显示区域中显示重要的目标界面中的界面元素,在第二显示区域显示填充元素的效果。
可选地,上述终端可以为带有显示屏幕的电子设备,例如手机、平板电脑等设备。
可选地,在响应界面加载请求获取显示屏幕的分辨率之后,还可以包括:比对显示屏幕的分辨率的比值与分辨率控制阈值,其中,分辨率控制阈值用于控制显示第二显示区域。在显示屏幕的分辨率的比值大于分辨率控制阈值的情况下,确定出显示屏幕中包括第一显示区域及第二显示区域;在显示屏幕的分辨率的比值小于等于分辨率控制阈值的情况下,确定出显示屏幕中包括第一显示区域。
可选地,在上述显示屏幕的分辨率的比值小于等于分辨率控制阈值的情况下,确定出显示屏幕中包括第一显示区域时,可以通过锚点适配的方法获取第一显示区域。
可选地,上述分辨率控制阈值用于与显示屏幕的分辨率进行比对。在显示屏幕的分辨率的较大值与较小值的比值大于分辨率控制阈值时,可以确定显示第一显示区域与第二显示区域,在显示屏幕的分辨率的较大值与较小值的比值小于分辨率控制阈值时,可以确定显示第一显示区域,同时隐藏第二显示区域。
以下以分辨率控制阈值为2为例,结合图3与图4进行说明。如图3所示,获取终端的显示屏幕的分辨率,例如上述分辨率为1486*640,则1486对应终端的显示屏幕的长,640对应终端的显示屏幕的宽。使用1486/640得到上述分辨率的比值,由于上述分辨率的比值大于了分辨率控制阈值2,确定出终端的显示屏幕上存在第一显示区域与第二显示区域。确定结果可以如图3所示。图3中的终端的显示屏幕上存在第一显示区域与第二显示区域。又例如分辨率为960*640,则960对应终端的显示屏幕的长,640对应终端的显示屏幕的宽。由于上述分辨率的比值小于了分辨率控制阈值,因此确定出终端的显示屏幕中包括第一显示区域。确定结果可以如图4所示。图4中在终端的显示屏幕上显示第一显示区域。
可选地,确定出显示屏幕中包括第一显示区域及第二显示区域包括:根据显示屏幕的分辨率所指示的显示屏幕的长边长度和短边长度,在显示屏幕的长边所在方向上,确定出第一显示区域的显示宽度和第二显示区域的显示宽度,第二显示区域的显示宽度小于等于第一显示区域的显示宽度。
例如,继续结合图3进行说明。如图3所示,在根据显示屏幕的分辨率的比值,确定出显示屏幕的分辨率大于分辨率控制阈值的情况下,确定出终端的显示屏幕上存在第一显示区域与第二显示区域。此时,根据确定的第一显示区域与第二显示区域的显示宽度在终端的显示屏幕上显示第一显示区域与第二显示区域。
可选地,上述第一显示区域的显示宽度与第二显示区域的显示宽度可以通过以下方法获得:获取与显示屏幕匹配的参考高度和参考宽度;获取参考高度与短边长度之间的第一比值作为控制系数;根据长边长度、控制系数及参考宽度,确定第二显示区域的显示宽度;将长边长度与第二显示区域的显示宽度二者之间的第一差值,作为第一显示区域的显示宽度。
例如,通过如下公式获取上述第二显示区域的显示宽度:
第二显示区域的显示宽度=长边长度*(参考高度/短边长度)-参考高度*2。
当获取到与显示屏幕匹配的参考高度和参考宽度后,将获取的上述参考高度与显示屏幕的长边长度及显示屏幕的短边长度输入到上述公式中,则可以得到第二显示区域的显示宽度。在确定了第二显示区域的显示宽度后,根据如下公式,可以得到第一显示区域的显示宽度。
第一显示区域的显示宽度=长边长度-第二显示区域的显示宽度
根据上述第一显示区域的显示宽度与第二显示区域的显示宽度的值,可以在终端的显示屏幕上显示第一显示区域与第二显示区域。
可选地,确定第二显示区域的显示宽度还包括:在第二显示区域包括第一显示子区域及第二显示子区域的情况下,获取与第一显示子区域的显示宽度匹配的显示比例;将第二显示区域的显示宽度与显示比例二者之间的乘积,确定为第一显示子区域的显示宽度;将第二显示区域的显示宽度与第一显示子区域的显示宽度之间的第二差值,作为第二显示子区域的显示宽度。
例如,结合图5进行说明。如图5所示,第二显示区域存在第一显示子区域与第二显示子区域。在通过上述公式获取到第二显示区域的显示宽度的情况下,根据第一显示子区域与第二显示子区域的显示比例,得到第一显示子区域的显示宽度。例如,第一显示子区域与第二显示子区域的显示比例为1:1,则在得到上述第二显示区域的显示宽度后,第一显示子区域的显示宽度等于第二显示区域的显示宽度等于第二显示区域的显示宽度的二分之一。
或者结合图6进行说明。如图6所示,第一显示子区域的显示宽度与第二显示子区域的显示宽度的显示比例不为1:1,此时获取第一显示子区域与第二显示子区域的显示比例,根据上述显示比例分配第一显示子区域的显示宽度与第二显示子区域的显示宽度。
可选地,上述参考宽度与上述参考高度为设定的参考值。
确定出显示屏幕中包括第一显示区域包括:根据显示屏幕的分辨率所指示的显示屏幕的长边长度和短边长度,在显示屏幕的长边所在方向上,确定出第一显示区域的显示宽度,其中,第一显示区域的显示宽度等于显示屏幕的长边长度。
例如,继续结合图3进行说明。如图3所示,显示屏幕中显示第一显示区域,时,将第二显示区域隐藏显示,第一显示区域的显示宽度与显示屏幕的长边长度相等。
在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素包括:根据第一显示区域与显示屏幕之间的显示比例,对目标界面进行缩放;将缩放后的目标界面中的界面元素显示在第一显示区域中;将获取到填充元素显示在第二显示区域中,其中,填充元素包括:与目标界面关联的背景元素。
例如,结合图7进行说明。如图7所示,终端的显示屏幕的长边长度为a,短边长度为c,而第一显示区域的显示宽度为b,显示高度为c。而获取到的显示界面的显示宽度为a,显示高度为c,无法在第一显示区域中显示目标界面。此时,对目标界面进行缩放,得到缩放后的目标界面,并在第一显示区域中显示目标界面,以及在第二显示区域中显示与目标界面关联的背景元素。
可选地,可以通过以下方法对目标界面进行缩放。
将目标界面的显示宽度与显示高度等比例扩大或缩小,在此过程中,当目标界面的显示宽度与第一显示界面的显示宽度相等时,维持目标界面的显示宽度不变,将目标界面的显示高度扩大或缩小,直到目标界面的显示高度与第一显示界面的显示高度相等;或者
当目标界面的显示高度与第一显示界面的显示高度相等时,维持目标界面的显示高度不变,将目标界面的显示宽度扩大或缩小,直到目标界面的显示宽度与第一显示界面的显示宽度相等。
例如,显示屏幕的显示结果可以如图8、图9、图10、图11所示,如图8所示,终端第一显示区域的显示宽度与显示屏幕的显示宽度相等,而第一显示区域的显示高度小于显示屏幕的显示宽度。如图9所示,第一显示区域的显示高度小于显示屏幕的显示高度,而第二显示区域的显示高度小于第一显示区域的显示高度。如图10所示,第二显示区域不包含第一显示子区域与第二显示子区域,第二显示区域位于第一显示区域的左侧。如图11所示,第二显示区域包含第一显示子区域与第二显示子区域,第一显示子区域位于第一显示区域左侧,第二显示子区域位于第一显示区域右侧。
可选地,在第二显示区域中显示目标界面之外的填充元素包括:新增界面区域适配组件,其中,界面区域适配组件包括:用于控制在第一显示区域中显示界面元素的第一子适配组件,及用于控制在第二显示区域中显示填充元素的第二子适配组件;在显示屏幕的分辨率大于分辨率控制阈值的情况下,通过第一子适配组件控制在第一显示区域中显示界面元素,并通过第二子适配组件控制在第二显示区域中显示填充元素;在显示屏幕的分辨率小于等于分辨率控制阈值的情况下,通过第一子适配组件控制在第一显示区域中显示界面元素,并通过第二子适配组件控制隐藏第二显示区域中的填充元素。
可选地,可以预先在UI窗口Prefab下设置四个Panel节点,分别是左节点(left节点),中间节点(center节点),右节点(right节点),背景节点(bg节点),(屏幕分辨率比超过2:1的情况下,left节点负责左边超出显示区域,center节点负责放置中间安全区域UI元素,right节点辅助右边超出显示区域,bg节点负责显示全屏背景)在left节点,center节点,right节点下增加CUIFitZoneScript组件,在CUIFitZoneScript组件中设置各个节点的属性。
以下结合图12进行说明:
CUIFitZoneScript组件对left节点的操作是:如果屏幕分辨率比小于2:1,left节点的宽度就为0,里面内容隐藏,等于left节点在这种情况下无效。如果屏幕分辨率比大于2:1,left节点的宽度是超出2:1宽度剩下宽度的一半,里面内容显示。
CUIFitZoneScript组件对right节点的操作是:如果屏幕分辨率比小于2:1,right节点的宽度就为0,里面内容隐藏,等于right节点在这种情况下无效。如果屏幕分辨率比大于2:1,right节点的宽度是超出2:1宽度剩下宽度的一半,里面内容显示。
CUIFitZoneScript组件对center节点的操作是:如果屏幕分辨率比小于2:1,center节点的宽度就是屏幕宽度,里面内容显示,等于适配规则和UGUI默认规则一致。如果屏幕分辨率比大于2:1,left节点的宽度与right节点的宽度确定后,center节点的宽度就锁定在屏幕高度*2的大小里。
CUIFitZoneScript组件核心处理计算公式:
1,如果屏幕分辨率比小于等于X:1,(X默认是2,可以配置):
第二显示区域的显示宽度=0
第一显示区域的显示宽度=显示屏幕的显示宽度
2,如果屏幕分辨率比大于X:1,(X默认是2,可以配置):
第二显示区域的显示宽度=长边宽度*(参考高度/长边高度)–参考高度*2
第一显示区域的显示宽度=显示屏幕的长边长度-第二显示界面的显示宽度
通过本申请实施例,采用获取界面加载请求,其中,界面加载请求用于请求在显示屏幕上加载显示目标应用中待显示的目标界面;响应界面加载请求获取显示屏幕的分辨率;在根据显示屏幕的分辨率确定出显示屏幕中包括第一显示区域及第二显示区域的情况下,在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素的方法,从而可以在显示屏幕的第一显示区域与第二显示区域分别显示不同的内容,进一步达到了可以在第一显示区域中显示重要的目标界面中的界面元素,在第二显示区域显示填充元素的效果。从而解决了相关技术中存在的UI的界面元素无法完整显示,而无法完成人机交互操作的问题。
作为一种可选的实施方案,在响应界面加载请求获取显示屏幕的分辨率之后,还包括:
S1,比对显示屏幕的分辨率与分辨率控制阈值,其中,分辨率控制阈值用于控制显示第二显示区域;
S2,在显示屏幕的分辨率大于分辨率控制阈值的情况下,确定出显示屏幕中包括第一显示区域及第二显示区域;
S3,在显示屏幕的分辨率小于等于分辨率控制阈值的情况下,确定出显示屏幕中包括第一显示区域。
可选地,在上述显示屏幕的分辨率的比值小于等于分辨率控制阈值的情况下,确定出显示屏幕中包括第一显示区域时,可以通过锚点适配的方法获取第一显示区域。
可选地,上述分辨率控制阈值用于与显示屏幕的分辨率进行比对。在显示屏幕的分辨率的较大值与较小值的比值大于分辨率控制阈值时,可以确定显示第一显示区域与第二显示区域,在显示屏幕的分辨率的较大值与较小值的比值小于分辨率控制阈值时,可以确定显示第一显示区域,同时隐藏第二显示区域。
以下以分辨率控制阈值为2为例,结合图3与图4进行说明。如图3所示,获取终端的显示屏幕的分辨率,例如上述分辨率为1486*640,则1486对应终端的显示屏幕的长,640对应终端的显示屏幕的宽。使用1486/640得到上述分辨率的比值,由于上述分辨率的比值大于了分辨率控制阈值2,确定出终端的显示屏幕上存在第一显示区域与第二显示区域。确定结果可以如图3所示。图3中的终端的显示屏幕上存在第一显示区域与第二显示区域。又例如分辨率为960*640,则960对应终端的显示屏幕的长,640对应终端的显示屏幕的宽。由于上述分辨率的比值小于了分辨率控制阈值,因此确定出终端的显示屏幕中包括第一显示区域。确定结果可以如图4所示。图4中在终端的显示屏幕上显示第一显示区域。
通过本申请实施例,通过预先设定分辨率控制阈值并且将分辨率与分辨率控制阈值进行比对,根据比对结果确定终端的显示屏幕的第一显示区域与第二显示区域,从而实现了根据不同的终端的屏幕分辨率对终端的显示屏幕中的第一显示区域与第二显示区域做调整,避免了由于终端的操作面板的布局影响导致显示信息丢失的问题,达到了提高终端的显示效率的效果。
作为一种可选的实施方案,确定出显示屏幕中包括第一显示区域及第二显示区域包括:
S1,根据显示屏幕的分辨率所指示的显示屏幕的长边长度和短边长度,在显示屏幕的长边所在方向上,确定出第一显示区域的显示宽度和第二显示区域的显示宽度,第二显示区域的显示宽度小于等于第一显示区域的显示宽度。
例如,继续结合图3进行说明。如图3所示,在根据显示屏幕的分辨率的比值,确定出显示屏幕的分辨率大于分辨率控制阈值的情况下,确定出终端的显示屏幕上存在第一显示区域与第二显示区域。此时,根据确定的第一显示区域与第二显示区域的显示宽度在终端的显示屏幕上显示第一显示区域与第二显示区域。
通过本实施例,通过在终端的显示屏幕上确定出第一显示区域的显示宽度及显示高度与第二显示区域的显示宽度及显示高度,从而对第一显示区域与第二显示区域的显示宽度与显示高度进行了调整,提高了终端的显示屏幕的显示效率。
作为一种可选的实施方案,确定出第一显示区域的显示宽度和第二显示区域的显示宽度包括:
S1,获取与显示屏幕匹配的参考高度和参考宽度;
S2,获取参考高度与短边长度之间的第一比值作为控制系数;
S3,根据长边长度、控制系数及参考宽度,确定第二显示区域的显示宽度;
S4,将长边长度与第二显示区域的显示宽度二者之间的第一差值,作为第一显示区域的显示宽度。
例如,通过如下公式获取上述第二显示区域的显示宽度:
第二显示区域的显示宽度=长边长度*(参考高度/短边长度)-参考高度*2。
当获取到与显示屏幕匹配的参考高度和参考宽度后,将获取的上述参考高度与显示屏幕的长边长度及显示屏幕的短边长度输入到上述公式中,则可以得到第二显示区域的显示宽度。在确定了第二显示区域的显示宽度后,根据如下公式,可以得到第一显示区域的显示宽度。
第一显示区域的显示宽度=长边长度-第二显示区域的显示宽度
根据上述第一显示区域的显示宽度与第二显示区域的显示宽度的值,可以在终端的显示屏幕上显示第一显示区域与第二显示区域。
通过本实施例,通过根据上述公式获取第一显示界面的显示宽度与第二显示界面的显示宽度,从而可以准确确定第二显示区域的显示宽度,进而确定第一显示界面的显示宽度,提高了终端的显示屏幕的显示准确度的效果。
作为一种可选的实施方案,在根据长边长度、控制系数及参考宽度,确定第二显示区域的显示宽度之后,还包括:
S1,在第二显示区域包括第一显示子区域及第二显示子区域的情况下,获取与第一显示子区域的显示宽度匹配的显示比例;
S2,将第二显示区域的显示宽度与显示比例二者之间的乘积,确定为第一显示子区域的显示宽度;
S3,将第二显示区域的显示宽度与第一显示子区域的显示宽度之间的第二差值,作为第二显示子区域的显示宽度。
例如,结合图5进行说明。如图5所示,第二显示区域存在第一显示子区域与第二显示子区域。在通过上述公式获取到第二显示区域的显示宽度的情况下,根据第一显示子区域与第二显示子区域的显示比例,得到第一显示子区域的显示宽度。例如,第一显示子区域与第二显示子区域的显示比例为1:1,则在得到上述第二显示区域的显示宽度后,第一显示子区域的显示宽度等于第二显示区域的显示宽度等于第二显示区域的显示宽度的二分之一。
或者结合图6进行说明。如图6所示,第一显示子区域的显示宽度与第二显示子区域的显示宽度的显示比例不为1:1,此时获取第一显示子区域与第二显示子区域的显示比例,根据上述显示比例分配第一显示子区域的显示宽度与第二显示子区域的显示宽度。
可选地,上述参考宽度与上述参考高度为设定的参考值。
通过本实施例,通过根据显示屏幕的长边长度与短边长度与控制系数得到第一显示区域的显示宽度与第二显示区域的显示宽度,从而对终端的显示屏幕中的第一显示区域与第二显示区域进行了控制,避免了第一显示区域与第二显示区域无法正常显示的问题,提高了终端的显示屏幕的显示效率。
上述确定出显示屏幕中包括第一显示区域包括:
S1,根据显示屏幕的分辨率所指示的显示屏幕的长边长度和短边长度,在显示屏幕的长边所在方向上,确定出第一显示区域的显示宽度,其中,第一显示区域的显示宽度等于显示屏幕的长边长度。
例如,继续结合图3进行说明。如图3所示,显示屏幕中显示第一显示区域,时,将第二显示区域隐藏显示,第一显示区域的显示宽度与显示屏幕的长边长度相等。
通过本实施例,在终端的分辨率小于等于分辨率控制阈值时,在终端的显示屏幕上显示第一显示区域,隐藏第二显示区域,从而可以实现第一显示区域填充满终端的显示屏幕,提高了终端的显示屏幕的显示效率。
在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素包括:
S1,根据第一显示区域与显示屏幕之间的显示比例,对目标界面进行缩放;
S2,将缩放后的目标界面中的界面元素显示在第一显示区域中;
S3,将获取到填充元素显示在第二显示区域中,其中,填充元素包括:与目标界面关联的背景元素。
例如,结合图7进行说明。如图7所示,终端的显示屏幕的长边长度为a,短边长度为c,而第一显示区域的显示宽度为b,显示高度为c。而获取到的显示界面的显示宽度为a,显示高度为c,无法在第一显示区域中显示目标界面。此时,对目标界面进行缩放,得到缩放后的目标界面,并在第一显示区域中显示目标界面,以及在第二显示区域中显示与目标界面关联的背景元素。
例如,显示屏幕的显示结果可以如图8、图9、图10、图11所示,如图8所示,终端第一显示区域的显示宽度与显示屏幕的显示宽度相等,而第一显示区域的显示高度小于显示屏幕的显示宽度。如图9所示,第一显示区域的显示高度小于显示屏幕的显示高度,而第二显示区域的显示高度小于第一显示区域的显示高度。如图10所示,第二显示区域不包含第一显示子区域与第二显示子区域,第二显示区域位于第一显示区域的左侧。如图11所示,第二显示区域包含第一显示子区域与第二显示子区域,第一显示子区域位于第一显示区域左侧,第二显示子区域位于第一显示区域右侧。
需要说明的是,可以通过以下方法对目标界面进行缩放。
将目标界面的显示宽度与显示高度等比例扩大或缩小,在此过程中,当目标界面的显示宽度与第一显示界面的显示宽度相等时,维持目标界面的显示宽度不变,将目标界面的显示高度扩大或缩小,直到目标界面的显示高度与第一显示界面的显示高度相等;或者
当目标界面的显示高度与第一显示界面的显示高度相等时,维持目标界面的显示高度不变,将目标界面的显示宽度扩大或缩小,直到目标界面的显示宽度与第一显示界面的显示宽度相等。
通过本实施例,通过对目标界面进行缩放,从而将缩放后的目标界面显示在第一显示区域中,并在第二显示区域中显示背景元素,从而解决了相关技术中记载的UI的界面元素无法完整显示,而无法完成人机交互操作的问题,达到了提高显示屏幕的显示效率的效果。
作为一种可选的实施方式,在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素包括:
S1,新增界面区域适配组件,其中,界面区域适配组件包括:用于控制在第一显示区域中显示界面元素的第一子适配组件,及用于控制在第二显示区域中显示填充元素的第二子适配组件;
S2,在显示屏幕的分辨率大于分辨率控制阈值的情况下,通过第一子适配组件控制在第一显示区域中显示界面元素,并通过第二子适配组件控制在第二显示区域中显示填充元素;
S3,在显示屏幕的分辨率小于等于分辨率控制阈值的情况下,通过第一子适配组件控制在第一显示区域中显示界面元素,并通过第二子适配组件控制隐藏第二显示区域中的填充元素。
可选地,可以预先在UI窗口Prefab下设置四个Panel节点,分别是左节点(left节点),中间节点(center节点),右节点(right节点),背景节点(bg节点),(屏幕分辨率比超过2:1的情况下,left节点负责左边超出显示区域,center节点负责放置中间安全区域UI元素,right节点辅助右边超出显示区域,bg节点负责显示全屏背景)在left节点,center节点,right节点下增加CUIFitZoneScript组件,在CUIFitZoneScript组件中设置各个节点的属性。
以下结合图12进行说明:
CUIFitZoneScript组件对left节点的操作是:如果屏幕分辨率比小于2:1,left节点的宽度就为0,里面内容隐藏,等于left节点在这种情况下无效。如果屏幕分辨率比大于2:1,left节点的宽度是超出2:1宽度剩下宽度的一半,里面内容显示。
CUIFitZoneScript组件对right节点的操作是:如果屏幕分辨率比小于2:1,right节点的宽度就为0,里面内容隐藏,等于right节点在这种情况下无效。如果屏幕分辨率比大于2:1,right节点的宽度是超出2:1宽度剩下宽度的一半,里面内容显示。
CUIFitZoneScript组件对center节点的操作是:如果屏幕分辨率比小于2:1,center节点的宽度就是屏幕宽度,里面内容显示,等于适配规则和UGUI默认规则一致。如果屏幕分辨率比大于2:1,left节点的宽度与right节点的宽度确定后,center节点的宽度就锁定在屏幕高度*2的大小里。
CUIFitZoneScript组件核心处理计算公式:
1,如果屏幕分辨率比小于等于X:1,(X默认是2,可以配置):
第二显示区域的显示宽度=0
第一显示区域的显示宽度=显示屏幕的显示宽度
2,如果屏幕分辨率比大于X:1,(X默认是2,可以配置):
第二显示区域的显示宽度=长边宽度*(参考高度/长边高度)–参考高度*2
第一显示区域的显示宽度=显示屏幕的长边长度-第二显示界面的显示宽度
通过本实施例,通过新增界面区域配置组件,从而通过界面区域配置组件对显示屏幕进行配置,可以准确地配置在第一显示界面与第二显示界面的显示宽度与显示高度,从而达到了准确显示目标界面的效果。
作为一种可选的实施方案,第二显示区域的显示高度小于等于第一显示区域的显示高度,第一显示区域的显示高度小于等于显示屏幕的短边长度。
通过本实施例,由于第二显示区域的显示高度小于等于第一显示区域的显示高度,以及第一显示区域的显示高度小于等于显示屏幕的短边长度,从而在保证第一显示区域与第二显示区域的显示准确性的同时,使显示屏幕更美观。
以下结合图10与图11对上述界面显示方法进行说明。在相关技术中,由于终端的显示屏幕可能存在不同的布局,而采用现有的UI设计会使终端的显示屏幕上所显示的内容不完整,从而造成人机交互操作无法完成。而本申请中在终端的显示屏幕上显示内容时,是在第一显示区域中显示目标界面中的界面元素,在第二显示界面中显示目标界面之外的填充元素。用户可以与在第一显示区域中显示的内容完成交互,而由于第二显示界面中显示有填充元素,既保证了显示界面的美观,又避免了刘海屏遮挡显示内容而无法完成人机交互操作的问题。如图10所示,为第二显示区域位于第一显示区域一侧的情况,此时第二显示区域中显示的内容为填充元素,第一显示区域中显示的是目标界面中的界面元素。图11为第二显示区域位于第一显示区域两侧的情况。此时,两侧的第二显示区域中同时显示填充元素,第一显示区域显示界面元素。
需要说明的是,对于前述的各方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本发明并不受所描述的动作顺序的限制,因为依据本发明,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本发明所必须的。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中,包括若干指令用以使得一台终端设备(可以是手机,计算机,服务器,或者网络设备等)执行本发明各个实施例的方法。
根据本发明实施例的另一个方面,还提供了一种用于实施上述界面显示方法的界面显示装置,如图13所示,该装置包括:
(1)第一获取单元1302,用于获取界面加载请求,其中,界面加载请求用于请求在显示屏幕上加载显示目标应用中待显示的目标界面;
(2)第二获取单元1304,用于响应界面加载请求获取显示屏幕的分辨率;
(3)显示单元1306,用于在根据显示屏幕的分辨率确定出显示屏幕中包括第一显示区域及第二显示区域的情况下,在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素。
可选地,上述界面显示装置可以但不限于应用于在终端显示界面元素的过程中。以终端显示界面元素为例,终端通过获取界面加载请求;响应界面加载请求获取显示屏幕的分辨率;在根据显示屏幕的分辨率确定出显示屏幕中包括第一显示区域及第二显示区域的情况下,在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素,从而可以在显示屏幕的第一显示区域与第二显示区域分别显示不同的内容,进一步达到了可以在第一显示区域中显示重要的目标界面中的界面元素,在第二显示区域显示填充元素的效果。
可选地,上述终端可以为带有显示屏幕的电子设备,例如手机、平板电脑等设备。
可选地,在响应界面加载请求获取显示屏幕的分辨率之后,还可以包括:比对显示屏幕的分辨率的比值与分辨率控制阈值,其中,分辨率控制阈值用于控制显示第二显示区域。在显示屏幕的分辨率的比值大于分辨率控制阈值的情况下,确定出显示屏幕中包括第一显示区域及第二显示区域;在显示屏幕的分辨率的比值小于等于分辨率控制阈值的情况下,确定出显示屏幕中包括第一显示区域。
可选地,在上述显示屏幕的分辨率的比值小于等于分辨率控制阈值的情况下,确定出显示屏幕中包括第一显示区域时,可以通过锚点适配的方法获取第一显示区域。
可选地,上述分辨率控制阈值用于与显示屏幕的分辨率进行比对。在显示屏幕的分辨率的较大值与较小值的比值大于分辨率控制阈值时,可以确定显示第一显示区域与第二显示区域,在显示屏幕的分辨率的较大值与较小值的比值小于分辨率控制阈值时,可以确定显示第一显示区域,同时隐藏第二显示区域。
以下以分辨率控制阈值为2为例,结合图3与图4进行说明。如图3所示,获取终端的显示屏幕的分辨率,例如上述分辨率为1486*640,则1486对应终端的显示屏幕的长,640对应终端的显示屏幕的宽。使用1486/640得到上述分辨率的比值,由于上述分辨率的比值大于了分辨率控制阈值2,确定出终端的显示屏幕上存在第一显示区域与第二显示区域。确定结果可以如图3所示。图3中的终端的显示屏幕上存在第一显示区域与第二显示区域。又例如分辨率为960*640,则960对应终端的显示屏幕的长,640对应终端的显示屏幕的宽。由于上述分辨率的比值小于了分辨率控制阈值,因此确定出终端的显示屏幕中包括第一显示区域。确定结果可以如图4所示。图4中在终端的显示屏幕上显示第一显示区域。
可选地,确定出显示屏幕中包括第一显示区域及第二显示区域包括:根据显示屏幕的分辨率所指示的显示屏幕的长边长度和短边长度,在显示屏幕的长边所在方向上,确定出第一显示区域的显示宽度和第二显示区域的显示宽度,第二显示区域的显示宽度小于等于第一显示区域的显示宽度。
例如,继续结合图3进行说明。如图3所示,在根据显示屏幕的分辨率的比值,确定出显示屏幕的分辨率大于分辨率控制阈值的情况下,确定出终端的显示屏幕上存在第一显示区域与第二显示区域。此时,根据确定的第一显示区域与第二显示区域的显示宽度在终端的显示屏幕上显示第一显示区域与第二显示区域。
可选地,上述第一显示区域的显示宽度与第二显示区域的显示宽度可以通过以下方法获得:获取与显示屏幕匹配的参考高度和参考宽度;获取参考高度与短边长度之间的第一比值作为控制系数;根据长边长度、控制系数及参考宽度,确定第二显示区域的显示宽度;将长边长度与第二显示区域的显示宽度二者之间的第一差值,作为第一显示区域的显示宽度。
例如,通过如下公式获取上述第二显示区域的显示宽度:
第二显示区域的显示宽度=长边长度*(参考高度/短边长度)-参考高度*2。
当获取到与显示屏幕匹配的参考高度和参考宽度后,将获取的上述参考高度与显示屏幕的长边长度及显示屏幕的短边长度输入到上述公式中,则可以得到第二显示区域的显示宽度。在确定了第二显示区域的显示宽度后,根据如下公式,可以得到第一显示区域的显示宽度。
第一显示区域的显示宽度=长边长度-第二显示区域的显示宽度
根据上述第一显示区域的显示宽度与第二显示区域的显示宽度的值,可以在终端的显示屏幕上显示第一显示区域与第二显示区域。
可选地,确定第二显示区域的显示宽度还包括:在第二显示区域包括第一显示子区域及第二显示子区域的情况下,获取与第一显示子区域的显示宽度匹配的显示比例;将第二显示区域的显示宽度与显示比例二者之间的乘积,确定为第一显示子区域的显示宽度;将第二显示区域的显示宽度与第一显示子区域的显示宽度之间的第二差值,作为第二显示子区域的显示宽度。
例如,结合图5进行说明。如图5所示,第二显示区域存在第一显示子区域与第二显示子区域。在通过上述公式获取到第二显示区域的显示宽度的情况下,根据第一显示子区域与第二显示子区域的显示比例,得到第一显示子区域的显示宽度。例如,第一显示子区域与第二显示子区域的显示比例为1:1,则在得到上述第二显示区域的显示宽度后,第一显示子区域的显示宽度等于第二显示区域的显示宽度等于第二显示区域的显示宽度的二分之一。
或者结合图6进行说明。如图6所示,第一显示子区域的显示宽度与第二显示子区域的显示宽度的显示比例不为1:1,此时获取第一显示子区域与第二显示子区域的显示比例,根据上述显示比例分配第一显示子区域的显示宽度与第二显示子区域的显示宽度。
可选地,上述参考宽度与上述参考高度为设定的参考值。
确定出显示屏幕中包括第一显示区域包括:根据显示屏幕的分辨率所指示的显示屏幕的长边长度和短边长度,在显示屏幕的长边所在方向上,确定出第一显示区域的显示宽度,其中,第一显示区域的显示宽度等于显示屏幕的长边长度。
例如,继续结合图3进行说明。如图3所示,显示屏幕中显示第一显示区域,时,将第二显示区域隐藏显示,第一显示区域的显示宽度与显示屏幕的长边长度相等。
在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素包括:根据第一显示区域与显示屏幕之间的显示比例,对目标界面进行缩放;将缩放后的目标界面中的界面元素显示在第一显示区域中;将获取到填充元素显示在第二显示区域中,其中,填充元素包括:与目标界面关联的背景元素。
例如,结合图7进行说明。如图7所示,终端的显示屏幕的长边长度为a,短边长度为c,而第一显示区域的显示宽度为b,显示高度为c。而获取到的显示界面的显示宽度为a,显示高度为c,无法在第一显示区域中显示目标界面。此时,对目标界面进行缩放,得到缩放后的目标界面,并在第一显示区域中显示目标界面,以及在第二显示区域中显示与目标界面关联的背景元素。
可选地,可以通过以下方法对目标界面进行缩放。
将目标界面的显示宽度与显示高度等比例扩大或缩小,在此过程中,当目标界面的显示宽度与第一显示界面的显示宽度相等时,维持目标界面的显示宽度不变,将目标界面的显示高度扩大或缩小,直到目标界面的显示高度与第一显示界面的显示高度相等;或者
当目标界面的显示高度与第一显示界面的显示高度相等时,维持目标界面的显示高度不变,将目标界面的显示宽度扩大或缩小,直到目标界面的显示宽度与第一显示界面的显示宽度相等。
例如,显示屏幕的显示结果可以如图8、图9、图10、图11所示,如图8所示,终端第一显示区域的显示宽度与显示屏幕的显示宽度相等,而第一显示区域的显示高度小于显示屏幕的显示宽度。如图9所示,第一显示区域的显示高度小于显示屏幕的显示高度,而第二显示区域的显示高度小于第一显示区域的显示高度。如图10所示,第二显示区域不包含第一显示子区域与第二显示子区域,第二显示区域位于第一显示区域的左侧。如图11所示,第二显示区域包含第一显示子区域与第二显示子区域,第一显示子区域位于第一显示区域左侧,第二显示子区域位于第一显示区域右侧。
可选地,在第二显示区域中显示目标界面之外的填充元素包括:新增界面区域适配组件,其中,界面区域适配组件包括:用于控制在第一显示区域中显示界面元素的第一子适配组件,及用于控制在第二显示区域中显示填充元素的第二子适配组件;在显示屏幕的分辨率大于分辨率控制阈值的情况下,通过第一子适配组件控制在第一显示区域中显示界面元素,并通过第二子适配组件控制在第二显示区域中显示填充元素;在显示屏幕的分辨率小于等于分辨率控制阈值的情况下,通过第一子适配组件控制在第一显示区域中显示界面元素,并通过第二子适配组件控制隐藏第二显示区域中的填充元素。
可选地,可以预先在UI窗口Prefab下设置四个Panel节点,分别是左节点(left节点),中间节点(center节点),右节点(right节点),背景节点(bg节点),(屏幕分辨率比超过2:1的情况下,left节点负责左边超出显示区域,center节点负责放置中间安全区域UI元素,right节点辅助右边超出显示区域,bg节点负责显示全屏背景)在left节点,center节点,right节点下增加CUIFitZoneScript组件,在CUIFitZoneScript组件中设置各个节点的属性。
以下结合图12进行说明:
CUIFitZoneScript组件对left节点的操作是:如果屏幕分辨率比小于2:1,left节点的宽度就为0,里面内容隐藏,等于left节点在这种情况下无效。如果屏幕分辨率比大于2:1,left节点的宽度是超出2:1宽度剩下宽度的一半,里面内容显示。
CUIFitZoneScript组件对right节点的操作是:如果屏幕分辨率比小于2:1,right节点的宽度就为0,里面内容隐藏,等于right节点在这种情况下无效。如果屏幕分辨率比大于2:1,right节点的宽度是超出2:1宽度剩下宽度的一半,里面内容显示。
CUIFitZoneScript组件对center节点的操作是:如果屏幕分辨率比小于2:1,center节点的宽度就是屏幕宽度,里面内容显示,等于适配规则和UGUI默认规则一致。如果屏幕分辨率比大于2:1,left节点的宽度与right节点的宽度确定后,center节点的宽度就锁定在屏幕高度*2的大小里。
CUIFitZoneScript组件核心处理计算公式:
1,如果屏幕分辨率比小于等于X:1,(X默认是2,可以配置):
第二显示区域的显示宽度=0
第一显示区域的显示宽度=显示屏幕的显示宽度
2,如果屏幕分辨率比大于X:1,(X默认是2,可以配置):
第二显示区域的显示宽度=长边宽度*(参考高度/长边高度)–参考高度*2
第一显示区域的显示宽度=显示屏幕的长边长度-第二显示界面的显示宽度
通过本申请实施例,由于采用了获取界面加载请求,其中,界面加载请求用于请求在显示屏幕上加载显示目标应用中待显示的目标界面;响应界面加载请求获取显示屏幕的分辨率;在根据显示屏幕的分辨率确定出显示屏幕中包括第一显示区域及第二显示区域的情况下,在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素的方法,从而可以在显示屏幕的第一显示区域与第二显示区域分别显示不同的内容,进一步达到了可以在第一显示区域中显示重要的目标界面中的界面元素,在第二显示区域显示填充元素的效果。从而解决了相关技术中存在的UI的界面元素无法完整显示,而无法完成人机交互操作的问题。
作为一种可选的实施方案,上述装置还包括:
(1)比对单元,用于在响应界面加载请求获取显示屏幕的分辨率之后,比对显示屏幕的分辨率与分辨率控制阈值,其中,分辨率控制阈值用于控制显示第二显示区域;
(2)第一确定单元,用于在显示屏幕的分辨率大于分辨率控制阈值的情况下,确定出显示屏幕中包括第一显示区域及第二显示区域;
(3)第二确定单元,用于在显示屏幕的分辨率小于等于分辨率控制阈值的情况下,确定出显示屏幕中包括第一显示区域。
可选地,在上述显示屏幕的分辨率的比值小于等于分辨率控制阈值的情况下,确定出显示屏幕中包括第一显示区域时,可以通过锚点适配的方法获取第一显示区域。
可选地,上述分辨率控制阈值用于与显示屏幕的分辨率进行比对。在显示屏幕的分辨率的较大值与较小值的比值大于分辨率控制阈值时,可以确定显示第一显示区域与第二显示区域,在显示屏幕的分辨率的较大值与较小值的比值小于分辨率控制阈值时,可以确定显示第一显示区域,同时隐藏第二显示区域。
以下以分辨率控制阈值为2为例,结合图3与图4进行说明。如图3所示,获取终端的显示屏幕的分辨率,例如上述分辨率为1486*640,则1486对应终端的显示屏幕的长,640对应终端的显示屏幕的宽。使用1486/640得到上述分辨率的比值,由于上述分辨率的比值大于了分辨率控制阈值2,确定出终端的显示屏幕上存在第一显示区域与第二显示区域。确定结果可以如图3所示。图3中的终端的显示屏幕上存在第一显示区域与第二显示区域。又例如分辨率为960*640,则960对应终端的显示屏幕的长,640对应终端的显示屏幕的宽。由于上述分辨率的比值小于了分辨率控制阈值,因此确定出终端的显示屏幕中包括第一显示区域。确定结果可以如图4所示。图4中在终端的显示屏幕上显示第一显示区域。
通过本申请实施例,通过预先设定分辨率控制阈值并且将分辨率与分辨率控制阈值进行比对,根据比对结果确定终端的显示屏幕的第一显示区域与第二显示区域,从而实现了根据不同的终端的屏幕分辨率对终端的显示屏幕中的第一显示区域与第二显示区域做调整,避免了由于终端的操作面板的布局影响导致显示信息丢失的问题,达到了提高终端的显示效率的效果。
作为一种可选的实施方式,上述第一确定单元包括:
(1)第一确定模块,用于根据显示屏幕的分辨率所指示的显示屏幕的长边长度和短边长度,在显示屏幕的长边所在方向上,确定出第一显示区域的显示宽度和第二显示区域的显示宽度,第二显示区域的显示宽度小于等于第一显示区域的显示宽度。
例如,继续结合图3进行说明。如图3所示,在根据显示屏幕的分辨率的比值,确定出显示屏幕的分辨率大于分辨率控制阈值的情况下,确定出终端的显示屏幕上存在第一显示区域与第二显示区域。此时,根据确定的第一显示区域与第二显示区域的显示宽度在终端的显示屏幕上显示第一显示区域与第二显示区域。
通过本实施例,通过在终端的显示屏幕上确定出第一显示区域的显示宽度及显示高度与第二显示区域的显示宽度及显示高度,从而对第一显示区域与第二显示区域的显示宽度与显示高度进行了调整,提高了终端的显示屏幕的显示效率。
作为一种可选的实施方式,上述第一确定模块包括:
(1)第一获取子模块,用于获取与显示屏幕匹配的参考高度和参考宽度;
(2)第二获取子模块,用于获取参考高度与短边长度之间的第一比值作为控制系数;
(3)第一确定子模块,用于根据长边长度、控制系数及参考宽度,确定第二显示区域的显示宽度;
第二确定子模块,用于将长边长度与第二显示区域的显示宽度二者之间的第一差值,作为第一显示区域的显示宽度。
例如,通过如下公式获取上述第二显示区域的显示宽度:
第二显示区域的显示宽度=长边长度*(参考高度/短边长度)-参考高度*2。
当获取到与显示屏幕匹配的参考高度和参考宽度后,将获取的上述参考高度与显示屏幕的长边长度及显示屏幕的短边长度输入到上述公式中,则可以得到第二显示区域的显示宽度。在确定了第二显示区域的显示宽度后,根据如下公式,可以得到第一显示区域的显示宽度。
第一显示区域的显示宽度=长边长度-第二显示区域的显示宽度
根据上述第一显示区域的显示宽度与第二显示区域的显示宽度的值,可以在终端的显示屏幕上显示第一显示区域与第二显示区域。
通过本实施例,通过根据上述公式获取第一显示界面的显示宽度与第二显示界面的显示宽度,从而可以准确确定第二显示区域的显示宽度,进而确定第一显示界面的显示宽度,提高了终端的显示屏幕的显示准确度的效果。
作为一种可选的实施方式,上述第一确定模块还包括:
(1)第三获取子模块,用于在根据长边长度、控制系数及参考宽度,确定第二显示区域的显示宽度之后,在第二显示区域包括第一显示子区域及第二显示子区域的情况下,获取与第一显示子区域的显示宽度匹配的显示比例;
(2)第三确定子模块,用于将第二显示区域的显示宽度与显示比例二者之间的乘积,确定为第一显示子区域的显示宽度;
(3)第四确定子模块,用于将第二显示区域的显示宽度与第一显示子区域的显示宽度之间的第二差值,作为第二显示子区域的显示宽度。
例如,结合图5进行说明。如图5所示,第二显示区域存在第一显示子区域与第二显示子区域。在通过上述公式获取到第二显示区域的显示宽度的情况下,根据第一显示子区域与第二显示子区域的显示比例,得到第一显示子区域的显示宽度。例如,第一显示子区域与第二显示子区域的显示比例为1:1,则在得到上述第二显示区域的显示宽度后,第一显示子区域的显示宽度等于第二显示区域的显示宽度等于第二显示区域的显示宽度的二分之一。
或者结合图6进行说明。如图6所示,第一显示子区域的显示宽度与第二显示子区域的显示宽度的显示比例不为1:1,此时获取第一显示子区域与第二显示子区域的显示比例,根据上述显示比例分配第一显示子区域的显示宽度与第二显示子区域的显示宽度。
可选地,上述参考宽度与上述参考高度为设定的参考值。
通过本实施例,通过根据显示屏幕的长边长度与短边长度与控制系数得到第一显示区域的显示宽度与第二显示区域的显示宽度,从而对终端的显示屏幕中的第一显示区域与第二显示区域进行了控制,避免了第一显示区域与第二显示区域无法正常显示的问题,提高了终端的显示屏幕的显示效率。
作为一种可选的实施方式,上述第二确定单元包括:
(1)第二确定模块,用于根据显示屏幕的分辨率所指示的显示屏幕的长边长度和短边长度,在显示屏幕的长边所在方向上,确定出第一显示区域的显示宽度,其中,第一显示区域的显示宽度等于显示屏幕的长边长度。
例如,继续结合图3进行说明。如图3所示,显示屏幕中显示第一显示区域,时,将第二显示区域隐藏显示,第一显示区域的显示宽度与显示屏幕的长边长度相等。
通过本实施例,在终端的分辨率小于等于分辨率控制阈值时,在终端的显示屏幕上显示第一显示区域,隐藏第二显示区域,从而可以实现第一显示区域填充满终端的显示屏幕,提高了终端的显示屏幕的显示效率。
作为一种可选的实施方式,上述显示单元包括:
(1)缩放模块,用于根据第一显示区域与显示屏幕之间的显示比例,对目标界面进行缩放;
(2)第一显示模块,用于将缩放后的目标界面中的界面元素显示在第一显示区域中;
(3)第二显示模块,用于将获取到填充元素显示在第二显示区域中,其中,填充元素包括:与目标界面关联的背景元素。
例如,结合图7进行说明。如图7所示,终端的显示屏幕的长边长度为a,短边长度为c,而第一显示区域的显示宽度为b,显示高度为c。而获取到的显示界面的显示宽度为a,显示高度为c,无法在第一显示区域中显示目标界面。此时,对目标界面进行缩放,得到缩放后的目标界面,并在第一显示区域中显示目标界面,以及在第二显示区域中显示与目标界面关联的背景元素。
例如,显示屏幕的显示结果可以如图8、图9、图10、图11所示,如图8所示,终端第一显示区域的显示宽度与显示屏幕的显示宽度相等,而第一显示区域的显示高度小于显示屏幕的显示宽度。如图9所示,第一显示区域的显示高度小于显示屏幕的显示高度,而第二显示区域的显示高度小于第一显示区域的显示高度。如图10所示,第二显示区域不包含第一显示子区域与第二显示子区域,第二显示区域位于第一显示区域的左侧。如图11所示,第二显示区域包含第一显示子区域与第二显示子区域,第一显示子区域位于第一显示区域左侧,第二显示子区域位于第一显示区域右侧。
需要说明的是,可以通过以下方法对目标界面进行缩放。
将目标界面的显示宽度与显示高度等比例扩大或缩小,在此过程中,当目标界面的显示宽度与第一显示界面的显示宽度相等时,维持目标界面的显示宽度不变,将目标界面的显示高度扩大或缩小,直到目标界面的显示高度与第一显示界面的显示高度相等;或者
当目标界面的显示高度与第一显示界面的显示高度相等时,维持目标界面的显示高度不变,将目标界面的显示宽度扩大或缩小,直到目标界面的显示宽度与第一显示界面的显示宽度相等。
通过本实施例,通过对目标界面进行缩放,从而将缩放后的目标界面显示在第一显示区域中,并在第二显示区域中显示背景元素,从而解决了相关技术中记载的UI的界面元素无法完整显示,而无法完成人机交互操作的问题,达到了提高显示屏幕的显示效率的效果。
作为一种可选的实施方式,上述显示单元还包括:
(1)新增模块,用于新增界面区域适配组件,其中,界面区域适配组件包括:用于控制在第一显示区域中显示界面元素的第一子适配组件,及用于控制在第二显示区域中显示填充元素的第二子适配组件;
(2)第三显示模块,用于在显示屏幕的分辨率大于分辨率控制阈值的情况下,通过第一子适配组件控制在第一显示区域中显示界面元素,并通过第二子适配组件控制在第二显示区域中显示填充元素;
(3)第四显示模块,用于在显示屏幕的分辨率小于等于分辨率控制阈值的情况下,通过第一子适配组件控制在第一显示区域中显示界面元素,并通过第二子适配组件控制隐藏第二显示区域中的填充元素。
可选地,可以预先在UI窗口Prefab下设置四个Panel节点,分别是左节点(left节点),中间节点(center节点),右节点(right节点),背景节点(bg节点),(屏幕分辨率比超过2:1的情况下,left节点负责左边超出显示区域,center节点负责放置中间安全区域UI元素,right节点辅助右边超出显示区域,bg节点负责显示全屏背景)在left节点,center节点,right节点下增加CUIFitZoneScript组件,在CUIFitZoneScript组件中设置各个节点的属性。
以下结合图12进行说明:
CUIFitZoneScript组件对left节点的操作是:如果屏幕分辨率比小于2:1,left节点的宽度就为0,里面内容隐藏,等于left节点在这种情况下无效。如果屏幕分辨率比大于2:1,left节点的宽度是超出2:1宽度剩下宽度的一半,里面内容显示。
CUIFitZoneScript组件对right节点的操作是:如果屏幕分辨率比小于2:1,right节点的宽度就为0,里面内容隐藏,等于right节点在这种情况下无效。如果屏幕分辨率比大于2:1,right节点的宽度是超出2:1宽度剩下宽度的一半,里面内容显示。
CUIFitZoneScript组件对center节点的操作是:如果屏幕分辨率比小于2:1,center节点的宽度就是屏幕宽度,里面内容显示,等于适配规则和UGUI默认规则一致。如果屏幕分辨率比大于2:1,left节点的宽度与right节点的宽度确定后,center节点的宽度就锁定在屏幕高度*2的大小里。
CUIFitZoneScript组件核心处理计算公式:
1,如果屏幕分辨率比小于等于X:1,(X默认是2,可以配置):
第二显示区域的显示宽度=0
第一显示区域的显示宽度=显示屏幕的显示宽度
2,如果屏幕分辨率比大于X:1,(X默认是2,可以配置):
第二显示区域的显示宽度=长边宽度*(参考高度/长边高度)–参考高度*2
第一显示区域的显示宽度=显示屏幕的长边长度-第二显示界面的显示宽度
通过本实施例,通过新增界面区域配置组件,从而通过界面区域配置组件对显示屏幕进行配置,可以准确地配置在第一显示界面与第二显示界面的显示宽度与显示高度,从而达到了准确显示目标界面的效果。
作为一种可选的实施方式,上述第二显示区域的显示高度小于等于第一显示区域的显示高度,第一显示区域的显示高度小于等于显示屏幕的短边长度。
通过本实施例,由于第二显示区域的显示高度小于等于第一显示区域的显示高度,以及第一显示区域的显示高度小于等于显示屏幕的短边长度,从而在保证第一显示区域与第二显示区域的显示准确性的同时,使显示屏幕更美观。
根据本发明实施例的又一个方面,还提供了一种用于实施上述界面显示方法的电子装置,如图14所示,该电子装置包括存储器1402、处理器1404、传输装置1406及显示器1408。该存储器中存储有计算机程序,该处理器被设置为通过计算机程序执行上述任一项方法实施例中的步骤。
可选地,在本实施例中,上述电子装置可以位于计算机网络的多个网络设备中的至少一个网络设备。
可选地,在本实施例中,上述处理器可以被设置为通过计算机程序执行以下步骤:
S1,获取界面加载请求,其中,界面加载请求用于请求在显示屏幕上加载显示目标应用中待显示的目标界面;
S2,响应界面加载请求获取显示屏幕的分辨率;
S3,在根据显示屏幕的分辨率确定出显示屏幕中包括第一显示区域及第二显示区域的情况下,在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素。
可选地,本领域普通技术人员可以理解,图14所示的结构仅为示意,电子装置也可以是智能手机(如Android手机、iOS手机等)、平板电脑、掌上电脑以及移动互联网设备(Mobile Internet Devices,MID)、PAD等终端设备。图14其并不对上述电子装置的结构造成限定。例如,电子装置还可包括比图14中所示更多或者更少的组件(如网络接口等),或者具有与图14所示不同的配置。
其中,存储器1402可用于存储软件程序以及模块,如本发明实施例中的界面显示方法和装置对应的程序指令/模块,处理器1404通过运行存储在存储器1402内的软件程序以及模块,从而执行各种功能应用以及数据处理,即实现上述的界面显示方法。存储器1402可包括高速随机存储器,还可以包括非易失性存储器,如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中,存储器1402可进一步包括相对于处理器1404远程设置的存储器,这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
上述的传输装置1406用于经由一个网络接收或者发送数据。上述的网络具体实例可包括有线网络及无线网络。在一个实例中,传输装置1406包括一个网络适配器(NetworkInterface Controller,NIC),其可通过网线与其他网络设备与路由器相连从而可与互联网或局域网进行通讯。在一个实例中,传输装置1406为射频(Radio Frequency,RF)模块,其用于通过无线方式与互联网进行通讯。
其中,具体地,存储器1402用于存储目标界面中的界面元素等内容。
根据本发明实施例的又一方面,还提供了一种存储介质,该存储介质中存储有计算机程序,其中,该计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。
可选地,在本实施例中,上述存储介质可以被设置为存储用于执行以下步骤的计算机程序:
S1,获取界面加载请求,其中,界面加载请求用于请求在显示屏幕上加载显示目标应用中待显示的目标界面;
S2,响应界面加载请求获取显示屏幕的分辨率;
S3,在根据显示屏幕的分辨率确定出显示屏幕中包括第一显示区域及第二显示区域的情况下,在第一显示区域中显示目标界面中的界面元素,在第二显示区域中显示目标界面之外的填充元素。
可选地,在本实施例中,上述存储介质可以被设置为存储用于执行以下步骤的计算机程序:
S1,比对显示屏幕的分辨率与分辨率控制阈值,其中,分辨率控制阈值用于控制显示第二显示区域;
S2,在显示屏幕的分辨率大于分辨率控制阈值的情况下,确定出显示屏幕中包括第一显示区域及第二显示区域;
S3,在显示屏幕的分辨率小于等于分辨率控制阈值的情况下,确定出显示屏幕中包括第一显示区域。
可选地,在本实施例中,上述存储介质可以被设置为存储用于执行以下步骤的计算机程序:
S1,根据显示屏幕的分辨率所指示的显示屏幕的长边长度和短边长度,在显示屏幕的长边所在方向上,确定出第一显示区域的显示宽度和第二显示区域的显示宽度,第二显示区域的显示宽度小于等于第一显示区域的显示宽度。
可选地,在本实施例中,上述存储介质可以被设置为存储用于执行以下步骤的计算机程序:
S1,获取与显示屏幕匹配的参考高度和参考宽度;
S2,获取参考高度与短边长度之间的第一比值作为控制系数;
S3,根据长边长度、控制系数及参考宽度,确定第二显示区域的显示宽度;
S4,将长边长度与第二显示区域的显示宽度二者之间的第一差值,作为第一显示区域的显示宽度。
可选地,在本实施例中,上述存储介质可以被设置为存储用于执行以下步骤的计算机程序:
S1,在第二显示区域包括第一显示子区域及第二显示子区域的情况下,获取与第一显示子区域的显示宽度匹配的显示比例;
S2,将第二显示区域的显示宽度与显示比例二者之间的乘积,确定为第一显示子区域的显示宽度;
S3,将第二显示区域的显示宽度与第一显示子区域的显示宽度之间的第二差值,作为第二显示子区域的显示宽度。
可选地,在本实施例中,上述存储介质可以被设置为存储用于执行以下步骤的计算机程序:
S1,根据显示屏幕的分辨率所指示的显示屏幕的长边长度和短边长度,在显示屏幕的长边所在方向上,确定出第一显示区域的显示宽度,其中,第一显示区域的显示宽度等于显示屏幕的长边长度。
可选地,在本实施例中,上述存储介质可以被设置为存储用于执行以下步骤的计算机程序:
S1,根据第一显示区域与显示屏幕之间的显示比例,对目标界面进行缩放;
S2,将缩放后的目标界面中的界面元素显示在第一显示区域中;
S3,将获取到填充元素显示在第二显示区域中,其中,填充元素包括:与目标界面关联的背景元素。
可选地,在本实施例中,上述存储介质可以被设置为存储用于执行以下步骤的计算机程序:
S1,新增界面区域适配组件,其中,界面区域适配组件包括:用于控制在第一显示区域中显示界面元素的第一子适配组件,及用于控制在第二显示区域中显示填充元素的第二子适配组件;
S2,在显示屏幕的分辨率大于分辨率控制阈值的情况下,通过第一子适配组件控制在第一显示区域中显示界面元素,并通过第二子适配组件控制在第二显示区域中显示填充元素;
S3,在显示屏幕的分辨率小于等于分辨率控制阈值的情况下,通过第一子适配组件控制在第一显示区域中显示界面元素,并通过第二子适配组件控制隐藏第二显示区域中的填充元素。
可选地,在本实施例中,本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令终端设备相关的硬件来完成,该程序可以存储于一计算机可读存储介质中,存储介质可以包括:闪存盘、只读存储器(Read-Only Memory,ROM)、随机存取器(Random Access Memory,RAM)、磁盘或光盘等。
上述本发明实施例序号仅仅为了描述,不代表实施例的优劣。
上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在上述计算机可读取的存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在存储介质中,包括若干指令用以使得一台或多台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。
在本发明的上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中,应该理解到,所揭露的客户端,可通过其它的方式实现。其中,以上所描述的装置实施例仅仅是示意性的,例如所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,单元或模块的间接耦合或通信连接,可以是电性或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本发明各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
以上所述仅是本发明的优选实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本发明原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也应视为本发明的保护范围。

Claims (16)

1.一种界面显示方法,其特征在于,包括:
获取界面加载请求,其中,所述界面加载请求用于请求在显示屏幕上加载显示目标应用中待显示的目标界面;
响应所述界面加载请求获取所述显示屏幕的分辨率;
比对所述显示屏幕的分辨率与分辨率控制阈值,所述分辨率控制阈值用于控制显示第二显示区域;
在所述显示屏幕的分辨率大于所述分辨率控制阈值的情况下,确定出所述显示屏幕中包括第一显示区域及所述第二显示区域时,获取与所述显示屏幕匹配的参考高度和参考宽度,并基于所述参考高度和所述参考宽度,确定所述第一显示区域的显示宽度以及所述第二显示区域的显示宽度,并基于所述第一显示区域的显示宽度在所述显示屏幕上显示所述第一显示区域,基于所述第二显示区域的显示宽度在所述显示屏幕上显示所述第二显示区域;
根据所述第一显示区域与所述显示屏幕之间的显示比例,对所述目标界面进行缩放,将缩放后的所述目标界面中的界面元素显示在所述第一显示区域中,将不同于所述界面元素的填充元素显示在所述第二显示区域中,其中,所述填充元素包括:与所述目标界面关联的背景元素;
在所述显示屏幕的分辨率小于等于所述分辨率控制阈值的情况下,确定出所述显示屏幕中包括所述第一显示区域时,显示所述第一显示区域,并隐藏所述第二显示区域。
2.根据权利要求1所述的方法,其特征在于,所述确定出所述显示屏幕中包括所述第一显示区域及所述第二显示区域包括:
根据所述显示屏幕的分辨率所指示的所述显示屏幕的长边长度和短边长度,在所述显示屏幕的长边所在方向上,确定出所述第一显示区域的显示宽度和所述第二显示区域的显示宽度,所述第二显示区域的显示宽度小于等于所述第一显示区域的显示宽度。
3.根据权利要求2所述的方法,其特征在于,所述确定出所述第一显示区域的显示宽度和所述第二显示区域的显示宽度包括:
获取与所述显示屏幕匹配的参考高度和参考宽度;
获取所述参考高度与所述短边长度之间的第一比值作为控制系数;
根据所述长边长度、所述控制系数及所述参考宽度,确定所述第二显示区域的显示宽度;
将所述长边长度与所述第二显示区域的显示宽度二者之间的第一差值,作为所述第一显示区域的显示宽度。
4.根据权利要求3所述的方法,其特征在于,在所述根据所述长边长度、所述控制系数及所述参考宽度,确定所述第二显示区域的显示宽度之后,还包括:
在所述第二显示区域包括第一显示子区域及第二显示子区域的情况下,获取与所述第一显示子区域的显示宽度匹配的显示比例;
将所述第二显示区域的显示宽度与所述显示比例二者之间的乘积,确定为所述第一显示子区域的显示宽度;
将所述第二显示区域的显示宽度与所述第一显示子区域的显示宽度之间的第二差值,作为所述第二显示子区域的显示宽度。
5.根据权利要求1所述的方法,其特征在于,所述确定出所述显示屏幕中包括所述第一显示区域包括:
根据所述显示屏幕的分辨率所指示的所述显示屏幕的长边长度和短边长度,在所述显示屏幕的长边所在方向上,确定出所述第一显示区域的显示宽度,其中,所述第一显示区域的显示宽度等于所述显示屏幕的所述长边长度。
6.根据权利要求2至5中任一项所述的方法,其特征在于,所述在所述第一显示区域中显示所述目标界面中的界面元素,在所述第二显示区域中显示所述目标界面之外的填充元素,包括:
新增界面区域适配组件,其中,所述界面区域适配组件包括:用于控制在所述第一显示区域中显示所述界面元素的第一子适配组件,及用于控制在所述第二显示区域中显示所述填充元素的第二子适配组件;
在所述显示屏幕的分辨率大于所述分辨率控制阈值的情况下,通过所述第一子适配组件控制在所述第一显示区域中显示所述界面元素,并通过所述第二子适配组件控制在所述第二显示区域中显示所述填充元素;
在所述显示屏幕的分辨率小于等于所述分辨率控制阈值的情况下,通过所述第一子适配组件控制在所述第一显示区域中显示所述界面元素,并通过所述第二子适配组件控制隐藏所述第二显示区域中的所述填充元素。
7.根据权利要求1至5中任一项所述的方法,其特征在于,所述第二显示区域的显示高度小于等于所述第一显示区域的显示高度,所述第一显示区域的显示高度小于等于所述显示屏幕的短边长度。
8.一种界面显示装置,其特征在于,包括:
第一获取单元,用于获取界面加载请求,其中,所述界面加载请求用于请求在显示屏幕上加载显示目标应用中待显示的目标界面;
第二获取单元,用于响应所述界面加载请求获取所述显示屏幕的分辨率;
显示单元,用于比对所述显示屏幕的分辨率与分辨率控制阈值,所述分辨率控制阈值用于控制显示第二显示区域,在所述显示屏幕的分辨率大于所述分辨率控制阈值的情况下,确定出所述显示屏幕中包括第一显示区域及所述第二显示区域时,获取与所述显示屏幕匹配的参考高度和参考宽度,并基于所述参考高度和所述参考宽度,确定所述第一显示区域的显示宽度以及所述第二显示区域的显示宽度,并基于所述第一显示区域的显示宽度在所述显示屏幕上显示所述第一显示区域,基于所述第二显示区域的显示宽度在所述显示屏幕上显示所述第二显示区域;根据所述第一显示区域与所述显示屏幕之间的显示比例,对所述目标界面进行缩放,将缩放后的所述目标界面中的界面元素显示在所述第一显示区域中,将不同于所述界面元素的填充元素显示在所述第二显示区域中,其中,所述填充元素包括:与所述目标界面关联的背景元素;还用于在所述显示屏幕的分辨率小于等于所述分辨率控制阈值的情况下,确定出所述显示屏幕中包括所述第一显示区域时,显示所述第一显示区域,并隐藏所述第二显示区域。
9.根据权利要求8所述的装置,其特征在于,所述显示单元包括:
第一确定模块,用于根据所述显示屏幕的分辨率所指示的所述显示屏幕的长边长度和短边长度,在所述显示屏幕的长边所在方向上,确定出所述第一显示区域的显示宽度和所述第二显示区域的显示宽度,所述第二显示区域的显示宽度小于等于所述第一显示区域的显示宽度。
10.根据权利要求9所述的装置,其特征在于,所述第一确定模块包括:
第一获取子模块,用于获取与所述显示屏幕匹配的参考高度和参考宽度;
第二获取子模块,用于获取所述参考高度与所述短边长度之间的第一比值作为控制系数;
第一确定子模块,用于根据所述长边长度、所述控制系数及所述参考宽度,确定所述第二显示区域的显示宽度;
第二确定子模块,用于将所述长边长度与所述第二显示区域的显示宽度二者之间的第一差值,作为所述第一显示区域的显示宽度。
11.根据权利要求10所述的装置,其特征在于,所述第一确定模块还包括:
第三获取子模块,用于在所述根据所述长边长度、所述控制系数及所述参考宽度,确定所述第二显示区域的显示宽度之后,在所述第二显示区域包括第一显示子区域及第二显示子区域的情况下,获取与所述第一显示子区域的显示宽度匹配的显示比例;
第三确定子模块,用于将所述第二显示区域的显示宽度与所述显示比例二者之间的乘积,确定为所述第一显示子区域的显示宽度;
第四确定子模块,用于将所述第二显示区域的显示宽度与所述第一显示子区域的显示宽度之间的第二差值,作为所述第二显示子区域的显示宽度。
12.根据权利要求8所述的装置,其特征在于,所述显示单元包括:
第二确定模块,用于根据所述显示屏幕的分辨率所指示的所述显示屏幕的长边长度和短边长度,在所述显示屏幕的长边所在方向上,确定出所述第一显示区域的显示宽度,其中,所述第一显示区域的显示宽度等于所述显示屏幕的所述长边长度。
13.根据权利要求9至12中任一项所述的装置,其特征在于,所述显示单元还包括:
新增模块,用于新增界面区域适配组件,其中,所述界面区域适配组件包括:用于控制在所述第一显示区域中显示所述界面元素的第一子适配组件,及用于控制在所述第二显示区域中显示所述填充元素的第二子适配组件;
第三显示模块,用于在所述显示屏幕的分辨率大于所述分辨率控制阈值的情况下,通过所述第一子适配组件控制在所述第一显示区域中显示所述界面元素,并通过所述第二子适配组件控制在所述第二显示区域中显示所述填充元素;
第四显示模块,用于在所述显示屏幕的分辨率小于等于所述分辨率控制阈值的情况下,通过所述第一子适配组件控制在所述第一显示区域中显示所述界面元素,并通过所述第二子适配组件控制隐藏所述第二显示区域中的所述填充元素。
14.根据权利要求8至12中任一项所述的装置,其特征在于,所述第二显示区域的显示高度小于等于所述第一显示区域的显示高度,所述第一显示区域的显示高度小于等于所述显示屏幕的短边长度。
15.一种存储介质,其特征在于,所述存储介质中存储有计算机程序,其中,所述计算机程序被设置为运行时执行所述权利要求1至7任一项中所述的方法。
16.一种电子装置,包括存储器和处理器,其特征在于,所述存储器中存储有计算机程序,所述处理器被设置为通过所述计算机程序执行所述权利要求1至7任一项中所述的方法。
CN201810338721.1A 2018-04-16 2018-04-16 界面显示方法和装置、存储介质及电子装置 Active CN108647069B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810338721.1A CN108647069B (zh) 2018-04-16 2018-04-16 界面显示方法和装置、存储介质及电子装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810338721.1A CN108647069B (zh) 2018-04-16 2018-04-16 界面显示方法和装置、存储介质及电子装置

Publications (2)

Publication Number Publication Date
CN108647069A CN108647069A (zh) 2018-10-12
CN108647069B true CN108647069B (zh) 2022-07-29

Family

ID=63746506

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810338721.1A Active CN108647069B (zh) 2018-04-16 2018-04-16 界面显示方法和装置、存储介质及电子装置

Country Status (1)

Country Link
CN (1) CN108647069B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111986088B (zh) * 2020-08-28 2023-06-30 网易(杭州)网络有限公司 图像处理方法、装置、存储介质及终端设备
CN111949360A (zh) * 2020-09-01 2020-11-17 网易(杭州)网络有限公司 用户界面适配的方法及装置、电子设备、存储介质

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103970436A (zh) * 2013-01-25 2014-08-06 人人游戏网络科技发展(上海)有限公司 在电子设备的屏幕上进行显示的方法和装置
CN106648510A (zh) * 2016-12-16 2017-05-10 竞技世界(北京)网络技术有限公司 一种显示分辨率的显示方法及装置

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7034791B1 (en) * 2000-12-14 2006-04-25 Gary Odom Digital video display employing minimal visual conveyance
CN101477436A (zh) * 2008-12-18 2009-07-08 腾讯科技(深圳)有限公司 对程序窗口的客户区进行交互的方法与系统
CN102346646A (zh) * 2011-09-19 2012-02-08 百度在线网络技术(北京)有限公司 一种用于在移动终端的显示屏幕上显示内容的方法与装置
US9588674B2 (en) * 2012-11-30 2017-03-07 Qualcomm Incorporated Methods and systems for providing an automated split-screen user interface on a device
KR102245363B1 (ko) * 2014-04-21 2021-04-28 엘지전자 주식회사 디스플레이 장치 및 제어 방법
CN104035662A (zh) * 2014-05-15 2014-09-10 小米科技有限责任公司 一种界面显示方法、装置及终端
JP6569415B2 (ja) * 2015-09-15 2019-09-04 株式会社リコー 表示入力装置、画像形成装置及び電子機器と表示制御方法並びにプログラム
CN107608550B (zh) * 2017-09-11 2020-05-26 Oppo广东移动通信有限公司 触摸操作响应方法及装置

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103970436A (zh) * 2013-01-25 2014-08-06 人人游戏网络科技发展(上海)有限公司 在电子设备的屏幕上进行显示的方法和装置
CN106648510A (zh) * 2016-12-16 2017-05-10 竞技世界(北京)网络技术有限公司 一种显示分辨率的显示方法及装置

Also Published As

Publication number Publication date
CN108647069A (zh) 2018-10-12

Similar Documents

Publication Publication Date Title
CN109461199B (zh) 画面渲染方法和装置、存储介质及电子装置
CN106775836B (zh) 界面显示方法及界面显示装置
US10671357B2 (en) Preview changes to mobile applications at different display resolutions
CN109783757B (zh) 渲染网页的方法及装置、系统、存储介质、电子装置
CN110764850A (zh) 界面显示方法、参数赋值方法、系统及设备
CN112149025B (zh) 媒体资源展示方法和装置、存储介质及电子设备
US20170046863A1 (en) Systems and methods to display rendered images
CN108057243B (zh) 数据显示方法和装置、存储介质及电子装置
US8887059B2 (en) Method and apparatus of locally controlling display content of a remote system
CN111324275B (zh) 显示画面中元素的播报方法及装置
CN107943372A (zh) 一种界面显示方法、装置及计算机可读存储介质
CN108647069B (zh) 界面显示方法和装置、存储介质及电子装置
CN111443914B (zh) 动画展示方法以及装置
CN112055244B (zh) 图像获取方法、装置、服务器和电子设备
CN111813282B (zh) 一种数据表单的展示方法和装置
CN110928397B (zh) 用户界面刷新方法、装置、存储介质及电子装置
CN111465917A (zh) 可弯折电子设备及其界面适配方法
CN108875085B (zh) 混合应用的图片处理方法、装置、计算机设备及存储介质
CN111813466A (zh) 水印添加方法、装置、终端设备及计算机存储介质
CN106886435A (zh) 微件的加载方法及装置
CN114265653A (zh) 界面显示方法、装置、设备、存储介质及程序产品
CN109901904B (zh) 穿戴式设备中应用画面调整方法和穿戴式设备
CN111258704A (zh) 应用画面的显示方法和装置、存储介质及电子装置
EP2987100A1 (en) Systems and methods for programming behavior of a website to respond to capabilities of different devices
CN111767492A (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
GR01 Patent grant
GR01 Patent grant