WO2022036917A1 - 界面调整方法、装置、计算机程序及计算机可读介质 - Google Patents

界面调整方法、装置、计算机程序及计算机可读介质 Download PDF

Info

Publication number
WO2022036917A1
WO2022036917A1 PCT/CN2020/132061 CN2020132061W WO2022036917A1 WO 2022036917 A1 WO2022036917 A1 WO 2022036917A1 CN 2020132061 W CN2020132061 W CN 2020132061W WO 2022036917 A1 WO2022036917 A1 WO 2022036917A1
Authority
WO
WIPO (PCT)
Prior art keywords
interface
screen
target
information
width
Prior art date
Application number
PCT/CN2020/132061
Other languages
English (en)
French (fr)
Inventor
范睿男
Original Assignee
完美世界(重庆)互动科技有限公司
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 完美世界(重庆)互动科技有限公司 filed Critical 完美世界(重庆)互动科技有限公司
Publication of WO2022036917A1 publication Critical patent/WO2022036917A1/zh

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
    • 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
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

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

Abstract

一种界面调整方法、装置、计算机程序及计算机可读介质,包括当检测到针对目标设备屏幕的目标界面展示请求时,根据目标设备屏幕的屏幕宽高比值,计算绘制宽度和绘制高度(101);将目标界面的界面背景层的尺寸调整为绘制宽度和绘制高度(102);基于绘制宽度和绘制高度对界面装饰层在目标界面的位置参数进行计算,得到定位信息,将界面装饰层按照定位信息停靠在目标界面(103);根据绘制宽度和绘制高度,在目标界面布局界面交互层(104);按照目标界面中的文字布局,将目标界面中的界面信息填充至界面交互层(105)。根据屏幕宽高比值,计算绘制宽度和绘制高度,自适应调整,无需建立黑名单,无需单边缩进或增加填充图,令画面美观。

Description

