CN110109729B - 一种界面的布局调整方法、装置、电子设备及存储介质 - Google Patents

一种界面的布局调整方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN110109729B
CN110109729B CN201910394210.6A CN201910394210A CN110109729B CN 110109729 B CN110109729 B CN 110109729B CN 201910394210 A CN201910394210 A CN 201910394210A CN 110109729 B CN110109729 B CN 110109729B
Authority
CN
China
Prior art keywords
grid
block
current
interface
grids
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201910394210.6A
Other languages
English (en)
Other versions
CN110109729A (zh
Inventor
梁泽华
李升起
赵洪飞
骆何飞
包宇津
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Baidu Netcom Science and Technology Co Ltd
Original Assignee
Beijing Baidu Netcom Science and Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Baidu Netcom Science and Technology Co Ltd filed Critical Beijing Baidu Netcom Science and Technology Co Ltd
Priority to CN201910394210.6A priority Critical patent/CN110109729B/zh
Publication of CN110109729A publication Critical patent/CN110109729A/zh
Application granted granted Critical
Publication of CN110109729B publication Critical patent/CN110109729B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Landscapes

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

Abstract

本发明实施例公开了一种界面的布局调整方法、装置、电子设备及存储介质。所述方法包括:接收应用程序APP中的界面对应的布局调整指令;响应于所述界面对应的布局调整指令,在服务器中获取所述界面对应的布局调整文件;根据所述界面对应的布局调整文件对所述界面进行布局调整。在本发明实施例中,不仅可以节约时间成本和人力成本,而且时效性很强,可以满足用户对界面调整的灵活性要求。

Description

一种界面的布局调整方法、装置、电子设备及存储介质
技术领域
本发明实施例涉及互联网技术领域,尤其涉及一种界面的布局调整方法、装置、电子设备及存储介质。
背景技术
随着移动智能设备在日常生活中扮演的角色越来越重要,用户对应用程序APP的要求也越来越挑剔。是否能够吸引用户使用某一个APP以及是否能够使用户长时间留存在该APP中,作为直接呈现给用户的界面在其中起到了举足轻重的作用。通常情况下,APP厂商通常会借节日或者发布新活动的契机,将APP的界面进行调整。而如今随着节日或者新活动越来越密集,APP的界面的布局调整要求也愈加频繁。因此,APP频繁的调整迭代也不可避免。
在现有技术中,若要对APP中的界面进行大幅度调整,往往都需要通过发布该APP的新版本来解决,而发布新版本的流程非常繁琐,其中包括:重写界面的布局代码、重新打包应用、测试、向各个应用市场和渠道换包、提示用户升级、用户下载以及覆盖安装等。但是,在APP的应用功能没有大幅度调整,且发布新版本的需求又大多集中于界面调整的情况下,若通过发布新版本对各个界面进行布局调整,不仅时间成本和人力成本会非常高,而且时效性很差,不能满足用户对布局调整的灵活性要求。
发明内容
有鉴于此,本发明实施例提供一种界面的布局调整方法、装置、电子设备及存储介质,不仅可以节约时间成本和人力成本,而且时效性很强,可以满足用户对布局调整的灵活性要求。
第一方面,本发明实施例提供了一种界面的布局调整方法,所述方法包括:
接收应用程序APP中的界面对应的布局调整指令;
响应于所述界面对应的布局调整指令,在服务器中获取所述界面对应的布局调整文件;
根据所述界面对应的布局调整文件对所述界面进行布局调整。
在上述实施例中,所述根据所述界面对应的布局调整文件界面进行布局调整,包括:
将所述界面和所述布局调整文件分别作为当前栅格和当前元素;
根据所述当前元素判断所述当前栅格是否满足预先设置的划分条件;
若判定所述当前栅格满足预先设置的划分条件,在所述当前元素中提取出各个子栅格对应的子元素;根据各个子元素将所述当前栅格划分为各个子栅格;将各个子栅格和各个子元素分别作为所述当前栅格和所述当前元素,重复执行上述操作,直到所述当前栅格不满足所述预先设置的划分条件;
若判定所述当前栅格不满足所述预先设置的划分条件,在所述当前栅格对应的元素中提取出所述当前栅格对应的统一资源定位符URL;并根据所述当前栅格对应的URL显示所述当前栅格中的填充内容。
在上述实施例中,所述根据所述当前栅格对应的数组判断所述当前栅格是否满足预先设置的划分条件,包括:
若所述当前元素为行栅格对应的数组或者块栅格对应的数组,判定所述当前栅格满足所述预先设置的划分条件;所述行栅格对应的数组包括:至少两个行元素;所述块栅格对应的数组包括:至少两个块元素。
在上述实施例中,所述根据各个子元素将所述当前栅格划分为各个子栅格,包括:
若所述当前元素为所述行栅格对应的数组,在所述行栅格对应的数组中提取出各个行元素;根据所述行栅格对应的数组中的各个行元素,将所述当前栅格划分为至少两个行栅格;
若所述当前元素为所述块栅格对应的数组,在所述块栅格对应的数组中提取出各个块元素;根据所述块栅格对应的数组中的各个块元素,将所述当前栅格划分为至少两个块栅格。
在上述实施例中,所述根据所述行栅格对应的数组中的各个行元素,将所述当前栅格划分为至少两个行栅格,包括:
在各个行元素中提取出各个行栅格对应的高度信息;
根据各个行栅格对应的高度信息,将所述当前栅格划分为至少两个行栅格。
在上述实施例中,所述根据所述块栅格对应的数组中的各个块元素,将所述当前栅格划分为至少两个块栅格,包括:
在各个块元素中提取出全部块栅格对应的布局方向和各个块栅格对应的视图权重;
根据全部块栅格对应的布局方向和各个块栅格对应的视图权重,将所述当前栅格划分为至少两个块栅格。
在上述实施例中,所述根据全部块栅格对应的布局方向和各个块栅格对应的视图权重,将所述当前栅格划分为至少两个块栅格,包括:
根据全部块栅格对应的布局方向,将所述当前栅格划分为各个块栅格对应的布局单元;
根据各个块栅格对应的视图权重,将各个块栅格对应的布局单元调整为与各个块栅格对应的视图权重相匹配的视图大小。
第二方面,本发明实施例提供了一种界面的调整装置,所述装置包括:接收模块、获取模块和调整模块;其中,
所述接收模块,用于接收应用程序APP中的界面对应的布局调整指令;
所述获取模块,用于响应于所述界面对应的布局调整指令,在服务器中获取所述界面对应的布局调整文件;
所述调整模块,用于根据所述界面对应的布局调整文件,对所述界面进行布局调整。
在上述实施例中,所述调整模块包括:判断子模块、划分子模块和显示子模块;其中,
所述判断子模块,用于将所述界面和所述布局调整文件分别作为当前栅格和当前元素;根据所述当前元素判断所述当前栅格是否满足预先设置的划分条件;
所述划分子模块,用于若判定所述当前栅格满足预先设置的划分条件,在所述当前元素中提取出各个子栅格对应的子元素;根据各个子元素将所述当前栅格划分为各个子栅格;将各个子栅格和各个子元素分别作为所述当前栅格和所述当前元素,重复执行上述操作,直到所述当前栅格不满足所述预先设置的划分条件;
所述显示子模块,用于若判定所述当前栅格不满足所述预先设置的划分条件,在所述当前栅格对应的元素中提取出所述当前栅格对应的统一资源定位符URL;并根据所述当前栅格对应的URL显示所述当前栅格中的填充内容。
在上述实施例中,所述判断子模块,具体用于若所述当前元素为行栅格对应的数组或者块栅格对应的数组,判定所述当前栅格满足所述预先设置的划分条件;所述行栅格对应的数组包括:至少两个行元素;所述块栅格对应的数组包括:至少两个块元素。
在上述实施例中,所述划分子模块,具体用于若所述当前元素为所述行栅格对应的数组,在所述行栅格对应的数组中提取出各个行元素;根据所述行栅格对应的数组中的各个行元素,将所述当前栅格划分为至少两个行栅格;若所述当前元素为所述块栅格对应的数组,在所述块栅格对应的数组中提取出各个块元素;根据所述块栅格对应的数组中的各个块元素,将所述当前栅格划分为至少两个块栅格。
在上述实施例中,所述划分子模块,具体用于在各个行元素中提取出各个行栅格对应的高度信息;根据各个行栅格对应的高度信息,将所述当前栅格划分为至少两个行栅格。
在上述实施例中,所述划分子模块,具体用于在各个块元素中提取出全部块栅格对应的布局方向和各个块栅格对应的视图权重;根据全部块栅格对应的布局方向和各个块栅格对应的视图权重,将所述当前栅格划分为至少两个块栅格。
在上述实施例中,所述划分子模块,具体根据全部块栅格对应的布局方向,将所述当前栅格划分为各个块栅格对应的布局单元;根据各个块栅格对应的视图权重,将各个块栅格对应的布局单元调整为与各个块栅格对应的视图权重相匹配的视图大小。
第三方面,本发明实施例提供了一种电子设备,包括:
一个或多个处理器;
存储器,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现本发明任意实施例所述的界面的布局调整方法。
第四方面,本发明实施例提供了一种存储介质,其上存储有计算机程序,该程序被处理器执行时实现本发明任意实施例所述的界面的布局调整方法。
本发明实施例提出了一种界面的布局调整方法、装置、电子设备及存储介质,先接收APP中的界面对应的布局调整指令;然后响应于界面对应的布局调整指令,在服务器中获取界面对应的布局调整文件;再根据界面对应的布局调整文件对界面进行布局调整。也就是说,在本发明的技术方案中,可以针对每一个界面获取与其对应的布局调整文件,并根据每一个界面对应的布局调整文件对每一个界面进行布局调整。而在现有的界面的布局调整方法中,若要对APP中的界面进行大幅度调整,往往都需要通过发布该APP的新版本来解决,发布新版本的流程非常繁琐;在APP的应用功能没有大幅度调整,且发布新版本的需求又大多集中于界面调整的情况下,若通过发布新版本对各个界面进行布局调整,不仅时间成本和人力成本会非常高,而且时效性很差,不能满足用户对布局调整的灵活性要求。因此,和现有技术相比,本发明实施例提出的界面的布局调整方法、装置、电子设备及存储介质,不仅可以节约时间成本和人力成本,而且时效性很强,可以满足用户对布局调整的灵活性要求;并且,本发明实施例的技术方案实现简单方便、便于普及,适用范围更广。
附图说明
图1为本发明实施例一提供的界面的布局调整方法的流程示意图;
图2为本发明实施例二提供的界面的布局调整方法的流程示意图;
图3为本发明实施例二提供的界面的结构示意图;
图4为本发明实施例二提供的栅格树的结构示意图;
图5为本发明实施例三提供的界面的布局调整方法的流程示意图;
图6为本发明实施例四提供的界面的布局调整装置的第一结构示意图;
图7为本发明实施例四提供的界面的布局调整装置的第二结构示意图
图8为本发明实施例五提供的电子设备的结构示意图。
具体实施方式
下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释本发明,而非对本发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本发明相关的部分而非全部内容。
实施例一
图1为本发明实施例一提供的界面的布局调整方法的流程示意图,该方法可以由界面的布局调整装置或者电子设备来执行,该装置或者电子设备可以由软件和/或硬件的方式实现,该装置或者电子设备可以集成在任何具有网络通信功能的智能设备中。如图1所示,界面的布局调整方法可以包括以下步骤:
S101、接收APP中的界面对应的布局调整指令。
在本发明的具体实施例中,电子设备可以接收APP中的界面对应的布局调整指令;其中,该布局调整指令可以是该电子设备自动生成的布局调整指令;也可以是其他电子设备发送的布局调整指令。例如,当APP中的界面对应的布局调整按钮被用户触发时,电子设备可以自动生成一个布局调整指令;另外,电子设备还可以接收服务器发送的布局调整指令;在此不做任何限定。
S102、响应于界面对应的布局调整指令,在服务器中获取界面对应的布局调整文件。
在本发明的具体实施例中,电子设备可以响应于界面对应的布局调整指令,在服务器中获取界面对应的布局调整文件。具体地,电子设备可以向服务器发送界面对应的布局调整请求;其中,布局调整请求中携带界面的界面标识;然后接收服务器返回的布局调整请求对应的布局调整响应;其中,布局调整响应中携带界面对应的布局调整文件。
S103、根据界面对应的布局调整文件对界面进行布局调整。
在本发明的具体实施例中,电子设备可以根据界面对应的布局调整文件对界面进行布局调整。具体地,电子设备可以先将界面和布局调整文件分别作为当前栅格和当前元素;然后根据当前元素判断当前栅格是否满足预先设置的划分条件;若判定当前栅格满足预先设置的划分条件,在当前元素中提取出各个子栅格对应的子元素;根据各个子元素将当前栅格划分为各个子栅格;将各个子栅格和各个子元素分别作为当前栅格和当前元素,重复执行上述操作,直到当前栅格不满足预先设置的划分条件;若判定当前栅格不满足预先设置的划分条件,在当前栅格对应的元素中提取出当前栅格对应的URL;并根据当前栅格对应的URL显示当前栅格中的填充内容。
在本发明的具体实施例中,若当前元素为行栅格对应的数组或者块栅格对应的数组,电子设备可以判定当前栅格满足预先设置的划分条件;行栅格对应的数组包括:至少两个行元素;块栅格对应的数组包括:至少两个块元素。例如,行栅格对应的数组可以是images数组;块栅格对应的数组可以是children数组。若当前元素不为行栅格对应的数组或者块栅格对应的数组,电子设备可以判定当前栅格不满足预先设置的划分条件。
在本发明的具体实施例中,若当前元素为行栅格对应的数组或者块栅格对应的数组,表示当前栅格可以被继续划分为更小的栅格;此时将当前栅格称为非叶子栅格。若当前元素不为行栅格对应的数组或者块栅格对应的数组,表示当前栅格不可以被继续划分为更小的栅格;此时将当前栅格称为叶子栅格。
本发明实施例提出的界面的布局调整方法,先接收APP中的界面对应的布局调整指令;然后响应于界面对应的布局调整指令,在服务器中获取界面对应的布局调整文件;再根据界面对应的布局调整文件对界面进行布局调整。也就是说,在本发明的技术方案中,可以针对每一个界面获取与其对应的布局调整文件,并根据每一个界面对应的布局调整文件对每一个界面进行布局调整。而在现有的界面的布局调整方法中,若要对APP中的界面进行大幅度调整,往往都需要通过发布该APP的新版本来解决,发布新版本的流程非常繁琐;在APP的应用功能没有大幅度调整,且发布新版本的需求又大多集中于布局调整的情况下,若通过发布新版本对各个界面进行布局调整,不仅时间成本和人力成本会非常高,而且时效性很差,不能满足用户对布局调整的灵活性要求。因此,和现有技术相比,本发明实施例提出的界面的布局调整方法,不仅可以节约时间成本和人力成本,而且时效性很强,可以满足用户对布局调整的灵活性要求;并且,本发明实施例的技术方案实现简单方便、便于普及,适用范围更广。
实施例二
图2为本发明实施例二提供的界面的布局调整方法的流程示意图。如图2所示,界面的布局调整方法可以包括以下步骤:
S201、接收APP中的界面对应的布局调整指令。
在本发明的具体实施例中,电子设备可以接收APP中的界面对应的布局调整指令;其中,该布局调整指令可以是该电子设备自动生成的布局调整指令;也可以是其他电子设备发送的布局调整指令。例如,当APP中的界面对应的布局调整按钮被用户触发时,电子设备可以自动生成一个布局调整指令;另外,电子设备还可以接收服务器发送的布局调整指令;在此不做任何限定。
S202、响应于界面对应的布局调整指令,在服务器中获取界面对应的布局调整文件。
在本发明的具体实施例中,电子设备可以响应于界面对应的布局调整指令,在服务器中获取界面对应的布局调整文件。具体地,电子设备可以响应于界面对应的布局调整指令,向服务器发送界面对应的布局调整请求;其中,布局调整请求中携带界面的界面标识;然后接收服务器返回的布局调整请求对应的布局调整响应;其中,布局调整响应中携带界面对应的布局调整文件。例如,电子设备可以响应于界面1对应的布局调整指令,向服务器发送界面1对应的布局调整请求1;其中,布局调整请求1中携带界面1的界面标识;然后电子设备可以接收服务器返回的布局调整请求1对应的布局调整响应1;其中,布局调整响应1中携带界面1对应的布局调整文件。
S203、将界面和布局调整文件分别作为当前栅格和当前元素。
在本步骤中,电子设备将界面和布局调整文件分别作为当前栅格和当前元素。
S204、根据当前元素判断当前栅格是否满足预先设置的划分条件;若是,执行S205;否则,执行S206。
在本发明的具体实施例中,电子设备可以根据当前元素判断当前栅格是否满足预先设置的划分条件;若判定当前栅格满足预先设置的划分条件,执行S205;若判定当前栅格不满足预先设置的划分条件,执行S206。具体地,若当前元素为行栅格对应的数组或者块栅格对应的数组,电子设备可以判定当前栅格满足预先设置的划分条件;若当前元素不为行栅格对应的数组或者块栅格对应的数组,电子设备可以判定当前栅格不满足预先设置的划分条件;其中,行栅格对应的数组包括:至少两个行元素;块栅格对应的数组包括:至少两个块元素。
在本发明的具体实施例中,布局调整文件可以是一个json格式的数据,举例说明,json格式的数据如下所示:
Figure BDA0002057627470000111
Figure BDA0002057627470000121
其中,images数组为行栅格对应的数组;images数组中的行元素的个数表示界面可以被划分为行栅格的个数;children数组为块栅格对应的数组;children数组中的块元素的个数表示当前栅格可以被划分为块栅格的个数;height表示每一个行栅格的高度;orientation表示当前栅格中的全部块栅格的布局方向;其中,v表示垂直方向;h表示水平方向;image表示每一个叶子栅格对应的统一资源定位符URL;weight表示每一个块栅格的视图权重。
S205、在当前元素中提取出各个子栅格对应的子元素;根据各个子元素将当前栅格划分为各个子栅格,将各个子栅格和各个子元素分别作为当前栅格和当前元素,返回执行S204,直到当前栅格不满足预先设置的划分条件。
在本发明的具体实施例中,若判定当前栅格满足预先设置的划分条件,电子设备可以根据当前元素将当前栅格划分为各个子栅格;将各个子栅格和各个子元素分别作为当前栅格和当前元素,返回执行S204,直到当前栅格不满足预先设置的划分条件。具体地,若当前元素为行栅格对应的数组,电子设备可以在行栅格对应的数组中提取出各个行元素;然后根据行栅格对应的数组中的各个行元素,将当前栅格划分为至少两个行栅格;再将各个行栅格和各个行元素分别作为当前栅格和当前元素,返回执行S204,直到当前栅格不满足预先设置的划分条件。若当前元素为块栅格对应的数组,电子设备可以在块栅格对应的数组中提取出各个块元素;然后根据块栅格对应的数组中的各个块元素,将当前栅格划分为至少两个块栅格。再将各个块栅格和各个块元素分别作为当前栅格和当前元素,返回执行S204,直到当前栅格不满足预先设置的划分条件。
在本发明的具体实施例中,电子设备在将当前栅格划分为至少两个行栅格时,可以在各个行元素中提取出各个行栅格对应的高度信息;根据各个行栅格对应的高度信息,将当前栅格划分为至少两个行栅格。此外,电子设备在将当前栅格划分为至少两个块栅格时,可以在各个块元素中提取出全部块栅格对应的布局方向和各个块栅格对应的视图权重;根据全部块栅格对应的布局方向和各个块栅格对应的视图权重,将当前栅格划分为至少两个块栅格。
S206、在当前栅格对应的数组中提取出当前栅格对应的URL;并根据当前栅格对应的URL显示当前栅格中的填充内容。
在本发明的具体实施例中,若判定当前栅格不满足预先设置的划分条件,电子设备可以在当前栅格对应的数组中提取出当前栅格对应的URL;并根据当前栅格对应的URL显示当前栅格中的填充内容。
图3为本发明实施例二提供的界面的结构示意图。如图3所示,界面包括两个行栅格,分别为:第一行栅格和第二行栅格;其中,第一行栅格包括:A块栅格和B块栅格;第二行栅格包括:C1块栅格、C2块栅格、C3块栅格和C4块栅格;进一步的,B块栅格包括:B1块栅格和B2块栅格;B2块栅格包括:D块栅格和E块栅格。
图4为本发明实施例二提供的栅格树的结构示意图。如图4所示,界面对应的栅格树包括五层视图,分别为:根视图、第一层视图、第二层视图、第三层视图和第四层视图;其中,根视图为界面对应的栅格树的树根;第一层视图包括:第一行栅格和第二行栅格;第二层视图包括:A块栅格和B块栅格;以及C1块栅格、C2块栅格、C3块栅格和C4块栅格;第三层视图包括:B1块栅格和B2块栅格;第四层视图包括:D块栅格和E块栅格。
在上述实施例中,images数组包括两个行元素,分别为:第一行元素和第二行元素;因此可以先将界面划分为两个栅格(即两个矩形区域),分别为:第一行栅格和第二行栅格;其中,第一行栅格的高度为212像素单位,宽度为默认宽度;第二行栅格的高度为138像素单元,宽度为默认宽度。在row1中,第一行元素中存在一个children数组,表示第一行元素对应的行栅格为非叶子栅格,可以被继续划分为更小的栅格。该children数组包括两个块元素,分别为:A块元素与B块元素,因此可以再将第一行栅格划分为A块栅格和B块栅格。进一步的,A块元素中不存在children数组,表示A块元素对应的A块栅格为叶子栅格,无法被继续划分为更小的栅格;B块元素中存在一个children数组,表示B块元素对应的B块栅格为非叶子栅格,可以被继续划分为更小的栅格。由于该children数组包括两个块元素,分别为:B1块元素和B2块元素,因此可以再将B块栅格划分为B1块栅格和B2块栅格。进一步的,B1块元素中不存在children数组,表示B1块元素对应的B1块栅格为叶子栅格,无法被继续划分为更小的栅格;B2块元素中存在一个children数组,表示B2块元素对应的B2块栅格为非叶子栅格,可以被继续划分为更小的栅格。进一步的,该children数组包括两个块元素,分别为:D块元素和E块元素,因此可以再将B1块栅格划分为D块栅格和E块栅格。D块元素中不存在children数组,表示D块元素对应的D块栅格为叶子栅格,无法被继续划分为更小的栅格;E块元素中不存在children数组,表示E块元素对应的E块栅格为叶子栅格,无法被继续划分为更小的栅格。在row2中,第二行元素中存在一个children数组,表示第二行元素对应的行栅格为非叶子栅格,可以被继续划分为更小的栅格。该children数组包括四个块元素,分别为:C1块元素、C2块元素、C3块元素和C4块元素,因此可以将第二行栅格划分为C1块栅格、C2块栅格、C3块栅格、C4块栅格。C1块元素中不存在children数组,表示C1块元素对应的C1块栅格为叶子栅格,无法被继续划分为更小的栅格;C2块元素中不存在children数组,表示C2块元素对应的C2块栅格为叶子栅格,无法被继续划分为更小的栅格;C3块元素中不存在children数组,表示C3块元素对应的C3块栅格为叶子栅格,无法被继续划分为更小的栅格;C4块元素中不存在children数组,表示C4块元素对应的C4块栅格为叶子栅格,无法被继续划分为更小的栅格。
在本发明的具体实施例中,电子设备可以在各个行元素中提取出各个行栅格对应的高度信息;然后根据各个行栅格对应的高度信息将界面划分为至少两个行栅格。在上述实施例中,images数组包括两个行元素,分别为:第一行元素和第二行元素,可以在第一行元素中提取出第一行栅格对应的高度信息(height:212);在第二行元素中提取出第二行栅格对应的高度信息(height:138);然后根据这两个高度信息将界面划分为第一行栅格和第二行栅格。
在本发明的具体实施例中,电子设备可以在第一行元素中提取出A块栅格和B块栅格对应的布局方向(v)以及A块栅格对应的视图权重(weight:2)和B块栅格对应的视图权重(weight:3);根据A块栅格和B块栅格对应的布局方向(v)以及A块栅格对应的视图权重(weight:2)和B块栅格对应的视图权重(weight:3),将第一行栅格划分为A块栅格和B块栅格;其中,A块栅格与B块栅格的宽度比为:2:3。进一步的,电子设备还可以在B块元素中提取出B1块栅格和B2块栅格对应的布局方向(v)以及B1块栅格对应的视图权重(weight:1)和B2块栅格对应的视图权重(weight:1);根据B1块栅格和B2块栅格对应的布局方向(v)以及B1块栅格对应的视图权重(weight:1)和B2块栅格对应的视图权重(weight:1),将第B块栅格划分为B1块栅格和B2块栅格;其中,B1块栅格与B2块栅格的高度比为:1:1。进一步的,电子设备还可以在B2块元素中提取出D块栅格和E块栅格对应的布局方向(h)以及D块栅格对应的视图权重(weight:1)和E块栅格对应的视图权重(weight:1);根据D块栅格和E块栅格对应的布局方向(h)以及D块栅格对应的视图权重(weight:1)和E块栅格对应的视图权重(weight:1),将B2块栅格划分为D块栅格和E块栅格;其中,D块栅格与E块栅格的宽度比为:1:1。此外,电子设备还可以在第二行元素中提取出C1块栅格、C2块栅格、C3块栅格和C4块栅格对应的布局方向(h)以及C1块栅格对应的视图权重(weight:1)、C2块栅格对应的视图权重(weight:1)、C3块栅格对应的视图权重(weight:1)和C4块栅格对应的视图权重(weight:1);C1块栅格、C2块栅格、C3块栅格和C4块栅格对应的布局方向(h)以及C1块栅格对应的视图权重(weight:1)、C2块栅格对应的视图权重(weight:1)、C3块栅格对应的视图权重(weight:1)和C4块栅格对应的视图权重(weight:1),将第二行栅格划分为;C1块栅格、C2块栅格、C3块栅格和C4块栅格;其中,C1块栅格、C2块栅格、C3块栅格和C4块栅格的宽度比为:1:1:1:1。
在本发明的具体实施例中,电子设备在将当前栅格划分为至少两个块栅格时,可以根据全部块栅格对应的布局方向,将当前栅格划分为各个块栅格对应的布局单元;然后根据各个块栅格对应的视图权重,将各个块栅格对应的布局单元调整为与各个块栅格对应的视图权重相匹配的视图大小。例如,电子设备在将B块栅格划分为B1块栅格和B2块栅格时,电子设备可以根据B1块栅格和B2块对应的布局方向,将B块划分为B1块栅格对应的布局单元和B2块栅格对应的布局单元;然后根据B1块栅格对应的视图权重和B2块栅格对应的视图权重,将B1对应的布局单元调整为与B1块栅格对应的视图权重相匹配的视图大小;将B2对应的布局单元调整为与B2块栅格对应的视图权重相匹配的视图大小。
本发明实施例中将矩形区域进行抽象和处理,将一个矩形区域定义为一个栅格。而各个显示界面是由多个栅格组成。栅格的拆分逻辑,栅格与栅格之间的关系,以及栅格描述界面的逻辑可以采用如下定义:1、定义row与item,分别对应行栅格与块栅格,如图3所示,A块栅格和B块栅格代表第一行栅格,而C1块栅格、C2块栅格、C3块栅格和C4块栅格代表第二行栅格。2、将界面划分为row1与row2;row1被划分为A块栅格和B块栅格,水平方向排列,宽度比为2:3;3、A块栅格无需再分,可以直接显示与其对应的填充内容;4、B块栅格可以被划分为B1块栅格和B2块栅格,垂直方向排列,高度比为1:1;5、B2块栅格可以被划分为D块栅格和E块栅格,水平方向排列,宽度比1:1;6、Row2被划分为C1块栅格、C2块栅格、C3块栅格和C4块栅格,水平方向排列,宽度比为:1:1:1:1。
在现有技术中,移动端应用的开发人员需要同时负责各个显示界面的布局规则以及对应内容的填充。而在本发明实施提出的栅格化布局中,栅格树中的所有的视图无需进行与布局排列相关的约束设置,而仅仅需要负责内容、颜色、字体等相关属性的配置,而由栅格来负责视图位置、尺寸、对齐以及边界相关的属性设置,这样将内容与布局进行了彻底的分离。
本发明实施例提出的界面的布局调整方法,先接收APP中的界面对应的布局调整指令;然后响应于界面对应的布局调整指令,在服务器中获取界面对应的布局调整文件;再根据界面对应的布局调整文件对界面进行布局调整。也就是说,在本发明的技术方案中,可以针对每一个界面获取与其对应的布局调整文件,并根据每一个界面对应的布局调整文件对每一个界面进行布局调整。而在现有的界面的布局调整方法中,若要对APP中的界面进行大幅度调整,往往都需要通过发布该APP的新版本来解决,发布新版本的流程非常繁琐;在APP的应用功能没有大幅度调整,且发布新版本的需求又大多集中于布局调整的情况下,若通过发布新版本对各个界面进行布局调整,不仅时间成本和人力成本会非常高,而且时效性很差,不能满足用户对布局调整的灵活性要求。因此,和现有技术相比,本发明实施例提出的界面的布局调整方法,不仅可以节约时间成本和人力成本,而且时效性很强,可以满足用户对布局调整的灵活性要求;并且,本发明实施例的技术方案实现简单方便、便于普及,适用范围更广。
实施例三
图5为本发明实施例三提供的界面的布局调整方法的流程示意图。如图5所示,界面的布局调整方法可以包括以下步骤:
S501、接收APP中的界面对应的布局调整指令。
在本发明的具体实施例中,电子设备可以接收APP中的界面对应的布局调整指令;其中,该布局调整指令可以是该电子设备自动生成的布局调整指令;也可以是其他电子设备发送的布局调整指令。例如,当APP中的界面对应的布局调整按钮被用户触发时,电子设备可以自动生成一个布局调整指令;另外,电子设备还可以接收服务器发送的布局调整指令;在此不做任何限定。
S502、响应于界面对应的布局调整指令,在服务器中获取界面对应的布局调整文件。
在本发明的具体实施例中,电子设备可以响应于界面对应的布局调整指令,在服务器中获取界面对应的布局调整文件。具体地,电子设备可以响应于界面对应的布局调整指令,向服务器发送界面对应的布局调整请求;其中,布局调整请求中携带界面的界面标识;然后接收服务器返回的布局调整请求对应的布局调整响应;其中,布局调整响应中携带界面对应的布局调整文件。例如,电子设备可以响应于界面1对应的布局调整指令,向服务器发送界面1对应的布局调整请求1;其中,布局调整请求1中携带界面1的界面标识;然后电子设备可以接收服务器返回的布局调整请求1对应的布局调整响应1;其中,布局调整响应1中携带界面1对应的布局调整文件。
S503、将界面和布局调整文件分别作为当前栅格和当前元素。
在本步骤中,电子设备将界面和布局调整文件分别作为当前栅格和当前元素。
S504、判断当前元素是否为行栅格对应的数组或者块栅格对应的数组;若是,执行S505;否则,执行S506。
在本步骤中,电子设备可以判断当前元素是否为行栅格对应的数组或者块栅格对应的数据;若当前元素为行栅格对应的数组或者块栅格对应的数据,表示当前栅格为非叶子栅格,可以被继续划分为更小的栅格;执行S505;若当前元素不为行栅格对应的数组或者块栅格对应的数据,表示当前栅格为叶子栅格,无法被继续划分为更小的栅格;执行S506。
S505、在当前元素中提取出各个子栅格对应的子元素;根据各个子元素将当前栅格划分为各个子栅格;将各个子栅格和各个子元素分别作为当前栅格和当前元素;返回执行S504。
在本步骤中,电子设备可以在当前元素中提取出各个子栅格对应的子元素;根据各个子元素将当前栅格划分为各个子栅格;将各个子栅格和各个子元素分别作为当前栅格和当前元素,返回执行S504。例如,在上述实施例中,布局调整文件为一个行栅格对应的数组(images数组),该images数组包括两个行元素,分别为:第一行元素和第二行元素;因此可以先将界面划分为两个栅格(即两个矩形区域),分别为:第一行栅格和第二行栅格;将第一行栅格和第一行元素分别作为当前栅格和当前元素;将第二行栅格和第二行元素分别作为当前栅格和当前元素;返回执行S504。进一步的,第一行元素为一个块栅格对应的数组(children数组),该children数组包括两个块元素,分别为:A块元素与B块元素,因此可以根据A块元素和B块元素将第一行栅格划分为A块栅格和B块栅格;将A块栅格和A块元素分别作为当前栅格和当前元素;将B块栅格和B块元素分别作为当前栅格和当前元素;返回执行S504。进一步的,A块元素不为行栅格对应的数组或者块栅格对应的数组,表示A块元素对应的A块栅格为叶子栅格,无法被继续划分为更小的栅格;B块元素为一个块栅格对应的数组(children数组),在该children数组包括两个块元素,分别为:B1块元素和B2块元素;因此可以根据B1块元素和B2块元素将B块栅格划分为B1块栅格和B2块栅格;将B1块栅格和B1块元素分别作为当前栅格和当前元素;将B2块栅格和B2块元素分别作为当前栅格和当前元素;返回执行S504。以此类推。
S506、在当前栅格对应的数组中提取出当前栅格对应的URL;并根据当前栅格对应的URL显示当前栅格中的填充内容。
在本发明的具体实施例中,若判定当前栅格不满足预先设置的划分条件,电子设备可以在当前栅格对应的数组中提取出当前栅格对应的URL;并根据当前栅格对应的URL显示当前栅格中的填充内容。
在本发明的具体实施例中,若当前元素为行栅格对应的数组,电子设备可以在行栅格对应的数组中提取出各个行元素;根据行栅格对应的数组中的各个行元素,将当前栅格划分为至少两个行栅格;若当前元素为块栅格对应的数组,电子设备可以在块栅格对应的数组中提取出各个块元素;根据块栅格对应的数组中的各个块元素,将当前栅格划分为至少两个块栅格。
在本发明的具体实施例中,若当前元素为行栅格对应的数组,电子设备可以在各个行元素中提取出各个行栅格对应的高度信息;然后根据各个行栅格对应的高度信息,将当前栅格划分为至少两个行栅格。
在本发明的具体实施例中,若当前元素为块栅格对应的数组,电子设备可以在当前元素中提取出全部块栅格对应的布局方向和各个块栅格对应的视图权重;然后根据全部块栅格对应的布局方向和各个块栅格对应的视图权重,将当前栅格划分为至少两个块栅格。
在本发明的具体实施例中,电子设备在将当前栅格划分为至少两个块栅格时,可以根据全部块栅格对应的布局方向,将当前栅格划分为各个块栅格对应的布局单元;然后根据各个块栅格对应的视图权重,将各个块栅格对应的布局单元调整为与各个块栅格对应的视图权重相匹配的视图大小。例如,电子设备在将B块栅格划分为B1块栅格和B2块栅格时,电子设备可以根据B1块栅格和B2块对应的布局方向,将B块划分为B1块栅格对应的布局单元和B2块栅格对应的布局单元;然后根据B1块栅格对应的视图权重和B2块栅格对应的视图权重,将B1对应的布局单元调整为与B1块栅格对应的视图权重相匹配的视图大小;将B2对应的布局单元调整为与B2块栅格对应的视图权重相匹配的视图大小。
本发明实施例提出的界面的布局调整方法,先接收APP中的界面对应的布局调整指令;然后响应于界面对应的布局调整指令,在服务器中获取界面对应的布局调整文件;再根据界面对应的布局调整文件对界面进行布局调整。也就是说,在本发明的技术方案中,可以针对每一个界面获取与其对应的布局调整文件,并根据每一个界面对应的布局调整文件对每一个界面进行布局调整。而在现有的界面的布局调整方法中,若要对APP中的界面进行大幅度调整,往往都需要通过发布该APP的新版本来解决,发布新版本的流程非常繁琐;在APP的应用功能没有大幅度调整,且发布新版本的需求又大多集中于布局调整的情况下,若通过发布新版本对各个界面进行布局调整,不仅时间成本和人力成本会非常高,而且时效性很差,不能满足用户对布局调整的灵活性要求。因此,和现有技术相比,本发明实施例提出的界面的布局调整方法,不仅可以节约时间成本和人力成本,而且时效性很强,可以满足用户对布局调整的灵活性要求;并且,本发明实施例的技术方案实现简单方便、便于普及,适用范围更广。
实施例四
图6为本发明实施例四提供的界面的布局调整装置的第一结构示意图。如图6所示,本发明实施例所述的界面的布局调整装置可以包括:接收模块601、获取模块602和调整模块603;其中,
所述接收模块,用于接收APP中的界面对应的布局调整指令;
所述获取模块,用于响应于所述界面对应的布局调整指令,在服务器中获取所述界面对应的布局调整文件;
所述调整模块,用于根据所述界面对应的布局调整文件,对所述界面进行布局调整。
图7为本发明实施例四提供的界面的布局调整装置的第二结构示意图。如图7所示,所述调整模块603包括:判断子模块6031、划分子模块6032和显示子模块6033;其中,
所述判断子模块6031,用于将所述界面和所述布局调整文件分别作为当前栅格和当前元素;根据所述当前元素判断所述当前栅格是否满足预先设置的划分条件;
所述划分子模块6032,用于若判定所述当前栅格满足预先设置的划分条件,在所述当前元素中提取出各个子栅格对应的子元素;根据各个子元素将所述当前栅格划分为各个子栅格;将各个子栅格和各个子元素分别作为所述当前栅格和所述当前元素,重复执行上述操作,直到所述当前栅格不满足所述预先设置的划分条件;
所述显示子模块6033,用于若判定所述当前栅格不满足所述预先设置的划分条件,在所述当前栅格对应的元素中提取出所述当前栅格对应的统一资源定位符URL;并根据所述当前栅格对应的URL显示所述当前栅格中的填充内容。
进一步的,所述判断子模块6031,具体用于若所述当前元素为行栅格对应的数组或者块栅格对应的数组,判定所述当前栅格满足所述预先设置的划分条件;所述行栅格对应的数组包括:至少两个行元素;所述块栅格对应的数组包括:至少两个块元素。
进一步的,所述划分子模块6032,具体用于若所述当前元素为所述行栅格对应的数组,在所述行栅格对应的数组中提取出各个行元素;根据所述行栅格对应的数组中的各个行元素,将所述当前栅格划分为至少两个行栅格;若所述当前元素为所述块栅格对应的数组,在所述块栅格对应的数组中提取出各个块元素;根据所述块栅格对应的数组中的各个块元素,将所述当前栅格划分为至少两个块栅格。
进一步的,所述划分子模块6032,具体用于在各个行元素中提取出各个行栅格对应的高度信息;根据各个行栅格对应的高度信息,将所述当前栅格划分为至少两个行栅格。
进一步的,所述划分子模块6032,具体用于在各个块元素中提取出全部块栅格对应的布局方向和各个块栅格对应的视图权重;根据全部块栅格对应的布局方向和各个块栅格对应的视图权重,将所述当前栅格划分为至少两个块栅格。
进一步的,所述划分子模块6032,具体根据全部块栅格对应的布局方向,将所述当前栅格划分为各个块栅格对应的布局单元;根据各个块栅格对应的视图权重,将各个块栅格对应的布局单元调整为与各个块栅格对应的视图权重相匹配的视图大小。
上述界面的布局调整装置可执行本发明任意实施例所提供的方法,具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节,可参见本发明任意实施例提供的界面的布局调整方法。
实施例五
图8为本发明实施例五提供的电子设备的结构示意图。图8示出了适于用来实现本发明实施方式的示例性电子设备的框图。图8显示的电子设备12仅仅是一个示例,不应对本发明实施例的功能和使用范围带来任何限制。
如图8所示,电子设备12以通用计算设备的形式表现。电子设备12的组件可以包括但不限于:一个或者多个处理器或者处理单元16,系统存储器28,连接不同系统组件(包括系统存储器28和处理单元16)的总线18。
总线18表示几类总线结构中的一种或多种,包括存储器总线或者存储器控制器,外围总线,图形加速端口,处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说,这些体系结构包括但不限于工业标准体系结构(ISA)总线,微通道体系结构(MAC)总线,增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。
电子设备12典型地包括多种计算机系统可读介质。这些介质可以是任何能够被电子设备12访问的可用介质,包括易失性和非易失性介质,可移动的和不可移动的介质。
系统存储器28可以包括易失性存储器形式的计算机系统可读介质,例如随机存取存储器(RAM)30和/或高速缓存存储器32。电子设备12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例,存储系统34可以用于读写不可移动的、非易失性磁介质(图8未显示,通常称为“硬盘驱动器”)。尽管图8中未示出,可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器,以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下,每个驱动器可以通过一个或者多个数据介质接口与总线18相连。存储器28可以包括至少一个程序产品,该程序产品具有一组(例如至少一个)程序模块,这些程序模块被配置以执行本发明各实施例的功能。
具有一组(至少一个)程序模块42的程序/实用工具40,可以存储在例如存储器28中,这样的程序模块42包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据,这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施例中的功能和/或方法。
电子设备12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信,还可与一个或者多个使得用户能与该电子设备12交互的设备通信,和/或与使得该电子设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡,调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且,电子设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(LAN),广域网(WAN)和/或公共网络,例如因特网)通信。如图8所示,网络适配器20通过总线18与电子设备12的其它模块通信。应当明白,尽管图8中未示出,可以结合电子设备12使用其它硬件和/或软件模块,包括但不限于:微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
处理单元16通过运行存储在系统存储器28中的程序,从而执行各种功能应用以及数据处理,例如实现本发明实施例所提供的界面的布局调整方法。
实施例六
本发明实施例六提供了一种计算机存储介质。
本发明实施例的计算机可读存储介质,可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。
计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括——但不限于无线、电线、光缆、RF等等,或者上述的任意合适的组合。
可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码,所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
注意,上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解,本发明不限于这里所述的特定实施例,对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此,虽然通过以上实施例对本发明进行了较为详细的说明,但是本发明不仅仅限于以上实施例,在不脱离本发明构思的情况下,还可以包括更多其他等效实施例,而本发明的范围由所附的权利要求范围决定。

