CN113835704A - 一种布局文件生成方法、装置、设备以及存储介质 - Google Patents
一种布局文件生成方法、装置、设备以及存储介质 Download PDFInfo
- Publication number
- CN113835704A CN113835704A CN202111137629.7A CN202111137629A CN113835704A CN 113835704 A CN113835704 A CN 113835704A CN 202111137629 A CN202111137629 A CN 202111137629A CN 113835704 A CN113835704 A CN 113835704A
- Authority
- CN
- China
- Prior art keywords
- component
- file
- target
- layer
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 48
- 238000013461 design Methods 0.000 claims abstract description 103
- 238000004590 computer program Methods 0.000 claims description 13
- 238000009877 rendering Methods 0.000 claims description 11
- 238000003709 image segmentation Methods 0.000 claims description 8
- 238000012549 training Methods 0.000 description 11
- 230000006870 function Effects 0.000 description 9
- 238000010586 diagram Methods 0.000 description 8
- 238000004573 interface analysis Methods 0.000 description 8
- 238000006243 chemical reaction Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 244000241235 Citrullus lanatus Species 0.000 description 2
- 235000012828 Citrullus lanatus var citroides Nutrition 0.000 description 2
- 235000013399 edible fruits Nutrition 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000008520 organization Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 244000144730 Amygdalus persica Species 0.000 description 1
- 240000000716 Durio zibethinus Species 0.000 description 1
- 235000006025 Durio zibethinus Nutrition 0.000 description 1
- 240000008790 Musa x paradisiaca Species 0.000 description 1
- 235000018290 Musa x paradisiaca Nutrition 0.000 description 1
- 235000006040 Prunus persica var persica Nutrition 0.000 description 1
- 230000000712 assembly Effects 0.000 description 1
- 238000000429 assembly Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000018109 developmental process Effects 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000003068 static 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
Abstract
本申请提供一种布局文件生成方法、装置、设备以及存储介质,所述布局文件生成方法,包括:获取界面设计文件;根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,所述目标组件为显示于目标平台的界面上的组件,所述组件描述文件为对所述目标组件进行描述的文件;根据所述组件描述文件得到所述目标平台的界面布局文件。在一定程度上提高了界面布局文件的生成效率。
Description
技术领域
本申请涉及界面处理技术领域,具体而言,涉及一种布局文件生成方法、装置、设备以及存储介质。
背景技术
传统移动端APP的开发流程是项目经理整理需求之后选择所需要的功能,设计交互流程并给出产品设计原型图,产品设计原型图交由交互工程师和设计工程师产生App的设计原稿,这个设计原稿就是App开发人员需要实现的效果。
设计工程师主要使用Photo shop来开发产品设计图,然后对产品设计图上的字体大小、颜色、组件边距、圆角度数等进行标记,得到设计原稿,然后将设计原稿发给不同平台的APP开发人员,不同平台的APP开发人员根据设计原稿手动创建布局文件,然后,根据布局文件进行渲染即可得到APP界面。具体的,不同平台的APP开发人员会根据设计原稿在布局文件中实现每个组件的创建和调整,比如,设计原稿中包含一个文本组件,则某个平台的APP开发人员需要在布局文件中对该文本组件的页边距、字体颜色、大小等信息进行创建,初步的布局文件生成之后,还需要该平台的APP开发人员进行确认,如果有问题,还需要手动调整。
由此可见,当需要得到多个平台的界面时,需要各个平台的APP开发人员分别去看设计原稿,然后根据设计原稿手动创建相应平台的布局文件,从而导致界面布局文件的生成效率低下。
发明内容
基于此,提出一种能够较好的实现图像对齐的布局文件生成方法、装置、设备以及存储介质,以解决现有技术中存在的生成布局文件花费大量时间的问题。
第一方面,提供了一种布局文件生成方法,包括:
获取界面设计文件;
根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,所述目标组件为显示于目标平台的界面上的组件,所述组件描述文件为对所述目标组件进行描述的文件;
根据所述组件描述文件得到所述目标平台的界面布局文件。
上述布局文件生成方法,首先获取界面设计文件;然后根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,所述目标组件为显示于目标平台的界面上的组件,所述组件描述文件为对所述目标组件进行描述的文件;最后根据所述组件描述文件得到所述目标平台的界面布局文件。可见,由于根据界面设计文件中的图层信息进行了组件识别,得到了目标组件对应的组件描述文件,因此,在需要生成不同平台的界面布局文件的时候,便可以根据目标组件对应的组件描述文件直接格式转换即可得到该平台的界面布局文件,相较于现有技术中根据设计原稿得到不同平台的界面布局文件的方式,由于不再需要各个平台的开发人员分别对界面设计文件进行组件的识别和手动创建界面布局文件,所以,在一定程度上节约了人力成本、提高了界面布局文件的生成效率。
在一个实施例中,所述图层信息中包括图层命名;
所述根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,包括:
根据所述界面设计文件中的每个图层的图层命名,得到所述图层对应的目标组件;
根据所述图层对应的目标组件,得到组件描述文件。
上述实施例,由于图层命名多数情况下是根据组件能够实现的功能命名的,因此,当图层有图层命名的时候,可以根据图层命名,确定该图层对应的目标组件的类别,从而实现了目标组件的简单确定。
在一个实施例中,所述图层信息中包括组信息;
所述根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,包括:
根据所述界面设计文件中的每个图层的组信息,得到至少一个目标组件;
根据所述至少一个目标组件得到组件描述文件。
上述实施例,当至少一个图层被加入同一个组时,可以根据该至少一个图层确定一个目标组件,从而实现了目标组件的简单确定。
在一个实施例中,所述根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,包括:
根据所述界面设计文件中的每个图层的图层信息确定图层之间的相对位置关系;
根据图层之间的相对位置关系得到至少一个目标组件;
根据所述至少一个目标组件得到组件描述文件。
上述实施例,由于在构建界面设计文件的时候,可能并不会把实现同一功能的多个图层放置在一个组中,此时,便无法再根据图层是否被加入同一个组确定目标组件,考虑有些类别的组件在位置上有所体现,比如,按钮类别的组件,通常下方会有一个视图类别的图层,视图类别的图层上方又覆盖有一个文本类别的图层,因此,当检测到这样两个类别的图层并且这样两个类别的图层又有一定的相对位置关系时,根据这两个组件可以得到一个目标组件。
在一个实施例中,所述根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,包括:
根据所述界面设计文件中的图层信息得到所述界面设计文件对应的图像;
对所述图像进行图像分割,得到多个目标图,每个所述目标图中包括至少一个图层;
将所述多个目标图输入组件识别模型,得到至少一个目标组件;
根据所述至少一个目标组件得到组件描述文件。
上述实施例,对于组件的识别,还可以通过训练组件识别模型来实现,在一定程度上解决了无法通过图层命名、组和相对位置关系确定目标组件的问题。
在一个实施例中,布局文件生成方法,还包括:
根据所述目标平台的界面布局文件进行渲染,得到所述目标平台的界面。
上述实施例,说明了在得到目标平台的界面布局文件之后,直接通过渲染操作即可得到相应的界面。
在一个实施例中,布局文件生成方法,还包括:
在检测到调整事件时,从多个目标组件中确定所述调整事件对应的目标调整组件和所述目标调整组件对应的更新组件;
根据所述更新组件更新所述组件描述文件;
使用更新后的组件描述文件生成所述目标平台的更新布局文件。
上述实施例,如果生成的界面和开发人员想要的界面不一致,或者,生成的界面和界面设计文件中需要的界面不一致,此时,开发人员还可以对生成的界面进行修改。
第二方面,提供了一种布局文件生成装置,包括:
获取模块,用于获取界面设计文件;
描述模块,用于根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,所述目标组件为显示于目标平台的界面上的组件,所述组件描述文件为对所述目标组件进行描述的文件;
布局模块,用于根据所述组件描述文件得到所述目标平台的界面布局文件。
在一个实施例中,所述图层信息中包括图层命名;
所述描述模块,具体用于:
根据所述界面设计文件中的每个图层的图层命名,得到所述图层对应的目标组件;
根据所述图层对应的目标组件,得到组件描述文件。
在一个实施例中,所述图层信息中包括组信息;
所述描述模块,具体用于:
根据所述界面设计文件中的每个图层的组信息,得到至少一个目标组件;
根据所述至少一个目标组件得到组件描述文件。
在一个实施例中,所述描述模块,具体用于:
根据所述界面设计文件中的每个图层的图层信息确定图层之间的相对位置关系;
根据图层之间的相对位置关系得到至少一个目标组件;
根据所述至少一个目标组件得到组件描述文件。
在一个实施例中,所述描述模块,具体用于:
根据所述界面设计文件中的图层信息得到所述界面设计文件对应的图像;
对所述图像进行图像分割,得到多个目标图,每个所述目标图中包括至少一个图层;
将所述多个目标图输入组件识别模型,得到至少一个目标组件;
根据所述至少一个目标组件得到组件描述文件。
在一个实施例中,布局文件生成装置,还包括:渲染模块,用于:
根据所述目标平台的界面布局文件进行渲染,得到所述目标平台的界面。
在一个实施例中,布局文件生成装置,还包括:更新模块,用于:
在检测到调整事件时,从多个目标组件中确定所述调整事件对应的目标调整组件和所述目标调整组件对应的更新组件;
根据所述更新组件更新所述组件描述文件;
使用更新后的组件描述文件生成所述目标平台的更新布局文件。
第三方面,提供了一种计算机设备,其特征在于,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现如上所述布局文件生成方法的步骤。
第四方面,提供了一种计算机可读存储介质,所述计算机可读取存储介质中存储有计算机程序指令,所述计算机程序指令被处理器读取并运行时,执行如上所述布局文件生成方法的步骤。
附图说明
为了更清楚地说明本申请实施例的技术方案,下面将对本申请实施例中所需要使用的附图作简单地介绍,应当理解,以下附图仅示出了本申请的某些实施例,因此不应被看作是对范围的限定,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他相关的附图。
图1为本申请实施例中布局文件生成方法的实现流程示意图;
图2为本申请实施例中标记点的示意图;
图3为本申请实施例中目标图3的示意图;
图4为本申请实施例中目标图的示意图;
图5为本申请实施例中对组件进行更新的示意图;
图6为本申请实施例中布局文件生成装置的组成结构示意图;
图7为本申请实施例中计算机设备的内部结构框图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
在一个实施例中,提供了一种布局文件生成方法。本发明实施例所述的布局文件生成方法的执行主体为能够实现本发明实施例所述的布局文件生成方法的计算机设备,该计算机设备可以包括但不限于终端和服务器。其中,终端包括台式终端和移动终端,台式终端包括但不限于台式电脑和车载电脑;移动终端包括但不限于手机、平板、笔记本电脑和智能手表。服务器包括高性能计算机和高性能计算机集群。
在一个实施例中,如图1所示的,提供了一种布局文件生成方法,包括:
步骤100,获取界面设计文件。
界面设计文件,为对APP中的界面进行设计的文件,界面设计文件可以包括但不限于Photo shop文件和sketch文件,其中,Photo shop文件和sketch文件分别是使用Photoshop软件和sketch软件得到的文件,Photo shop软件和sketch软件均是能够对图像和文字进行处理的软件。
步骤200,根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,所述目标组件为显示于目标平台的界面上的组件,所述组件描述文件为对所述目标组件进行描述的文件。
图层信息,为与图层相关的信息,其中,图层,为设计用的数字图纸,图层上可以加入图像和文字,通过将一张张的图层叠放在一起,组合起来便可以达到我们想要的设计效果。
组件,是对数据和方法的简单封装,组件可以有自己的属性和方法。其中,属性可以看作是对组件的一些基础设置,例如,组件的类别,组件的大小;方法,是指组件能够实现的功能,例如,组件为滑动类别的组件,通过滑动类别的组件可以实现滑动解锁功能。目标组件为显示于目标平台的界面上的组件。
组件描述文件,为对目标组件进行描述的文件,例如,对目标组件的组件类别、目标组件在界面中的位置、目标组件的尺寸、目标组件的形状等进行描述。在一个示例中,组件描述文件为JSON代码文件。
目标平台,为用于显示界面的平台,例如,目标平台为iOS平台或者Android平台。
步骤300,根据所述组件描述文件得到所述目标平台的界面布局文件。
界面布局文件,为对界面中的组件进行组织的文件,界面布局文件是一个文档文件,说明了如何对界面中的组件进行设置,即界面布局文件中包括对目标组件的描述。组件描述文件和界面布局文件均是对目标组件进行描述的文件,可以理解为:组件描述文件和界面布局文件记载的内容是相同的,均是对界面的组件进行描述,只是,组件描述文件和界面布局文件是按照不同的格式或者方法对目标组件进行描述,组件描述文件对组件的描述和平台无关,而界面布局文件对组件的描述则是和平台相关联的,需要按照平台要求的格式对组件进行描述从而得到该平台的界面布局文件,因此,只要有了组件描述文件并且知晓了目标平台,即可按照目标平台的界面布局文件的格式要求或者描述方法对组件描述文件进行格式转换,得到目标平台的界面布局文件。当目标平台是iOS平台时,界面布局文件是xib文件,当目标平台是Android平台时,界面布局文件是Layout文件,xib文件和Layout文件均是xml格式的文件。
下面举例说明组件描述文件的作用。例如,假设需要得到5个平台的界面布局文件,按照现有技术,需要5个平台的APP开发人员分别根据界面设计文件对平台中包含的目标组件进行识别,确认平台中包含的目标组件,然后手动创建界面布局文件,由于总共有5个平台,所以,对目标组件进行识别和手动创建界面布局文件总共要执行5次。但是,按照本发明实施例所述的布局文件生成方法,首先根据界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,然后,当有5个平台时,直接进行5次格式转换,即可得到5个平台的界面布局文件,意味着,得到5个平台的界面布局文件只用进行一次目标组件进行识别和5次的格式转换,所以,相较于现有技术需要执行5次目标组件的识别和手动创建界面布局文件,在一定程度上节约了人力成本、提高了界面布局文件的生成效率。
上述布局文件生成方法,首先获取界面设计文件;然后根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,所述目标组件为显示于目标平台的界面上的组件,所述组件描述文件为对所述目标组件进行描述的文件;最后根据所述组件描述文件得到所述目标平台的界面布局文件。可见,由于根据界面设计文件中的图层信息进行了组件识别,得到了目标组件对应的组件描述文件,因此,在需要生成不同平台的界面布局文件的时候,便可以根据目标组件对应的组件描述文件直接格式转换即可得到该平台的界面布局文件,相较于现有技术中根据设计原稿得到不同平台的界面布局文件的方式,由于不再需要各个平台的开发人员分别对界面设计文件进行组件的识别和手动创建界面布局文件,所以,在一定程度上节约了人力成本、提高了界面布局文件的生成效率。
在一个实施例中,在步骤200所述根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件之前,还包括:
根据界面解析文件,对所述界面设计文件进行解析,得到所述界面设计文件中的每个图层的图层信息。
界面解析文件,为对文件组织结构进行解释说明的文件,当界面设计文件是Photoshop文件时,界面解析文件为Photo shop对应的界面解析文件,当界面设计文件是sketch文件时,界面解析文件为sketch文件对应的界面解析文件。通过界面解析文件对界面设计文件进行解析,可以得到界面设计文件中的每个图层的图层信息。界面解析文件中说明了图像的存储格式,文本的存储格式和背景视图的存储格式,通过这些内容,当发现某个图层的存储格式为图像的存储格式时,确定该图层是图像图层,当发现某个图层的存储格式为文本的存储格式时,确定该图层是文本图层,当发现某个图层的存储格式为视图的存储格式时,确定该图层是视图图层,通过界面解析文件对图像图层、文本图层或者视图图层的其他信息进行解析,还可以得到更多的图层信息,例如,对于图像图层,还可以解析出图像的路径和图像的尺寸,对于文本图层,还可以解析出文本内容和文本字体,对于视图图层,还可以解析出视图颜色,当然,通过界面解析文件对组进行解析,还可以确定图层是否被加入了某个组。需要说明的是,对于有些比较难获取到的图层信息,即不能通过界面解析文件得到的图层信息,那么还可以通过人工的方式得到。
上述实施例,提供了一种获取图层信息的方法,由于界面设计软件,比如Photoshop和sketch,这两个软件有能够对文件组织结构进行描述的文件,即界面解析文件,根据这个界面解析文件,可以知晓不同的文件以怎样的存储格式存储在磁盘,存储的内容可以包括哪些,从而根据界面解析文件对界面设计文件进行解析,得到图层信息。
在一个实施例中,所述图层信息中包括图层命名;步骤200所述根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,包括:步骤201和步骤202。
步骤201,根据所述界面设计文件中的每个图层的图层命名,得到所述图层对应的目标组件。
图层信息中包括图层命名,图层命名可以采用默认命名,例如,命名为20200630063131,意味着该图层是在2020年6月30号早上6点31分31秒创建的,图层命名也可以采用人为命名,即人工命名。当某个图层是默认命名时,得到该图层对应的目标组件为空,即根据默认命名的图层无法推断出一个目标组件;当某个图层是人为命名的时候,根据图层命名,得到该图层对应的目标组件,例如,某个图层的图层命名为:button,于是,根据该图层的图层命名,可以直接确定一个按钮类别的目标组件,即该图层对应的目标组件为按钮类别的组件。由此可知,当界面设计文件中总共包括N个图层时,可以得到M个目标组件,其中,M小于或等于N。
步骤202,根据所述图层对应的目标组件,得到组件描述文件。
由于根据图层信息得到了目标组件,因此,根据图层的图层信息可以得到目标组件的描述信息,从而得到组件描述文件。例如,界面设计文件中有一个图层的图层命名为button,根据该图层可以识别得到一个按钮类别的目标组件,并且,该图层的图层信息中除了图层命名button外,还包括其他的图层信息,例如,该图层在界面设计文件中的位置,该图层的尺寸,该图层的颜色等,于是,根据该图层的图层信息(位置、尺寸、颜色等)可以得到该按钮类别的目标组件的描述信息,并将该描述信息在组件描述文件中进行记录,从而得到包含对该按钮类别的目标组件进行描述的组件描述文件。
上述实施例,由于图层命名多数情况下是根据组件能够实现的功能命名的,因此,当图层有图层命名的时候,可以根据图层命名,确定该图层对应的目标组件的类别,从而实现了目标组件的简单确定。
在一个实施例中,所述图层信息中包括组信息;步骤200所述根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,包括:步骤20A和步骤20B。
步骤20A,根据所述界面设计文件中的每个图层的组信息,得到至少一个目标组件。
组,为是Photo shop软件和sketch软件提供的一个功能,通过该功能,可以实现将具有一定关系的图层进行关联。组信息包括组名,组名,用于唯一标识一个组。当至少一个图层的组名相同时,确认该至少一个图层被加入了同一个组中,于是,根据该至少一个图层确定一个目标组件。
例如,现有2个图层,图层1被加入了组名为button的组中,图层2也被加入了组名为button的组中,于是,根据图层1和图层2可以得到一个按钮类别的目标组件。
再如,现有2个图层,图层1被加入了组名为“1”的组中,图层2也被加入了组名为“1”的组中,于是,可以确认组“1”中包括图层1和图层2,更进一步的,根据图层1的图层信息确定图层1为视图类别的图层,根据图层2的图层信息确定图层2为文本类别的图层,且图层2的文本为“登录”,于是,根据图层1和图层2可以得到一个登录类别的目标组件。
再如,现有4个图层,图层1到4均为文本类别的图层,图层1的文本为:水果,图层2的文本为:西瓜,图层3的文本为李子,图层4的文本为香蕉,4个图层均被加入了一个组名为List的组中,于是,根据这4个图层,可以得到一个列表类别的目标组件。
图层的类别有三种,图像类别、文本类别和视图类别,如果一个图层中包含的是文本信息,那么确定该图层的类别为文本类别;如果一个图层被标识为智能对象,和/或,该图层设置有路径,那么确定该图层的类别为图像类别;如果一个图层既不包含文本,也不是智能对象,也不包含路径,确定该图层的类别为视图类别。
步骤20B,根据所述至少一个目标组件得到组件描述文件。
上述实施例,当至少一个图层被加入同一个组时,可以根据该至少一个图层确定一个目标组件,从而实现了目标组件的简单确定。
在一个实施例中,步骤200所述根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,包括:步骤200A、步骤200B和步骤200C。
步骤200A,根据所述界面设计文件中的每个图层的图层信息确定图层之间的相对位置关系。
相对位置关系,指图层之间的位置关系,例如,相对位置关系包括上下关系,例如,图层2位于图层1的下方,于是,图层1和图层2之间的相对位置关系为上下关系。
在一个示例中,图层信息中包括图层编号,图层编号是根据图层层数确定的,其中,图层层数,反映了图层是在上方的图层还是在下方的图层,图层层数越大,则图层的位置越处于上方,图层层数越小,则图层的位置越处于上方,例如,图层1的图层层数为20,图层2的图层层数为19,则可以确定图层1处于图层2的上方,即图层1和图层2之间的相对位置关系为上下关系。
在一个示例中,根据界面设计文件中的每个图层的图层信息得到界面设计文件对应的图像;根据界面设计文件对应的图像,确定图层之间的相对位置关系。例如,首先将界面设计文件导出为图像,然后根据图像确定多个图层和每个图层所在的位置,例如,设置多个均匀分布的标记点,如图2所示,当某个图层的中心点距离某个标记点最近的时候,认为该图层所处的位置就是该标记点的位置,于是,当两个图层对应的标记点之间的距离很近的时候,认为这两个图层之间可能存在一定的相对位置关系,例如,某个图层A的面积比较大,并且,另外一个图层B的面积比较小,且两个图层A和B的标记点重合,并且,图层B在界面设计文件对应的图像中完全显示,图层A在界面设计文件对应的图像中只是部分显示,于是,推断图层B和图层A之间的相对位置关系为上下关系。
步骤200B,根据图层之间的相对位置关系得到至少一个目标组件。
例如3中的目标图3,图层1为图像类别或者视图类别的图层,图层2为文本类别的图层,图层2的大小小于图层1的大小,并且,图层2和图层1的相对位置关系为上下关系,于是,根据图层1和图层2可以推断一个按钮类别的目标组件,指示用户该按钮可以点击。再如图4中的目标图9,图层1为视图类别的图层,图层2为视图类别的图层,图层2的大小小于图层1的大小,图层2和图层1的相对位置关系为上下关系,图层2的形状为长条型,图层1的形状为长方形,且图层1的长方形的两端超出了图层2的长条型的,于是,根据图层1和图层2可以推断一个滑动解锁类别的目标组件。
步骤200C,根据所述至少一个目标组件得到组件描述文件。
上述实施例,由于在构建界面设计文件的时候,可能并不会把实现同一功能的多个图层放置在一个组中,此时,便无法再根据图层是否被加入同一个组确定目标组件,考虑有些类别的组件在位置上有所体现,比如,按钮类别的组件,通常下方会有一个视图类别的图层,视图类别的图层上方又覆盖有一个文本类别的图层,因此,当检测到这样两个类别的图层并且这样两个类别的图层又有一定的相对位置关系时,根据这两个组件可以得到一个目标组件。
在一个实施例中,步骤200所述根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,包括:步骤2001、步骤2002、步骤2003和步骤2004。
步骤2001,根据所述界面设计文件中的图层信息得到所述界面设计文件对应的图像。
直接通过Photo shop软件或者sketch软件,将界面设计文件导出为图像,从而得到界面设计文件对应的图像。
步骤2002,对所述图像进行图像分割,得到多个目标图,每个所述目标图中包括至少一个图层。
采用图像分割算法对界面设计文件对应的图像进行图像分割,得到多个目标图,目标图中包含有至少一个图层,目标图中包含的各个图层之间的距离很小,例如,小于一个预设距离,目标图中包含的各个图层之间可能有包含关系,例如图4中的目标图7,水果图层中包含了西瓜图层、桃子图层和榴莲图层等,有的目标图中可能只有一个图层,例如,图4中的目标图1和目标图2,均只包含一个图像类比的图层。
步骤2003,将所述多个目标图输入组件识别模型,得到至少一个目标组件。
组件识别模型,为用于识别目标组件的模型。
将多个目标图中的每一个目标图分别输入组件识别模型,得到多个目标图中的每一个目标图的识别结果,识别结果中包括目标组件或者识别失败,其中,识别失败,指示无法将目标图识别为一个目标组件,目标组件,指示将目标图识别为了一个目标组件,例如,组件识别模型对某个目标图的识别结果为开关组件,意味着通过组件识别模型将该目标图识别为了一个开关组件。
需要预先对组件识别模型进行训练。获取不同类别的组件的训练图像,例如,获取开关类别、滑动解锁类别、搜索类别、列表类别的组件的训练图像;将不同类别的组件的训练图像输入组件识别模型,对组件识别模型进行训练;训练过程中需要计算损失,损失可以根据训练图像对应的组件识别模型的输出和训练图像对应的标注输出来确定,当满足一定的条件时,结束训练,例如,损失小于预设损失时结束训练。
步骤2004,根据所述至少一个目标组件得到组件描述文件。
上述实施例,对于组件的识别,还可以通过训练组件识别模型来实现,在一定程度上解决了无法通过图层命名、组和相对位置关系确定目标组件的问题。
在一个实施例中,布局文件生成方法,还包括:
步骤300,根据所述目标平台的界面布局文件进行渲染,得到所述目标平台的界面。
由于界面是用于显示各种组件的,因此,在得到目标平台的界面布局文件之后,根据界面布局文件进行渲染,即可得到目标平台的界面了。
上述实施例,说明了在得到目标平台的界面布局文件之后,直接通过渲染操作即可得到相应的界面。
在一个实施例中,在得到所述目标平台的界面之后,还包括:
将所述目标平台的界面在所述目标平台进行显示。
上述实施例,由于已经渲染生成了目标平台的界面,此时,便可以直接将渲染得到的目标平台的界面在目标平台进行显示,通过显示,开发人员可以看到生成的界面的情况,从而确定该生成的界面是否是自己想要的界面,或者,生成的界面是否和界面布局文件中需要生成的界面一致。
在一个实施例中,布局文件生成方法,还包括:
步骤400,在检测到调整事件时,从多个目标组件中确定所述调整事件对应的目标调整组件和所述目标调整组件对应的更新组件。
开发人员在发现目标组件不是自己想要的组件时,可以对目标组件进行更改,例如,将按钮类别的目标组件更改为开关类别的目标组件。
调整事件,为对某个目标组件进行调整的事件,例如,调整事件为点击某个目标组件并从多个候选类别中选择一个候选类别,从而根据选择出的候选类别得到更新组件的事件;目标调整组件,为界面显示的多个目标组件中被调整的目标组件;更新组件,为对目标调整组件调整后得到的组件。例如,若检测到开发人员点击了某个目标组件,则确定目标调整组件为该被点击的目标组件,弹出多个候选类别,如图5所示,候选类别有按钮类别、开关类别、图像类别、文本类别和列表类别,开发人员可以从弹出的多个候选类别中选择一个作为目标调整组件最终的类别,从而得到更新组件。
步骤500,根据所述更新组件更新所述组件描述文件。
由于目标调整组件已经被调整,因此,还需要对组件描述文件进行相应的调整,于是,根据更新组件对组件描述文件进行更新。
步骤600,使用更新后的组件描述文件生成所述目标平台的更新布局文件。
更新布局文件,为更新后的界面布局文件。在组件描述文件更新后,使用更新后的组件描述文件对目标平台的界面布局文件进行更新,得到更新布局文件,以便根据更新布局文件进行渲染得到更新的界面,其中,更新界面,为目标调整组件被调整后得到的界面,将得到的更新界面进行显示,以便开发人员再次确认。
上述实施例,如果生成的界面和开发人员想要的界面不一致,或者,生成的界面和界面设计文件中需要的界面不一致,此时,开发人员还可以对生成的界面进行修改。
在一个实施例中,如图6所示,提供了一种布局文件生成装置600,包括:
获取模块601,用于获取界面设计文件;
描述模块602,用于根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,所述目标组件为显示于目标平台的界面上的组件,所述组件描述文件为对所述目标组件进行描述的文件;
布局模块603,用于根据所述组件描述文件得到所述目标平台的界面布局文件。
在一个实施例中,所述图层信息中包括图层命名;
所述描述模块602,具体用于:
根据所述界面设计文件中的每个图层的图层命名,得到所述图层对应的目标组件;
根据所述图层对应的目标组件,得到组件描述文件。
在一个实施例中,所述图层信息中包括组信息;
所述描述模块602,具体用于:
根据所述界面设计文件中的每个图层的组信息,得到至少一个目标组件;
根据所述至少一个目标组件得到组件描述文件。
在一个实施例中,所述描述模块603,具体用于:
根据所述界面设计文件中的每个图层的图层信息确定图层之间的相对位置关系;
根据图层之间的相对位置关系得到至少一个目标组件;
根据所述至少一个目标组件得到组件描述文件。
在一个实施例中,所述描述模块604,具体用于:
根据所述界面设计文件中的图层信息得到所述界面设计文件对应的图像;
对所述图像进行图像分割,得到多个目标图,每个所述目标图中包括至少一个图层;
将所述多个目标图输入组件识别模型,得到至少一个目标组件;
根据所述至少一个目标组件得到组件描述文件。
在一个实施例中,布局文件生成装置600,还包括:渲染模块,用于:
根据所述目标平台的界面布局文件进行渲染,得到所述目标平台的界面。
在一个实施例中,布局文件生成装置600,还包括:更新模块,用于:
在检测到调整事件时,从多个目标组件中确定所述调整事件对应的目标调整组件和所述目标调整组件对应的更新组件;
根据所述更新组件更新所述组件描述文件;
使用更新后的组件描述文件生成所述目标平台的更新布局文件。
在一个实施例中,如图7所示,提供了一种计算机设备,该计算机设备具体可以是终端或服务器。该计算机设备包括通过系统总线连接的处理器、存储器和网络接口,存储器包括非易失性存储介质和内存储器,该计算机设备的非易失性存储介质存储有操作系统,还可存储有计算机程序,该计算机程序被处理器执行时,可使得处理器实现布局文件生成方法。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限,RAM以多种形式可得,诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。该内存储器中也可储存有计算机程序,该计算机程序被处理器执行时,可使得处理器执行布局文件生成方法。本领域技术人员可以理解,图7中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的计算机设备的限定,具体的计算机设备可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
本申请提供的布局文件生成方法可以实现为一种计算机程序的形式,计算机程序可在如图7所示的计算机设备上运行。计算机设备的存储器中可存储组成布局文件生成装置的各个程序模板。比如,获取模块601、描述模块602和布局模块603。
一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行如下步骤:
获取界面设计文件;
根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,所述目标组件为显示于目标平台的界面上的组件,所述组件描述文件为对所述目标组件进行描述的文件;
根据所述组件描述文件得到所述目标平台的界面布局文件。
在一个实施例中,提供了一种计算机可读存储介质,存储有计算机程序,所述计算机程序被处理器执行时,使得所述处理器执行以下步骤:
获取界面设计文件;
根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,所述目标组件为显示于目标平台的界面上的组件,所述组件描述文件为对所述目标组件进行描述的文件;
根据所述组件描述文件得到所述目标平台的界面布局文件。
需要说明的是,上述布局文件生成方法、布局文件生成装置、计算机设备及计算机可读存储介质属于一个总的发明构思,布局文件生成方法、布局文件生成装置、计算机设备及计算机可读存储介质实施例中的内容可相互适用。
在本申请所提供的实施例中,应该理解到,所揭露装置和方法,可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,又例如,多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
另外,作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
再者,在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分,也可以是各个模块单独存在,也可以两个或两个以上模块集成形成一个独立的部分。
在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。
以上所述仅为本申请的实施例而已,并不用于限制本申请的保护范围,对于本领域的技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本申请的保护范围之内。
Claims (10)
1.一种布局文件生成方法,其特征在于,包括:
获取界面设计文件;
根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,所述目标组件为显示于目标平台的界面上的组件,所述组件描述文件为对所述目标组件进行描述的文件;
根据所述组件描述文件得到所述目标平台的界面布局文件。
2.如权利要求1所述的布局文件生成方法,其特征在于,所述图层信息中包括图层命名;
所述根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,包括:
根据所述界面设计文件中的每个图层的图层命名,得到所述图层对应的目标组件;
根据所述图层对应的目标组件,得到组件描述文件。
3.如权利要求1所述的布局文件生成方法,其特征在于,所述图层信息中包括组信息;
所述根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,包括:
根据所述界面设计文件中的每个图层的组信息,得到至少一个目标组件;
根据所述至少一个目标组件得到组件描述文件。
4.如权利要求1所述的布局文件生成方法,其特征在于,所述根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,包括:
根据所述界面设计文件中的每个图层的图层信息确定图层之间的相对位置关系;
根据图层之间的相对位置关系得到至少一个目标组件;
根据所述至少一个目标组件得到组件描述文件。
5.如权利要求1所述的布局文件生成方法,其特征在于,所述根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,包括:
根据所述界面设计文件中的图层信息得到所述界面设计文件对应的图像;
对所述图像进行图像分割,得到多个目标图,每个所述目标图中包括至少一个图层;
将所述多个目标图输入组件识别模型,得到至少一个目标组件;
根据所述至少一个目标组件得到组件描述文件。
6.如权利要求1至5任一项所述的布局文件生成方法,其特征在于,还包括:
根据所述目标平台的界面布局文件进行渲染,得到所述目标平台的界面。
7.如权利要求6所述的布局文件生成方法,其特征在于,还包括:
在检测到调整事件时,从多个目标组件中确定所述调整事件对应的目标调整组件和所述目标调整组件对应的更新组件;
根据所述更新组件更新所述组件描述文件;
使用更新后的组件描述文件生成所述目标平台的更新布局文件。
8.一种布局文件生成装置,其特征在于,包括:
获取模块,用于获取界面设计文件;
描述模块,用于根据所述界面设计文件中的图层信息进行组件识别,得到目标组件对应的组件描述文件,所述目标组件为显示于目标平台的界面上的组件,所述组件描述文件为对所述目标组件进行描述的文件;
布局模块,用于根据所述组件描述文件得到所述目标平台的界面布局文件。
9.一种计算机设备,其特征在于,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述布局文件生成方法的步骤。
10.一种计算机可读存储介质,其特征在于,所述计算机可读取存储介质中存储有计算机程序指令,所述计算机程序指令被处理器读取并运行时,执行权利要求1至7任一项所述布局文件生成方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111137629.7A CN113835704B (zh) | 2021-09-27 | 一种布局文件生成方法、装置、设备以及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111137629.7A CN113835704B (zh) | 2021-09-27 | 一种布局文件生成方法、装置、设备以及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN113835704A true CN113835704A (zh) | 2021-12-24 |
CN113835704B CN113835704B (zh) | 2024-05-10 |
Family
ID=
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2023169316A1 (zh) * | 2022-03-10 | 2023-09-14 | 北京字跳网络技术有限公司 | 一种基于用户界面框架的处理方法、装置、设备及介质 |
Citations (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101071374A (zh) * | 2007-03-30 | 2007-11-14 | 腾讯科技(深圳)有限公司 | 一种视窗系统及其界面编辑方法 |
WO2017186009A1 (zh) * | 2016-04-26 | 2017-11-02 | 斑马网络技术有限公司 | 服务显示方法、装置、设备和系统 |
WO2018049816A1 (zh) * | 2016-09-14 | 2018-03-22 | 中兴通讯股份有限公司 | 一种组件处理方法、装置及存储介质 |
CN109117228A (zh) * | 2018-08-01 | 2019-01-01 | 浙江口碑网络技术有限公司 | 图形界面的生成方法及装置 |
CN109582429A (zh) * | 2018-12-07 | 2019-04-05 | 上海航天电子通讯设备研究所 | 一种基于qt平台的圆形p显空情显示方法及装置 |
CN110134393A (zh) * | 2019-05-16 | 2019-08-16 | 北京三快在线科技有限公司 | 一种处理操作信号的方法和装置 |
CN110990010A (zh) * | 2019-12-03 | 2020-04-10 | 锐捷网络股份有限公司 | 一种软件界面代码的生成方法及装置 |
CN111190519A (zh) * | 2020-01-02 | 2020-05-22 | 广州虎牙科技有限公司 | 一种文件及其控件的处理方法、装置、设备和存储介质 |
CN111414165A (zh) * | 2019-01-06 | 2020-07-14 | 阿里巴巴集团控股有限公司 | 界面代码的生成方法及设备 |
CN111475163A (zh) * | 2020-06-22 | 2020-07-31 | 腾讯科技(深圳)有限公司 | 视图模板的代码文件生成方法、装置、设备及存储介质 |
CN111857704A (zh) * | 2020-07-31 | 2020-10-30 | 北京爱奇艺科技有限公司 | 一种布局关系的代码生成方法及装置 |
CN111880776A (zh) * | 2020-07-31 | 2020-11-03 | 北京爱奇艺科技有限公司 | 一种层级关系获得方法、装置及电子设备 |
CN113094144A (zh) * | 2021-04-29 | 2021-07-09 | 西安诺瓦星云科技股份有限公司 | 显示屏界面控制方法及电子设备 |
Patent Citations (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101071374A (zh) * | 2007-03-30 | 2007-11-14 | 腾讯科技(深圳)有限公司 | 一种视窗系统及其界面编辑方法 |
WO2017186009A1 (zh) * | 2016-04-26 | 2017-11-02 | 斑马网络技术有限公司 | 服务显示方法、装置、设备和系统 |
WO2018049816A1 (zh) * | 2016-09-14 | 2018-03-22 | 中兴通讯股份有限公司 | 一种组件处理方法、装置及存储介质 |
CN109117228A (zh) * | 2018-08-01 | 2019-01-01 | 浙江口碑网络技术有限公司 | 图形界面的生成方法及装置 |
CN109582429A (zh) * | 2018-12-07 | 2019-04-05 | 上海航天电子通讯设备研究所 | 一种基于qt平台的圆形p显空情显示方法及装置 |
CN111414165A (zh) * | 2019-01-06 | 2020-07-14 | 阿里巴巴集团控股有限公司 | 界面代码的生成方法及设备 |
CN110134393A (zh) * | 2019-05-16 | 2019-08-16 | 北京三快在线科技有限公司 | 一种处理操作信号的方法和装置 |
CN110990010A (zh) * | 2019-12-03 | 2020-04-10 | 锐捷网络股份有限公司 | 一种软件界面代码的生成方法及装置 |
CN111190519A (zh) * | 2020-01-02 | 2020-05-22 | 广州虎牙科技有限公司 | 一种文件及其控件的处理方法、装置、设备和存储介质 |
CN111475163A (zh) * | 2020-06-22 | 2020-07-31 | 腾讯科技(深圳)有限公司 | 视图模板的代码文件生成方法、装置、设备及存储介质 |
CN111857704A (zh) * | 2020-07-31 | 2020-10-30 | 北京爱奇艺科技有限公司 | 一种布局关系的代码生成方法及装置 |
CN111880776A (zh) * | 2020-07-31 | 2020-11-03 | 北京爱奇艺科技有限公司 | 一种层级关系获得方法、装置及电子设备 |
CN113094144A (zh) * | 2021-04-29 | 2021-07-09 | 西安诺瓦星云科技股份有限公司 | 显示屏界面控制方法及电子设备 |
Non-Patent Citations (2)
Title |
---|
谢建华;: "利用VB实现MO地图图层控制", 电脑编程技巧与维护, no. 05, 3 March 2009 (2009-03-03), pages 69 - 71 * |
黄民艳;: "PHOTOSHOP图层剖析", 海峡科学, no. 09, 15 September 2008 (2008-09-15), pages 72 - 73 * |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2023169316A1 (zh) * | 2022-03-10 | 2023-09-14 | 北京字跳网络技术有限公司 | 一种基于用户界面框架的处理方法、装置、设备及介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN111475163B (zh) | 视图模板的代码文件生成方法、装置、设备及存储介质 | |
CN109033058B (zh) | 合同文本验证方法、装置、计算机设备和存储介质 | |
US20210295114A1 (en) | Method and apparatus for extracting structured data from image, and device | |
CN108399072B (zh) | 应用页面更新方法和装置 | |
CN111767228B (zh) | 基于人工智能的界面测试方法、装置、设备和介质 | |
CN109815471A (zh) | 合同文本生成方法、装置、计算机设备和存储介质 | |
CN111414165B (zh) | 界面代码的生成方法及设备 | |
KR102248823B1 (ko) | 데이터 시각화 서비스 시스템, 방법 및 어플리케이션 | |
CN110166522A (zh) | 服务器识别方法、装置、可读存储介质和计算机设备 | |
CN108509401B (zh) | 合同生成方法、装置、计算机设备和存储介质 | |
CN111752565A (zh) | 一种界面生成方法、装置、计算机设备及可读存储介质 | |
CN111552903A (zh) | 基于html模板的页面生成方法、装置和计算机设备 | |
CN114661286A (zh) | 一种大屏可视化代码生成方法、系统及存储介质 | |
CN113360737A (zh) | 页面内容采集方法、装置、电子设备和可读介质 | |
CN116610304B (zh) | 页面代码生成方法、装置、设备和存储介质 | |
CN113835704B (zh) | 一种布局文件生成方法、装置、设备以及存储介质 | |
CN113835704A (zh) | 一种布局文件生成方法、装置、设备以及存储介质 | |
CN112733509B (zh) | 精算报告生成方法、装置、设备及介质 | |
CN113936187A (zh) | 文本图像合成方法、装置、存储介质及电子设备 | |
CN111352917A (zh) | 信息录入方法、装置、电子设备及存储介质 | |
CN115617324B (zh) | 一种客户端网页的生成方法 | |
CN115099212B (zh) | 基于模板设计的归类方法、装置、介质及计算机设备 | |
CN115116060B (zh) | 键值文件处理方法、装置、设备、介质 | |
CN112631565A (zh) | 业务融合方法、装置、计算机设备和存储介质 | |
CN109670154B (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 |