界面调整方法、装置、计算机程序及计算机可读介质
本申请要求与2020年8月21日提交中国专利局、申请号为202010851700.7、申请名称为“界面调整方法、装置、计算机设备及计算机可读存储介质”的中国专利申请的优先权,其全部内容通过引用结合在申请中。
技术领域
本发明涉及计算机技术领域,尤其涉及一种界面调整方法、装置、计算机程序及计算机可读介质。
背景技术
随着计算机技术的不断发展,各种类型的终端设备越来越多,全面屏的终端设备已经普及,各个终端设备的厂商也在全力发展全面屏。目前,市面上的终端设备屏幕尺寸不一,且不同厂商的终端设备的前置摄像头的位置也各有不同,前置摄像头会占用屏幕中的一部分区域,在具体的显示过程中,很可能会遮挡屏幕两侧停靠的交互功能区或信息展示区,因此,需要对屏幕展示的界面进行调整,保证界面与屏幕的适配。
相关技术中,将前置摄像头会占用屏幕的终端设备以及占用的位置信息记入到黑名单中,由运行在终端设备上的客户端判断该终端设备是否在黑名单中。如果终端设备属于黑名单,则根据终端设备的重力感应方向,判断前置摄像头占用的区域在哪一侧,调整该侧进行单边缩进,缩进的距离为记入在黑名单中的位置信息。
在实现本申请的过程中,申请人发现相关技术至少存在以下问题:
单边缩进的调整需要针对终端设备单独进行调整和适配,调整过程繁琐,而且会导致显示的界面在屏幕中重心偏移,画面不平衡,影响画面的美观度。
发明内容
鉴于上述问题,提出了本发明以便提供一种克服上述问题或者至少部分地解决或者减缓上述问题的界面调整方法、装置、计算机程序及计算机可读介质。
根据本发明的一个方面,提供了一种界面调整方法,该方法包括:当 检测到针对目标设备屏幕的目标界面展示请求时,根据所述目标设备屏幕的屏幕宽高比值,计算绘制宽度和绘制高度;将所述目标界面的界面背景层的尺寸调整为所述绘制宽度和所述绘制高度,所述界面背景层是填充有所述目标界面的界面背景的图层;基于所述绘制宽度和所述绘制高度对界面装饰层在所述目标界面的位置参数进行计算,得到定位信息,将所述界面装饰层按照所述定位信息停靠在所述目标界面,所述界面装饰层是包括所述目标界面的装饰图的图层;根据所述绘制宽度和所述绘制高度,在所述目标界面布局界面交互层,所述界面交互层是设置有所述目标界面的可操作区域的图层;按照所述目标界面中的文字布局,将所述目标界面中的界面信息填充至所述界面交互层,完成对所述目标界面的调整。
根据本发明的另一个方面,提供了一种界面调整装置,该装置包括:第一计算模块,用于当检测到针对目标设备屏幕的目标界面展示请求时,根据所述目标设备屏幕的屏幕宽高比值,计算绘制宽度和绘制高度;调整模块,用于将所述目标界面的界面背景层的尺寸调整为所述绘制宽度和所述绘制高度,所述界面背景层是填充有所述目标界面的界面背景的图层;第二计算模块,用于基于所述绘制宽度和所述绘制高度对界面装饰层在所述目标界面的位置参数进行计算,得到定位信息,将所述界面装饰层按照所述定位信息停靠在所述目标界面,所述界面装饰层是包括所述目标界面的装饰图的图层;布局模块,用于根据所述绘制宽度和所述绘制高度,在所述目标界面布局界面交互层,所述界面交互层是设置有所述目标界面的可操作区域的图层;填充模块,用于按照所述目标界面中的文字布局,将所述目标界面中的界面信息填充至所述界面交互层,完成对所述目标界面的调整。
根据本发明的又一个方面,提供了一种计算机程序,其包括计算机可读代码,当所述计算机可读代码在服务器上运行时,导致所述服务器执行上述界面调整方法。
根据本发明的再一个方面,提供了一种计算机可读介质,其中存储了上述计算机程序。
本发明的有益效果为:
根据目标设备屏幕的屏幕宽高比值,计算绘制宽度和绘制高度,进而基于绘制宽度和绘制高度,将填充有目标界面的界面背景的界面背景层的尺寸 调整为绘制宽度和绘制高度,并确定包括目标界面的装饰图的界面装饰层在目标界面的定位信息,按照定位信息进行停靠,并在目标界面布局设置有目标界面的可操作区域的界面交互层,进而按照目标界面中的文字布局,将目标界面中的界面信息填充至界面交互层,完成对目标界面的调整,根据请求进行界面展示的终端设备的设备屏幕尺寸,实现自适应完成界面的调整,无需判断终端设备是否在黑名单中,且通过自身界面的布局规划,也无需进行单边缩进或增加填充图,简化了界面的调整过程,避免出现显示的界面在屏幕中重心偏移且画面不平衡的问题,保证显示的界面的画面美观,为使用不同终端设备的用户提供相同效果的界面展示。
上述说明仅是本发明技术方案的概述,为了能够更清楚了解本发明的技术手段,而可依照说明书的内容予以实施,并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂,以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述,各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的,而并不认为是对本发明的限制。而且在整个附图中,用相同的参考符号表示相同的部件。在附图中:
图1示意性示出了根据本发明一个实施例的界面调整方法流程示意图;
图2A示意性示出了根据本发明一个实施例的界面调整方法流程示意图;
图2B示意性示出了根据本发明一个实施例的界面调整方法的示意图;
图2C示意性示出了根据本发明一个实施例的界面调整方法的示意图;
图2D示意性示出了根据本发明一个实施例的界面调整方法的示意图;
图2E示意性示出了根据本发明一个实施例的界面调整方法流程示意图;
图3A示意性示出了根据本发明一个实施例的界面调整装置的结构 示意图;
图3B示意性示出了根据本发明一个实施例的界面调整装置的结构示意图;
图3C示意性示出了根据本发明一个实施例的界面调整装置的结构示意图;
图3D示意性示出了根据本发明一个实施例的界面调整装置的结构示意图;
图4示意性地示出了用于执行根据本发明的方法的服务器的框图;以及
图5示意性地示出了用于保持或者携带实现根据本发明的方法的程序代码的存储单元。
具体实施例
下面结合附图和具体的实施方式对本发明作进一步的描述。
本发明实施例提供了一种界面调整方法,如图1所示,该方法包括:
101、当检测到针对目标设备屏幕的目标界面展示请求时,根据目标设备屏幕的屏幕宽高比值,计算绘制宽度和绘制高度。
102、将目标界面的界面背景层的尺寸调整为绘制宽度和绘制高度,界面背景层是填充有目标界面的界面背景的图层。
103、基于绘制宽度和绘制高度对界面装饰层在目标界面的位置参数进行计算,得到定位信息,将界面装饰层按照定位信息停靠在目标界面,界面装饰层是包括目标界面的装饰图的图层。
104、根据绘制宽度和绘制高度,在目标界面布局界面交互层,界面交互层是设置有目标界面的可操作区域的图层。
105、按照目标界面中的文字布局,将目标界面中的界面信息填充至界面交互层,完成对目标界面的调整。
本申请实施例提供的方法,根据目标设备屏幕的屏幕宽高比值,计算绘制宽度和绘制高度,进而基于绘制宽度和绘制高度,将填充有目标界面的界面背景的界面背景层的尺寸调整为绘制宽度和绘制高度,并确定包括目标界面的装饰图的界面装饰层在目标界面的定位信息,按照定位信息进行停靠,并在目标界面布局设置有目标界面的可操作区域的界面交互层,进而按照目 标界面中的文字布局,将目标界面中的界面信息填充至界面交互层,完成对目标界面的调整,根据请求进行界面展示的终端设备的设备屏幕尺寸,实现自适应完成界面的调整,无需判断终端设备是否在黑名单中,且通过自身界面的布局规划,也无需进行单边缩进或增加填充图,简化了界面的调整过程,避免出现显示的界面在屏幕中重心偏移且画面不平衡的问题,保证显示的界面的画面美观,为使用不同终端设备的用户提供相同效果的界面展示。
本申请实施例提供了一种界面调整方法,如图2A所示,该方法包括:
201、当检测到针对目标设备屏幕的目标界面展示请求时,根据目标设备屏幕的屏幕宽高比值,计算绘制宽度和绘制高度。
目前市面上的终端设备的屏幕尺寸不一,全面屏的终端设备已经普及,且各品牌厂商对于终端设备的前置摄像头的位置也各有不同,例如,弹出式前置摄像头、刘海式前置摄像头、眉心式前置摄像头、打孔式前置摄像头等等。在进行游戏、视频、网页等界面的布局设计过程中,大多数游戏、视频等软件都会采用横屏模型展示界面,而由于前置摄像头占用的屏幕区域不同、位置不同,会遮挡屏幕两侧停靠的用于与用户交互的区域或用于进行信息展示的区域,这对界面的布局设计带来了一定困难。另外,不同终端设备的屏幕尺寸比例是不同,比如手机类的终端设备的屏幕尺寸比例通常是16:9至30:13之间,而平板电脑类的终端设备的屏幕尺寸比例通常是4:3至2:1之间,不同屏幕尺寸比例更增加了界面的适配难度。
当下在对界面进行适配时,通常根据不同终端设备进行“特殊区域”定制化,该“特殊区域”也就是前置摄像头占用的区域,在对“特殊区域”定制化处理时,一般采用下述三种方式。第一种方式是,将带有“特殊区域”的终端设备及“特殊区域”的位置信息计入一个黑名单中,由提供界面的客户端在确定当前设备是黑名单中的设备时,根据当前设备的重力感应方向,判断“特殊区域”在当前设备的哪一侧,然后将该侧进行单边缩进,缩进的距离即为记录的位置信息。第二种方式是,客户端在确定当前设备是黑名单中的设备时,在当前设备的屏幕两侧增加两条装饰图,装饰图宽度即为记录的位置信息宽度。第三种方式是,客户端在确定当前设备是黑名单中的设备时,对用户进行强制提醒,提醒用户是否使用当前设备的系统自带的缩进模式,如果当前设备的系统中没有自带的缩进模型,则采用上述方式一或者方 式二自动进行界面的适配。申请人认识到,采用上述三种方式中任一方式进行界面的适配时,从界面表现上看,单边缩进会导致界面所展示的画面在设备的屏幕中重心偏移,画面不平衡,且两侧增加的装饰图无法与不同界面的界面风格相匹配,会有一种“补丁”的效果,影响界面美观度。从交互体验上看,单边缩进会导致用户对界面操作的手势偏移,左右手的停靠区域不一致,且在用户旋转屏幕后,左右手的操作区会改变,非常影响用户的习惯性操作。从成本维护上看,通过黑名单的方式并不能够适应屏幕区域较大的全面屏的终端设备。
因此,本申请提出一种界面调整方法,根据目标界面展示请求进针对的目标设备屏幕的设备屏幕尺寸,自适应完成界面的调整,无需判断终端设备是否在黑名单中,且通过自身界面的布局规划,也无需进行单边缩进或增加填充图,为使用不同终端设备的用户提供相同效果的界面展示。另外,在交互方面,终端设备的屏幕越长,在进行界面调整时,界面两侧为用户保留的操控区域的面积越大,为用户提供了更舒适的操作手感。
在实现本申请实施例之前,为了在终端设备展示界面时能够以某一个标准自动进行适配,需要先定制一个基础分辨率,也就是一个基础的界面长宽比。该基础分辨率是主流的屏幕比例,是标准屏幕宽度与标准屏幕高度的比值,能够适配很多不同机型的终端设备,在本申请实施例中,以基础分辨率为16:9为例进行说明,而在实际应用的过程中,随着市场的变化,该基础分辨率也可进行变化,本申请对基础分辨率的取值不进行具体限定。
基础分辨率也即一个评判标准,通过获取当前目标界面展示请求针对的目标设备屏幕的长宽比,与基础分辨率进行比较。如果目标设备屏幕的长宽比大于等于基础分辨率,则需要以目标设备屏幕的高,也即短的边进行适配,控制目标设备屏幕高度的布局与基础分辨率的效果一致,而目标设备屏幕的宽度一侧进行自适应布局。如果目标设备屏幕的长宽比小于基础分辨率,则需要以目标设备屏幕的宽,也即长的边进行适配,控制目标设备屏幕宽度的布局与基础分辨率的效果一致,而目标设备屏幕的高度一侧进行自适应布局。
在实际应用的过程中,上述比对以及准备开始进行自适应布局的过程如 下:当检测到针对目标设备屏幕的目标界面展示请求时,读取目标设备屏幕的实际屏幕宽度和实际屏幕高度,计算实际屏幕宽度和实际屏幕高度的比值作为屏幕宽高比值。随后,将屏幕宽高比值与基础分辨率进行比对。若屏幕宽高比值大于等于基础分辨率,则也即短的边进行适配,控制设备屏幕高度的布局与基础分辨率的效果一致,而设备屏幕的宽度一侧进行自适应布局,因此,将标准屏幕高度设置为绘制高度,计算屏幕宽高比值与绘制高度的乘积作为绘制宽度。若屏幕宽高比值小于基础分辨率,则也即长的边进行适配,控制设备屏幕宽度的布局与基础分辨率的效果一致,而设备屏幕的高度一侧进行自适应布局,因此,将标准屏幕宽度设置为绘制宽度,计算屏幕宽高比值的倒数与绘制宽度的乘积作为绘制高度。
例如,设基础分辨率中的标准屏幕高度为m,标准屏幕宽度为n,屏幕宽高比值为W/H,绘制宽度为w,绘制高度为h,如果W/H大于等于m/n,则h=n,w=(W/H)×h;如果W/H小于m/n,则w=m,h=(H/W)×w。
202、将目标界面的界面背景层的尺寸调整为绘制宽度和绘制高度。
在本申请实施例中,考虑到目标界面中有些内容是可以直接拉伸或者平铺的,拉伸或者平铺处理不会影响目标界面的美观以及用户的视觉效果的,因此,将这些内容提取出来单独形成一个图层,按照已经确定的绘制宽度以及绘制高度对该图层进行处理即可。其中,通常界面中的界面背景是很简单的,包括的元素以及装饰不并多,可能只是一些简单的线条,因此,设置一个填充有目标界面的界面背景的图层作为界面背景层,将目标界面的界面背景层的尺寸调整为绘制宽度和绘制高度。
具体地,在进行界面背景层的尺寸调整时,首先,确定预设调整方式,预设调整方式至少为拉伸调整或平铺填充调整中的任一种。随后,基于预设调整方式,对界面背景层的尺寸进行调整,控制界面背景层的尺寸与绘制宽度和绘制高度一致即可,使界面背景层可以填充整个目标设备屏幕的窗口。
203、基于绘制宽度和绘制高度对界面装饰层在目标界面的位置参数进行计算,得到定位信息,将界面装饰层按照定位信息停靠在目标界面。
在本申请实施例中,界面装饰层是包括目标界面的装饰图的图层,其中包括的资源为不可拉伸资源,需要对界面装饰层进行定位,定位方式根据界 面装饰层包括的装饰图与目标界面的位置关系,分为居中、四周停靠、屏幕百分比定位三种方式。其中,居中为界面装饰层包括的装饰图位置始终在目标界面的中间;四周停靠为界面装饰层包括的装饰图始终停靠在目标设备屏幕的某个边或某个顶点上;屏幕百分比定位为将界面装饰层包括的装饰图的位置信息定义为基于目标设备屏幕的百分比位置,即宽/高的百分比,从而进行界面装饰层的自适应。需要说明的是,三种定位方式可以互相交叉使用,例如:横向居中,纵向百分比定位。
因此,参见上面的描述,需要基于绘制宽度和绘制高度对界面装饰层在目标界面的位置参数进行计算,得到定位信息,进而将界面装饰层按照定位信息停靠在目标界面。其中,在计算定位信息时,首先,需要获取界面装饰层在目标界面的位置参数。随后,对位置参数进行读取,若位置参数指示了界面装饰层距离目标设备屏幕的边缘的第一绝对位置,也即位置参数规定了界面装饰层需要停靠在目标设备屏幕的哪个边缘的具体哪个位置,所以,需要根据界面装饰层在目标界面的所处位置、绘制宽度、绘制高度和第一绝对位置进行计算,确定第一横向绝对位置信息和第一纵向绝对位置信息,将第一横向绝对位置信息和第一纵向绝对位置信息作为定位信息。具体确定第一横向绝对位置信息和第一纵向绝对位置信息的情况包括以下几种:假设第一横向绝对位置信息用x表示,第一纵向绝对位置信息用y表示,第一绝对位置用A表示,绘制宽度用w表示,绘制高度用h表示,当界面装饰层在目标界面的所处位置指示停靠在目标设备屏幕的左边缘时,将第一绝对位置设置为第一横向绝对位置信息,也即x=A。或,当界面装饰层在目标界面的所处位置指示停靠在目标设备屏幕的右边缘时,计算绘制宽度与第一绝对位置的差值作为第一横向绝对位置信息,也即x=w-A。或,当界面装饰层在目标界面的所处位置指示停靠在目标设备屏幕的顶部边缘时,将第一绝对位置设置为第一纵向绝对位置信息,也即y=A。或,当界面装饰层在目标界面的所处位置指示停靠在目标设备屏幕的底部边缘时,计算绘制高度与第一绝对位置的差值作为第一纵向绝对位置信息,也即y=h-A。需要说明的是,上述计算得到的x以及y可以根据界面装饰层在目标界面的所处位置自由组合,从而实现界面装饰层的右边缘置顶、左边缘置底等等。
而另一方面,若位置参数指示了界面装饰层与目标设备屏幕的边缘的第一相对位置,则计算绘制宽度与第一相对位置的第一乘积、绘制宽度与第一相对位置的第二乘积,将第一乘积作为第一横向相对位置信息,将第二乘积作为第一纵向相对位置信息,将第一横向相对位置信息和第一纵向相对位置信息作为定位信息。设第一横向相对位置信息用e表示,第一纵向相对位置信息用f表示,绘制宽度用w表示,绘制高度用h表示,并设第一相对位置为B%,这样,e便等于w×B%,f等于h×B%。
204、根据绘制宽度和绘制高度,在目标界面布局界面交互层。
在本申请实施例中,界面交互层是设置有目标界面的可操作区域的图层,包括可点击操作区域,通常为矩形。其中,用户经常使用的高频操作区域分布在目标设备屏幕的两侧,在以百分比定位的规则中,随着目标设备屏幕的宽度增加,高频操作区域的面积也会根据当前标设备屏幕的尺寸的百分比向内收缩,使其一直分布在最佳交互位置。例如,参见图2B,屏幕宽度为16厘米、30厘米、4厘米的设备屏幕的高频操作区域为图2B中三个矩形中的阴影部分所示,很明显可以看出,随着目标设备屏幕的宽度增加,高频操作区域的面积会向内收缩。
因此,为了对最佳交互位置予以限制,在本申请实施例中,设置了第一定位系数和第二定位系数。其中,第一定位系数用于保留两侧安全距离及定位最佳交互位置,通过大量的实验后,将第一定位系数的取值设置为0.2。第二定位系数用于保留目标设备屏幕的上下两边的安全距离,防止误触目标设备屏幕上的按键,也能够防止一些配备有曲面屏的终端设备发生信息展示不全或交互区误触的情况,通过大量的实验将第二定位系数的取值设置为10。这样,在目标界面布局界面交互层时,需要分别计算界面交互层的四条边的位置信息,进而在当前的设备中对界面交互层进行定位布局。
在本申请实施例中,将界面交互层的四条边的位置信息设为左边缘定位信息、顶部边缘定位信息、右边缘定位信息以及底部边缘定位信息。其中,左边缘定位信息用L表示,顶部边缘定位信息用T表示,右边缘定位信息用R表示,底部边缘定位信息用B表示,绘制宽度用w表示,绘制高度用h表示,基础分辨率中的标准屏幕高度用m表示,标准屏幕宽度用n表示,第 一定位系数用α表示,第二定位系数用β表示,将预设系数取值为0.2,具体计算四条边的位置信息的过程如下:计算绘制宽度与第一定位系数的第三乘积、标准屏幕宽度与预设系数的第四乘积,将第三乘积和第四乘积的差值作为左边缘定位信息,也即L=w×α-(m×0.2)。将第二定位系数设置为顶部边缘定位信息,也即T=β。计算绘制宽度与系数差值的第五乘积,将第五乘积和第四乘积的和值作为右边缘定位信息,系数差值为默认取值与预设系数的差值,默认取值在本申请中设置为1,这样,R=w×(1-α)+(m×0.2)。计算绘制高度与第二定位系数的差值作为底部边缘定位信息,也即B=h-β。之后,便可以按照左边缘定位信息、顶部边缘定位信息、右边缘定位信息和底部边缘定位信息,布局界面交互层。
205、基于文字布局,确定第二绝对位置和第二相对位置,按照第二绝对位置和第二相对位置,将界面交互层划分为列表区、信息展示区以及页签展示区。
在本申请实施例中,界面交互层上通常会展示一些信息,来引导用户对某个区域进行触发,且展示信息也会采取不同的方式,比如列表展示、罗列展示以及页签文字展示等等,因此,实际上将界面交互层进行区域模块化后,可将界面交互层划分为列表区、信息展示区以及页签展示区,后续需要按照不同的填充方式分别向列表区、信息展示区以及页签展示区填充相关的界面信息。
其中,在目标界面的文字布局中,指示有第二绝对位置和第二相对位置,与上述步骤203中的第一绝对位置和第一相对位置同理,第二绝对位置和第二相对位置也指示了各个区的某个边缘停靠在目标设备屏幕的哪个边缘的具体哪个位置或者停靠在百分之多少的位置。在对列表区进行划分时,列表区通常设置在整个目标界面的最左侧,因此,根据第二绝对位置的指示,在目标设备屏幕确定列表区顶边缘、列表区左边缘以及列表区下边缘,基于绘制宽度与第二相对位置的乘积输出列表区右边缘,并按照列表区顶边缘、列表区左边缘、列表区下边缘和列表区右边缘,确定列表区。也就是说,在对列表区进行适配时,列表区的四边是基于界面交互层做二次定位得出的,列表区的左、上、下边缘均为界面交互层的边缘停靠,右侧为界面交互层的百 分比定位。
进一步地,在对信息展示区进行划分时,信息展示区通常设置在列表区的右侧,因此,根据第二绝对位置的指示,在目标设备屏幕确定信息展示区顶边缘以及信息展示区下边缘,基于绘制宽度与第二相对位置的乘积输出信息展示区右边缘和信息展示区左边缘,并按照信息展示区顶边缘、信息展示区下边缘、信息展示区右边缘和信息展示区左边缘,确定信息展示区。也就是说,在对信息展示区进行适配时,信息展示区的左右两边基于界面交互层做百分比定位,信息展示区的上下两边为界面交互层的边缘停靠。
进一步地,在对页签展示区进行划分时,页签展示区通常设置在列表区的右侧,也即整个目标界面的最右侧,因此,根据第二绝对位置的指示,在目标设备屏幕确定页签展示区顶边缘、页签展示区右边缘以及页签展示区下边缘,基于绘制宽度与第二相对位置的乘积输出页签展示区左边缘,并按照页签展示区顶边缘、页签展示区右边缘、页签展示区下边缘和页签展示区左边缘,确定页签展示区。也就是说,在对页签展示区进行适配时,基于界面交互层的右边和上边做边缘停靠,页签展示区的左边基于界面交互层做百分比定位。
需要说明的是,本步骤中进行边缘停靠以及百分比定位的过程与上述步骤203中基于第一绝对位置和第一相对位置进行边缘停靠以及百分比定位的过程一致,此处不再进行赘述。通过上述过程进行区域的划分后,便可以得到图2C所示的列表区、信息展示区以及页签展示区。其中,采用上述过程对超宽屏的设备进行适配后的效果表现为列表区拉宽,设备屏幕的两侧会让出交互规避区域,列表区、信息展示区以及页签展示区的间隔变大。而对于平板电脑类的终端设备而言,采用上述过程对超宽屏的设备进行适配后的效果表现为列表区高度拉高,展示更多列表内容,信息展示区整体高度拉高,页签展示区的布局按照百分比定位。
206、获取界面信息包括的至少一个列表项目,根据列表配置要求,将至少一个列表项目填充至列表区。
在本申请实施例中,完成了区域的划分后,需要对各个区域进行界面信息的填充。对于列表区来说,通常对列表区进行信息填充采用的方式具有一 定的约束,也即通常设置有列表配置要求,列表配置要求会规定列表中每项内容的尺寸,或者列表的一行/一列放置多少个项目等等,因此,在向列表区进行信息的填充时,需要获取界面信息包括的至少一个列表项目,根据列表配置要求,将至少一个列表项目填充至列表区。
其中,列表配置要求中规定的内容可能分为两种情况,一种情况是列表配置要求规定了预设列表项目尺寸,也即单个列表项的宽度,这样,首先需要根据列表区的列表宽度与预设列表项目尺寸的比值输出每列项目数,该列表宽度也即进行适应性调整后的宽度。随后,计算每列项目数与预设列表项目尺寸的第六乘积,计算列表宽度与第六乘积的第一乘积差值,并根据第一乘积差值与每列项目数的比值输出列表项间隔。最后,按照每列项目数和列表项间隔,将至少一个列表项目进行填充。例如,假设列表宽度用List(列表)表示,预设列表项目尺寸用Item(项目)表示,每列项目数用Num(数量)表示,列表项间隔用P表示,则通过上述过程计算得到的每列项目数Num=List/Item,对List/Item进行向下取整,得到的值作为Num的取值。随后,计算列表项间隔P=[List–(Num×Item)]/Num,对[List–(Num×Item)]/Num进行向下取整,得到的值作为P的取值。这样,根据上述过程进行列表填充,也即列表每行放置Num个列表项目,每个列表项目之间的间隔为P。
另一种情况是列表配置要求规定了预设每列项目数和预设列表项间隔,这样,首先计算预设每列项目数与默认取值的项目差值,计算项目差值与预设列表项间隔的第七乘积。随后,计算列表宽度与第七乘积的第二乘积差值,根据第二乘积差值与预设每列项目数的比值输出列表项目尺寸。最后,按照预设每列项目数、预设列表项间隔以及列表项目尺寸,将至少一个列表项目进行填充。以列表宽度用List表示,列表项目尺寸用Item表示,预设每列项目数用Num表示,预设列表项间隔用P表示为例进行说明,则通过上述过程计算得到的列表项目尺寸用Item={List–[(Num-1)×P]}/Num。这样,根据上述过程进行列表填充,也即列表每行放置放置Num个列表项目,每个列表项目尺寸为Item,每个列表项目之间的间隔为P。
207、将界面信息包括的文字描述填充至信息展示区,将界面信息包括 的页签元素填充至页签展示区。
在本申请实施例中,完成了列表区的填充后,将界面信息包括的文字描述填充至信息展示区,将界面信息包括的页签元素填充至页签展示区,这样,就实现了按照目标界面中的文字布局,将目标界面中的界面信息填充至界面交互层,完成对目标界面的调整。
综上所述,上述步骤201至步骤207中的界面调整过程如下:
参见图2D,根据目前常见的终端设备,设置一个基础分辨率。当检测到针对目标设备屏幕的目标界面展示请求时,获取该目标设备屏幕的屏幕宽高比值,将屏幕宽高比值与基础分辨率进行比对,判断屏幕宽高比值是否大于等于基础分辨率。如果确定屏幕宽高比值大于等于基础分辨率,则采用宽度适配模型纵向对目标界面进行动态布局,将基础分辨率的标准屏幕高度设置为绘制高度,计算屏幕宽高比值与绘制高度的乘积作为绘制宽度,进而按照绘制宽度以及绘制高度,将界面背景层纵向拉伸或平铺填充,将界面装饰层上下、居中或百分比停靠,将界面交互层通过百分比纵向自适应定位。而如果确定屏幕宽高比值并没有大于等于基础分辨率,则采用高度适配模式横向对目标界面进行动态布局,将基础分辨率的标准屏幕宽度设置为绘制宽度,计算屏幕宽高比值的倒数与绘制宽度的乘积作为绘制高度,进而按照绘制宽度以及绘制高度,将界面背景层左右拉伸或平铺填充,将界面装饰层两侧、居中或百分比停靠,将界面交互层通过百分比横向自适应定位。需要说明的是,界面背景层、界面装饰层以及界面交互层的层级关系如图2E所示,其中,对应的层级关系为:界面背景层<界面装饰层<界面交互层,界面交互层中填充有界面中的各种文字信息。
本申请实施例提供的方法,根据目标设备屏幕的屏幕宽高比值,计算绘制宽度和绘制高度,进而基于绘制宽度和绘制高度,将填充有目标界面的界面背景的界面背景层的尺寸调整为绘制宽度和绘制高度,并确定包括目标界面的装饰图的界面装饰层在目标界面的定位信息,按照定位信息进行停靠,并在目标界面布局设置有目标界面的可操作区域的界面交互层,进而按照目标界面中的文字布局,将目标界面中的界面信息填充至界面交互层,完成对目标界面的调整,根据请求进行界面展示的终端设备的设备屏幕尺寸,实现 自适应完成界面的调整,无需判断终端设备是否在黑名单中,且通过自身界面的布局规划,也无需进行单边缩进或增加填充图,简化了界面的调整过程,避免出现显示的界面在屏幕中重心偏移且画面不平衡的问题,保证显示的界面的画面美观,为使用不同终端设备的用户提供相同效果的界面展示。
进一步地,作为图1所述方法的具体实现,本申请实施例提供了一种界面调整装置,如图3A所示,所述装置包括:该第一计算模块301,调整模块302,第二计算模块303,布局模块304和填充模块305。
该第一计算模块301,用于当检测到针对目标设备屏幕的目标界面展示请求时,根据所述目标设备屏幕的屏幕宽高比值,计算绘制宽度和绘制高度;
该调整模块302,用于将所述目标界面的界面背景层的尺寸调整为所述绘制宽度和所述绘制高度,所述界面背景层是填充有所述目标界面的界面背景的图层;
该第二计算模块303,用于基于所述绘制宽度和所述绘制高度对界面装饰层在所述目标界面的位置参数进行计算,得到定位信息,将所述界面装饰层按照所述定位信息停靠在所述目标界面,所述界面装饰层是包括所述目标界面的装饰图的图层;
该布局模块304,用于根据所述绘制宽度和所述绘制高度,在所述目标界面布局界面交互层,所述界面交互层是设置有所述目标界面的可操作区域的图层;
该填充模块305,用于按照所述目标界面中的文字布局,将所述目标界面中的界面信息填充至所述界面交互层,完成对所述目标界面的调整。
在具体的应用场景中,如图3B所示,该第一计算模块301,包括:读取单元3011,第一计算单元3012和第二计算单元3013。
该读取单元3011,用于读取所述目标设备屏幕的实际屏幕宽度和实际屏幕高度,计算所述实际屏幕宽度和所述实际屏幕高度的比值作为所述屏幕宽高比值,将所述屏幕宽高比值与基础分辨率进行比对,所述基础分辨率为标准屏幕宽度与标准屏幕高度的比值;
该第一计算单元3012,用于若所述屏幕宽高比值大于等于所述基础分辨 率,则将所述标准屏幕高度设置为所述绘制高度,计算所述屏幕宽高比值与所述绘制高度的乘积作为所述绘制宽度;
该第二计算单元3013,用于若所述屏幕宽高比值小于所述基础分辨率,则将所述标准屏幕宽度设置为所述绘制宽度,计算所述屏幕宽高比值的倒数与所述绘制宽度的乘积作为所述绘制高度。
在具体的应用场景中,该调整模块302,用于确定预设调整方式,所述预设调整方式至少为拉伸调整或平铺填充调整中的任一种;基于所述预设调整方式,对所述界面背景层的尺寸进行调整,控制所述界面背景层的尺寸与所述绘制宽度和所述绘制高度一致。
在具体的应用场景中,如图3C所示,该第二计算模块303,包括:获取单元3031,第一计算单元3032和第二计算单元3033。
该获取单元3031,用于获取所述界面装饰层在所述目标界面的所述位置参数;
该第一计算单元3032,用于若所述位置参数指示了所述界面装饰层距离所述目标设备屏幕的边缘的第一绝对位置,则根据所述界面装饰层在所述目标界面的所处位置、所述绘制宽度、所述绘制高度和所述第一绝对位置进行计算,确定第一横向绝对位置信息和第一纵向绝对位置信息,将所述第一横向绝对位置信息和所述第一纵向绝对位置信息作为所述定位信息;
该第二计算单元3033,用于若所述位置参数指示了所述界面装饰层与所述目标设备屏幕的边缘的第一相对位置,则计算所述绘制宽度与所述第一相对位置的第一乘积、所述绘制宽度与所述第一相对位置的第二乘积,将所述第一乘积作为第一横向相对位置信息,将所述第二乘积作为第一纵向相对位置信息,将所述第一横向相对位置信息和所述第一纵向相对位置信息作为所述定位信息。
在具体的应用场景中,该第一计算单元3032,用于当所述界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的左边缘时,将所述第一绝对位置设置为所述第一横向绝对位置信息;当所述界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的右边缘时,计算所述绘制宽度与所述第一绝对位置的差值作为所述第一横向绝对位置信息;当所述 界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的顶部边缘时,将所述第一绝对位置设置为所述第一纵向绝对位置信息;当所述界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的底部边缘时,计算所述绘制高度与所述第一绝对位置的差值作为所述第一纵向绝对位置信息。
在具体的应用场景中,该布局模块304,用于计算所述绘制宽度与第一定位系数的第三乘积、标准屏幕宽度与预设系数的第四乘积,将所述第三乘积和所述第四乘积的差值作为左边缘定位信息;将所述第二定位系数设置为顶部边缘定位信息;计算所述绘制宽度与系数差值的第五乘积,将所述第五乘积和所述第四乘积的和值作为右边缘定位信息,所述系数差值为默认取值与所述预设系数的差值;计算所述绘制高度与所述第二定位系数的差值作为底部边缘定位信息;按照所述左边缘定位信息、所述顶部边缘定位信息、所述右边缘定位信息和所述底部边缘定位信息,布局所述界面交互层。
在具体的应用场景中,如图3D所示,该填充模块305,包括:确定单元3051,划分单元3052,第一填充单元3053和第二填充单元3054。
该确定单元3051,用于基于所述文字布局,确定第二绝对位置和第二相对位置;
该划分单元3052,用于按照所述第二绝对位置和所述第二相对位置,将所述界面交互层划分为列表区、信息展示区以及页签展示区;
该第一填充单元3053,用于获取所述界面信息包括的至少一个列表项目,根据列表配置要求,将所述至少一个列表项目填充至所述列表区;
该第二填充单元3054,用于将所述界面信息包括的文字描述填充至所述信息展示区,将所述界面信息包括的页签元素填充至所述页签展示区。
在具体的应用场景中,该划分单元3052,用于根据所述第二绝对位置的指示,在所述目标设备屏幕确定列表区顶边缘、列表区左边缘以及列表区下边缘,基于所述绘制宽度与所述第二相对位置的乘积输出列表区右边缘,并按照所述列表区顶边缘、所述列表区左边缘、所述列表区下边缘和所述列表区右边缘,确定所述列表区;根据所述第二绝对位置的指示,在所述目标设备屏幕确定信息展示区顶边缘以及信息展示区下边缘,基于所述绘制宽度与 所述第二相对位置的乘积输出信息展示区右边缘和信息展示区左边缘,并按照所述信息展示区顶边缘、所述信息展示区下边缘、所述信息展示区右边缘和所述信息展示区左边缘,确定所述信息展示区;根据所述第二绝对位置的指示,在所述目标设备屏幕确定页签展示区顶边缘、页签展示区右边缘以及页签展示区下边缘,基于所述绘制宽度与所述第二相对位置的乘积输出页签展示区左边缘,并按照所述页签展示区顶边缘、所述页签展示区右边缘、所述页签展示区下边缘和所述页签展示区左边缘,确定所述页签展示区。
在具体的应用场景中,该第一填充单元3053,用于若所述列表配置要求规定了预设列表项目尺寸,根据所述列表区的列表宽度与所述预设列表项目尺寸的比值输出每列项目数;计算所述每列项目数与所述预设列表项目尺寸的第六乘积,计算所述列表宽度与所述第六乘积的第一乘积差值;根据所述第一乘积差值与所述每列项目数的比值输出列表项间隔;按照所述每列项目数和所述列表项间隔,将所述至少一个列表项目进行填充。
在具体的应用场景中,该第一填充单元3053,还用于若所述列表配置要求规定了预设每列项目数和预设列表项间隔,则计算所述预设每列项目数与默认取值的项目差值,计算所述项目差值与所述预设列表项间隔的第七乘积;计算所述列表宽度与所述第七乘积的第二乘积差值,根据所述第二乘积差值与所述预设每列项目数的比值输出列表项目尺寸;按照所述预设每列项目数、所述预设列表项间隔以及所述列表项目尺寸,将所述至少一个列表项目进行填充。
本申请实施例提供的装置,根据目标设备屏幕的屏幕宽高比值,计算绘制宽度和绘制高度,进而基于绘制宽度和绘制高度,将填充有目标界面的界面背景的界面背景层的尺寸调整为绘制宽度和绘制高度,并确定包括目标界面的装饰图的界面装饰层在目标界面的定位信息,按照定位信息进行停靠,并在目标界面布局设置有目标界面的可操作区域的界面交互层,进而按照目标界面中的文字布局,将目标界面中的界面信息填充至界面交互层,完成对目标界面的调整,根据请求进行界面展示的终端设备的设备屏幕尺寸,实现自适应完成界面的调整,无需判断终端设备是否在黑名单中,且通过自身界面的布局规划,也无需进行单边缩进或增加填充图,简化了界面的调整过程, 避免出现显示的界面在屏幕中重心偏移且画面不平衡的问题,保证显示的界面的画面美观,为使用不同终端设备的用户提供相同效果的界面展示。
本发明的各个部件实施例可以以硬件实现,或者以在一个或者多个处理器上运行的软件模块实现,或者以它们的组合实现。本领域的技术人员应当理解,可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的界面调整设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如,计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上,或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到,或者在载体信号上提供,或者以任何其他形式提供。
例如,图4示出了可以实现根据本发明的界面调整的服务器,例如应用服务器。该服务器传统上包括处理器410和以存储器420形式的计算机程序产品或者计算机可读介质。存储器420可以是诸如闪存、EEPROM(电可擦除可编程只读存储器)、EPROM、硬盘或者ROM之类的电子存储器。存储器420具有存储用于执行上述方法中的任何方法步骤的程序代码431的存储空间430。例如,存储程序代码的存储空间430可以存储分别用于实现上面的方法中的各种步骤的各个程序代码431。这些程序代码可以从一个或者多个计算机程序产品中读出或者写入到这一个或者多个计算机程序产品中。这些计算机程序产品包括诸如硬盘,紧致盘(CD)、存储卡或者软盘之类的程序代码载体。这样的计算机程序产品通常为如参考图5所述的便携式或者固定存储单元。该存储单元可以具有与图4的服务器中的存储器420类似布置的存储段、存储空间等。程序代码可以以适当形式进行压缩。通常,存储单元存储有用于执行本发明的方法步骤的计算机可读代码431’,即可以由例如诸如410之类的处理器读取的代码,这些代码当由服务器运行时,导致该服务器执行上面所描述的方法中的各个步骤。
本文中所称的“一个实施例”、“实施例”或者“一个或者多个实施例”意味着,结合实施例描述的特定特征、结构或者特性包括在本发明的至少一个实施例中。此外,请注意,这里“在一个实施例中”的词语例子不一定全指同一个实施例。
在此处所提供的说明书中,说明了大量具体细节。然而,能够理解,本发明的实施例可以在没有这些具体细节的情况下被实践。在一些实例中,并未详细示出公知的方法、结构和技术,以便不模糊对本说明书的理解。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制,并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中,不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中,这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。此外,还应当注意,本说明书中使用的语言主要是为了可读性和教导的目的而选择的,而不是为了解释或者限定本发明的主题而选择的。因此,在不偏离所附权利要求书的范围和精神的情况下,对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围,对本发明所做的公开是说明性的,而非限制性的,本发明的范围由所附权利要求书限定。

