一种页面生成方法、装置及设备与流程
未命名
10-25
阅读:67
评论:0
1.本技术涉及虚拟画布技术领域,尤其涉及一种页面生成方法、装置及设备。
背景技术:
2.随着计算机技术的不断发展,人们开始在计算机显示器上呈现的具有栅格布局的虚拟画布处,去部署各种类型的用于构建用户界面(userinterface,英文缩写ui)的控件,通过在虚拟画布上不断调整各个控件的展示位置,以生成满足实际软件服务或场景需求的页面。目前,虚拟画布处可以设置有容器控件,并且容器控件内部可以支持其他控件的嵌套及自由布局,而容器控件外侧的其他控件的布局不会影响容器控件内部布局,以此可以搭建布局较为复杂的页面。不过,这往往需要用户自行掌握及管理较为复杂的容器嵌套关系,操作难度较大。
3.基于此,如何提升生成部署有多个控件的页面时的操作便捷性及灵活性,成为了亟待解决的技术问题。
技术实现要素:
4.本说明书实施例提供的一种页面生成方法、装置及设备,可以提升生成部署有多个控件的页面时的操作便捷性及灵活性。
5.为解决上述技术问题,本说明书实施例是这样实现的:
6.本说明书实施例提供的一种页面生成方法,包括:
7.获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作;
8.响应于所述第一操作,在所述虚拟画布处的所述指定区域内展示所述目标控件;
9.根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息;
10.获取用户设置所述目标控件所需展示的目标内容的第二操作;
11.响应于所述第二操作,根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息,生成目标页面。
12.本说明书实施例提供的一种页面生成装置,包括:
13.第一获取模块,用于获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作;
14.控件展示模块,用于响应于所述第一操作,在所述虚拟画布处的所述指定区域内展示所述目标控件;
15.容器嵌套关系确定模块,用于根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息;
16.第二获取模块,用于获取用户设置所述目标控件所需展示的目标内容的第二操作;
17.页面生成模块,用于响应于所述第二操作,根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息,生成目标页面。
18.本说明书实施例提供的一种页面生成设备,包括:
19.至少一个处理器;以及,
20.与所述至少一个处理器通信连接的存储器;其中,
21.所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够:
22.获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作;
23.响应于所述第一操作,在所述虚拟画布处的所述指定区域内展示所述目标控件;
24.根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息;
25.获取用户设置所述目标控件所需展示的目标内容的第二操作;
26.响应于所述第二操作,根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息,生成目标页面。
27.本说明书中提供的至少一个实施例能够实现以下有益效果:
28.通过在用户执行了用于在虚拟画布处的指定区域内设置目标控件的第一操作后,在虚拟画布处的指定区域内展示出该目标控件,并根据虚拟画布内包含的各个目标控件的展示位置信息,自动确定出各个目标控件所属的虚拟容器之间的嵌套关系信息,从而无需用户自行掌握及管理较为复杂的容器嵌套关系,有利于提升用户操作便捷性,降低用户操作难度,以提升用户体验。
29.以及,由于在用户添加目标控件后,可以在虚拟画布处的指定区域内展示出该目标控件;还有,在用户设置目标控件所需展示的目标内容后,可以自动根据各个目标控件的展示位置信息,各个目标控件所需展示的目标内容,以及各个目标控件所属的虚拟容器之间的嵌套关系信息,生成展示有各个携带了目标内容的目标控件的目标页面;也有利于提升目标页面生成过程的可视性及直观性。
附图说明
30.为了更清楚地说明本说明书实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本技术中记载的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
31.图1为本说明书实施例提供的一种页面生成方法的应用场景示意图;
32.图2为本说明书实施例提供的一种页面生成方法的流程示意图;
33.图3为本说明书实施例提供的一种控件之间的容器间隔线的示意图;
34.图4为本说明书实施例提供的一种目标页面的示意图;
35.图5为本说明书实施例提供的另一种目标页面的示意图;
36.图6为本说明书实施例提供的又一种目标页面的示意图;
37.图7为本说明书实施例提供的再一种目标页面的示意图;
38.图8为本说明书实施例提供的对应于图2中的页面生成方法的泳道流程示意图;
39.图9为本说明书实施例提供的对应于图2的一种页面生成装置的结构示意图;
40.图10为本说明书实施例提供的对应于图2的一种页面生成设备的结构示意图。
具体实施方式
41.为使本说明书一个或多个实施例的目的、技术方案和优点更加清楚,下面将结合本说明书具体实施例及相应的附图对本说明书一个或多个实施例的技术方案进行清楚、完整地描述。显然,所描述的实施例仅是本说明书的一部分实施例,而不是全部的实施例。基于本说明书中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本说明书一个或多个实施例保护的范围。
42.以下结合附图,详细说明本说明书各实施例提供的技术方案。
43.现有技术中,部分用户可能需要搭建出控件布局较为复杂的页面,这种情况下,通常需要这些用户预先掌握一些与容器控件相关的技术概念,然后去通过在虚拟画布处部署多个具有嵌套关系的容器控件,并在各个容器控件内部署其他种类的ui控件,以搭建布局复杂的页面。这种页面生成方式中,不仅需要用户自行掌握及管理较为复杂的容器嵌套关系,使得用户操作便捷性较差,用户操作难度较高。并且,当用户需要调整某个控件的展示位置时,往往还需要手动去调整相关的容器嵌套关系,灵活性也较差。
44.为了解决现有技术中的缺陷,本方案给出了以下实施例:
45.图1为本说明书实施例提供的一种页面生成方法的应用场景示意图。
46.如图1所示,用户101可以在用户设备102处执行用于在具有栅格布局的虚拟画布103处的指定区域内设置目标控件104的第一操作;用户设备102响应于所述第一操作,可以在虚拟画布103处的指定区域内展示目标控件104,以及,根据虚拟画布103内包含的各个目标控件的展示位置信息,确定各个目标控件所属的虚拟容器之间的嵌套关系信息。
47.后续,用户设备102在获取到用户设置目标控件所需展示的目标内容的第二操作后,就能够响应于第二操作,根据各个目标控件的展示位置信息,各个目标控件所需展示的目标内容,以及各个目标控件所属的虚拟容器之间的嵌套关系信息,生成展示有各个携带了目标内容的目标控件的目标页面了。
48.由于无需用户自行掌握及管理较为复杂的容器嵌套关系,有利于提升用户操作便捷性及灵活性,降低用户操作难度,并且,由于在页面生成过程中,能够根据用户的各个操作,展示出当前各个目标控件具有的状态及展示位置,也有利于提升页面生成过程的可视性及直观性。
49.接下来,将针对说明书实施例提供的一种页面生成方法结合附图进行具体说明:
50.图2为本说明书实施例提供的一种页面生成方法的流程示意图。从程序角度而言,该流程的执行主体可以为用户设备,或者,用户设备处搭载的应用程序。如图2所示,该流程可以包括以下步骤:
51.步骤202:获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作。
52.本说明书实施例中,栅格布局(gridsystems)可以是基于行(row)和列(col)来定
义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来。而具有栅格布局的虚拟画布中可以包含有第一预设数量的行(row)和第二预设数量的列(col),其中,每个行的预设高度通常均为虚拟画布的初始高度与第一预设数量之商,而每个列的预设宽度通常均为虚拟画布的初始宽度与第二预设数量之商,其中,第一预设数量与第二预设数量可以根据实际情况设置,两者既可以相同,也可以不同,对此不作具体限定。通过令虚拟画布具有格栅布局,有利于提升控件布局过程的直观性及操作便捷性。
53.本说明书实施例中,由于用户利用虚拟画布搭建的目标页面通常为用户界面(user interface,ui),因此,用户在虚拟画布处设置的目标控件通常为用于构建用户界面的ui控件。在实际应用中,目标控件的种类可以有多种,比如:按钮、静态文本框、弹出式菜单、空白控件等,对此不作具体限定。
54.本说明书实施例中,用户在虚拟页面中添加目标控件时,通常需要指出目标控件的初始展示位置(即指定区域),从而实现针对各个目标控件的初始布局。具体的,用户执行的第一操作具体可以指示:目标控件的种类、所需位于的指定区域等,除此之外,还可以指示目标控件的初始展示尺寸、线条颜色、线条粗细、字体样式、针对控件展示尺寸进行调整时所需使用的控件调整策略等,对此不作具体限定。
55.步骤204:响应于所述第一操作,在所述虚拟画布处的所述指定区域内展示所述目标控件。
56.本说明书实施例中,为便于用户及时掌握最新添加的目标控件的展示位置,以及虚拟画布处的现有全部控件的布局情况,可以在用户部署了任一目标控件后,就在虚拟画布处的用户指示的指定区域内展示出最新添加的目标控件,以及协同展示已部署的其他控件。即步骤204中的虚拟画布处可以展示出已部署至该虚拟画布处的全部的目标控件。有利于提升页面生成过程的可视性,进而提升用户体验。在实际应用中,由于在执行步骤204时,各个目标控件通常还未设置所需展示的具体的目标内容,因此,可以在虚拟画布处按照目标控件的初始展示尺寸对目标控件进行展示。后续,在步骤210处还可以根据目标控件所需展示的具体的目标内容,对目标控件的展示尺寸进行自动调整,以满足用户实际需求。
57.步骤206:根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息。
58.本说明书实施例中,为便于后续管理及调整各个目标控件的展示位置及展示尺寸,可以根据虚拟画布内包含的各个目标控件的展示位置信息,对各个目标控件所属的各级虚拟容器(container)进行划分。其中,等级低的虚拟容器可以嵌套于等级高的虚拟容器内,从而当任一目标控件的展示位置或展示尺寸发生变化后,可以按照容器等级由低至高的顺序,对该目标控件所需的各级虚拟容器内的其他控件的展示位置及展示尺寸中的至少一种自动进行调整,以达到对于整体布局扰动较小的效果。且能够通过控件布局自动调整去提升页面生成过程的操作便捷性及灵活性。
59.可知,本说明书实施例中,用户在虚拟画布处部署目标控件时,无需提前在虚拟画布处创建各级虚拟容器,然后,再去已创建的虚拟容器内部添加目标控件;而是能够在用户将目标控件部署于虚拟画布以后,去令图2中方法的执行主体自动完成目标控件所属的各级虚拟容器的创建,从而使得用户无需自行掌握及管理较为复杂的容器嵌套关系,有利于提升用户操作便捷性,降低用户操作难度,以提升用户体验。
60.在实际应用中,在用户不断添加目标控件的过程中,既可以实时确定虚拟画布处已有的各个目标控件所属的虚拟容器之间的嵌套关系信息,或者,也可以在用户指示针对虚拟画布处的控件已经添加完毕后,再确定虚拟画布处已有的各个目标控件所属的虚拟容器之间的嵌套关系信息,对此不作具体限定。
61.步骤208:获取用户设置所述目标控件所需展示的目标内容的第二操作。
62.本说明书实施例中,由于不同软件或场景处所需使用的同种类型的控件上往往需要标注不同的内容,以便于使用者了解控件的功能。例如,支付应用处的按钮控件上可能会标注“确认交易”、“立即支付”等内容,而博客应用处的按钮控件上则可能会标注“写博客”、“发布博客”等内容。或者,支付应用处的弹出式菜单上可能会标注“扣款顺序”、“支付密码”、“自动扣款”等内容,而博客应用处的弹出式菜单上则可能会标注“博客浏览记录”、“收藏博客”、“创造灵感”等内容。对此均不作具体限定。
63.基于此,用户还需要执行第二操作以指示所需展示于目标控件处的目标内容。其中,所述目标内容通常与目标控件的功能有关,其可以根据实际设置,在此不作具体限定。除此之外,在实际应用中,执行第二操作的用户与执行第一操作的用户既可以是同一用户,或者,也可以为不同用户,对此不作具体限定。
64.步骤210:响应于所述第二操作,根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息,生成目标页面。
65.本说明书实施例中,根据用户的第二操作,可以在目标控件处展示用户设置的目标内容,从而得到包含有各个携带了相应目标内容的目标控件的目标页面。此时,该目标页面可以作为需要部署于应用程序中的应用页面的预览页面。
66.具体的,由于步骤204中通常会按照目标控件的初始展示尺寸去展示目标控件,若用户设置的目标内容的实际展示尺寸超过了目标控件的初始展示尺寸,则可能需要对目标控件的展示尺寸进行调整,以满足实际需求。由于任一目标控件的展示尺寸发生变化,往往会影响到与该目标控件属于同一虚拟容器内的其他控件的展示尺寸或展示位置,从而需要根据各个目标控件的展示位置信息,各个目标控件所需展示的目标内容,以及各个目标控件所属的虚拟容器之间的嵌套关系信息,去自动确定出各个目标控件的实际展示尺寸(即目标展示尺寸)及实际展示位置(即目标展示位置),并按照各个目标控件的实际展示尺寸及实际展示位置去生成目标页面,以自动实现针对控件布局的适应性调整,方便快捷。
67.在实际应用中,在执行步骤208之前,通常应该根据虚拟画布处的各个目标控件的最终布局,确定出被固定下来的各个目标控件所属的虚拟容器之间的嵌套关系信息,以供步骤210使用。并且步骤210执行过程中通常仅会使用被固定下来的所述嵌套关系信息,去生成目标页面,而不会对各个目标控件所属的虚拟容器进行重新划分,从而有利于减少控件调整过程对于控件布局的扰动。
68.图2中的方法,由于在页面生成过程中,可以根据虚拟画布内包含的各个目标控件的展示位置信息,自动确定各个目标控件所属的虚拟容器之间的嵌套关系信息,无需用户自行掌握及管理较为复杂的容器嵌套关系,有利于提升用户操作便捷性及灵活性,降低用户操作难度。并且,由于在页面生成过程中,能够根据用户的各个操作,展示出当前各个目标控件具有的状态及展示位置,也有利于提升页面生成过程的可视性及直观性。
69.基于图2中的方法,本说明书实施例还提供了该方法的一些具体实施方案,下面进行说明。
70.为便于理解,在此给出了多种令用户在虚拟画布内部署目标控件的实现方式。
71.具体的,步骤202:获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作,可以包括:
72.获取用户针对所述虚拟画布以外的预设区域内展示的目标控件的拖动操作;所述拖动操作用于将所述目标控件拖动至所述虚拟画布内的指定区域处;或者,
73.获取用户针对用于在所述虚拟画布内添加控件的预设控件的触发操作;所述触发操作用于指示在所述虚拟画布处的指定区域内添加目标控件;或者,
74.获取用户针对所述虚拟画布内的指定区域的选中操作;
75.获取用户针对所述选中操作所选中的所述指定区域执行的控件添加操作。
76.本说明书实施例中,虚拟画布外侧的预设区域内可以展示有各自类型的初始控件,用户可以自行从预设区域内选中一个初始控件,作为当前所需部署的目标控件,并通过执行拖动操作,将选中的初始控件(即目标控件)拖动至虚拟画布内的指定区域处,通过执行释放选中的初始控件(即目标控件)的操作,以将该初始控件(即目标控件)添加到虚拟画布处的指定区域内。其中,所述初始控件可以为未被设置所需展示的目标内容的控件,所述初始控件通常具有初始展示尺寸。所述指定区域可以为虚拟画布内被初始控件覆盖的区域。或者,若虚拟画布内被初始控件覆盖的区域内已具有控件时,也可以适应性从初始控件所在区域的周边区域寻找出当前不存在控件的区域作为所述指定区域,对此不作具体限定。
77.本说明书实施例中,用于展示虚拟画布的应用程序处,还可以设置有用于在该虚拟画布内添加控件的预设控件,例如,预设控件可以包括:用于选择控件种类的第一预设控件,用于选择初始展示尺寸的第二预设控件,用于设置展示位置的第三预设控件等,对此不作具体限定。使得用户可以通过操控预设控件,以执行在该虚拟画布处的指定区域内添加目标控件的操作。
78.本说明书实施例中,还可以允许用户去选中虚拟画布处的任意区域作为本次添加的目标控件的展示区域(即指定区域),并且,在用户选中该指定区域后,还可以展示出用于添加控件的预设控件,使得用户可以通过触发该预设控件以执行针对该指定区域的控件添加操作,从而在该指定区域内添加目标控件。
79.本说明书实施例中,由于在用户执行步骤202后,需要在虚拟画布处按照目标控件的初始展示尺寸去展示出该目标控件,因此,还给出了令用户去设置目标控件的初始展示尺寸的实现方式。
80.具体的,步骤204:在所虚拟画布处的指定区域内展示目标控件之前,还可以包括:
81.获取用户针对所述目标控件执行的展示尺寸设置操作;所述展示尺寸设置操作用于设置所述目标控件的初始展示尺寸。
82.对应的,步骤204:在虚拟画布处的所指定区域内展示目标控件,具体可以包括:
83.在所述虚拟画布处的所述指定区域内,展示具有所述初始展示尺寸的所述目标控件。
84.本说明书实施例中,用户在设置目标控件的初始展示尺寸时的实现方式也可以有
多种。具体的,所述获取用户针对所述目标控件执行的展示尺寸设置操作,可以包括:
85.获取用户针对所述目标控件执行的初始展示宽度设置操作与初始展示高度设置操作中的至少一种;其中,所述初始展示宽度设置操作用于指示所述目标控件所在区域包含的所述虚拟画布处的列的数量,或者,指示所述目标控件所在区域包含的所述虚拟画布处的列的数量占比,或者,指示所述目标控件的初始展示宽度为第一预设值;所述初始展示高度设置操作用于指示所述目标控件所在区域包含的所述虚拟画布处的行的数量,或者,指示所述目标控件所在区域包含的所述虚拟画布处的行的数量占比,或者,指示所述目标控件的初始展示高度为第二预设值。
86.为便于理解,对此进行举例说明。假定,虚拟画布的初始高度及初始宽度可以分别为40及100,且虚拟画布中可以包含有10行(row)和20列(col),其中,每个行的预设高度可以为4,而每个列的预设宽度可以为5。若用户需要将目标控件的初始展示高度及初始展示宽度设置为16与50,则初始展示宽度设置操作可以用于指示目标控件所在区域包含的虚拟画布处的列的数量为10或者数量占比为50%,或者,也可以直接指示目标控件的初始展示宽度为50。同理,初始展示高度设置操作可以用于指示目标控件所在区域包含的虚拟画布处的行的数量为4或者数量占比为40%,或者,也可以直接指示目标控件的初始展示高度为16。在实际应用中,虚拟画布的初始尺寸,包含的行和列的数量及预设尺寸,还有目标控件的初始展示尺寸等,均可以根据实际需求设置,对此不作具体限定。
87.本说明书实施例中,由于用户在虚拟控件处添加了目标控件后,还可能存在对目标控件的展示尺寸或展示位置进行调整的需求,因此,图2中方法还可以包括:获取针对虚拟画布处已添加/已展示出的目标控件的初始展示尺寸的调整操作,得到目标控件的调整后的初始展示尺寸。对应的,步骤204具体可以为:在虚拟画布处的指定区域内,展示具有该调整后的初始展示尺寸的目标控件。
88.或者,图2中方法还可以包括:获取针对虚拟画布处已添加/已展示出的目标控件的展示区域的调整操作,得到目标控件的调整后的展示区域。对应的,步骤204具体可以为:在虚拟画布处的该调整后的展示区域内展示目标控件。
89.可知,用户在虚拟画布处添加目标控件后,还能够对目标控件的展示尺寸及展示位置进行便捷地调整,并且通过在虚拟画布处直接展示出各个目标控件的调整后的展示效果,有利于提升页面生成过程的直观性,保障用户体验。
90.为便于理解,本说明书实施例中还给出了自动划分虚拟画布处的各个目标控件所属的各级虚拟容器的实现方式。
91.具体的,步骤206:根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息,可以包括:
92.根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,生成各条容器间隔线;其中,所述容器间隔线为将各个所述目标控件的顶边及底边向两侧延伸,直至触及所述虚拟画布的侧边或者其他控件的侧边所构成的线段。
93.根据所述容器间隔线,对各个所述目标控件所属的虚拟容器进行划分,得到各个所述目标控件所属的虚拟容器之间的嵌套关系信息;其中,所述嵌套关系信息用于反映所述目标控件所属的各个等级的虚拟容器,以及不同等级的所述虚拟容器之间的嵌套关系。
94.本说明书实施例中,当控件布局较为复杂时,目标控件可以位于多个等级不同的
虚拟容器内,若低等级的虚拟容器为嵌套于等级更高的虚拟容器内的子容器,则低等级的虚拟容器可以展示于等级更高的虚拟容器的所在区域内部。
95.本说明书实施例中,由于各个目标控件之间的相对位置,会影响到各个目标控件所属的各级虚拟容器的划分结果,并且通常需要将单个目标控件整体划分至其所属的等级最低的虚拟容器中,因此,可以根据各个控件的顶部及底边去构造容器间隔线,进而利用容器间隔线去划分容器。
96.为便于理解,对此进行举例说明。图3为本说明书实施例提供的一种控件之间的容器间隔线的示意图。如图3所示,假定,虚拟画布处设置有控件a-i等共9个目标控件。当将各个目标控件的顶边及底边向两侧延伸,直至触及虚拟画布的侧边或者其他(目标)控件的侧边去构成容器间隔线时,可以生成容器间隔线301-305等共5条容器间隔线。
97.本说明书实施例中,为便于对各个虚拟容器内的目标控件进行管理及调整,可以允许将全部目标控件划分至多个等级最高的虚拟容器内。并且不同的等级最高的虚拟容器的所在区域之间通常可以相邻,但不会重合。以及,针对任一等级最高的虚拟容器内的目标控件的展示尺寸或展示位置进行调整后,通常不会影响到其他等级最高的虚拟容器内的控件尺寸及布局,从而有利于提升控件调整时的整体布局可控性。除此之外,若任一等级最高的虚拟容器内的控件布局仍旧比较复杂,则还可以进一步进行其他等级的虚拟容器的划分。
98.基于此,所述根据所述容器间隔线,对各个所述目标控件所属的虚拟容器进行划分,具体可以包括:
99.将任意两条相邻的第一容器间隔线之间包含的所述目标控件,划分至同一第一等级的虚拟容器内;所述第一容器间隔线为起始点在所述虚拟画布的任一侧边上,且终止点在所述虚拟画布的另一侧边上的所述容器间隔线。
100.若存在第二容器间隔线,则根据所述第二容器间隔线,对所述第一等级的虚拟容器中的所述目标控件所属的其他等级的虚拟容器进行划分,直至遍历所述第二容器间隔线;其中,所述第二容器间隔线为所述第一等级的虚拟容器内包含的所述容器间隔线;所述其他等级的虚拟容器为嵌套于所述第一等级的虚拟容器中的子容器。
101.若任一所述第一等级的虚拟容器内不具有第二容器间隔线,则可以禁止对所述第一等级的虚拟容器内的目标控件继续进行容器划分,此时,这些目标控件所属的虚拟容器的等级有且仅有1个,即第一等级,也就是最高等级。
102.为便于理解,结合图3示出的内容对于容器划分的过程进行举例说明。具体的,根据图3中的内容,可知,虚拟画布处的第一容器间隔线可以包括容器间隔线301、容器间隔线302以及容器间隔线303。由于容器间隔线301与容器间隔线302相邻,因此,可以将容器间隔线301与容器间隔线302之间包含的全部目标控件(即控件a与控件b)划分至一个第一等级(即最高等级)的虚拟容器内。而由于容器间隔线302与容器间隔线303相邻,因此,可以将容器间隔线302与容器间隔线303之间包含的全部目标控件(即控件c、控件d、控件e、控件f、控件g、控件h、控件i)划分至另一个第一等级(即最高等级)的虚拟容器内。
103.后续,针对包含有控件a与控件b的第一等级的虚拟容器,由于该第一等级的虚拟容器所在区域内部未包含第二容器间隔线,从而可以终止针对其包含的控件a与控件b所属的其他等级的虚拟容器的划分,使得,控件a与控件b所归属的虚拟容器有且仅有第一等级
的虚拟容器。
104.而针对包含有控件c-控件i的第一等级的虚拟容器,由于该第一等级的虚拟容器所在区域内部包含有第二容器间隔线(即容器间隔线304与容器间隔线305),从而需要按照第二容器间隔线从长到短的顺序,利用各个第二容器间隔线,针对其包含的控件c-控件i所属的其他等级的虚拟容器继续进行划分,直至每个第二容器间隔线均被使用过为止。
105.本说明书实施例中,为便于理解,还给出了利用第二容器间隔线,对第一等级的虚拟容器中包含的目标控件所属的其他等级的虚拟容器进行划分的详细实施方式。由于篇幅有限,下述实施例中仅示出了从高到低共3种等级的虚拟容器划分过程,可以理解的是,针对其他未示出的等级的虚拟容器的划分过程,与针对上述3种等级的虚拟容器划分过程所使用的技术原理或技术构思是一致的,对此不作赘述。
106.具体的,所述根据所述第二容器间隔线,对所述第一等级的虚拟容器中的所述目标控件所属的其他等级的虚拟容器进行划分,可以包括:
107.针对任一所述第一等级的虚拟容器,确定出所述第一等级的虚拟容器内包含的长度最长的所述容器间隔线,得到第三容器间隔线。
108.根据所述第三容器间隔线,将位于所述第一等级的虚拟容器中的所述目标控件划分至各个第二等级的虚拟容器内;其中,任一所述第二等级的虚拟容器中包含有位于所述第三容器间隔线左侧的所述目标控件,或者,包含有位于所述第三容器间隔线右侧的所述目标控件,或者,包含有位于所述第三容器间隔线上侧及下侧中的至少一种位置处的所述目标控件。所述第二等级的虚拟容器为嵌套于所述第一等级的虚拟容器中的子容器,即第二等级低于第一等级。
109.针对任一所述第二等级的虚拟容器,判断是否所述第二等级的虚拟容器内未包含所述容器间隔线,得到第一判断结果。
110.若所述第一判断结果表示所述第二等级的虚拟容器内未包含所述容器间隔线,则禁止对所述第二等级的虚拟容器内包含的所述目标控件继续进行容器划分。
111.若所述第一判断结果表示所述第二等级的虚拟容器内包含有所述容器间隔线,则确定出所述第二等级的虚拟容器内包含的长度最长的所述容器间隔线,得到第四容器间隔线。
112.根据所述第四容器间隔线,将位于所述第二等级的虚拟容器中的所述目标控件划分至各个第三等级的虚拟容器内;其中,任一所述第三等级的虚拟容器中包含有位于所述第四容器间隔线左侧的所述目标控件,或者,包含有位于所述第四容器间隔线右侧的所述目标控件,或者,包含有位于所述第四容器间隔线上侧及下侧中的至少一种位置处的所述目标控件;所述第三等级的虚拟容器为嵌套于所述第二等级的虚拟容器中的子容器,即第三等级低于第二等级。
113.为便于理解,仍旧结合图3示出的内容对于第二等级的虚拟容器及第三等级的虚拟容器的划分过程进行举例说明。具体的,由于需要按照第一等级的虚拟容器内的第二容器间隔线从长到短的顺序进行容器划分,则需要先确定出第一等级的虚拟容器内包含的长度最长的第二容器间隔线(例如,容器间隔线304)作为第三容器间隔线。
114.当根据第三容器间隔线(即容器间隔线304)对第一等级的虚拟容器内包含的控件c-控件i继续进行容器划分时,可以将其左侧的控件(即控件i)划分至一个第二等级的虚拟
容器。以及,将其上侧及下侧的控件(即控件c-控件h等6个控件)划分至另一个第二等级的虚拟容器。
115.或者,若为了提升容器划分效率,还可以将其上侧的控件(即控件c-控件f等4个控件)划分至一个第二等级的虚拟容器,并将其下侧的控件(即控件g与控件h)划分至另一个第二等级的虚拟容器。对此不作具体限定。
116.当完成针对第二等级的虚拟容器的划分后,则可以判断任一第二等级的虚拟容器内是否还包含容器间隔线,若不包含,则可以终止针对该第二等级的虚拟容器内的目标控件所属的其他等级的虚拟容器的划分。例如,针对仅包含控件i的第二等级的虚拟容器,由于该第二等级的虚拟容器所在区域内部未包含容器间隔线,则可以终止针对这一第二等级的虚拟容器内的控件i的容器划分操作,此时,控件i所归属的虚拟容器的等级为2种(即第一等级与第二等级)。
117.而若任一第二等级的虚拟容器内还包含容器间隔线,则需要根据该第二等级的虚拟容器内包含的长度最长的容器间隔线(即第四容器间隔线),对该第二等级的虚拟容器内的目标控件所属的其他等级的虚拟容器继续进行划分。接上例,若第二等级的虚拟容器内包含有控件c-控件h等6个控件,则确定出的第四容器间隔线依旧为容器间隔线304,从而利用容器间隔线304可以划分出包含有控件c-控件f等4个控件的第三等级的虚拟容器,以及,包含有控件g与控件h的另一个第三等级的虚拟容器。
118.同理,若第二等级的虚拟容器内包含有控件c-控件f等4个控件,则确定出的第四容器间隔线为容器间隔线305,此时,利用容器间隔线305可以划分得到包含有控件c的第三等级的虚拟容器,包含有控件d的第三等级的虚拟容器,以及,包含有控件e及控件f的第三等级的虚拟容器。
119.后续,若第三等级的虚拟容器内不包含容器间隔线,则可以终止针对第三等级的虚拟容器内包含的目标控件所属的其他等级的虚拟容器的划分。而若第三等级的虚拟容器内包含有容器间隔线,则可以继续利用第三等级的虚拟容器内包含的长度最长的容器间隔线,对该第三等级的虚拟容器内的目标控件进行容器划分,直至全部更低等级的虚拟容器内不再包含有未被使用过的容器间隔线为止,对此不作赘述。
120.在实际应用中,针对不同第一等级的虚拟容器内的目标控件进行低等级容器划分时可以并行执行,而针对归属于同一上一等级的虚拟容器内的各个等级较低的虚拟容器处的目标控件也可以并行进行更低等级容器划分,从而有利于提升容器划分效率,进而提升页面生成效率。
121.本说明书实施例中,由于在根据用户针对目标控件设置的目标内容去生成目标页面时,可能需要针对部分目标控件的展示尺寸或展示位置进行适应性调整,以保障目标内容的展示效果,并避免控件布局不会大幅度扰乱。在此还给出了生成目标页面时的具体实现方式。
122.具体的,步骤210:响应于所述第二操作,根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息,生成目标页面,可以包括:
123.响应于所述第二操作,获取预先针对所述目标控件设置的控件调整策略;所述控件调整策略用于指示在所述目标控件的当前展示尺寸与所述目标控件所需展示的目标内
容的实际展示尺寸不同时,对于所述目标控件的展示尺寸与展示位置中的至少一种的调整策略。
124.根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,各个所述目标控件所属的虚拟容器之间的嵌套关系信息,以及所述控件调整策略,确定各个所述目标控件的目标展示尺寸及目标展示位置。
125.在所述目标展示位置处按照所述目标展示尺寸展示携带有所述目标内容的所述目标控件,得到目标页面。
126.本说明书实施例中,用户可以预先针对各个目标控件设置相应的控件调整策略,以便于在用户设置了目标控件所需展示的目标内容后,可以根据控件调整策略,对展示有目标内容的目标控件的展示尺寸和/或展示位置进行调整。在实际应用中,用户针对各个目标控件设置的控件调整策略既可以相同,也可以存在差异,并且可选的控件调整策略的种类可以有多种,例如,控件调整策略可以指示允许调整目标控件的尺寸,或者,指示不允许调整目标控件的尺寸等,对此不作具体限定。
127.本说明书实施例中,若能够根据控件调整策略对目标控件的展示尺寸进行调整,则调整后的目标控件的展示尺寸(即目标展示尺寸)通常要与其所需展示的目标内容在该目标控件处的实际展示尺寸一致,以便于在目标控件处清楚展示较为全面的目标内容。而当任一目标控件的展示尺寸发生变化后,与其相邻的其他目标控件的展示尺寸或展示位置往往也会发生变化,以避免控件布局扰动过大。使得需要根据各个目标控件的展示位置信息,各个目标控件所需展示的目标内容,各个目标控件所属的虚拟容器之间的嵌套关系信息,以及相应控件调整策略,确定各个目标控件的目标展示尺寸(即实际展示尺寸)及目标展示位置(实际展示位置)。
128.具体的,所述根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,各个所述目标控件所属的虚拟容器之间的嵌套关系信息,以及所述控件调整策略,确定各个所述目标控件的目标展示尺寸及目标展示位置,可以包括:
129.针对任一所述目标控件,若所述控件调整策略具体用于指示禁止调整所述任一所述目标控件的展示尺寸,则将所述任一所述目标控件的当前展示尺寸确定为所述任一所述目标控件的目标展示尺寸,将其他目标控件的当前展示尺寸确定为其他目标控件的目标展示尺寸,以及,将各个所述目标控件的当前展示位置确定为各个所述目标控件的目标展示位置。
130.若所述控件调整策略具体用于指示允许调整所述任一所述目标控件的展示尺寸,则将所述任一所述目标控件所需展示的目标内容的实际展示尺寸确定为所述任一所述目标控件的目标展示尺寸;以及,
131.根据所述任一所述目标控件的目标展示尺寸与当前展示尺寸之间的第一差值,各个所述目标控件的当前展示位置,各个所述目标控件所属的虚拟容器之间的嵌套关系信息,以及所述控件调整策略,对至少部分所述目标控件的展示位置与展示尺寸中的至少一种进行调整,得到其他目标控件的目标展示尺寸,以及,各个所述目标控件的目标展示位置。
132.本说明书实施例中,若控件调整策略具体用于指示禁止调整目标控件的展示尺寸,则无论目标控件处所需展示的目标内容的实际展示尺寸比目标控件的初始展示尺寸大
或小,均不会去改变目标控件的当前展示尺寸,进而也就不会改变目标控件的当前展示位置了,使得可以直接将目标控件的当前展示尺寸及当前展示位置确定为该目标控件的目标展示尺寸及目标展示位置。
133.值得注意的是,仅管部分目标控件自身的展示尺寸被禁止调整,但由于在根据这些目标控件所需展示的目标内容进行控件尺寸调整之前,这些目标控件可能会因其他目标控件的展示尺寸调整而导致自身展示位置发送变更,从而使得这些目标控件的当前展示尺寸持续保持为初始展示尺寸,但这些目标控件的当前展示位置已经不再是初始展示位置了。
134.在实际应用中,若控件调整策略具体用于指示禁止调整目标控件的展示尺寸,且目标控件处所需展示的目标内容的实际展示尺寸大于目标控件的当前展示尺寸,则会存在无法于目标控件处展示出全部目标内容的情况,此时,既可以由用户指示出目标内容中所需展示于目标控件处的指定内容,该指定内容的实际展示尺寸应小于目标控件的当前展示尺寸;或者,也可以在目标控件处设置滑动组件,以使得用户能够通过拖动滑动组件去查看全部目标内容,对此不作具体限定。
135.本说明书实施例中,若控件调整策略具体用于指示允许调整目标控件的展示尺寸,则在不同情况下(例如,目标内容的实际展示尺寸大于或小于目标控件的当前展示尺寸),对于虚拟画布处的其他目标控件的展示尺寸或展示位置进行调整时,所采用的策略往往会存在差异。为便于理解,对此进行解释说明。
136.具体的,所述根据所述任一所述目标控件的目标展示尺寸与当前展示尺寸之间的第一差值,各个所述目标控件的当前展示位置,各个所述目标控件所属的虚拟容器之间的嵌套关系信息,以及所述控件调整策略,对至少部分所述目标控件的展示位置与展示尺寸中的至少一种进行调整,得到各个所述目标控件的目标展示位置,可以包括:
137.若所述控件调整策略指示允许在各个所述目标控件下方添加展示尺寸可调的预设空白区域,且所述任一所述目标控件的目标展示尺寸大于所述当前展示尺寸,则根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息,按照容器等级从低到高的顺序,对所述任一所述目标控件所属的各级虚拟容器中的第一控件下方的预设空白区域的高度增大所述第一差值,直至遍历所述任一所述目标控件所属的各级虚拟容器,得到各个所述目标控件的目标展示位置;其中,所述第一控件为所述任一所述目标控件所属的任一等级的虚拟容器中位于未被调整高度的列且与所述任一等级的虚拟容器的底边距离最近的控件。
138.若所述控件调整策略指示允许在各个所述目标控件下方添加展示尺寸可调的预设空白区域,且所述任一所述目标控件的目标展示尺寸小于所述当前展示尺寸,则根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息,按照容器等级从低到高的顺序,对所述任一所述目标控件所属的各级虚拟容器中的第二控件下方的预设空白区域的高度、所述第二控件的当前展示高度以及所述任一所述目标控件下方的预设空白区域的高度中的至少一种进行调整,直至遍历所述任一所述目标控件所属的各级虚拟容器,得到各个所述目标控件的目标展示位置;其中,所述第二控件为所述任一所述目标控件所属的任一等级的虚拟容器中位于未被调整高度的列且与所述任一等级的虚拟容器的底边距离最近的控件。
139.若所述控件调整策略指示允许在各个所述目标控件下方添加展示尺寸可调的预
设空白区域,且所述任一所述目标控件的目标展示尺寸等于所述当前展示尺寸,则将将各个所述目标控件的当前展示尺寸确定为各个所述目标控件的目标展示尺寸,各个所述目标控件的当前展示位置确定为各个所述目标控件的目标展示位置。即,无需调整各个目标控件的展示尺寸及展示位置。
140.本说明书实施例中,在对各个目标控件的展示尺寸及展示位置进行自适应调整时,可以允许在每个目标控件的底边下侧添加预设空白区域,以利用预设空白区域去对目标控件所属的各级虚拟容器内的控件布局进行调整,不仅方便快捷,且能够避免对控件布局进行大幅扰动。而由于在部分目标控件的底边下侧添加的预设空白区域的高度调整至0后,依旧可能无法满足尺寸调整需求,则也可以允许对这些目标控件自身的展示高度进行调整,灵活性更好。
141.为便于理解,在此对于当需要增加目标控件的展示尺寸以更好地展示目标内容,而对各个目标控件的展示尺寸及展示位置进行自适应调整的过程进行解释说明。
142.具体的,所述根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息,按照容器等级从低到高的顺序,对所述任一所述目标控件所属的各级虚拟容器中的第一控件下方的预设空白区域的高度增大所述第一差值,可以包括:
143.判断所述任一所述目标控件所属的等级最低的虚拟容器中是否包含第三控件,得到第二判断结果;所述第三控件为位于所述等级最低的虚拟容器中除所述任一所述目标控件所在列以外的列处,且与所述等级最低的虚拟容器的底边距离最近的所述目标控件。
144.若所述第二判断结果表示所述任一所述目标控件所属的等级最低的虚拟容器中包含第三控件,则将所述第三控件下方的预设空白区域的高度增大所述第一差值,并跳转至针对目标控件所属的等级第二低的虚拟容器处的其他控件进行调整的步骤。
145.若所述第二判断结果表示所述任一所述目标控件所属的等级最低的虚拟容器中不包含第三控件,则也可以跳转至针对目标控件所属的等级第二低的虚拟容器处的其他控件进行调整的步骤。
146.若不存在所述任一所述目标控件所属的等级第二低的虚拟容器,则可以终止针对其他控件的调整步骤。
147.若存在所述任一所述目标控件所属的等级第二低的虚拟容器,则可以判断所述等级第二低的虚拟容器中是否包含第四控件,得到第三判断结果;所述第四控件为位于所述等级第二低的虚拟容器中除所述任一所述目标控件以及所述第三控件所在列以外的列处,且与所述等级第二低的虚拟容器的底边距离最近的所述目标控件;所述等级最低的虚拟容器为嵌套于所述等级第二低的虚拟容器内的子容器。
148.若所述第三判断结果表示所述等级第二低的虚拟容器中包含第四控件,则将所述第四控件下方的预设空白区域的高度增大所述第一差值。并跳转至针对目标控件所属的等级第三低的虚拟容器处的其他控件进行调整的步骤,直至遍历目标控件所属的各个等级的虚拟容器。
149.若所述第三判断结果表示所述任一所述目标控件所属的等级第二低的虚拟容器中不包含第四控件,则也可以跳转至针对目标控件所属的等级第三低的虚拟容器处的其他控件进行调整的步骤,直至遍历目标控件所属的各个等级的虚拟容器。
150.本说明书实施例中,当因目标内容而增大了任一目标控件的展示尺寸后,可以采
用相同的原理,按照容器等级从低到高的顺序,对该目标控件所需的各级虚拟容器中处于未被调整高度的列且位于容器底端的控件,去增大这些控件下方的预设空白区域的高度,从而减少对于该目标控件所属各级虚拟容器的控件布局的扰动。
151.为便于理解,对此进行举例说明。图4为本说明书实施例提供的一种目标页面的示意图。图4中示出的虚拟画布处的各个目标控件所属的各级虚拟容器的划分结果与图3一致。可知,控件c-控件i归属于同一第一等级的虚拟容器(简称为容器11);控件i归属于一个第二等级的虚拟容器(简称为容器21);控件c-h归属于另一个第二等级的虚拟容器(简称为容器22)。控件c-f归属于一个第三等级的虚拟容器(简称为容器31);控件g及控件h归属于另一个第三等级的虚拟容器(简称为容器33);控件c归属于一个第四等级的虚拟容器(简称为容器41);控件d-f归属于另一个第四等级的虚拟容器(简称为容器42);控件d归属于一个第五等级的虚拟容器(简称为容器51);控件e与控件f归属于另一个第五等级的虚拟容器(简称为容器52)。可知,控件f归属的容器从低级至高级分别为:容器52、容器42、容器31、容器22与容器11。
152.假定,控件f所需展示的目标内容的实际展示尺寸大于当前展示尺寸,则在将控件f所需展示的目标内容的实际展示尺寸作为目标展示尺寸后,可以视为完成了针对控件f所在列的高度调整。此时,如图4所示,控件f的目标展示尺寸比调整前的展示尺寸大第一差值(即高度401),此时,需要判断控件f所属的等级最低的虚拟容器中是否包含有第三控件。结合上面的陈述可知,由于控件f所属的等级最低的虚拟容器(即容器52)中除控件f所在列以外的列处仅有一个控件e,因此,控件e属于第三控件,从而需要将控件e下方的预设空白区域的高度增大第一差值,得到空白区域402。此时,完成了针对控件e所在列的高度调整。
153.而控件f具有所属的等级第二低的虚拟容器(即容器42),此时,需要判断容器42中是否包含第四控件。由于容器42中除控件f及控件e所在列以外的列处仅有一个控件c,因此,控件c属于第四控件,从而需要将控件c下方的预设空白区域的高度增大第一差值,得到空白区域403。此时,完成了针对控件c所在列的高度调整。
154.同理,针对控件f所属的等级第三低的虚拟容器(即容器31),由于容器31中包含的各个列(即从控件c的左侧边至控件f的右侧边之间的列)的高度均已经被调整过了,因此,容器31中不具有需要被调整相应预设空白区域的控件,可以跳转去处理控件f所属的等级第四低的虚拟容器(即容器22)。此时,由于容器22中包含的各个列(即从控件c的左侧边至控件f的右侧边之间的列)的高度均已经被调整过了,因此,容器22中也不具有需要被调整相应预设空白区域的控件,可以跳转去处理控件f所属的等级第五低的虚拟容器(即容器11)。
155.最后,由于容器11中包含的未被调整高度的列处仅有一个控件i,因此,需要将控件i下方的预设空白区域的高度增大第一差值,得到空白区域404。此时,完成了针对控件f所归属的各级虚拟容器处的其他控件的尺寸和/或展示位置调整。
156.为便于理解,第三控件及第四控件的含义,结合图3中的内容,还给了另一种第三控件及第四控件的示例。例如,控件c归属的容器从低级至高级分别为:容器31、容器22与容器11。假定,控件c所需展示的目标内容的实际展示尺寸(即目标展示尺寸)比控件c的当前展示尺寸大,则需要判断控件c所属的等级最低的虚拟容器(即容器31)中是否包含有第三控件。此时,由于容器31中除控件c所在列以外的列处具有控件d、控件e及控件f三个控件,
其中,在控件e所在列处具有控件e及控件d等共两个控件,但由于相对于控件d而言,控件e与容器31底边距离最近,因此,控件e被确定为一个第三控件。同理,控件f为另一个第三控件。而控件c所属的等级第二低的虚拟容器(即容器22)中除了控件c、控件e及控件d所在的列以外,不在包含其它列,此时,控件c所属的等级第二低的虚拟容器中不具有第四控件。
157.本说明书实施例中,为便于理解,在此对于当需要减小目标控件的展示尺寸以更好地展示目标内容,而对各个目标控件的展示尺寸及展示位置进行调整的过程进行解释说明。
158.具体的,所述根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息,按照容器等级从低到高的顺序,对所述任一所述目标控件所属的各级虚拟容器中的第二控件下方的预设空白区域的高度、所述第二控件的当前展示高度以及所述任一所述目标控件下方的预设空白区域的高度中的至少一种进行调整,可以包括:
159.判断所述任一所述目标控件所属的等级最低的虚拟容器中是否包含第五控件,得到第四判断结果;所述第五控件为位于所述等级最低的虚拟容器中除所述任一所述目标控件所在列以外的列处,且与所述等级最低的虚拟容器的底边距离最近的所述目标控件。
160.若所述第四判断结果表示所述任一所述目标控件所属的等级最低的虚拟容器中不包含第五控件,则也可以跳转至针对目标控件所属的等级第二低的虚拟容器处的其他控件进行调整的步骤。
161.若所述第四判断结果表示所述任一所述目标控件所属的等级最低的虚拟容器中包含第五控件,则判断所述第五控件下方的预设空白区域的当前高度是否大于等于所述第一差值,得到第五判断结果。
162.若所述第五判断结果表示所述第五控件下方的预设空白区域的当前高度大于等于所述第一差值,则将所述第五控件下方的预设空白区域的高度减小所述第一差值。
163.若所述第五判断结果表示所述第五控件下方的预设空白区域的当前高度小于所述第一差值,则将所述第五控件下方的预设空白区域的高度减小至零,以及,将所述第五控件的展示高度减小第二差值;其中,所述第二差值为所述第五控件下方的预设空白区域的当前高度与所述第一差值之差;或者,
164.若所述第五判断结果表示所述第五控件下方的预设空白区域的当前高度小于所述第一差值,则将所述第五控件下方的预设空白区域的高度减小至零,以及,将所述任一所述目标控件下方的预设空白区域的高度增大所述第二差值。
165.若不存在所述任一所述目标控件所属的等级第二低的虚拟容器,则可以终止针对其他控件的调整步骤。
166.若存在所述任一所述目标控件所属的等级第二低的虚拟容器,则判断所述等级第二低的虚拟容器中是否包含第六控件,得到第六判断结果;所述第六控件为位于所述等级第二低的虚拟容器中除所述任一所述目标控件以及所述第五控件所在列以外的列处,且与所述等级第二低的虚拟容器的底边距离最近的所述目标控件;所述等级最低的虚拟容器为嵌套于所述等级第二低的虚拟容器内的子容器。
167.若所述第六判断结果表示所述任一所述目标控件所属的等级第二低的虚拟容器中不包含第六控件,则也可以跳转至针对目标控件所属的等级第三低的虚拟容器处的其他控件进行调整的步骤,直至遍历目标控件所属的各个等级的虚拟容器。
168.若所述第六判断结果表示所述等级第二低的虚拟容器中包含第六控件,且已将所述第五控件下方的预设空白区域的高度减小所述第一差值,或者,已将所述第五控件下方的预设空白区域的高度减小至零以及将所述第五控件的展示高度减小了所述第二差值,则判断所述第六控件下方的预设空白区域的当前高度是否大于等于所述第一差值,得到第七判断结果。
169.若所述第七判断结果表示所述第六控件下方的预设空白区域的当前高度大于等于所述第一差值,则将所述第六控件下方的预设空白区域的高度减小所述第一差值。
170.若所述第七判断结果表示所述第六控件下方的预设空白区域的当前高度小于所述第一差值,则将所述第六控件下方的预设空白区域的高度减小至零,以及,将所述第六控件的展示高度减小第三差值;其中,所述第三差值为所述第六控件下方的预设空白区域的当前高度与所述第一差值之差;或者,
171.若所述第七判断结果表示所述第六控件下方的预设空白区域的当前高度小于所述第一差值,则将所述第六控件下方的预设空白区域的高度减小至零,以及,将所述任一所述目标控件下方的预设空白区域的高度增大所述第三差值。
172.若所述第六判断结果表示所述等级第二低的虚拟容器中包含第六控件,且已将所述第五控件下方的预设空白区域的高度减小至零,以及,将所述任一所述目标控件下方的预设空白区域的高度增大所述第二差值,则判断所述第六控件下方的预设空白区域的当前高度是否大于等于目标值,得到第八判断结果;所述目标值为将所述第五控件下方的预设空白区域的高度减小至零时所减小的高度值。
173.若所述第八判断结果表示所述第六控件下方的预设空白区域的当前高度大于等于目标值,则将所述第六控件下方的预设空白区域的高度减小所述目标值。
174.若所述第八判断结果表示所述第六控件下方的预设空白区域的当前高度小于目标值,则将所述第六控件下方的预设空白区域的高度减小至零,以及,将所述第六控件的展示高度减小第四差值;其中,所述第四差值为所述第六控件下方的预设空白区域的当前高度与所述目标值之差;或者,
175.若所述第八判断结果表示所述第六控件下方的预设空白区域的当前高度小于目标值,则将所述第六控件下方的预设空白区域的高度减小至零,以及,将所述任一所述目标控件下方的预设空白区域的高度增大所述第四差值。
176.后续,还可以跳转至针对目标控件所属的等级第三低的虚拟容器处的其他控件进行调整的步骤,直至遍历目标控件所属的各个等级的虚拟容器。
177.为便于理解,对此进行举例说明。图5为本说明书实施例提供的另一种目标页面的示意图。图5中示出的虚拟画布处的各个目标控件所属的各级虚拟容器的划分结果与图3及图4中的一致。假定,用户在图4示出的目标页面的基础上,对控件f所需展示的目标内容进行了修改,使得目标内容的实际展示尺寸比目标控件的当前展示尺寸(即图4中的控件f的展示高度)小了第一差值,则在本次将该目标内容的实际展示尺寸设置为控件f的目标展示尺寸后,相当于将目标控件的展示高度减少了第一差值,如图5所示,其中,线条501可以表示本次调整后的控件f的底边所在位置,而线条502可以表示本次调整前的控件f的底边所在位置(即图4中的控件f的底边所在位置),此时,线条501与线条502之间的高度值可以视为本次计算得到的第一差值。
178.由于在将控件f所需展示的目标内容的实际展示尺寸作为目标展示尺寸后,可以视为完成了针对控件f所在列的高度调整。此时,则需要判断控件f所属的等级最低的虚拟容器中是否包含有第五控件。由于控件f所属的等级最低的虚拟容器(容器52)中除控件f所在列以外的列处仅有一个控件e,因此,控件e属于第五控件,并且由于控件e下方的预设空白区域的当前高度(即图4中的高度401)大于本实施例中的第一差值(线条501与线条502之间的高度值),从而需要将控件e下方的预设空白区域503的高度减小本实施例中的第一差值。此时,完成了针对控件e所在列的高度调整。
179.图6为本说明书实施例提供的又一种目标页面的示意图。图6中示出的虚拟画布处的各个目标控件所属的各级虚拟容器的划分结果与图3、图4及图5中的一致。假定,用户在图4示出的目标页面的基础上,对控件f所需展示的目标内容进行了修改,使得目标内容的实际展示尺寸比目标控件的当前展示尺寸(即图4中的控件f的展示高度)小了第一差值。如图6所示,其中,线条601可以表示本次调整后的控件f的底边所在位置,而线条602可以表示本次调整前的控件f的底边所在位置(即图4中的控件f的底边所在位置),因此,线条601与线条602之间的高度值为本实施例中的第一差值。而线条604为本次对控件f所属的各级虚拟容器完成控件调整后的虚拟画布的边界,线条603为本次对控件f所属的各级虚拟容器进行控件调整前的虚拟画布的边界(即图4中的虚拟画布的底边)。
180.由于控件f所属的等级最低的虚拟容器(容器52)处具有第五控件(即控件e),并且控件e下方的预设空白区域的当前高度(即图4中的高度401)小于本实施例中的第一差值(线条601与线条602之间的高度值),从而可以将控件e下方的预设空白区域的高度减小至零,以及,将控件e的展示高度减小第二差值(即图4中控件e下方的预设空白区域503的高度与本实施例中的第一差值之差)。此时,完成了针对控件e所在列的高度调整。
181.在实际应用中,当任一目标控件的展示尺寸缩短时,为了避免在控件自适应调整过程中,将其它控件的展示尺寸自动调整的过小,还可以令控件调整策略指示禁止令至少部分其它目标控件的实际展示尺寸小于初始展示尺寸。假定,控件e为禁止令其实际展示尺寸小于初始展示尺寸的控件,并且控件e下方的预设空白区域的当前高度(例如,图4中控件e下方的预设空白区域503的高度)小于本实施例中的第一差值,则需要一方面将控件e下方的预设空白区域的高度减小至零,另一方面需要将控件f下方的预设空白区域的高度增大第二差值(即控件e下方的预设空白区域的当前高度与本实施例中的第一差值之差)。详情参加图7示出的再一种目标页面的示意图。如图7所示,假定,图6与图7中需要针对控件f减小的第一差值相同,当控件e的实际展示尺寸最小为初始展示尺寸时,在将控件e下方的预设空白区域的高度减小至0后,需要在控件f下方增加一个高度为第二差值(即线条701与线条702之间的高度)的预设空白区域703。此时,也完成了针对控件e所在列的高度调整。
182.后续,由于控件f具有所属的等级第二低的虚拟容器(即容器42),此时,需要判断容器42中是否包含第六控件。具体的,由于容器42中除控件f及控件e所在列以外的列处仅有一个控件c,因此,控件c属于第六控件。
183.针对图5及图6示出的场景,在对控件c进行展示尺寸自适应调整时,采用的原理与针对图5-图7中的控件e的展示尺寸自适应调整原理可以是一致的,并且若未禁止令控件c的实际展示尺寸小于初始展示尺寸,则调整后的控件c的展示尺寸及展示位置可以如图5及图6所示,对此不作赘述。
184.而针对图7所示出的场景,由于针对控件e及控件f所在列的高度的实际减小值为控件e下方的预设控件区域的高度值(即将控件e下方的预设空白区域的高度减小至零时所减小的高度值,又称为目标值),因此,在对控件c进行展示尺寸自适应调整时,需要将控件c下方的预设空白区域减少目标值。此时,若控件c的展示尺寸允许小于初始展示尺寸,则可以基于图5及图6中针对控件e的展示尺寸自适应调整原理,对控件c的展示尺寸进行自适应调整。而若控件c的展示尺寸不允许小于初始展示尺寸,则可以基于图7中针对控件e的展示尺寸自适应调整原理,对控件c的展示尺寸进行自适应调整。
185.基于针对控件f所属的等级第二低的虚拟容器中的其他目标控件进行自适应调整的技术原理,还可以针对控件f所属的其他等级的虚拟容器依序进行控件调整,从而完成针对控件f所归属的各级虚拟容器处的其他控件的尺寸和/或展示位置调整,对此不作赘述。其中,图5至图7中示出了不同场景下的调整后的目标页面。
186.图8为本说明书实施例提供的对应于图2中的页面生成方法的泳道流程示意图。如图8所示,该页面生成流程可以涉及用户以及展示有虚拟画布的用户设备等执行主体。
187.在控件设置阶段,用户可以在用户设备处执行在具有栅格布局的虚拟画布处的指定区域内设置各个目标控件的第一操作。用户设备响应于第一操作,可以在虚拟画布处的指定区域内展示目标控件。以及,根据虚拟画布内包含的各个目标控件的展示位置信息,生成各条容器间隔线。
188.后续,用户设备可以将任意两条相邻的第一容器间隔线之间包含的目标控件,划分至同一第一等级的虚拟容器内。以及,若任一第一等级的虚拟容器内不存在第二容器间隔线,则禁止针对其包含的目标控件所属的其他等级的虚拟容器进行划分。而若任一第一等级的虚拟容器内存在第二容器间隔线,则可以根据该第二容器间隔线,对该第一等级的虚拟容器中的目标控件所属的其他等级的虚拟容器进行划分,直至遍历第二容器间隔线。其中,所述第一容器间隔线可以为起始点在所述虚拟画布的任一侧边上,且终止点在所述虚拟画布的另一侧边上的容器间隔线。而所述第二容器间隔线可以为第一等级的虚拟容器内包含的容器间隔线;所述其他等级的虚拟容器可以为嵌套于所述第一等级的虚拟容器中的子容器。基于此,用户设备可以根据容器划分结果,确定各个目标控件所属的虚拟容器之间的嵌套关系信息。
189.在目标内容设置阶段,用户可以在用户设备处执行用于设置目标控件所需展示的目标内容的第二操作。用户设备响应于第二操作,可以获取预先针对目标控件设置的控件调整策略。若控件调整策略指示禁止调整该目标控件的展示尺寸,则可以将该目标控件的当前展示尺寸及当前展示位置分别确定为该目标控件的目标展示尺寸与目标展示位置。以及将各个其他目标控件的当前展示尺寸及当前展示位置分别确定为其目标展示尺寸与目标展示位置。
190.而若控件调整策略指示允许调整该目标控件的展示尺寸,则可以将该目标控件所需展示的目标内容的实际展示尺寸确定为目标展示尺寸。以及,根据该目标控件的目标展示尺寸与当前展示尺寸之间的第一差值,各个目标控件的当前展示位置,各个目标控件所属的虚拟容器之间的嵌套关系信息,对至少部分目标控件的展示位置与展示尺寸中的至少一种进行调整,得到其他控件的目标展示尺寸,以及各个目标控件的目标展示位置。使得目标设备可以在所述目标展示位置处按照所述目标展示尺寸展示携带有所述目标内容的所
述目标控件,从而得到目标页面。
191.基于同样的思路,本说明书实施例还提供了上述方法对应的装置。图9为本说明书实施例提供的对应于图2的一种页面生成装置的结构示意图。如图9所示,该装置可以包括:
192.第一获取模块902,用于获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作。
193.控件展示模块904,用于响应于所述第一操作,在所述虚拟画布处的所述指定区域内展示所述目标控件。
194.容器嵌套关系确定模块906,用于根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息。
195.第二获取模块908,用于获取用户设置所述目标控件所需展示的目标内容的第二操作。
196.页面生成模块910,用于响应于所述第二操作,根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息,生成目标页面。
197.基于图9的装置,本说明书实施例还提供了该装置的一些具体实施方案,下面进行说明。
198.可选的,所述第一获取模块902,可以包括:
199.第一获取单元,用于获取用户针对所述虚拟画布以外的预设区域内展示的目标控件的拖动操作;所述拖动操作用于将所述目标控件拖动至所述虚拟画布内的指定区域处;或者,
200.第二获取单元,用于获取用户针对用于在所述虚拟画布内添加控件的预设控件的触发操作;所述触发操作用于指示在所述虚拟画布处的指定区域内添加目标控件;或者,
201.第三获取单元,用于获取用户针对所述虚拟画布内的指定区域的选中操作。
202.第四获取单元,用于获取用户针对所述选中操作所选中的所述指定区域执行的控件添加操作。
203.可选的,图9中的装置还可以包括:
204.尺寸设置操作获取模块,用于获取用户针对所述目标控件执行的展示尺寸设置操作;所述展示尺寸设置操作用于设置所述目标控件的初始展示尺寸。
205.所述控件展示模块904,具体可以用于:在所述虚拟画布处的所述指定区域内,展示具有所述初始展示尺寸的所述目标控件。
206.可选的,所述尺寸设置操作获取模块,具体可以用于:
207.获取用户针对所述目标控件执行的初始展示宽度设置操作与初始展示高度设置操作中的至少一种;其中,所述初始展示宽度设置操作用于指示所述目标控件所在区域包含的所述虚拟画布处的列的数量,或者,指示所述目标控件所在区域包含的所述虚拟画布处的列的数量占比,或者,指示所述目标控件的初始展示宽度为第一预设值;所述初始展示高度设置操作用于指示所述目标控件所在区域包含的所述虚拟画布处的行的数量,或者,指示所述目标控件所在区域包含的所述虚拟画布处的行的数量占比,或者,指示所述目标控件的初始展示高度为第二预设值。
208.可选的,所述容器嵌套关系确定模块906,具体可以包括:
209.间隔线生成单元,用于根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,生成各条容器间隔线;其中,所述容器间隔线为将各个所述目标控件的顶边及底边向两侧延伸,直至触及所述虚拟画布的侧边或者其他控件的侧边所构成的线段。
210.虚拟容器划分单元,用于根据所述容器间隔线,对各个所述目标控件所属的虚拟容器进行划分,得到各个所述目标控件所属的虚拟容器之间的嵌套关系信息;其中,所述嵌套关系信息用于反映所述目标控件所属的各个等级的虚拟容器,以及不同等级的所述虚拟容器之间的嵌套关系。
211.可选的,所述虚拟容器划分单元,具体可以包括:
212.第一划分子单元,用于将任意两条相邻的第一容器间隔线之间包含的所述目标控件,划分至同一第一等级的虚拟容器内;所述第一容器间隔线为起始点在所述虚拟画布的任一侧边上,且终止点在所述虚拟画布的另一侧边上的所述容器间隔线。
213.第二划分子单元,用于若存在第二容器间隔线,则根据所述第二容器间隔线,对所述第一等级的虚拟容器中的所述目标控件所属的其他等级的虚拟容器进行划分,直至遍历所述第二容器间隔线;其中,所述第二容器间隔线为所述第一等级的虚拟容器内包含的所述容器间隔线;所述其他等级的虚拟容器为嵌套于所述第一等级的虚拟容器中的子容器。
214.可选的,所述第二划分子单元,具体可以用于:
215.针对任一所述第一等级的虚拟容器,确定出所述第一等级的虚拟容器内包含的长度最长的所述容器间隔线,得到第三容器间隔线。
216.根据所述第三容器间隔线,将位于所述第一等级的虚拟容器中的所述目标控件划分至各个第二等级的虚拟容器内;其中,任一所述第二等级的虚拟容器中包含有位于所述第三容器间隔线左侧的所述目标控件,或者,包含有位于所述第三容器间隔线右侧的所述目标控件,或者,包含有位于所述第三容器间隔线上侧及下侧中的至少一种位置处的所述目标控件。
217.针对任一所述第二等级的虚拟容器,判断是否所述第二等级的虚拟容器内未包含所述容器间隔线,得到第一判断结果。
218.若所述第一判断结果表示所述第二等级的虚拟容器内未包含所述容器间隔线,则禁止对所述第二等级的虚拟容器内包含的所述目标控件继续进行容器划分。
219.可选的,所述第二划分子单元,还可以用于:
220.若所述第一判断结果表示所述第二等级的虚拟容器内包含有所述容器间隔线,则确定出所述第二等级的虚拟容器内包含的长度最长的所述容器间隔线,得到第四容器间隔线;
221.根据所述第四容器间隔线,将位于所述第二等级的虚拟容器中的所述目标控件划分至各个第三等级的虚拟容器内;其中,任一所述第三等级的虚拟容器中包含有位于所述第四容器间隔线左侧的所述目标控件,或者,包含有位于所述第四容器间隔线右侧的所述目标控件,或者,包含有位于所述第四容器间隔线上侧及下侧中的至少一种位置处的所述目标控件;所述第三等级的虚拟容器为嵌套于所述第二等级的虚拟容器中的子容器。
222.可选的,所述页面生成模块910,可以包括:
223.第五获取单元,用于响应于所述第二操作,获取预先针对所述目标控件设置的控件调整策略;所述控件调整策略用于指示在所述目标控件的当前展示尺寸与所述目标控件
所需展示的目标内容的实际展示尺寸不同时,对于所述目标控件的展示尺寸与展示位置中的至少一种的调整策略。
224.控件调整单元,用于根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,各个所述目标控件所属的虚拟容器之间的嵌套关系信息,以及所述控件调整策略,确定各个所述目标控件的目标展示尺寸及目标展示位置。
225.页面生成单元,用于在所述目标展示位置处按照所述目标展示尺寸展示携带有所述目标内容的所述目标控件,得到目标页面。
226.可选的,所述控件调整单元,具体可以包括:
227.第一确定子单元,用于针对任一所述目标控件,若所述控件调整策略具体用于指示禁止调整所述任一所述目标控件的展示尺寸,则将所述任一所述目标控件的当前展示尺寸确定为所述任一所述目标控件的目标展示尺寸,以及,将各个所述目标控件的当前展示位置确定为各个所述目标控件的目标展示位置。
228.第二确定子单元,用于若所述控件调整策略具体用于指示允许调整所述任一所述目标控件的展示尺寸,则将所述任一所述目标控件所需展示的目标内容的实际展示尺寸确定为所述任一所述目标控件的目标展示尺寸;以及,
229.控件调整子单元,用于根据所述任一所述目标控件的目标展示尺寸与当前展示尺寸之间的第一差值,各个所述目标控件的当前展示位置,各个所述目标控件所属的虚拟容器之间的嵌套关系信息,以及所述控件调整策略,对至少部分所述目标控件的展示位置与展示尺寸中的至少一种进行调整,得到各个所述目标控件的目标展示位置。
230.可选的,所述控件调整子单元,具体可以用于:
231.若所述控件调整策略指示允许在各个所述目标控件下方添加展示尺寸可调的预设空白区域,且所述任一所述目标控件的目标展示尺寸大于所述当前展示尺寸,则根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息,按照容器等级从低到高的顺序,对所述任一所述目标控件所属的各级虚拟容器中的第一控件下方的预设空白区域的高度增大所述第一差值,直至遍历所述任一所述目标控件所属的各级虚拟容器,得到各个所述目标控件的目标展示位置;其中,所述第一控件为所述任一所述目标控件所属的任一等级的虚拟容器中位于未被调整高度的列且与所述任一等级的虚拟容器的底边距离最近的控件;
232.若所述控件调整策略指示允许在各个所述目标控件下方添加展示尺寸可调的预设空白区域,且所述任一所述目标控件的目标展示尺寸小于所述当前展示尺寸,则根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息,按照容器等级从低到高的顺序,对所述任一所述目标控件所属的各级虚拟容器中的第二控件下方的预设空白区域的高度、所述第二控件的当前展示高度以及所述任一所述目标控件下方的预设空白区域的高度中的至少一种进行调整,直至遍历所述任一所述目标控件所属的各级虚拟容器,得到各个所述目标控件的目标展示位置;其中,所述第二控件为所述任一所述目标控件所属的任一等级的虚拟容器中位于未被调整高度的列且与所述任一等级的虚拟容器的底边距离最近的控件。
233.可选的,所述控件调整子单元,在根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息,按照容器等级从低到高的顺序,对所述任一所述目标控件所属的各级虚拟容器中的第一控件下方的预设空白区域的高度增大所述第一差值时,具体可以用于:
234.判断所述任一所述目标控件所属的等级最低的虚拟容器中是否包含第三控件,得到第二判断结果;所述第三控件为位于所述等级最低的虚拟容器中除所述任一所述目标控件所在列以外的列处,且与所述等级最低的虚拟容器的底边距离最近的所述目标控件。
235.若所述第二判断结果表示所述任一所述目标控件所属的等级最低的虚拟容器中包含第三控件,则将所述第三控件下方的预设空白区域的高度增大所述第一差值。
236.若存在所述任一所述目标控件所属的等级第二低的虚拟容器,则判断所述等级第二低的虚拟容器中是否包含第四控件,得到第三判断结果;所述第四控件为位于所述等级第二低的虚拟容器中除所述任一所述目标控件以及所述第三控件所在列以外的列处,且与所述等级第二低的虚拟容器的底边距离最近的所述目标控件;所述等级最低的虚拟容器为嵌套于所述等级第二低的虚拟容器内的子容器。
237.若所述第三判断结果表示所述等级第二低的虚拟容器中包含第四控件,则将所述第四控件下方的预设空白区域的高度增大所述第一差值。
238.可选的,所述控件调整子单元,在根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息,按照容器等级从低到高的顺序,对所述任一所述目标控件所属的各级虚拟容器中的第二控件下方的预设空白区域的高度、所述第二控件的当前展示高度以及所述任一所述目标控件下方的预设空白区域的高度中的至少一种进行调整时,具体可以用于:
239.判断所述任一所述目标控件所属的等级最低的虚拟容器中是否包含第五控件,得到第四判断结果;所述第五控件为位于所述等级最低的虚拟容器中除所述任一所述目标控件所在列以外的列处,且与所述等级最低的虚拟容器的底边距离最近的所述目标控件。
240.若所述第四判断结果表示所述任一所述目标控件所属的等级最低的虚拟容器中包含第五控件,则判断所述第五控件下方的预设空白区域的当前高度是否大于等于所述第一差值,得到第五判断结果。
241.若所述第五判断结果表示所述第五控件下方的预设空白区域的当前高度大于等于所述第一差值,则将所述第五控件下方的预设空白区域的高度减小所述第一差值。
242.若所述第五判断结果表示所述第五控件下方的预设空白区域的当前高度小于所述第一差值,则将所述第五控件下方的预设空白区域的高度减小至零,以及,将所述第五控件的展示高度减小第二差值;其中,所述第二差值为所述第五控件下方的预设空白区域的当前高度与所述第一差值之差;或者,
243.若所述第五判断结果表示所述第五控件下方的预设空白区域的当前高度小于所述第一差值,则将所述第五控件下方的预设空白区域的高度减小至零,以及,将所述任一所述目标控件下方的预设空白区域的高度增大所述第二差值。
244.若存在所述任一所述目标控件所属的等级第二低的虚拟容器,则判断所述等级第二低的虚拟容器中是否包含第六控件,得到第六判断结果;所述第六控件为位于所述等级第二低的虚拟容器中除所述任一所述目标控件以及所述第五控件所在列以外的列处,且与所述等级第二低的虚拟容器的底边距离最近的所述目标控件;所述等级最低的虚拟容器为嵌套于所述等级第二低的虚拟容器内的子容器。
245.若所述第六判断结果表示所述等级第二低的虚拟容器中包含第六控件,且已将所述第五控件下方的预设空白区域的高度减小所述第一差值,或者,已将所述第五控件下方的预设空白区域的高度减小至零以及将所述第五控件的展示高度减小了所述第二差值,则
判断所述第六控件下方的预设空白区域的当前高度是否大于等于所述第一差值,得到第七判断结果。
246.若所述第七判断结果表示所述第六控件下方的预设空白区域的当前高度大于等于所述第一差值,则将所述第六控件下方的预设空白区域的高度减小所述第一差值。
247.若所述第七判断结果表示所述第六控件下方的预设空白区域的当前高度小于所述第一差值,则将所述第六控件下方的预设空白区域的高度减小至零,以及,将所述第六控件的展示高度减小第三差值;其中,所述第三差值为所述第六控件下方的预设空白区域的当前高度与所述第一差值之差;或者,
248.若所述第七判断结果表示所述第六控件下方的预设空白区域的当前高度小于所述第一差值,则将所述第六控件下方的预设空白区域的高度减小至零,以及,将所述任一所述目标控件下方的预设空白区域的高度增大所述第三差值。
249.若所述第六判断结果表示所述等级第二低的虚拟容器中包含第六控件,且已将所述第五控件下方的预设空白区域的高度减小至零,以及,将所述任一所述目标控件下方的预设空白区域的高度增大所述第二差值,则判断所述第六控件下方的预设空白区域的当前高度是否大于等于目标值,得到第八判断结果;所述目标值为将所述第五控件下方的预设空白区域的高度减小至零时所减小的高度值。
250.若所述第八判断结果表示所述第六控件下方的预设空白区域的当前高度大于等于目标值,则将所述第六控件下方的预设空白区域的高度减小所述目标值。
251.若所述第八判断结果表示所述第六控件下方的预设空白区域的当前高度小于目标值,则将所述第六控件下方的预设空白区域的高度减小至零,以及,将所述第六控件的展示高度减小第四差值;其中,所述第四差值为所述第六控件下方的预设空白区域的当前高度与所述目标值之差;或者,
252.若所述第八判断结果表示所述第六控件下方的预设空白区域的当前高度小于目标值,则将所述第六控件下方的预设空白区域的高度减小至零,以及,将所述任一所述目标控件下方的预设空白区域的高度增大所述第四差值。
253.基于同样的思路,本说明书实施例还提供了上述方法对应的设备。
254.图10为本说明书实施例提供的对应于图2的一种页面生成设备的结构示意图。如图10所示,设备1000可以包括:
255.至少一个处理器1010;以及,
256.与所述至少一个处理器通信连接的存储器1030;其中,
257.所述存储器1030存储有可被所述至少一个处理器1010执行的指令1020,所述指令被所述至少一个处理器1010执行,以使所述至少一个处理器1010能够:
258.获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作。
259.响应于所述第一操作,在所述虚拟画布处的所述指定区域内展示所述目标控件。
260.根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息。
261.获取用户设置所述目标控件所需展示的目标内容的第二操作。
262.响应于所述第二操作,根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息,生
成目标页面。
263.本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于图10所示的设备而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
264.在20世纪90年代,对于一个技术的改进可以很明显地区分是硬件上的改进(例如,对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而,随着技术的发展,当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此,不能说一个方法流程的改进就不能用硬件实体模块来实现。例如,可编程逻辑器件(programmable logic device,pld)(例如现场可编程门阵列(field programmable gate array,fpga))就是这样一种集成电路,其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片pld上,而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且,如今,取代手工地制作集成电路芯片,这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现,它与程序开发撰写时所用的软件编译器相类似,而要编译之前的原始代码也得用特定的编程语言来撰写,此称之为硬件描述语言(hardware description language,hdl),而hdl也并非仅有一种,而是有许多种,如abel(advanced boolean expression language)、ahdl(altera hardware description language)、confluence、cupl(cornell university programming language)、hdcal、jhdl(java hardware description language)、lava、lola、myhdl、palasm、rhdl(ruby hardware description language)等,目前最普遍使用的是vhdl(very-high-speed integrated circuit hardware description language)与verilog。本领域技术人员也应该清楚,只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中,就可以很容易得到实现该逻辑方法流程的硬件电路。
265.控制器可以按任何适当的方式实现,例如,控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(application specific integrated circuit,asic)、可编程逻辑控制器和嵌入微控制器的形式,控制器的例子包括但不限于以下微控制器:arc 625d、atmelat91sam、microchip pic18f26k20以及silicone labs c8051f320,存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道,除了以纯计算机可读程序代码方式实现控制器以外,完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件,而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至,可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。
266.上述实施例阐明的系统、装置、模块或单元,具体可以由计算机芯片或实体实现,或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的,计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何
设备的组合。
267.为了描述的方便,描述以上装置时以功能分为各种单元分别描述。当然,在实施本技术时可以把各单元的功能在同一个或多个软件和/或硬件中实现。
268.本领域内的技术人员应明白,本发明的实施例可提供为方法、系统、或计算机程序产品。因此,本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
269.本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
270.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
271.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
272.在一个典型的配置中,计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
273.内存可能包括计算机可读介质中的非永久性存储器,随机存取存储器(ram)和/或非易失性内存等形式,如只读存储器(rom)或闪存(flash ram)。内存是计算机可读介质的示例。
274.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带,磁带磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
275.还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个
……”
限定的要素,并不排除在包括所述要
素的过程、方法、商品或者设备中还存在另外的相同要素。
276.本领域技术人员应明白,本技术的实施例可提供为方法、系统或计算机程序产品。因此,本技术可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且,本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
277.本技术可以在由计算机执行的计算机可执行指令的一般上下文中描述,例如程序模块。一般地,程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本技术,在这些分布式计算环境中,由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中,程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
278.以上所述仅为本技术的实施例而已,并不用于限制本技术。对于本领域技术人员来说,本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本技术的权利要求范围之内。
技术特征:
1.一种页面生成方法,包括:获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作;响应于所述第一操作,在所述虚拟画布处的所述指定区域内展示所述目标控件;根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息;获取用户设置所述目标控件所需展示的目标内容的第二操作;响应于所述第二操作,根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息,生成目标页面。2.如权利要求1所述的方法,所述获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作,具体包括:获取用户针对所述虚拟画布以外的预设区域内展示的目标控件的拖动操作;所述拖动操作用于将所述目标控件拖动至所述虚拟画布内的指定区域处;或者,获取用户针对用于在所述虚拟画布内添加控件的预设控件的触发操作;所述触发操作用于指示在所述虚拟画布处的指定区域内添加目标控件;或者,获取用户针对所述虚拟画布内的指定区域的选中操作;获取用户针对所述选中操作所选中的所述指定区域执行的控件添加操作。3.如权利要求2所述的方法,所述在所述虚拟画布处的所述指定区域内展示所述目标控件之前,还包括:获取用户针对所述目标控件执行的展示尺寸设置操作;所述展示尺寸设置操作用于设置所述目标控件的初始展示尺寸;所述在所述虚拟画布处的所述指定区域内展示所述目标控件,具体包括:在所述虚拟画布处的所述指定区域内,展示具有所述初始展示尺寸的所述目标控件。4.如权利要求3所述的方法,所述获取用户针对所述目标控件执行的展示尺寸设置操作,具体包括:获取用户针对所述目标控件执行的初始展示宽度设置操作与初始展示高度设置操作中的至少一种;其中,所述初始展示宽度设置操作用于指示所述目标控件所在区域包含的所述虚拟画布处的列的数量,或者,指示所述目标控件所在区域包含的所述虚拟画布处的列的数量占比,或者,指示所述目标控件的初始展示宽度为第一预设值;所述初始展示高度设置操作用于指示所述目标控件所在区域包含的所述虚拟画布处的行的数量,或者,指示所述目标控件所在区域包含的所述虚拟画布处的行的数量占比,或者,指示所述目标控件的初始展示高度为第二预设值。5.如权利要求1所述的方法,所述根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息,具体包括:根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,生成各条容器间隔线;其中,所述容器间隔线为将各个所述目标控件的顶边及底边向两侧延伸,直至触及所述虚拟画布的侧边或者其他控件的侧边所构成的线段;根据所述容器间隔线,对各个所述目标控件所属的虚拟容器进行划分,得到各个所述目标控件所属的虚拟容器之间的嵌套关系信息;其中,所述嵌套关系信息用于反映所述目
标控件所属的各个等级的虚拟容器,以及不同等级的所述虚拟容器之间的嵌套关系。6.如权利要求5所述的方法,所述根据所述容器间隔线,对各个所述目标控件所属的虚拟容器进行划分,具体包括:将任意两条相邻的第一容器间隔线之间包含的所述目标控件,划分至同一第一等级的虚拟容器内;所述第一容器间隔线为起始点在所述虚拟画布的任一侧边上,且终止点在所述虚拟画布的另一侧边上的所述容器间隔线;若存在第二容器间隔线,则根据所述第二容器间隔线,对所述第一等级的虚拟容器中的所述目标控件所属的其他等级的虚拟容器进行划分,直至遍历所述第二容器间隔线;其中,所述第二容器间隔线为所述第一等级的虚拟容器内包含的所述容器间隔线;所述其他等级的虚拟容器为嵌套于所述第一等级的虚拟容器中的子容器。7.如权利要求6所述的方法,所述根据所述第二容器间隔线,对所述第一等级的虚拟容器中的所述目标控件所属的其他等级的虚拟容器进行划分,具体包括:针对任一所述第一等级的虚拟容器,确定出所述第一等级的虚拟容器内包含的长度最长的所述容器间隔线,得到第三容器间隔线;根据所述第三容器间隔线,将位于所述第一等级的虚拟容器中的所述目标控件划分至各个第二等级的虚拟容器内;其中,任一所述第二等级的虚拟容器中包含有位于所述第三容器间隔线左侧的所述目标控件,或者,包含有位于所述第三容器间隔线右侧的所述目标控件,或者,包含有位于所述第三容器间隔线上侧及下侧中的至少一种位置处的所述目标控件;针对任一所述第二等级的虚拟容器,判断是否所述第二等级的虚拟容器内未包含所述容器间隔线,得到第一判断结果;若所述第一判断结果表示所述第二等级的虚拟容器内未包含所述容器间隔线,则禁止对所述第二等级的虚拟容器内包含的所述目标控件继续进行容器划分。8.如权利要求7所述的方法,还包括:若所述第一判断结果表示所述第二等级的虚拟容器内包含有所述容器间隔线,则确定出所述第二等级的虚拟容器内包含的长度最长的所述容器间隔线,得到第四容器间隔线;根据所述第四容器间隔线,将位于所述第二等级的虚拟容器中的所述目标控件划分至各个第三等级的虚拟容器内;其中,任一所述第三等级的虚拟容器中包含有位于所述第四容器间隔线左侧的所述目标控件,或者,包含有位于所述第四容器间隔线右侧的所述目标控件,或者,包含有位于所述第四容器间隔线上侧及下侧中的至少一种位置处的所述目标控件;所述第三等级的虚拟容器为嵌套于所述第二等级的虚拟容器中的子容器。9.如权利要求1所述的方法,所述响应于所述第二操作,根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息,生成目标页面,具体包括:响应于所述第二操作,获取预先针对所述目标控件设置的控件调整策略;所述控件调整策略用于指示在所述目标控件的当前展示尺寸与所述目标控件所需展示的目标内容的实际展示尺寸不同时,对于所述目标控件的展示尺寸与展示位置中的至少一种的调整策略;根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,各
个所述目标控件所属的虚拟容器之间的嵌套关系信息,以及所述控件调整策略,确定各个所述目标控件的目标展示尺寸及目标展示位置;在所述目标展示位置处按照所述目标展示尺寸展示携带有所述目标内容的所述目标控件,得到目标页面。10.如权利要求9所述的方法,所述根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,各个所述目标控件所属的虚拟容器之间的嵌套关系信息,以及所述控件调整策略,确定各个所述目标控件的目标展示尺寸及目标展示位置,具体包括:针对任一所述目标控件,若所述控件调整策略具体用于指示禁止调整所述任一所述目标控件的展示尺寸,则将所述任一所述目标控件的当前展示尺寸确定为所述任一所述目标控件的目标展示尺寸,以及,将各个所述目标控件的当前展示位置确定为各个所述目标控件的目标展示位置;若所述控件调整策略具体用于指示允许调整所述任一所述目标控件的展示尺寸,则将所述任一所述目标控件所需展示的目标内容的实际展示尺寸确定为所述任一所述目标控件的目标展示尺寸;以及,根据所述任一所述目标控件的目标展示尺寸与当前展示尺寸之间的第一差值,各个所述目标控件的当前展示位置,各个所述目标控件所属的虚拟容器之间的嵌套关系信息,以及所述控件调整策略,对至少部分所述目标控件的展示位置与展示尺寸中的至少一种进行调整,得到各个所述目标控件的目标展示位置。11.如权利要求10所述的方法,所述根据所述任一所述目标控件的目标展示尺寸与当前展示尺寸之间的第一差值,各个所述目标控件的当前展示位置,各个所述目标控件所属的虚拟容器之间的嵌套关系信息,以及所述控件调整策略,对至少部分所述目标控件的展示位置与展示尺寸中的至少一种进行调整,得到各个所述目标控件的目标展示位置,具体包括:若所述控件调整策略指示允许在各个所述目标控件下方添加展示尺寸可调的预设空白区域,且所述任一所述目标控件的目标展示尺寸大于所述当前展示尺寸,则根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息,按照容器等级从低到高的顺序,对所述任一所述目标控件所属的各级虚拟容器中的第一控件下方的预设空白区域的高度增大所述第一差值,直至遍历所述任一所述目标控件所属的各级虚拟容器,得到各个所述目标控件的目标展示位置;其中,所述第一控件为所述任一所述目标控件所属的任一等级的虚拟容器中位于未被调整高度的列且与所述任一等级的虚拟容器的底边距离最近的控件;若所述控件调整策略指示允许在各个所述目标控件下方添加展示尺寸可调的预设空白区域,且所述任一所述目标控件的目标展示尺寸小于所述当前展示尺寸,则根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息,按照容器等级从低到高的顺序,对所述任一所述目标控件所属的各级虚拟容器中的第二控件下方的预设空白区域的高度、所述第二控件的当前展示高度以及所述任一所述目标控件下方的预设空白区域的高度中的至少一种进行调整,直至遍历所述任一所述目标控件所属的各级虚拟容器,得到各个所述目标控件的目标展示位置;其中,所述第二控件为所述任一所述目标控件所属的任一等级的虚拟容器中位于未被调整高度的列且与所述任一等级的虚拟容器的底边距离最近的控件。
12.如权利要求11所述的方法,所述根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息,按照容器等级从低到高的顺序,对所述任一所述目标控件所属的各级虚拟容器中的第一控件下方的预设空白区域的高度增大所述第一差值,具体包括:判断所述任一所述目标控件所属的等级最低的虚拟容器中是否包含第三控件,得到第二判断结果;所述第三控件为位于所述等级最低的虚拟容器中除所述任一所述目标控件所在列以外的列处,且与所述等级最低的虚拟容器的底边距离最近的所述目标控件;若所述第二判断结果表示所述任一所述目标控件所属的等级最低的虚拟容器中包含第三控件,则将所述第三控件下方的预设空白区域的高度增大所述第一差值。13.如权利要求12所述的方法,还包括:若存在所述任一所述目标控件所属的等级第二低的虚拟容器,则判断所述等级第二低的虚拟容器中是否包含第四控件,得到第三判断结果;所述第四控件为位于所述等级第二低的虚拟容器中除所述任一所述目标控件以及所述第三控件所在列以外的列处,且与所述等级第二低的虚拟容器的底边距离最近的所述目标控件;所述等级最低的虚拟容器为嵌套于所述等级第二低的虚拟容器内的子容器;若所述第三判断结果表示所述等级第二低的虚拟容器中包含第四控件,则将所述第四控件下方的预设空白区域的高度增大所述第一差值。14.如权利要求11所述的方法,所述根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息,按照容器等级从低到高的顺序,对所述任一所述目标控件所属的各级虚拟容器中的第二控件下方的预设空白区域的高度、所述第二控件的当前展示高度以及所述任一所述目标控件下方的预设空白区域的高度中的至少一种进行调整,具体包括:判断所述任一所述目标控件所属的等级最低的虚拟容器中是否包含第五控件,得到第四判断结果;所述第五控件为位于所述等级最低的虚拟容器中除所述任一所述目标控件所在列以外的列处,且与所述等级最低的虚拟容器的底边距离最近的所述目标控件;若所述第四判断结果表示所述任一所述目标控件所属的等级最低的虚拟容器中包含第五控件,则判断所述第五控件下方的预设空白区域的当前高度是否大于等于所述第一差值,得到第五判断结果;若所述第五判断结果表示所述第五控件下方的预设空白区域的当前高度大于等于所述第一差值,则将所述第五控件下方的预设空白区域的高度减小所述第一差值;若所述第五判断结果表示所述第五控件下方的预设空白区域的当前高度小于所述第一差值,则将所述第五控件下方的预设空白区域的高度减小至零,以及,将所述第五控件的展示高度减小第二差值;其中,所述第二差值为所述第五控件下方的预设空白区域的当前高度与所述第一差值之差;或者,若所述第五判断结果表示所述第五控件下方的预设空白区域的当前高度小于所述第一差值,则将所述第五控件下方的预设空白区域的高度减小至零,以及,将所述任一所述目标控件下方的预设空白区域的高度增大所述第二差值。15.如权利要求14所述的方法,还包括:若存在所述任一所述目标控件所属的等级第二低的虚拟容器,则判断所述等级第二低的虚拟容器中是否包含第六控件,得到第六判断结果;所述第六控件为位于所述等级第二低的虚拟容器中除所述任一所述目标控件以及所述第五控件所在列以外的列处,且与所述
等级第二低的虚拟容器的底边距离最近的所述目标控件;所述等级最低的虚拟容器为嵌套于所述等级第二低的虚拟容器内的子容器;若所述第六判断结果表示所述等级第二低的虚拟容器中包含第六控件,且已将所述第五控件下方的预设空白区域的高度减小所述第一差值,或者,已将所述第五控件下方的预设空白区域的高度减小至零以及将所述第五控件的展示高度减小了所述第二差值,则判断所述第六控件下方的预设空白区域的当前高度是否大于等于所述第一差值,得到第七判断结果;若所述第七判断结果表示所述第六控件下方的预设空白区域的当前高度大于等于所述第一差值,则将所述第六控件下方的预设空白区域的高度减小所述第一差值;若所述第七判断结果表示所述第六控件下方的预设空白区域的当前高度小于所述第一差值,则将所述第六控件下方的预设空白区域的高度减小至零,以及,将所述第六控件的展示高度减小第三差值;其中,所述第三差值为所述第六控件下方的预设空白区域的当前高度与所述第一差值之差;或者,若所述第七判断结果表示所述第六控件下方的预设空白区域的当前高度小于所述第一差值,则将所述第六控件下方的预设空白区域的高度减小至零,以及,将所述任一所述目标控件下方的预设空白区域的高度增大所述第三差值;若所述第六判断结果表示所述等级第二低的虚拟容器中包含第六控件,且已将所述第五控件下方的预设空白区域的高度减小至零,以及,将所述任一所述目标控件下方的预设空白区域的高度增大所述第二差值,则判断所述第六控件下方的预设空白区域的当前高度是否大于等于目标值,得到第八判断结果;所述目标值为将所述第五控件下方的预设空白区域的高度减小至零时所减小的高度值;若所述第八判断结果表示所述第六控件下方的预设空白区域的当前高度大于等于目标值,则将所述第六控件下方的预设空白区域的高度减小所述目标值;若所述第八判断结果表示所述第六控件下方的预设空白区域的当前高度小于目标值,则将所述第六控件下方的预设空白区域的高度减小至零,以及,将所述第六控件的展示高度减小第四差值;其中,所述第四差值为所述第六控件下方的预设空白区域的当前高度与所述目标值之差;或者,若所述第八判断结果表示所述第六控件下方的预设空白区域的当前高度小于目标值,则将所述第六控件下方的预设空白区域的高度减小至零,以及,将所述任一所述目标控件下方的预设空白区域的高度增大所述第四差值。16.一种页面生成装置,包括:第一获取模块,用于获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作;控件展示模块,用于响应于所述第一操作,在所述虚拟画布处的所述指定区域内展示所述目标控件;容器嵌套关系确定模块,用于根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息;第二获取模块,用于获取用户设置所述目标控件所需展示的目标内容的第二操作;页面生成模块,用于响应于所述第二操作,根据各个所述目标控件的展示位置信息,各
个所述目标控件所需展示的目标内容,以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息,生成目标页面。17.如权利要求16所述的装置,所述第一获取模块,包括:第一获取单元,用于获取用户针对所述虚拟画布以外的预设区域内展示的目标控件的拖动操作;所述拖动操作用于将所述目标控件拖动至所述虚拟画布内的指定区域处;或者,第二获取单元,用于获取用户针对用于在所述虚拟画布内添加控件的预设控件的触发操作;所述触发操作用于指示在所述虚拟画布处的指定区域内添加目标控件;或者,第三获取单元,用于获取用户针对所述虚拟画布内的指定区域的选中操作;第四获取单元,用于获取用户针对所述选中操作所选中的所述指定区域执行的控件添加操作。18.如权利要求16所述的装置,所述容器嵌套关系确定模块,具体包括:间隔线生成单元,用于根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,生成各条容器间隔线;其中,所述容器间隔线为将各个所述目标控件的顶边及底边向两侧延伸,直至触及所述虚拟画布的侧边或者其他控件的侧边所构成的线段;虚拟容器划分单元,用于根据所述容器间隔线,对各个所述目标控件所属的虚拟容器进行划分,得到各个所述目标控件所属的虚拟容器之间的嵌套关系信息;其中,所述嵌套关系信息用于反映所述目标控件所属的各个等级的虚拟容器,以及不同等级的所述虚拟容器之间的嵌套关系。19.如权利要求18所述的装置,所述虚拟容器划分单元,具体包括:第一划分子单元,用于将任意两条相邻的第一容器间隔线之间包含的所述目标控件,划分至同一第一等级的虚拟容器内;所述第一容器间隔线为起始点在所述虚拟画布的任一侧边上,且终止点在所述虚拟画布的另一侧边上的所述容器间隔线;第二划分子单元,用于若存在第二容器间隔线,则根据所述第二容器间隔线,对所述第一等级的虚拟容器中的所述目标控件所属的其他等级的虚拟容器进行划分,直至遍历所述第二容器间隔线;其中,所述第二容器间隔线为所述第一等级的虚拟容器内包含的所述容器间隔线;所述其他等级的虚拟容器为嵌套于所述第一等级的虚拟容器中的子容器。20.如权利要求19所述的装置,所述第二划分子单元,具体用于:针对任一所述第一等级的虚拟容器,确定出所述第一等级的虚拟容器内包含的长度最长的所述容器间隔线,得到第三容器间隔线;根据所述第三容器间隔线,将位于所述第一等级的虚拟容器中的所述目标控件划分至各个第二等级的虚拟容器内;其中,任一所述第二等级的虚拟容器中包含有位于所述第三容器间隔线左侧的所述目标控件,或者,包含有位于所述第三容器间隔线右侧的所述目标控件,或者,包含有位于所述第三容器间隔线上侧及下侧中的至少一种位置处的所述目标控件;针对任一所述第二等级的虚拟容器,判断是否所述第二等级的虚拟容器内未包含所述容器间隔线,得到第一判断结果;若所述第一判断结果表示所述第二等级的虚拟容器内未包含所述容器间隔线,则禁止对所述第二等级的虚拟容器内包含的所述目标控件继续进行容器划分。21.如权利要求20所述的装置,所述第二划分子单元,还用于:
若所述第一判断结果表示所述第二等级的虚拟容器内包含有所述容器间隔线,则确定出所述第二等级的虚拟容器内包含的长度最长的所述容器间隔线,得到第四容器间隔线;根据所述第四容器间隔线,将位于所述第二等级的虚拟容器中的所述目标控件划分至各个第三等级的虚拟容器内;其中,任一所述第三等级的虚拟容器中包含有位于所述第四容器间隔线左侧的所述目标控件,或者,包含有位于所述第四容器间隔线右侧的所述目标控件,或者,包含有位于所述第四容器间隔线上侧及下侧中的至少一种位置处的所述目标控件;所述第三等级的虚拟容器为嵌套于所述第二等级的虚拟容器中的子容器。22.如权利要求16所述的装置,所述页面生成模块,包括:第五获取单元,用于响应于所述第二操作,获取预先针对所述目标控件设置的控件调整策略;所述控件调整策略用于指示在所述目标控件的当前展示尺寸与所述目标控件所需展示的目标内容的实际展示尺寸不同时,对于所述目标控件的展示尺寸与展示位置中的至少一种的调整策略;控件调整单元,用于根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,各个所述目标控件所属的虚拟容器之间的嵌套关系信息,以及所述控件调整策略,确定各个所述目标控件的目标展示尺寸及目标展示位置;页面生成单元,用于在所述目标展示位置处按照所述目标展示尺寸展示携带有所述目标内容的所述目标控件,得到目标页面。23.如权利要求22所述的装置,所述控件调整单元,包括:第一确定子单元,用于针对任一所述目标控件,若所述控件调整策略具体用于指示禁止调整所述任一所述目标控件的展示尺寸,则将所述任一所述目标控件的当前展示尺寸确定为所述任一所述目标控件的目标展示尺寸,以及,将各个所述目标控件的当前展示位置确定为各个所述目标控件的目标展示位置;第二确定子单元,用于若所述控件调整策略具体用于指示允许调整所述任一所述目标控件的展示尺寸,则将所述任一所述目标控件所需展示的目标内容的实际展示尺寸确定为所述任一所述目标控件的目标展示尺寸;以及,控件调整子单元,用于根据所述任一所述目标控件的目标展示尺寸与当前展示尺寸之间的第一差值,各个所述目标控件的当前展示位置,各个所述目标控件所属的虚拟容器之间的嵌套关系信息,以及所述控件调整策略,对至少部分所述目标控件的展示位置与展示尺寸中的至少一种进行调整,得到各个所述目标控件的目标展示位置。24.如权利要求23所述的装置,所述控件调整子单元,具体用于:若所述控件调整策略指示允许在各个所述目标控件下方添加展示尺寸可调的预设空白区域,且所述任一所述目标控件的目标展示尺寸大于所述当前展示尺寸,则根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息,按照容器等级从低到高的顺序,对所述任一所述目标控件所属的各级虚拟容器中的第一控件下方的预设空白区域的高度增大所述第一差值,直至遍历所述任一所述目标控件所属的各级虚拟容器,得到各个所述目标控件的目标展示位置;其中,所述第一控件为所述任一所述目标控件所属的任一等级的虚拟容器中位于未被调整高度的列且与所述任一等级的虚拟容器的底边距离最近的控件;若所述控件调整策略指示允许在各个所述目标控件下方添加展示尺寸可调的预设空白区域,且所述任一所述目标控件的目标展示尺寸小于所述当前展示尺寸,则根据各个所
述目标控件所属的虚拟容器之间的嵌套关系信息,按照容器等级从低到高的顺序,对所述任一所述目标控件所属的各级虚拟容器中的第二控件下方的预设空白区域的高度、所述第二控件的当前展示高度以及所述任一所述目标控件下方的预设空白区域的高度中的至少一种进行调整,直至遍历所述任一所述目标控件所属的各级虚拟容器,得到各个所述目标控件的目标展示位置;其中,所述第二控件为所述任一所述目标控件所属的任一等级的虚拟容器中位于未被调整高度的列且与所述任一等级的虚拟容器的底边距离最近的控件。25.一种页面生成设备,包括:至少一个处理器;以及,与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够:获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作;响应于所述第一操作,在所述虚拟画布处的所述指定区域内展示所述目标控件;根据所述虚拟画布内包含的各个所述目标控件的展示位置信息,确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息;获取用户设置所述目标控件所需展示的目标内容的第二操作;响应于所述第二操作,根据各个所述目标控件的展示位置信息,各个所述目标控件所需展示的目标内容,以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息,生成目标页面。
技术总结
本说明书实施例中公开了一种页面生成方法、装置及设备。该方案可以包括:在获取到用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作后,可以在虚拟画布处的指定区域内展示目标控件,并根据虚拟画布内包含的各个目标控件的展示位置信息,自动确定各个目标控件所属的虚拟容器之间的嵌套关系信息;后续,在获取到用户设置目标控件所需展示的目标内容的第二操作后,就可以根据各个目标控件的展示位置信息,各个目标控件所需展示的目标内容,以及各个目标控件所属的虚拟容器之间的嵌套关系信息,生成展示有各个携带了目标内容的目标控件的目标页面了。内容的目标控件的目标页面了。内容的目标控件的目标页面了。
技术研发人员:吴钊
受保护的技术使用者:支付宝(杭州)信息技术有限公司
技术研发日:2023.07.20
技术公布日:2023/10/20
版权声明
本文仅代表作者观点,不代表航家之家立场。
本文系作者授权航家号发表,未经原创作者书面授权,任何单位或个人不得引用、复制、转载、摘编、链接或以其他任何方式复制发表。任何单位或个人在获得书面授权使用航空之家内容时,须注明作者及来源 “航空之家”。如非法使用航空之家的部分或全部内容的,航空之家将依法追究其法律责任。(航空之家官方QQ:2926969996)
航空之家 https://www.aerohome.com.cn/
航空商城 https://mall.aerohome.com.cn/
航空资讯 https://news.aerohome.com.cn/
上一篇:一种滚筒式餐厨废弃物烘干机的制作方法 下一篇:一种自行车车架加工冲压机构的制作方法