Claims (14)

1.一种界面的布局调整方法,其特征在于,所述方法包括:
接收应用程序APP中的界面对应的布局调整指令;
响应于所述界面对应的布局调整指令,在服务器中获取所述界面对应的布局调整文件;其中,每一个界面分别对应布局调整文件;
根据所述界面对应的布局调整文件对所述界面进行布局调整;
其中,所述根据所述界面对应的布局调整文件对所述界面进行布局调整,包括:
将所述界面和所述布局调整文件分别作为当前栅格和当前元素;
根据所述当前元素判断所述当前栅格是否满足预先设置的划分条件;
若判定所述当前栅格满足预先设置的划分条件,在所述当前元素中提取出各个子栅格对应的子元素;根据各个子元素将所述当前栅格划分为各个子栅格;将各个子栅格和各个子元素分别作为所述当前栅格和所述当前元素,重复执行上述操作,直到所述当前栅格不满足所述预先设置的划分条件;
若判定所述当前栅格不满足所述预先设置的划分条件,在所述当前栅格对应的元素中提取出所述当前栅格对应的统一资源定位符URL;并根据所述当前栅格对应的URL显示所述当前栅格中的填充内容。
2.根据权利要求1所述的方法,其特征在于,所述根据所述当前栅格对应的数组判断所述当前栅格是否满足预先设置的划分条件,包括:
若所述当前元素为行栅格对应的数组或者块栅格对应的数组,判定所述当前栅格满足所述预先设置的划分条件;所述行栅格对应的数组包括:至少两个行元素;所述块栅格对应的数组包括:至少两个块元素。
3.根据权利要求2所述的方法,其特征在于,所述根据各个子元素将所述当前栅格划分为各个子栅格,包括:
若所述当前元素为所述行栅格对应的数组,在所述行栅格对应的数组中提取出各个行元素;根据所述行栅格对应的数组中的各个行元素,将所述当前栅格划分为至少两个行栅格;
若所述当前元素为所述块栅格对应的数组,在所述块栅格对应的数组中提取出各个块元素;根据所述块栅格对应的数组中的各个块元素,将所述当前栅格划分为至少两个块栅格。
4.根据权利要求3所述的方法,其特征在于,所述根据所述行栅格对应的数组中的各个行元素,将所述当前栅格划分为至少两个行栅格,包括:
在各个行元素中提取出各个行栅格对应的高度信息;
根据各个行栅格对应的高度信息,将所述当前栅格划分为至少两个行栅格。
5.根据权利要求3所述的方法,其特征在于,所述根据所述块栅格对应的数组中的各个块元素,将所述当前栅格划分为至少两个块栅格,包括:
在各个块元素中提取出全部块栅格对应的布局方向和各个块栅格对应的视图权重;
根据全部块栅格对应的布局方向和各个块栅格对应的视图权重,将所述当前栅格划分为至少两个块栅格。
6.根据权利要求5所述的方法,其特征在于,所述根据全部块栅格对应的布局方向和各个块栅格对应的视图权重,将所述当前栅格划分为至少两个块栅格,包括:
根据全部块栅格对应的布局方向,将所述当前栅格划分为各个块栅格对应的布局单元;
根据各个块栅格对应的视图权重,将各个块栅格对应的布局单元调整为与各个块栅格对应的视图权重相匹配的视图大小。
7.一种界面的布局调整装置,其特征在于,所述装置包括:接收模块、获取模块和调整模块;其中,
所述接收模块,用于接收应用程序APP中的界面对应的布局调整指令;
所述获取模块,用于响应于所述界面对应的布局调整指令,在服务器中获取所述界面对应的布局调整文件;其中,每一个界面分别对应布局调整文件;
所述调整模块,用于根据所述界面对应的布局调整文件,对所述界面进行布局调整;
其中,所述调整模块包括:判断子模块、划分子模块和显示子模块;其中,
所述判断子模块,用于将所述界面和所述布局调整文件分别作为当前栅格和当前元素;根据所述当前元素判断所述当前栅格是否满足预先设置的划分条件;
所述划分子模块,用于若判定所述当前栅格满足预先设置的划分条件,在所述当前元素中提取出各个子栅格对应的子元素;根据各个子元素将所述当前栅格划分为各个子栅格;将各个子栅格和各个子元素分别作为所述当前栅格和所述当前元素,重复执行上述操作,直到所述当前栅格不满足所述预先设置的划分条件;
所述显示子模块,用于若判定所述当前栅格不满足所述预先设置的划分条件,在所述当前栅格对应的元素中提取出所述当前栅格对应的统一资源定位符URL;并根据所述当前栅格对应的URL显示所述当前栅格中的填充内容。
8.根据权利要求7所述的装置,其特征在于:
所述判断子模块,具体用于若所述当前元素为行栅格对应的数组或者块栅格对应的数组,判定所述当前栅格满足所述预先设置的划分条件;所述行栅格对应的数组包括:至少两个行元素;所述块栅格对应的数组包括:至少两个块元素。
9.根据权利要求8所述的装置,其特征在于:
所述划分子模块,具体用于若所述当前元素为所述行栅格对应的数组,在所述行栅格对应的数组中提取出各个行元素;根据所述行栅格对应的数组中的各个行元素,将所述当前栅格划分为至少两个行栅格;若所述当前元素为所述块栅格对应的数组,在所述块栅格对应的数组中提取出各个块元素;根据所述块栅格对应的数组中的各个块元素,将所述当前栅格划分为至少两个块栅格。
10.根据权利要求9所述的装置,其特征在于:
所述划分子模块,具体用于在各个行元素中提取出各个行栅格对应的高度信息;根据各个行栅格对应的高度信息,将所述当前栅格划分为至少两个行栅格。
11.根据权利要求9所述的装置,其特征在于:
所述划分子模块,具体用于在各个块元素中提取出全部块栅格对应的布局方向和各个块栅格对应的视图权重;根据全部块栅格对应的布局方向和各个块栅格对应的视图权重,将所述当前栅格划分为至少两个块栅格。
12.根据权利要求11所述的装置,其特征在于:
所述划分子模块,具体根据全部块栅格对应的布局方向,将所述当前栅格划分为各个块栅格对应的布局单元;根据各个块栅格对应的视图权重,将各个块栅格对应的布局单元调整为与各个块栅格对应的视图权重相匹配的视图大小。
13.一种电子设备,其特征在于,包括:
一个或多个处理器;
存储器,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1至6中任一项所述的界面的布局调整方法。
14.一种存储介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现如权利要求1至6中任一项所述的界面的布局调整方法。
CN201910394210.6A 2019-05-13 2019-05-13 一种界面的布局调整方法、装置、电子设备及存储介质 Active CN110109729B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910394210.6A CN110109729B (zh) 2019-05-13 2019-05-13 一种界面的布局调整方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910394210.6A CN110109729B (zh) 2019-05-13 2019-05-13 一种界面的布局调整方法、装置、电子设备及存储介质

