CN116107570A - 界面的生成方法、装置、存储介质和计算机设备 - Google Patents
界面的生成方法、装置、存储介质和计算机设备 Download PDFInfo
- Publication number
- CN116107570A CN116107570A CN202310153594.9A CN202310153594A CN116107570A CN 116107570 A CN116107570 A CN 116107570A CN 202310153594 A CN202310153594 A CN 202310153594A CN 116107570 A CN116107570 A CN 116107570A
- Authority
- CN
- China
- Prior art keywords
- interface
- original
- size
- target
- resolution
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 53
- 230000003044 adaptive effect Effects 0.000 claims description 14
- 230000005484 gravity Effects 0.000 claims description 12
- 230000008569 process Effects 0.000 claims description 6
- 238000011161 development Methods 0.000 abstract description 17
- 238000010586 diagram Methods 0.000 description 20
- 238000004590 computer program Methods 0.000 description 4
- 230000004044 response Effects 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000001514 detection method Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (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
本发明实施例提供了一种界面的生成方法、装置、存储介质和计算机设备。该方法包括:获取原界面与界面信息;根据界面信息,从设置的至少一个布局方式中,确定出原界面对应的目标布局方式,目标布局方式为原界面对应的布局方式;根据目标布局方式、界面信息与原界面,生成当前界面。而在界面信息中包括设备分辨率尺寸与原界面对应的第一分辨率尺寸,计算机设备可根据设备分辨率尺寸与第一分辨率尺寸不相同确定出需要将原界面调整为适配设备分辨率尺寸的当前界面,从而在UI规范分辨率改变或者屏幕的分辨率改变了之后,计算机设备可自动对原界面进行调整以生成当前界面,无需工作人员对原界面布局进行重新适配,降低了开发成本,减少了开发时间。
Description
【技术领域】
本发明实施例涉及界面生成技术领域,具体涉及一种界面的生成方法、装置、存储介质和计算机设备。
【背景技术】
在智能座舱的快速发展中,人机接口(Human Machine Interface,HMI)手机软件(Application,app)的迭代频率、屏幕的硬件更新换代频率都很高,目前HMI app开发都是基于用户界面(User Interface,UI)规范的分辨率开发,当UI规范分辨率改变或者屏幕的分辨率改变了之后,需要工作人员对有关HMI的所有app的布局进行重新适配,增加了开发成本和开发时间。
【发明内容】
有鉴于此,本发明实施例提供了一种界面的生成方法、装置、存储介质和计算机设备,用以解决现有技术中开发成本和开发时间增加的问题。
第一方面,本发明实施例提供了一种界面的生成方法,所述方法用于设备的分辨率尺寸改变时,自动对原界面进行调整以使原界面适配设备的分辨率尺寸,所述方法包括:
获取原界面与界面信息;
根据所述界面信息,从设置的至少一个布局方式中,确定出所述原界面对应的目标布局方式,所述目标布局方式为所述原界面对应的布局方式;
根据所述目标布局方式、所述界面信息与所述原界面,生成当前界面。
在一种可能的实现方式中,所述目标布局方式包括尺寸布局方式,所述界面信息包括所述原界面对应的第一分辨率信息与设备分辨率尺寸,所述第一分辨率信息包括第一分辨率尺寸;所述根据所述目标布局方式、所述界面信息与所述原界面,生成当前界面,包括:
判断尺寸布局方式对应的至少一个尺寸表中是否包括目标尺寸表,所述目标尺寸表为所述第一分辨率尺寸对应的尺寸表;
若判断出至少一个所述尺寸表中包括所述目标尺寸表,则根据所述目标尺寸表对所述原界面进行调整,生成当前界面;
若判断出至少一个所述尺寸表中不包括所述目标尺寸表,则根据所述第一分辨率信息与所述设备分辨率尺寸,创建目标尺寸表;
根据所述目标尺寸表对所述原界面进行调整,生成当前界面。
在一种可能的实现方式中,所述原界面包括至少一个像素,所述第一分辨率信息还包括每个像素的第一坐标信息;所述根据所述第一分辨率信息与所述设备分辨率尺寸,创建目标尺寸表,包括:
根据所述设备分辨率尺寸与所述第一分辨率尺寸,计算出调整比例;
根据所述调整比例与至少一个像素的所述第一坐标信息,计算出每个所述像素的第二坐标信息;
根据至少一个像素的所述第二坐标信息创建所述目标尺寸表。
在一种可能的实现方式中,所述原界面包括原图像元素与原控件元素,所述根据所述目标尺寸表对所述原界面进行调整,生成当前界面,包括:
通过图像布局方式,根据所述目标尺寸表与所述原图像元素,生成第一图像元素;
根据所述目标尺寸表对所述原控件元素进行调整,生成第一控件元素;
根据所述第一控件元素与所述第一图像元素生成当前界面。
在一种可能的实现方式中,所述目标布局方式包括匹配布局方式,所述界面信息包括设备分辨率尺寸;所述根据所述目标布局方式、所述界面信息与所述原界面,生成当前界面,包括:
从所述匹配布局方式对应的至少一个布局文件中确定出目的布局文件,所述目的布局文件为所述设备分辨率尺寸对应的所述布局文件;
根据所述目的布局文件对所述原界面进行调整,生成当前界面。
在一种可能的实现方式中,所述目标布局方式包括适配布局方式,所述界面信息包括重力属性与设备分辨率尺寸;所述根据所述目标布局方式、所述界面信息与所述原界面,生成当前界面,包括:
根据所述适配布局方式,从所述界面信息中查找出重力属性与设备分辨率尺寸;
根据所述重力属性与所述设备分辨率尺寸,对所述原界面进行调整,生成当前界面。
在一种可能的实现方式中,所述根据所述界面信息,从设置的至少一个布局方式中,确定出所述原界面对应的目标布局方式,包括:
若确定出所述界面信息中包括宽度限定标识,则确定出所述目标布局方式为匹配布局方式;或者,
若确定出所述界面信息中包括水平平分标识,则确定出所述目标布局方式为适配布局方式;或者,
若确定出所述界面信息中不包括所述水平平分标识或所述宽度限定标识,则确定出所述目标布局方式为尺寸布局方式。
第二方面,本发明实施例提供了一种界面的生成装置,包括:
获取模块,用于获取原界面与界面信息;
确定模块,用于根据所述界面信息,从设置的至少一个布局方式中,确定出所述原界面对应的目标布局方式,所述目标布局方式为所述原界面对应的布局方式;
生成模块,用于根据所述目标布局方式、所述界面信息与所述原界面,生成当前界面。
第三方面,本发明实施例提供了一种存储介质,所述存储介质包括存储的程序,其中,在所述程序运行时控制所述存储介质所在设备执行上述第一方面或第一方面任一可能的实现方式中的界面的生成方法。
第四方面,本发明实施例提供了一种计算机设备,包括存储器和处理器,所述存储器用于存储包括程序指令的信息,所述处理器用于控制程序指令的执行,所述程序指令被处理器加载并执行时实现上述第一方面或第一方面任一可能的实现方式中的界面的生成方法的步骤。
本发明实施例提供的一种界面的生成方法、装置、存储介质和计算机设备的技术方案中,获取原界面与界面信息;根据界面信息,从设置的至少一个布局方式中,确定出原界面对应的目标布局方式,目标布局方式为原界面对应的布局方式;根据目标布局方式、界面信息与原界面,生成当前界面。而在界面信息中包括设备分辨率尺寸与原界面对应的第一分辨率尺寸,计算机设备可根据设备分辨率尺寸与第一分辨率尺寸不相同确定出需要将原界面调整为适配设备分辨率尺寸的当前界面,从而在UI规范分辨率改变或者屏幕的分辨率改变了之后,计算机设备可自动对原界面进行调整以生成当前界面,无需工作人员对原界面布局进行重新适配,降低了开发成本,减少了开发时间。
【附图说明】
为了更清楚地说明本发明实施例的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其它的附图。
图1为本发明实施例提供的一种界面的生成方法的流程图;
图2为本发明实施例提供的另一种生成当前界面的流程图;
图3为本发明实施例提供的一种多套布局文件的示意图;
图4为本发明实施例提供的另一种生成当前界面的流程图;
图5为本发明实施例提供的另一种生成当前界面的流程图;
图6为本发明实施例提供的一种多个尺寸表的示意图;
图7为本发明实施例提供的另一种生成当前界面的流程图;
图8为本发明实施例提供的一种目标尺寸表的横坐标的示意图;
图9为本发明实施例提供的一种目标尺寸表的纵坐标的示意图;
图10为本发明实施例提供的一种当前界面的示意图;
图11为本发明实施例提供的另一种当前界面的示意图;
图12为本发明实施例提供的另一种当前界面的示意图;
图13为本发明实施例提供的一种创建目标尺寸表的流程图;
图14为本发明实施例提供的一种原界面的坐标示意图;
图15为本发明实施例提供的一种界面的生成装置的结构示意图;
图16为本发明实施例提供的一种计算机设备的示意图。
【具体实施方式】
为了更好的理解本发明的技术方案,下面结合附图对本发明实施例进行详细描述。
应当明确,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例,都属于本发明保护的范围。
在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的,而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式,除非上下文清楚地表示其他含义。
应当理解,本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。另外,本文中字符“/”,一般表示前后关联对象是一种“或”的关系。
应当理解,尽管在本发明实施例中可能采用术语第一、第二、第三等来描述数目等,但这些数目不应限于这些术语。这些术语仅用来将数目彼此区分开。例如,在不脱离本发明实施例范围的情况下,第一数目也可以被称为第二数目,类似地,第二数目也可以被称为第一数目。
取决于语境,如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地,取决于语境,短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。
图1为本发明实施例提供的一种界面的生成方法的流程图,该方法用于设备的分辨率尺寸改变时,自动对原界面进行调整以使原界面适配设备的分辨率尺寸,如图1所示,该方法包括:
步骤101、计算机设备获取原界面与界面信息。
本发明实施例中,计算机设备包括但不限于手机、平板电脑、便携式PC、台式机、可穿戴设备、车辆终端等。计算机设备为具有显示屏的安卓设备。
计算机设备界面信息包括原界面对应的第一信息与计算机设备对应的设备信息。第一信息包括第一分辨率信息;第一分辨率信息包括原界面的第一分辨率尺寸。设备信息包括设备分辨率尺寸。
步骤102、计算机设备根据界面信息,从设置的至少一个布局方式中,确定出原界面对应的目标布局方式。
本发明实施例中,至少一个布局方式包括尺寸布局方式、匹配布局方式与适配布局方式中至少一个。目标布局方式为原界面对应的布局方式,目标布局方式为尺寸布局方式、匹配布局方式或适配布局方式。
在界面信息中包括设备分辨率尺寸与原界面对应的第一分辨率尺寸,在步骤102之前还包括:计算机设备判断设备分辨率尺寸与第一分辨率尺寸是否相同,若判断出设备分辨率尺寸与第一分辨率尺寸不相同,则执行步骤102;若判断出设备分辨率尺寸与第一分辨率尺寸相同,则显示原界面。
步骤103、计算机设备根据目标布局方式、界面信息与原界面,生成当前界面。
本发明实施例中,步骤103之后,还包括:计算机设备显示当前界面。
本发明实施例提供了一种界面的生成方法,获取原界面与界面信息;根据界面信息,从设置的至少一个布局方式中,确定出原界面对应的目标布局方式,目标布局方式为原界面对应的布局方式;根据目标布局方式、界面信息与原界面,生成当前界面,而在界面信息中包括设备分辨率尺寸与原界面对应的第一分辨率尺寸,计算机设备可根据设备分辨率尺寸与第一分辨率尺寸不相同确定出需要将原界面调整为适配设备分辨率尺寸的当前界面,从而在UI规范分辨率改变或者屏幕的分辨率改变了之后,计算机设备可自动对原界面进行调整以生成当前界面,无需工作人员对原界面布局进行重新适配,减少了开发成本和开发时间,减少了由于对原界面拉伸或压缩导致原界面变形的情况。
在一种可能的实现方式中,在步骤102中,计算机设备若确定出界面信息中包括宽度限定标识,则确定出目标布局方式为匹配布局方式。
本发明实施例中,匹配布局方式为针对UI复杂或对UI效果要求较高的布局所对应的方式,可以针对各种分辨率匹配不同布局文件来满足产品需求。工作人员在开发一个UI复杂或对UI效果要求较高的原界面时,可以在该原界面对应的第一信息中写入宽度限定标识,界面信息包括原界面对应的第一信息。宽度限定标识包括宽度限定符。由于匹配布局方式对应至少一个布局文件,所以匹配布局方式也可以被称为多套布局方式。
图2为本发明实施例提供的另一种生成当前界面的流程图,如图2所示,布局方式包括匹配布局方式,若目标布局方式为匹配布局方式时,步骤103,具体可包括:
步骤1031、计算机设备从匹配布局方式对应的至少一个布局文件中确定出目的布局文件,目的布局文件为设备分辨率尺寸对应的布局文件。
本发明实施例中,界面信息包括设备分辨率尺寸。计算机设备根据设备分辨率尺寸从多个布局文件中确定出设备分辨率尺寸对应的目的布局文件。每个布局文件均对应一个布局分辨率尺寸,目的布局文件指的是多个布局文件中,与设备分表率尺寸相近的布局分辨率尺寸对应的布局文件。
图3为本发明实施例提供的一种多套布局文件的示意图,如图3所示,图3中示出了3套布局文件,分别为名称为layout-w3900的布局文件、名称为layout-w2600的布局文件与名称为layout-w1300的布局文件,名称为layout-w3900的布局文件、名称为layout-w2600的布局文件与名称为layout-w1300的布局文件分别包括acticity_main_diffrentlayout.xml,该xml文件中包括了原界面中的各个元素在不同界面下的布局。当设备分辨率尺寸为756*4032时,计算机设备从3个布局文件中确定出目的布局文件为名称为layout-w3900的布局文件;当设备分辨率尺寸为756*2688时,计算机设备从3个布局文件中确定出目的布局文件为名称为layout-w2600的布局文件;当设备分辨率尺寸为756*1344时,计算机设备从3个布局文件中确定出目的布局文件为名称为layout-w1300的布局文件。
步骤1032、计算机设备根据目的布局文件对原界面进行调整,生成当前界面。
本发明实施例中,原界面包括原图像元素和/或原控件元素,其中,原图像元素指的是图像,原控件元素指的是按钮、输入框、字符中至少一个。计算机设备会加载目的布局文件,从目的布局文件中解析出每个元素对应的第一当前尺寸。
例如,原界面中包括原图像元素与原控件元素,原图像元素的尺寸为第一原图像尺寸,原控件元素的尺寸为第一原控件尺寸。目的布局文件中规定图像元素对应的尺寸为第一当前图像尺寸,控件元素对应的尺寸为第一当前控件尺寸。计算机设备通过图像布局方式,将原图像元素的尺寸由第一原图像尺寸调整为第一当前图像尺寸,并将调整后的原图像元素作为第二图像元素;将原控件元素的尺寸由第一原控件尺寸调整为第一当前控件尺寸,并将调整后的原控件元素作为第二控件元素;根据第二控件元素与第二图像元素生成当前界面。图像布局方式为将图像通过点九图或矢量图的方式,对图像的大小进行调整的方式。通过图像布局方式对图像进行调整时,使不同分辨率下的同一图像不会被拉伸或压缩而导致图像变形。但本发明实施例中并不对原界面的元素进行限定,也不对原控件元素与原图像元素的调整顺序进行限定。
在一种可能的实现方式中,在步骤102中,计算机设备若确定出界面信息中包括水平平分标识,则确定出目标布局方式为适配布局方式。
本发明实施例中,适配布局方式指的是根据重力(weight)属性来按照比例对原界面进行调整的布局方式。适配布局方式适用于线性布局(LinearLayout)或约束布局(ConstraintLayout)的原界面,该原界面对应的第一信息中包括水平平分标识。界面信息包括原界面对应的第一信息。
图4为本发明实施例提供的另一种生成当前界面的流程图,如图4所示,布局方式包括适配布局方式,若目标布局方式为适配布局方式时,步骤103,具体可包括:
步骤1033、计算机设备根据适配布局方式,从界面信息中查找出重力属性与设备分辨率尺寸。
本发明实施例中,界面信息包括重力属性与设备分辨率尺寸。
步骤1034、计算机设备根据重力属性与设备分辨率尺寸,对原界面进行调整,生成当前界面。
本发明实施例中,对于线性布局或约束布局的原界面,若原界面包括原图像元素与原控件元素,计算机设备可通过weight属性与设备分辨率尺寸生成原图像元素对应的第二当前图像尺寸与原控件元素对应的第二当前控件尺寸。
在一种可能的实现方式中,在步骤102中,计算机设备若确定出界面信息中不包括水平平分标识或宽度限定标识,则确定出目标布局方式为尺寸布局方式。
本发明实施例中,计算机设备对界面信息进行遍历,若确定出界面信息中既不包括水平平分标识,也不包括宽度限定标识,则确定出采用尺寸布局方式对原界面进行调整。界面信息还包括原界面对应的第一分辨率信息与设备分辨率尺寸,第一分辨率信息包括第一分辨率尺寸。由于尺寸布局方式能对任意分辨率下的原界面进行等比例拉伸或压缩,所以尺寸布局方式也可以被称为万能适配方式。
例如,一个原界面的第一信息包括:<ImageView
android:layout_width=”@dimen/x102”
android:layout_height=”@dimen/y102”
android:layout_marginTop=”@dimen/y95”
android:scaleType=”centerinside”
android:src=”@drawable/btn_onon_n”/>
上述代码说明了一个布局元素的宽高属性配置,宽度方向上的坐标值与高度方向上的坐标值可定位1个像素。其中,ImageView指的是图像视图,layout_width=”@dimen/x102”表示在宽度方向上布局了102个坐标值。android:layout_height=”@dimen/y102”表示在高度方向上布局了102个坐标值,layout_marginTop=”@dimen/y95”表示在边缘顶部布局了95个坐标值,android:scaleType=”centerinside”表示不保持原图大小,以原图的几何中心点和ImagView的几何中心点为基准,只绘制ImagView大小的图像,即以显示完整图片为目标,对原图进行缩放。src=”@drawable/btn_onon_n”表示图像的路径,计算机设备引用drawable文件夹中的名称为btn_onon_n的图片资源。
界面信息包括原界面对应的第一分辨率信息与设备分辨率尺寸,图5为本发明实施例提供的另一种生成当前界面的流程图,如图5所示,布局方式包括尺寸布局方式,若目标布局方式为尺寸布局方式时,步骤103,具体可包括:
步骤1035、计算机设备判断尺寸布局方式对应的至少一个尺寸表中是否包括目标尺寸表,目标尺寸表为第一分辨率尺寸对应的尺寸表,若是,则执行步骤1036;若否,则执行步骤1037。
本发明实施例中,尺寸布局方式对应至少一个尺寸表,每个尺寸表均对应第一分辨率尺寸。图6为本发明实施例提供的一种多个尺寸表的示意图,如图6所示,图6中示出了4个尺寸表,分别为values、values-756*1344、values-756*2688和values-756*4032。其中values指的是原界面的尺寸表,例如,第一分辨率尺寸为720*1920,values为原界面尺寸为720*1920时的尺寸表。values-756*1344指的是将原界面的尺寸调整为756*1344时对应的尺寸表。values-756*2688指的是将原界面的尺寸调整为756*2688时对应的尺寸表。values-756*4032指的是将原界面的分辨率尺寸调整为756*4032时对应的尺寸表。
步骤1036、计算机设备根据目标尺寸表对原界面进行调整,生成当前界面。
当原界面包括原图像元素与原控件元素时,图7为本发明实施例提供的另一种生成当前界面的流程图,如图7所示,步骤1036,具体可包括:
步骤1036a、计算机设备通过图像布局方式,根据目标尺寸表与原图像元素,生成第一图像元素。
本发明实施例中,计算机设备通过图像布局方式,根据目标尺寸表对原图像元素进行拉伸或压缩,从而使图像元素由第一原图像尺寸调整为第三当前图像尺寸。例如,第一原图像尺寸为720*1920,1920为原图像元素的分辨率宽值,720为原图像元素的分辨率高值;第三当前图像尺寸为756*2688,2688为当前图像元素的分辨率宽值,756为当前图像的分辨率高值。
若原图像尺寸为720*1920,设备分辨率尺寸为756*1344时,图8为本发明实施例提供的一种目标尺寸表的横坐标的示意图,如图8所示,目标尺寸表中包括当前界面每个像素对应的x方向上的坐标值。图9为本发明实施例提供的一种目标尺寸表的纵坐标的示意图,如图9所示,目标尺寸表中还包括y方向上的坐标值。图9中所示的y方向上的坐标值与图8中所示的x方向上的坐标值属于同一个目标尺寸表,如图8与图9所示,x1为0.7像素(pixel,px),表示当前界面的像素的横向分辨率尺寸是原界面的像素的横向分辨率尺寸的0.7倍;y1为1.04px,表示当前界面的像素的纵向分辨率尺寸是原界面的像素的纵向分辨率尺寸的1.4倍;计算机设备通过图像布局方式,将图像元素的横向分辨率尺寸进行拉伸并将图像元素的纵向分辨率尺寸进行压缩。
图10为本发明实施例提供的一种当前界面的示意图,当前界面的尺寸为756*2688,当前界面中包括第一控件元素与第一图像元素,第一控件元素包括两个按钮01与02、字符03与输入框04。原界面的原控件元素与原图像元素处于不同的图层中,计算机设备可对原界面的原图像元素与原控件元素分别进行处理,并将处理后的原图像元素作为第一图像元素,并将处理后的原控件元素作为第一控件元素,第一控件元素与第一图像元素也处于不同的图层中。图11为本发明实施例提供的另一种当前界面的示意图,当前界面的尺寸为980*2688,当前界面中包括第一控件元素与第一图像元素,第一控件元素包括两个按钮01与02、字符03与输入框04。图12为本发明实施例提供的另一种当前界面的示意图,当前界面的尺寸为980*1920,当前界面中包括第一控件元素与第一图像元素,第一控件元素包括两个按钮01与02、字符03与输入框04。图10、图11与图12所示的当前界面为同一个原界面适配756*2688、980*2688与980*1920的尺寸后所示的界面。如图10、图11与图12所示,同一个原图像元素可适配不同尺寸的设备分辨率尺寸。
步骤1036b、计算机设备根据目标尺寸表对原控件元素进行调整,生成第一控件元素。
本发明实施例中,如图10、图11与图12所示,由于适配的设备分辨率尺寸不同,所以目标尺寸表不同,生成的第一控件元素的大小也不相同。
步骤1036c、计算机设备根据第一控件元素与第一图像元素生成当前界面。
本发明实施例中,当前界面包括第一控件元素与第一图像元素。例如,如图10、图11与图12所示的当前界面,计算机设备根据设备分辨率尺寸将同一个原界面适配到不同分辨率尺寸的当前界面中。
步骤1037、计算机设备根据第一分辨率信息与设备分辨率尺寸,创建目标尺寸表。
本发明实施例中,原界面包括至少一个像素,第一分辨率信息还包括每个像素的第一坐标信息;图13为本发明实施例提供的一种创建目标尺寸表的流程图,如图13所示,步骤1037,具体可包括:
步骤1037a、计算机设备根据设备分辨率尺寸与第一分辨率尺寸,计算出调整比例。
本发明实施例中,设备分辨率尺寸包括设备分辨率宽值与设备分辨率高值,第一分辨率尺寸包括第一分辨率宽值与第一分辨率高值。计算机设备通过第一调整比例公式,根据设备分辨率宽值与第一分辨率宽值,生成调整宽比例;通过第二调整比例公式,根据设备分辨率高值与第一分辨率高值,生成调整高比例。
例如,第一调整比例公式为scaleX=(X1×1.0)/X2;scaleX为调整宽比例,X1为设备分辨率宽值,X2为第一分辨率宽值。第二调整比例公式为scaleY=(Y1×1.0)/Y2;scaleY为调整高比例,Y1为设备分辨率高值,Y2为第一分辨率高值。其中,第一调整比例公式与第二调整比例公式中的1.0均是为了让计算结果中保留一位小数。
第一分辨率尺寸为720*1920,第一分辨率宽值为1920,第一分辨率高值为720。设备分辨率尺寸为756*1344,设备分辨率宽值为1344,设备分辨率高值为756。第一调整比例公式为scaleX=(1344x1.0)/1920;第二调整比例公式为scaleyY=(756x1.0)/720。
步骤1037b、计算机设备根据调整比例与至少一个像素的第一坐标信息,计算出每个像素的第二坐标信息。
本发明实施例中,图14为本发明实施例提供的一种原界面的坐标示意图,如图14所示,dimens_x.xml中包括原界面中每个像素在宽方向上的坐标值,dimens_y.xml中包括原界面中每个像素在的高方向上的坐标值。图14中还示出了原界面在宽方向上具有25个像素,x1为1表示第一个像素在宽方向上的坐标值为1。计算机设备将原界面中每个像素在宽方向上的坐标值与scaleyX相乘,计算出每个像素的第二横坐标;将原界面中每个像素在宽方向上的坐标值与scaleyY相乘,计算出每个像素的第二纵坐标。第二坐标信息包括至少一个像素的第二横坐标与第二纵坐标。
步骤1037c、计算机设备根据至少一个像素的第二坐标信息创建目标尺寸表。
本发明实施例中,如图8与图9所示,目标尺寸表中包括多个像素的第二坐标信息。
步骤1038、计算机设备根据目标尺寸表对原界面进行调整,生成当前界面。
本发明实施例中,步骤1038可参考图5所示的步骤1036。
本发明实施例提供的一种界面的生成方法,获取原界面与界面信息;根据界面信息,从设置的至少一个布局方式中,确定出原界面对应的目标布局方式,目标布局方式为原界面对应的布局方式;根据目标布局方式、界面信息与原界面,生成当前界面。而在界面信息中包括设备分辨率尺寸与原界面对应的第一分辨率尺寸,计算机设备可根据设备分辨率尺寸与第一分辨率尺寸不相同确定出需要将原界面调整为适配设备分辨率尺寸的当前界面,从而在UI规范分辨率改变或者屏幕的分辨率改变了之后,计算机设备可自动对原界面进行调整以生成当前界面,无需工作人员对原界面布局进行重新适配,降低了开发成本,减少了开发时间,提高了界面的适配性,减少了界面变形的情况。
图15为本发明实施例提供的一种界面的生成装置的结构示意图,如图15所示,该装置包括:获取模块11、确定模块12与生成模块13。获取模块11与确定模块12连接,确定模块12与生成模块13连接。
获取模块11用于获取原界面与界面信息;确定模块12用于根据界面信息,从设置的至少一个布局方式中,确定出原界面对应的目标布局方式,目标布局方式为原界面对应的布局方式;生成模块13用于根据目标布局方式、界面信息与原界面,生成当前界面。
本发明实施例中,目标布局方式包括尺寸布局方式,界面信息包括原界面对应的第一分辨率信息与设备分辨率尺寸,第一分辨率信息包括第一分辨率尺寸;生成模块13包括判断子模块131、第一生成子模块132、创建子模块133。判断子模块131与第一生成子模块132和创建子模块133连接,第一生成子模块132和创建子模块133连接。
判断子模块131用于判断尺寸布局方式对应的至少一个尺寸表中是否包括目标尺寸表,目标尺寸表为第一分辨率尺寸对应的尺寸表;第一生成子模块132用于若判断子模块131判断出至少一个尺寸表中包括目标尺寸表,则根据目标尺寸表对原界面进行调整,生成当前界面;创建子模块133用于若判断子模块131判断出至少一个尺寸表中不包括目标尺寸表,则根据第一分辨率信息与设备分辨率尺寸,创建目标尺寸表;第一生成子模块132还用于根据目标尺寸表对原界面进行调整,生成当前界面。
本发明实施例中,原界面包括至少一个像素,第一分辨率信息还包括每个像素的第一坐标信息;创建子模块133具体用于根据设备分辨率尺寸与第一分辨率尺寸,计算出调整比例;根据调整比例与至少一个像素的第一坐标信息,计算出每个像素的第二坐标信息;根据至少一个像素的第二坐标信息创建目标尺寸表。
本发明实施例中,原界面包括原图像元素与原控件元素,第一生成子模块132具体用于通过图像布局方式,根据目标尺寸表与原图像元素,生成第一图像元素;根据目标尺寸表对原控件元素进行调整,生成第一控件元素;根据第一控件元素与第一图像元素生成当前界面。
本发明实施例中,目标布局方式包括匹配布局方式,界面信息包括设备分辨率尺寸;生成模块包括确定子模块134与第二生成子模块135。确定子模块134与第二生成子模块135连接。
确定子模块134用于从匹配布局方式对应的至少一个布局文件中确定出目的布局文件,目的布局文件为设备分辨率尺寸对应的布局文件;第二生成子模块135用于根据目的布局文件对原界面进行调整,生成当前界面。
本发明实施例中,目标布局方式包括适配布局方式,界面信息包括重力属性与设备分辨率尺寸;生成模块包括查找子模块136与第三生成子模块137。查找子模块136与第三生成子模块137连接。
查找子模块136用于根据适配布局方式,从界面信息中查找出重力属性与设备分辨率尺寸;第三生成子模块137用于根据重力属性与设备分辨率尺寸,对原界面进行调整,生成当前界面。
本发明实施例中,确定模块具体用于若确定出界面信息中包括宽度限定标识,则确定出目标布局方式为匹配布局方式;或者,若确定出界面信息中包括水平平分标识,则确定出目标布局方式为适配布局方式;或者,若确定出界面信息中不包括水平平分标识或宽度限定标识,则确定出目标布局方式为尺寸布局方式。
本发明实施例提供的一种界面的生成装置,获取原界面与界面信息;根据界面信息,从设置的至少一个布局方式中,确定出原界面对应的目标布局方式,目标布局方式为原界面对应的布局方式;根据目标布局方式、界面信息与原界面,生成当前界面。而在界面信息中包括设备分辨率尺寸与原界面对应的第一分辨率尺寸,计算机设备可根据设备分辨率尺寸与第一分辨率尺寸不相同确定出需要将原界面调整为适配设备分辨率尺寸的当前界面,从而在UI规范分辨率改变或者屏幕的分辨率改变了之后,计算机设备可自动对原界面进行调整以生成当前界面,无需工作人员对原界面布局进行重新适配,降低了开发成本,减少了开发时间。
本发明实施例提供了一种存储介质,存储介质包括存储的程序,其中,在程序运行时控制存储介质所在设备执行上述界面的生成方法的实施例的各步骤,具体描述可参见上述界面的生成方法的实施例。
本发明实施例提供了一种计算机设备,包括存储器和处理器,存储器用于存储包括程序指令的信息,处理器用于控制程序指令的执行,程序指令被处理器加载并执行时实现上述界面的生成方法的实施例的各步骤,具体描述可参见上述界面的生成方法的实施例。
图16为本发明实施例提供的一种计算机设备的示意图。如图16所示,该实施例的计算机设备30包括:处理器31、存储器32以及存储在存储器32中并可在处理器31上运行的计算机程序33,该计算机程序33被处理器31执行时实现实施例中的应用于界面的生成方法,为避免重复,此处不一一赘述。或者,该计算机程序被处理器31执行时实现实施例中应用于界面的生成装置中各模型/单元的功能,为避免重复,此处不一一赘述。
计算机设备30包括,但不仅限于,处理器31、存储器32。本领域技术人员可以理解,图16仅仅是计算机设备30的示例,并不构成对计算机设备30的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件,例如计算机设备30还可以包括输入输出设备、网络接入设备、总线等。
所称处理器31可以是中央处理单元(Central Processing Unit,CPU),还可以是其他通用处理器、数字信号处理器(Digital Signal Processor,DSP)、专用集成电路(Application Specific Integrated Circuit,ASIC)、现场可编程门阵列(Field-Programmable Gate Array,FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
存储器32可以是计算机设备30的内部存储单元,例如计算机设备30的硬盘或内存。存储器32也可以是计算机设备30的外部存储设备,例如计算机设备30上配备的插接式硬盘,智能存储卡(Smart Media Card,SMC),安全数字(Secure Digital,SD)卡,闪存卡(Flash Card)等。进一步地,存储器32还可以既包括计算机设备30的内部存储单元也包括外部存储设备。存储器32用于存储计算机程序以及计算机设备30所需的其他程序和数据。存储器32还可以用于暂时地存储已经输出或者将要输出的数据。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统,装置和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在DD224896I
此不再赘述。
在本发明所提供的几个实施例中,应该理解到,所揭露的系统,装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如,多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本发明各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用硬件加软件功能单元的形式实现。
上述以软件功能单元的形式实现的集成的单元,可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中,包括若干指令用以使得一台计算机装置(可以是个人计算机,服务器,或者网络装置等)或处理器(Processor)执行本发明各个实施例所述方法的部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(Random Access Memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅为本发明的较佳实施例而已,并不用以限制本发明,凡在本发明的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本发明保护的范围之内。
Claims (10)
1.一种界面的生成方法,其特征在于,所述方法用于设备的分辨率尺寸改变时,自动对原界面进行调整以使原界面适配设备的分辨率尺寸,所述方法包括:
获取原界面与界面信息;
根据所述界面信息,从设置的至少一个布局方式中,确定出所述原界面对应的目标布局方式,所述目标布局方式为所述原界面对应的布局方式;
根据所述目标布局方式、所述界面信息与所述原界面,生成当前界面。
2.根据权利要求1所述的方法,其特征在于,所述目标布局方式包括尺寸布局方式,所述界面信息包括所述原界面对应的第一分辨率信息与设备分辨率尺寸,所述第一分辨率信息包括第一分辨率尺寸;所述根据所述目标布局方式、所述界面信息与所述原界面,生成当前界面,包括:
判断尺寸布局方式对应的至少一个尺寸表中是否包括目标尺寸表,所述目标尺寸表为所述第一分辨率尺寸对应的尺寸表;
若判断出至少一个所述尺寸表中包括所述目标尺寸表,则根据所述目标尺寸表对所述原界面进行调整,生成当前界面;
若判断出至少一个所述尺寸表中不包括所述目标尺寸表,则根据所述第一分辨率信息与所述设备分辨率尺寸,创建目标尺寸表;
根据所述目标尺寸表对所述原界面进行调整,生成当前界面。
3.根据权利要求2所述的方法,其特征在于,所述原界面包括至少一个像素,所述第一分辨率信息还包括每个像素的第一坐标信息;所述根据所述第一分辨率信息与所述设备分辨率尺寸,创建目标尺寸表,包括:
根据所述设备分辨率尺寸与所述第一分辨率尺寸,计算出调整比例;
根据所述调整比例与至少一个像素的所述第一坐标信息,计算出每个所述像素的第二坐标信息;
根据至少一个像素的所述第二坐标信息创建所述目标尺寸表。
4.根据权利要求2所述的方法,其特征在于,所述原界面包括原图像元素与原控件元素,所述根据所述目标尺寸表对所述原界面进行调整,生成当前界面,包括:
通过图像布局方式,根据所述目标尺寸表与所述原图像元素,生成第一图像元素;
根据所述目标尺寸表对所述原控件元素进行调整,生成第一控件元素;
根据所述第一控件元素与所述第一图像元素生成当前界面。
5.根据权利要求1所述的方法,其特征在于,所述目标布局方式包括匹配布局方式,所述界面信息包括设备分辨率尺寸;所述根据所述目标布局方式、所述界面信息与所述原界面,生成当前界面,包括:
从所述匹配布局方式对应的至少一个布局文件中确定出目的布局文件,所述目的布局文件为所述设备分辨率尺寸对应的所述布局文件;
根据所述目的布局文件对所述原界面进行调整,生成当前界面。
6.根据权利要求1所述的方法,其特征在于,所述目标布局方式包括适配布局方式,所述界面信息包括重力属性与设备分辨率尺寸;所述根据所述目标布局方式、所述界面信息与所述原界面,生成当前界面,包括:
根据所述适配布局方式,从所述界面信息中查找出重力属性与设备分辨率尺寸;
根据所述重力属性与所述设备分辨率尺寸,对所述原界面进行调整,生成当前界面。
7.根据权利要求1所述的方法,其特征在于,所述根据所述界面信息,从设置的至少一个布局方式中,确定出所述原界面对应的目标布局方式,包括:
若确定出所述界面信息中包括宽度限定标识,则确定出所述目标布局方式为匹配布局方式;或者,
若确定出所述界面信息中包括水平平分标识,则确定出所述目标布局方式为适配布局方式;或者,
若确定出所述界面信息中不包括所述水平平分标识或所述宽度限定标识,则确定出所述目标布局方式为尺寸布局方式。
8.一种界面的生成装置,其特征在于,包括:
获取模块,用于获取原界面与界面信息;
确定模块,用于根据所述界面信息,从设置的至少一个布局方式中,确定出所述原界面对应的目标布局方式,所述目标布局方式为所述原界面对应的布局方式;
生成模块,用于根据所述目标布局方式、所述界面信息与所述原界面,生成当前界面。
9.一种存储介质,其特征在于,所述存储介质包括存储的程序,其中,在所述程序运行时控制所述存储介质所在设备执行权利要求1至7中任意一项所述的界面的生成方法。
10.一种计算机设备,包括存储器和处理器,所述存储器用于存储包括程序指令的信息,所述处理器用于控制程序指令的执行,其特征在于,所述程序指令被处理器加载并执行时实现权利要求1至7中任意一项所述的界面的生成方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202310153594.9A CN116107570A (zh) | 2023-02-22 | 2023-02-22 | 界面的生成方法、装置、存储介质和计算机设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202310153594.9A CN116107570A (zh) | 2023-02-22 | 2023-02-22 | 界面的生成方法、装置、存储介质和计算机设备 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN116107570A true CN116107570A (zh) | 2023-05-12 |
Family
ID=86261519
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202310153594.9A Pending CN116107570A (zh) | 2023-02-22 | 2023-02-22 | 界面的生成方法、装置、存储介质和计算机设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN116107570A (zh) |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111190672A (zh) * | 2019-12-20 | 2020-05-22 | 深圳市优必选科技股份有限公司 | 电子设备的ui界面适配方法、电子设备和存储介质 |
WO2021013226A1 (zh) * | 2019-07-25 | 2021-01-28 | 华为技术有限公司 | 一种界面生成方法及设备 |
CN113268303A (zh) * | 2021-05-27 | 2021-08-17 | 北京大米科技有限公司 | 界面元素配置方法、装置、存储介质及电子设备 |
CN114610426A (zh) * | 2022-03-04 | 2022-06-10 | 腾讯科技(深圳)有限公司 | 一种调整界面布局的方法、装置、设备及存储介质 |
CN114637507A (zh) * | 2022-03-29 | 2022-06-17 | 建信融通有限责任公司 | 一种界面布局适配方法、系统、存储介质及电子设备 |
-
2023
- 2023-02-22 CN CN202310153594.9A patent/CN116107570A/zh active Pending
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2021013226A1 (zh) * | 2019-07-25 | 2021-01-28 | 华为技术有限公司 | 一种界面生成方法及设备 |
CN111190672A (zh) * | 2019-12-20 | 2020-05-22 | 深圳市优必选科技股份有限公司 | 电子设备的ui界面适配方法、电子设备和存储介质 |
CN113268303A (zh) * | 2021-05-27 | 2021-08-17 | 北京大米科技有限公司 | 界面元素配置方法、装置、存储介质及电子设备 |
CN114610426A (zh) * | 2022-03-04 | 2022-06-10 | 腾讯科技(深圳)有限公司 | 一种调整界面布局的方法、装置、设备及存储介质 |
CN114637507A (zh) * | 2022-03-29 | 2022-06-17 | 建信融通有限责任公司 | 一种界面布局适配方法、系统、存储介质及电子设备 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US7424672B2 (en) | System and method of specifying image document layout definition | |
CN109144647B (zh) | 一种表单设计方法与装置、终端设备以及存储介质 | |
CN112102164B (zh) | 一种图像处理方法、装置、终端及存储介质 | |
CN112055244B (zh) | 图像获取方法、装置、服务器和电子设备 | |
US20160203628A1 (en) | Information processing device editing map acquired from server | |
CN113126862B (zh) | 截屏方法、装置、电子设备以及可读存储介质 | |
CN111290684B (zh) | 图像显示方法、图像显示装置及终端设备 | |
CN113868494A (zh) | 一种大数据可视化展示系统 | |
CN112016502A (zh) | 安全带检测方法、装置、计算机设备及存储介质 | |
CN111223155A (zh) | 图像数据处理方法、装置、计算机设备和存储介质 | |
CN104793837A (zh) | 图形生成方法及装置 | |
CN116107570A (zh) | 界面的生成方法、装置、存储介质和计算机设备 | |
CN116193159A (zh) | 一种图像数据调整方法、装置、电子设备及存储介质 | |
CN110781440A (zh) | 容器高度的调整方法、装置、计算机设备及存储介质 | |
CN112765946B (zh) | 图表显示方法、装置及电子设备 | |
CN115619904A (zh) | 图像处理方法、装置及设备 | |
CN112632422B (zh) | 智能裁图方法、装置、电子设备及存储介质 | |
WO2021082652A1 (zh) | 显示信息的方法、装置及计算机可读存储介质 | |
CN114817664A (zh) | 基于大数据的数据展示方法及相关设备 | |
CN111127310B (zh) | 一种图像处理方法、装置、电子设备及存储介质 | |
CN113379768A (zh) | 一种图像处理方法、装置、存储介质和计算机设备 | |
CN112015416A (zh) | 开发网页的校验方法、装置、电子设备及计算机可读介质 | |
CN110955485A (zh) | 一种界面元素的调整方法和装置 | |
US20180081951A1 (en) | Information generation system, a method and a non-transitory computer readable medium thereof | |
US11663752B1 (en) | Augmented reality processing device and method |
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 | ||
TA01 | Transfer of patent application right | ||
TA01 | Transfer of patent application right |
Effective date of registration: 20240117 Address after: No. 13 Xingxiang Road, Zengjia Town, High tech Zone, Shapingba District, Chongqing, 400039 Applicant after: Chongqing Selis Phoenix Intelligent Innovation Technology Co.,Ltd. Address before: Room 2901, Floor 29, Unit 1, Building 1, No. 151, Tianfu Second Street, Chengdu Hi tech Zone, Chengdu Free Trade Pilot Zone, 610,000, Sichuan Applicant before: Chengdu Thalys Technology Co.,Ltd. |