Claims (13)

  1. 一种界面调整方法,包括:
    当检测到针对目标设备屏幕的目标界面展示请求时,根据所述目标设备屏幕的屏幕宽高比值,计算绘制宽度和绘制高度;
    将所述目标界面的界面背景层的尺寸调整为所述绘制宽度和所述绘制高度,所述界面背景层是填充有所述目标界面的界面背景的图层;
    基于所述绘制宽度和所述绘制高度对界面装饰层在所述目标界面的位置参数进行计算,得到定位信息,将所述界面装饰层按照所述定位信息停靠在所述目标界面,所述界面装饰层是包括所述目标界面的装饰图的图层;
    根据所述绘制宽度和所述绘制高度,在所述目标界面布局界面交互层,所述界面交互层是设置有所述目标界面的可操作区域的图层;
    按照所述目标界面中的文字布局,将所述目标界面中的界面信息填充至所述界面交互层,完成对所述目标界面的调整。
  2. 根据权利要求1所述的方法,其特征在于,所述根据所述目标设备屏幕的屏幕宽高比值,计算绘制宽度和绘制高度,包括:
    读取所述目标设备屏幕的实际屏幕宽度和实际屏幕高度,计算所述实际屏幕宽度和所述实际屏幕高度的比值作为所述屏幕宽高比值,将所述屏幕宽高比值与基础分辨率进行比对,所述基础分辨率为标准屏幕宽度与标准屏幕高度的比值;
    若所述屏幕宽高比值大于等于所述基础分辨率,则将所述标准屏幕高度设置为所述绘制高度,计算所述屏幕宽高比值与所述绘制高度的乘积作为所述绘制宽度;
    若所述屏幕宽高比值小于所述基础分辨率,则将所述标准屏幕宽度设置为所述绘制宽度,计算所述屏幕宽高比值的倒数与所述绘制宽度的乘积作为所述绘制高度。
  3. 根据权利要求1所述的方法,其特征在于,所述将所述目标界面的界面背景层的尺寸调整为所述绘制宽度和所述绘制高度,包括:
    确定预设调整方式,所述预设调整方式至少为拉伸调整或平铺填充调整中的任一种;
    基于所述预设调整方式,对所述界面背景层的尺寸进行调整,控制所述界面背景层的尺寸与所述绘制宽度和所述绘制高度一致。
  4. 根据权利要求1所述的方法,其特征在于,所述基于所述绘制宽度和所述绘制高度对界面装饰层在所述目标界面的位置参数进行计算,得到定位信息,包括:
    获取所述界面装饰层在所述目标界面的所述位置参数;
    若所述位置参数指示了所述界面装饰层距离所述目标设备屏幕的边缘的第一绝对位置,则根据所述界面装饰层在所述目标界面的所处位置、所述绘制宽度、所述绘制高度和所述第一绝对位置进行计算,确定第一横向绝对位置信息和第一纵向绝对位置信息,将所述第一横向绝对位置信息和所述第一纵向绝对位置信息作为所述定位信息;
    若所述位置参数指示了所述界面装饰层与所述目标设备屏幕的边缘的第一相对位置,则计算所述绘制宽度与所述第一相对位置的第一乘积、所述绘制宽度与所述第一相对位置的第二乘积,将所述第一乘积作为第一横向相对位置信息,将所述第二乘积作为第一纵向相对位置信息,将所述第一横向相对位置信息和所述第一纵向相对位置信息作为所述定位信息。
  5. 根据权利要求4所述的方法,其特征在于,所述根据所述界面装饰层在所述目标界面的所处位置、所述绘制宽度、所述绘制高度和所述第一绝对位置进行计算,确定第一横向绝对位置信息和第一纵向绝对位置信息,包括:
    当所述界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的左边缘时,将所述第一绝对位置设置为所述第一横向绝对位置信息;
    当所述界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的右边缘时,计算所述绘制宽度与所述第一绝对位置的差值作为所述第一横向绝对位置信息;
    当所述界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的顶部边缘时,将所述第一绝对位置设置为所述第一纵向绝对位置信息;
    当所述界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的底部边缘时,计算所述绘制高度与所述第一绝对位置的差值作为所述第一纵向绝对位置信息。
  6. 根据权利要求1所述的方法,其特征在于,所述根据所述绘制宽度和所述绘制高度,在所述目标界面布局界面交互层,包括:
    计算所述绘制宽度与第一定位系数的第三乘积、标准屏幕宽度与预设系数的第四乘积,将所述第三乘积和所述第四乘积的差值作为左边缘定位信息;
    将所述第二定位系数设置为顶部边缘定位信息;
    计算所述绘制宽度与系数差值的第五乘积,将所述第五乘积和所述第四乘积的和值作为右边缘定位信息,所述系数差值为默认取值与所述预设系数的差值;
    计算所述绘制高度与所述第二定位系数的差值作为底部边缘定位信息;
    按照所述左边缘定位信息、所述顶部边缘定位信息、所述右边缘定位信息和所述底部边缘定位信息,布局所述界面交互层。
  7. 根据权利要求1所述的方法,其特征在于,所述按照所述目标界面中的文字布局,将所述目标界面中的界面信息填充至所述界面交互层,包括:
    基于所述文字布局,确定第二绝对位置和第二相对位置;
    按照所述第二绝对位置和所述第二相对位置,将所述界面交互层划分为列表区、信息展示区以及页签展示区;
    获取所述界面信息包括的至少一个列表项目,根据列表配置要求,将所述至少一个列表项目填充至所述列表区;
    将所述界面信息包括的文字描述填充至所述信息展示区,将所述界面信息包括的页签元素填充至所述页签展示区。
  8. 根据权利要求7所述的方法,其特征在于,所述按照所述第二绝对位置和所述第二相对位置,将所述界面交互层划分为列表区、信息展示区以及页签展示区,包括:
    根据所述第二绝对位置的指示,在所述目标设备屏幕确定列表区顶边缘、列表区左边缘以及列表区下边缘,基于所述绘制宽度与所述第二相对位 置的乘积输出列表区右边缘,并按照所述列表区顶边缘、所述列表区左边缘、所述列表区下边缘和所述列表区右边缘,确定所述列表区;
    根据所述第二绝对位置的指示,在所述目标设备屏幕确定信息展示区顶边缘以及信息展示区下边缘,基于所述绘制宽度与所述第二相对位置的乘积输出信息展示区右边缘和信息展示区左边缘,并按照所述信息展示区顶边缘、所述信息展示区下边缘、所述信息展示区右边缘和所述信息展示区左边缘,确定所述信息展示区;
    根据所述第二绝对位置的指示,在所述目标设备屏幕确定页签展示区顶边缘、页签展示区右边缘以及页签展示区下边缘,基于所述绘制宽度与所述第二相对位置的乘积输出页签展示区左边缘,并按照所述页签展示区顶边缘、所述页签展示区右边缘、所述页签展示区下边缘和所述页签展示区左边缘,确定所述页签展示区。
  9. 根据权利要求7所述的方法,其特征在于,所述根据列表配置要求,将所述至少一个列表项目填充至所述列表区,包括:
    若所述列表配置要求规定了预设列表项目尺寸,根据所述列表区的列表宽度与所述预设列表项目尺寸的比值输出每列项目数;
    计算所述每列项目数与所述预设列表项目尺寸的第六乘积,计算所述列表宽度与所述第六乘积的第一乘积差值;
    根据所述第一乘积差值与所述每列项目数的比值输出列表项间隔;
    按照所述每列项目数和所述列表项间隔,将所述至少一个列表项目进行填充。
  10. 根据权利要求9所述的方法,还包括:
    若所述列表配置要求规定了预设每列项目数和预设列表项间隔,则计算所述预设每列项目数与默认取值的项目差值,计算所述项目差值与所述预设列表项间隔的第七乘积;
    计算所述列表宽度与所述第七乘积的第二乘积差值,根据所述第二乘积差值与所述预设每列项目数的比值输出列表项目尺寸;
    按照所述预设每列项目数、所述预设列表项间隔以及所述列表项目尺寸,将所述至少一个列表项目进行填充。
  11. 一种界面调整装置,包括:
    第一计算模块,用于当检测到针对目标设备屏幕的目标界面展示请求时,根据所述目标设备屏幕的屏幕宽高比值,计算绘制宽度和绘制高度;
    调整模块,用于将所述目标界面的界面背景层的尺寸调整为所述绘制宽度和所述绘制高度,所述界面背景层是填充有所述目标界面的界面背景的图层;
    第二计算模块,用于基于所述绘制宽度和所述绘制高度对界面装饰层在所述目标界面的位置参数进行计算,得到定位信息,将所述界面装饰层按照所述定位信息停靠在所述目标界面,所述界面装饰层是包括所述目标界面的装饰图的图层;
    布局模块,用于根据所述绘制宽度和所述绘制高度,在所述目标界面布局界面交互层,所述界面交互层是设置有所述目标界面的可操作区域的图层;
    填充模块,用于按照所述目标界面中的文字布局,将所述目标界面中的界面信息填充至所述界面交互层,完成对所述目标界面的调整。
  12. 一种计算机程序,包括计算机可读代码,其特征在于,当所述计算机可读代码在服务器上运行时,导致所述服务器执行根据权利要求1-10中的任一个所述的界面调整方法。
  13. 一种计算机可读介质,其特征在于,其中存储了如权利要求12所述的计算机程序。
PCT/CN2020/132061 2020-08-21 2020-11-27 界面调整方法、装置、计算机程序及计算机可读介质 WO2022036917A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202010851700.7A CN112099887B (zh) 2020-08-21 2020-08-21 界面调整方法、装置、计算机设备及计算机可读存储介质
CN202010851700.7 2020-08-21

Publications (1)

Publication Number Publication Date
WO2022036917A1 true WO2022036917A1 (zh) 2022-02-24

Family

ID=73754602

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/132061 WO2022036917A1 (zh) 2020-08-21 2020-11-27 界面调整方法、装置、计算机程序及计算机可读介质

Country Status (2)

Country Link
CN (2) CN114090149B (zh)
WO (1) WO2022036917A1 (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115079907A (zh) * 2021-03-10 2022-09-20 花瓣云科技有限公司 一种应用程序的显示方法及电子设备
CN116204184A (zh) * 2023-04-28 2023-06-02 深圳华龙讯达信息技术股份有限公司 一种提高页面风格适配的ui编辑方法、系统及存储介质
US11706927B2 (en) 2021-03-02 2023-07-18 Micron Technology, Inc. Memory devices and methods of forming memory devices

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112667343B (zh) * 2021-01-07 2024-03-01 苏州沁游网络科技有限公司 一种界面调整方法、装置、设备及存储介质
CN114090165A (zh) * 2021-11-24 2022-02-25 北京字节跳动网络技术有限公司 页面组件展示位置调整方法、装置、计算机设备及介质
CN114721620B (zh) * 2022-05-12 2022-09-20 北京搜狐新动力信息技术有限公司 一种数据处理方法及装置
CN117590982A (zh) * 2022-08-09 2024-02-23 荣耀终端有限公司 应用界面的显示方法、电子设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106844521A (zh) * 2016-12-29 2017-06-13 中国科学院电子学研究所苏州研究院 基于bs架构的跨终端三维数字地球交互方法
CN108279962A (zh) * 2017-12-26 2018-07-13 大唐软件技术股份有限公司 一种创建可视化数据显示界面的方法及装置
US20180300034A1 (en) * 2017-04-12 2018-10-18 Suzanne Kimberly Taylor Systems to improve how graphical user interfaces can present rendered worlds in response to varying zoom levels and screen sizes
CN110688506A (zh) * 2019-09-30 2020-01-14 北京金山安全软件有限公司 一种模板生成方法、装置、电子设备及存储介质

Family Cites Families (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9292171B2 (en) * 2010-11-17 2016-03-22 International Business Machines Corporation Border menu for context dependent actions within a graphical user interface
CN102270109B (zh) * 2011-08-23 2014-04-02 上海网达软件股份有限公司 不同分辨率的用户界面的自转换方法及自转换系统
CN103885755A (zh) * 2012-12-19 2014-06-25 腾讯科技(深圳)有限公司 自绘控件的屏幕适配实现方法及实现装置
CN103440104A (zh) * 2013-08-22 2013-12-11 广东欧珀移动通信有限公司 显示内容缩放方法和系统
CN103970421B (zh) * 2014-05-23 2017-02-15 努比亚技术有限公司 一种移动终端的屏幕显示图案的调整方法
CN107168712B (zh) * 2017-05-19 2021-02-23 Oppo广东移动通信有限公司 界面绘制方法、移动终端及计算机可读存储介质
CN110262858A (zh) * 2018-03-12 2019-09-20 上海擎感智能科技有限公司 Ui控件自适应屏幕的方法、系统、存储介质及电子终端
CN108427546B (zh) * 2018-05-03 2022-03-08 深圳Tcl新技术有限公司 显示装置的全屏幕适配方法、显示装置及存储介质
CN109783181B (zh) * 2019-01-31 2019-12-20 掌阅科技股份有限公司 屏幕适配显示方法、电子设备及计算机存储介质
CN110314376A (zh) * 2019-06-04 2019-10-11 福建天晴数码有限公司 背景图片及背景光效的适配方法及计算机可读存储介质
CN111190672A (zh) * 2019-12-20 2020-05-22 深圳市优必选科技股份有限公司 电子设备的ui界面适配方法、电子设备和存储介质
CN111552530B (zh) * 2020-04-22 2024-04-12 北京完美赤金科技有限公司 用户界面的终端屏幕适配方法、装置及设备

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106844521A (zh) * 2016-12-29 2017-06-13 中国科学院电子学研究所苏州研究院 基于bs架构的跨终端三维数字地球交互方法
US20180300034A1 (en) * 2017-04-12 2018-10-18 Suzanne Kimberly Taylor Systems to improve how graphical user interfaces can present rendered worlds in response to varying zoom levels and screen sizes
CN108279962A (zh) * 2017-12-26 2018-07-13 大唐软件技术股份有限公司 一种创建可视化数据显示界面的方法及装置
CN110688506A (zh) * 2019-09-30 2020-01-14 北京金山安全软件有限公司 一种模板生成方法、装置、电子设备及存储介质

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US11706927B2 (en) 2021-03-02 2023-07-18 Micron Technology, Inc. Memory devices and methods of forming memory devices
CN115079907A (zh) * 2021-03-10 2022-09-20 花瓣云科技有限公司 一种应用程序的显示方法及电子设备
CN116204184A (zh) * 2023-04-28 2023-06-02 深圳华龙讯达信息技术股份有限公司 一种提高页面风格适配的ui编辑方法、系统及存储介质

Also Published As

Publication number Publication date
CN114090149B (zh) 2023-08-18
CN114090149A (zh) 2022-02-25
CN112099887B (zh) 2021-12-17
CN112099887A (zh) 2020-12-18

Similar Documents

Publication Publication Date Title
WO2022036917A1 (zh) 界面调整方法、装置、计算机程序及计算机可读介质
US10310730B2 (en) Display device for controlling displaying of a window and method of controlling the same
CN104503655B (zh) 应用程序界面显示控制方法及装置
KR20190136085A (ko) 스크린상 코멘트 디스플레이 방법 및 전자 디바이스
US10255227B2 (en) Computerized system and method for authoring, editing, and delivering an interactive social media video
US9183006B2 (en) Systems and methods for layout of graphic objects for electronic display, print or other output
JP6010691B2 (ja) 移動端末のデスクトップシステム、インタフェースインタラクション方法、装置、プログラム、及び記録媒体
US9851811B2 (en) Electronic device and method for controlling the same
US9484003B2 (en) Content bound graphic
US20140368547A1 (en) Controlling Element Layout on a Display
TWI448959B (zh) 電子書閱讀器及其翻頁控制方法
US20130215045A1 (en) Stroke display method of handwriting input and electronic device
CN106775614A (zh) 智能pos界面布局方法及系统
JP2004118477A (ja) 情報処理装置および方法、記録媒体、並びにプログラム
CN107741870B (zh) 终端、显示屏、以及控制显示屏显示的方法
CN102026038A (zh) 一种实现iptv机顶盒页面动态显示的方法及系统
CN109302629B (zh) 一种用于为图片切换画框的方法及显示终端
CN104346046B (zh) 三维仿真翻页方法及系统
JP2010218522A (ja) ブラウザのプラグインを用いるウェブページ表示方法
CN106873963B (zh) 用于形成计算机视频桌面的背景的方法及装置
WO2014019425A1 (zh) 一种在终端上横向布局列表部件的方法及装置
CN101001336A (zh) 一种电视机动态菜单的实现方法
WO2017097142A1 (zh) 界面操作的处理方法、装置和智能终端
US20120069001A1 (en) Electronic album generating apparatus, stereoscopic image pasting apparatus, and methods and programs for controlling operation of same
TWI724096B (zh) 介面操作的處理方法、裝置和智慧終端

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 20950120

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 20950120

Country of ref document: EP

Kind code of ref document: A1