Publications (2)

Publication Number Publication Date
CN110109729A CN110109729A (zh) 2019-08-09
CN110109729B true CN110109729B (zh) 2022-09-06

Family

ID=67489677

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910394210.6A Active CN110109729B (zh) 2019-05-13 2019-05-13 一种界面的布局调整方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN110109729B (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103699608A (zh) * 2013-12-13 2014-04-02 乐视网信息技术(北京)股份有限公司 页面布局方法及装置
CN104007991A (zh) * 2014-06-06 2014-08-27 百度在线网络技术(北京)有限公司 应用程序界面布局调整方法和装置
CN105892961A (zh) * 2015-11-16 2016-08-24 乐视网信息技术(北京)股份有限公司 一种栅格动态布局设备和方法
CN108829485A (zh) * 2018-06-25 2018-11-16 腾讯科技(深圳)有限公司 应用界面布局的更新方法、装置、存储介质及计算机设备

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103699608A (zh) * 2013-12-13 2014-04-02 乐视网信息技术(北京)股份有限公司 页面布局方法及装置
CN104007991A (zh) * 2014-06-06 2014-08-27 百度在线网络技术(北京)有限公司 应用程序界面布局调整方法和装置
CN105892961A (zh) * 2015-11-16 2016-08-24 乐视网信息技术(北京)股份有限公司 一种栅格动态布局设备和方法
CN108829485A (zh) * 2018-06-25 2018-11-16 腾讯科技(深圳)有限公司 应用界面布局的更新方法、装置、存储介质及计算机设备

Also Published As

Publication number Publication date
CN110109729A (zh) 2019-08-09

Similar Documents

Publication Publication Date Title
CN110210532B (zh) 背景色生成方法、装置及电子设备
US20240119223A1 (en) Method, apparatus and electronic device for field merging
CN110766772A (zh) 基于Flutter跨平台海报制作方法装置介质和设备
US20170091152A1 (en) Generating grid layouts with mutable columns
CN108958731B (zh) 一种应用程序界面生成方法、装置、设备和存储介质
CN110874251A (zh) 一种实现图片木桶布局的方法和装置
CN108595211B (zh) 用于输出数据的方法和装置
CN107301220B (zh) 数据驱动视图的方法、装置、设备及存储介质
CN113553123B (zh) 数据处理方法、装置、电子设备及存储介质
US12086126B2 (en) Method, device and apparatus for spreadsheet importing, and medium
US20130091412A1 (en) Representation of data records in graphic tables
CN112492399B (zh) 信息显示方法、装置及电子设备
US20220245196A1 (en) Information displaying method and apparatus, and storage medium
CN110109729B (zh) 一种界面的布局调整方法、装置、电子设备及存储介质
CN111444452A (zh) 网页页面的转换方法、装置及存储介质
CN114817845B (zh) 数据处理方法、装置、电子设备及存储介质
US20220326901A1 (en) Data display
CN111294635A (zh) 一种编排桌面布局的方法、装置及服务器
CN112256175B (zh) 文字显示方法、装置、电子设备及计算机可读存储介质
WO2023005104A1 (zh) 一种多视图展示方法、装置、设备和介质
CN112825079B (zh) 一种信息展示的方法及装置
US9678937B2 (en) Single click in a partially protected cell of a table
CN110780898B (zh) 页面数据的升级方法、装置和电子设备
CN110874253B (zh) 显示方法及显示系统
CN113656041A (zh) 数据处理方法、装置、设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant