CN111338522B - 显示界面的布局方法、装置、电子设备及存储介质 - Google Patents
显示界面的布局方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN111338522B CN111338522B CN202010102795.2A CN202010102795A CN111338522B CN 111338522 B CN111338522 B CN 111338522B CN 202010102795 A CN202010102795 A CN 202010102795A CN 111338522 B CN111338522 B CN 111338522B
- Authority
- CN
- China
- Prior art keywords
- layout
- area
- sub
- layout area
- added
- 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
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请实施例提供了一种显示界面的布局方法、装置、电子设备及存储介质。该方法包括:通过第一用户操作界面接收用户在第一布局模式下触发的第一对象添加请求,其中,第一用户操作界面中显示有第一对象布局区域,第一对象布局区域中包括各第一子布局区域,第一对象添加请求中包括用户选择的待添加的第一对象和第一对象在第一对象布局区域中的第一添加位置;根据第一添加位置,将第一对象添加至对应的目标第一子布局区域;根据目标第一子布局区域的区域调整规则,对第一对象布局区域进行相应的区域调整,并将调整后的布局区域的指示信息提供给用户。本申请实施例中,不需要提前规划待添加对象的布局区域,具有较高的灵活度。
Description
技术领域
本申请涉及数据可视化技术领域,具体而言,本发明涉及一种显示界面的布局方法、装置、电子设备及存储介质。
背景技术
在人机交互过程中,通常通过一些图表来显示一些数据。其中,显示多个图表的布局区域称之为仪表舱,显示界面中显示的多个图表可以被称之为已添加的对象。在实际中应用,如果多个图表需要在同一显示界面中展现,那么就存在多个对象如何布局的问题。用户在使用可视化工具布局时,希望布局的过程能够尽量自动化,简单易用,并且功能强大。
现有技术中一种布局方式为“固定布局”,即事先确定需要布局的对象的数量、大小和位置,然后将需要布局的对象添加至布局区域中,但这种方案灵活性较差,无法动态调整布局。
发明内容
本申请的目的旨在至少能解决上述的技术缺陷之一。
第一方面,提供了一种显示界面的布局方法,该方法包括:
通过第一用户操作界面接收用户在第一布局模式下触发的第一对象添加请求,其中,第一用户操作界面中显示有第一对象布局区域,第一对象布局区域中包括各第一子布局区域,第一对象添加请求中包括用户选择的待添加的第一对象和第一对象在第一对象布局区域中的第一添加位置;
根据第一添加位置,将第一对象添加至对应的目标第一子布局区域;
根据目标第一子布局区域的区域调整规则,对第一对象布局区域进行相应的区域调整,并将调整后的布局区域的指示信息提供给用户,以使用户根据指示信息确定下一待添加对象的添加位置。
第一方面可选的实施例中,区域调整规则为区域划分规则,若目标第一子布局区域的至少一条边界属于第一对象布局区域的边界,根据目标第一子布局区域的区域调整规则,对第一对象布局区域进行相应的区域调整,包括:
根据目标第一子布局区域对应的区域划分规则,对第一对象布局区域进行重新划分,得到至少两个子对象布局区域。
第一方面可选的实施例中,得到各子对象布局区域后,该方法还包括:
将每个子对象布局区域作为一个新的对象布局区域,对每个子对象布局区域分别进行区域划分,得到每个子对象布局区域的各第二子布局区域。
第一方面可选的实施例中,若第一对象布局区域中存在第一已添加对象,且第一已添加对象所在的区域属于至少两个不同的子对象布局区域,该方法还包括:
基于预设置的第一调整规则,对第一已添加对象的位置进行相应的调整,以使得调整后的第一已添加对象所在的区域不属于至少两个不同的子对象布局区域。
第一方面可选的实施例中,若第一添加位置在第一对象布局区域中对应的区域存在第二已添加对象,该方法还包括:
基于预设置的第二调整规则,对第二已添加对象的位置进行相应的调整,以使第一添加位置在第一对象布局区域中对应的区域不存在第二已添加对象。
第一方面可选的实施例中,若目标第一子布局区域的所有边界均属于第一对象布局区域的边界,且目标第一子布局区域中存在第三已添加对象,该方法还包括:
将第三已添加对象从第一对象布局区域中删除。
第一方面可选的实施例中,指示信息为各子对象布局区域之间的分界标识线,该方法还包括:
接收用户对分界标识线的位置调整操作;
基于位置调整操作,对位置调整操作所针对的分界标识线所对应的各子对象布局区域进行相应的调整。
第一方面可选的实施例中,该方法还包括:
在接收到模式切换操作时,将第一用户操作界面切换至操作对应于第二布局模式的第二用户操作界面,第二用户操作界面中显示有第二对象布局区域;
接收用户在第二布局模式下触发的第二对象添加请求,第二对象添加请求中包括用户选择的待添加的第二对象和第二对象在第二对象布局区域中的第二添加位置;
根据第二添加位置,将第二对象添加至第二对象布局区域。
第二方面,提供了一种显示界面的布局装置,该装置包括:
添加请求接收模块,用于通过第一用户操作界面接收用户在第一布局模式下触发的第一对象添加请求,其中,第一用户操作界面中显示有第一对象布局区域,第一对象布局区域中包括各第一子布局区域,第一对象添加请求中包括用户选择的待添加的第一对象和第一对象在第一对象布局区域中的第一添加位置;
对象添加模块,用于根据第一添加位置,将第一对象添加至对应的目标第一子布局区域;
区域调整模块,用于根据目标第一子布局区域的区域调整规则,对第一对象布局区域进行相应的区域调整,并将调整后的布局区域的指示信息提供给用户,以使用户根据指示信息确定下一待添加对象的添加位置。
第二方面可选的实施例中,区域调整规则为区域划分规则,若目标第一子布局区域的至少一条边界属于第一对象布局区域的边界,根据目标第一子布局区域的区域调整规则,对第一对象布局区域进行相应的区域调整,包括:
根据目标第一子布局区域对应的区域划分规则,对第一对象布局区域进行重新划分,得到至少两个子对象布局区域。
第二方面可选的实施例中,区域调整模块还用于:
在得到各子对象布局区域后,将每个子对象布局区域作为一个新的对象布局区域,对每个子对象布局区域分别进行区域划分,得到每个子对象布局区域的各第二子布局区域。
第二方面可选的实施例中,区域调整模块还用于:
若第一对象布局区域中存在第一已添加对象,且第一已添加对象所在的区域属于至少两个不同的子对象布局区域,则基于预设置的第一调整规则,对第一已添加对象的位置进行相应的调整,以使得调整后的第一已添加对象所在的区域不属于至少两个不同的子对象布局区域。
第二方面可选的实施例中,该装置还包括对象调整装置,具体用于:
在第一添加位置在第一对象布局区域中对应的区域存在第二已添加对象时,基于预设置的第二调整规则,对第二已添加对象的位置进行相应的调整,以使第一添加位置在第一对象布局区域中对应的区域不存在第二已添加对象。
第二方面可选的实施例中,对象调整装置还用于:
在目标第一子布局区域的所有边界均属于第一对象布局区域的边界,且目标第一子布局区域中存在第三已添加对象时,将第三已添加对象从第一对象布局区域中删除。
第二方面可选的实施例中,指示信息为各子对象布局区域之间的分界标识线,该装置还包括区域大小调整模块,用于:
接收用户对分界标识线的位置调整操作;
基于位置调整操作,对位置调整操作所针对的分界标识线所对应的各子对象布局区域进行相应的调整。
第二方面可选的实施例中,该装置还包括模式切换模块,用于:
在接收到模式切换操作时,将第一用户操作界面切换至操作对应于第二布局模式的第二用户操作界面,第二用户操作界面中显示有第二对象布局区域;
接收用户在第二布局模式下触发的第二对象添加请求,第二对象添加请求中包括用户选择的待添加的第二对象和第二对象在第二对象布局区域中的第二添加位置;
根据第二添加位置,将第二对象添加至第二对象布局区域。
第三方面,提供了一种电子设备,该电子设备包括:
处理器;以及存储器,该储器配置用于存储机器可读指令,该指令在由该处理器执行时,使得该处理器执行第一方面中的任一项方法。
第四方面,提供了一种计算机可读存储介质,该计算机可读存储介质上用于存储计算机指令,当计算机指令在计算机上运行时,使得计算机可以执行实现第一方面中的任一项方法。
本申请实施例提供的技术方案带来的有益效果是:
在本申请实施例中,在对显示界面中的对象布局区域进行布局时,可以根据添加位置对应的目标第一子布局区域,动态的对对象布局区域进行相应的调整,并将调整后的布局区域的指示信息提供给用户,进而用户可以根据指示信息确定下一待添加对象的添加位置。也就是说,本申请实施例中,可以根据本次对象的添加位置,动态的为用户规划了下次可进行对象布局的区域,用户根据规划后的区域添加对象即可,不需要预先根据待添加对象的数量提前规划待添加对象的布局区域,具有较高的灵活度,并且在布局过程中,不需要人为调整大小、位置,可以有效地降低布局的复杂度。
附图说明
为了更清楚地说明本申请实施例中的技术方案,下面将对本申请实施例描述中所需要使用的附图作简单地介绍。
图1为本申请实施例提供的一种显示界面的布局方法的流程示意图;
图2A为本申请实施例提供的一种第一对象布局区域的示意图;
图2B为本申请实施例提供的另一种第一对象布局区域的示意图;
图3为本申请实施例提供的又一种第一对象布局区域的示意图;
图4A为本申请实施例提供的一种左右两个子对象布局区域的示意图;
图4B为本申请实施例提供的又一种左右两个子对象布局区域的示意图;
图5为本申请实施例提供的一种显示界面的布局装置的结构示意图;
图6为本申请实施例提供的一种电子设备的结构示意图。
具体实施方式
下面详细描述本申请的实施例,所述实施例的示例在附图中示出,其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的,仅用于解释本申请,而不能解释为对本发明的限制。
本技术领域技术人员可以理解,除非特意声明,这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是,本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件,但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解,当我们称元件被“连接”或“耦接”到另一元件时,它可以直接连接或耦接到其他元件,或者也可以存在中间元件。此外,这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。
为使本申请的目的、技术方案和优点更加清楚,下面将结合附图对本申请实施方式作进一步地详细描述。
在实际应用中,在对仪表舱中进行布局容器时,一种方式为“固定布局”,即事先确定需要布局的对象的数量、大小和位置,然后将需要布局的对象添加至布局区域中,但这种方案灵活性较差,无法动态调整布局。另一种方式为“自由布局”,其可以动态添加任意数量的容器,且可以随意调整大小、位置。但这种方案由于自由度太大,每个容器都要手动控制大小和位置,进而增加工作量。
基于此,本申请实施例提供一种显示界面的布局方法,旨在解决上述中的部分或全部技术问题。
下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合,对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图,对本申请的实施例进行描述。
本申请实施例提供了一种显示界面的布局方法,该方法可应用于Web(World WideWeb,全球广域网)平台的人机交互场景。其中,在本申请实施例中,对象布局区域称可以对应于Web平台的人机交互场景中显示多个对象的仪表舱,添加对象可以对应于仪表舱中添加不同数据的容器(widget),如图1所示,该方法包括:
步骤S101,通过第一用户操作界面接收用户在第一布局模式下触发的第一对象添加请求;
其中,第一用户操作界面中显示有第一对象布局区域,第一对象布局区域中包括各第一子布局区域,第一对象添加请求中包括用户选择的待添加的第一对象和第一对象在第一对象布局区域中的第一添加位置。
在实际应用中,可以配置多种布局模式对显示界面中对象布局区域进行布局,不同的布局模式可以对应不同的布局方式和用户操作界面。
其中,第一对象布局区域指的是显示界面中可以添加对象的区域,在实际应用中,显示界面中可以显示有第一对象布局区域,并且第一对象布局区域中可以被划分为多个第一子布局区域。其中,划分多个第一子布局区域的方式以及第一子布局区域的数量可以预先配置,本申请实施例不做限定。例如,第一对象布局区域如图2A所示,基于图2A可知第一对象布局区域被划分为5个第一子布局区域,分别为第一子布局区域1~第一子布局区域5。
其中,对象的类别本申请实施例不限定,如可以是显示数据的图表、图片和文档等,添加位置为待添加对象在对象布局区域中的位置信息,也就是说,当知晓添加位置时即可知晓待添加对象在对象布局区域中的位置。
在实际应用中,第一对象添加请求指的是用户想要将待添加对象添加至第一对象布局区域中的动作。而用户触发该第一对象添加请求的方式可以预先配置,本申请实施例不限定。如显示界面中还可以显示有可以添加至第一对象布局区域的对象的标识,当用户选中某一个对象,并将其拖入到第一对象布局区域时,即为用户触发了第一对象添加请求,此时用户选中的第一对象即为待添加对象,拖入到第一对象布局区域的位置即为待添加对象在第一对象布局区域中的第一添加位置。
步骤S102,根据第一添加位置,将第一对象添加至对应的目标第一子布局区域。
在实际应用中,当获知待添加对象的第一添加位置时,即可根据第一添加位置将待添加对象添加在第一对象布局区域中的相应位置。例如,当第一添加位置为第一对象布局中的中间区域,则可以将第一待添加对象添加至第一对象布局区域的中间区域。
在实际应用中,还可以确定第一添加位置对应于第一对象布局区域中的各哪个第一子布局区域,并将对应的第一子布局区域作为目标第一子布局区域。
步骤S103,根据目标第一子布局区域的区域调整规则,对第一对象布局区域进行相应的区域调整,并将调整后的布局区域的指示信息提供给用户,以使用户根据指示信息确定下一待添加对象的添加位置。
在实际应用中,可以预先配置第一子布局区域与区域调整规则的对应关系,该区域调整规则表征了对第一对象布局区域的调整方式,其中,不同的第一子布局区域可以对应于不同的区域调整规则,也可以对应相同的区域调整规则,本申请实施例不限定。
进一步的,在确定目标第一子布局区域后,可以根据对应的目标第一子布局区域对应的区域调整规则,对当前的第一对象布局区域进行相对应的区域调整,并将调整后的布局区域的指示信息提供给用户,进而用户在下一次添加对象时,可以根据提示信息知晓待添加对象在对象布局区域中可以添加的位置。
在本申请实施例中,在对显示界面中的对象布局区域进行布局时,可以根据添加位置对应的目标第一子布局区域,动态的对对象布局区域进行相应的调整,并将调整后的布局区域的指示信息提供给用户,进而用户可以根据指示信息确定下一待添加对象的添加位置。也就是说,本申请实施例中,可以根据本次对象的添加位置,动态的为用户规划了下次可进行对象布局的区域,用户根据规划后的区域添加对象即可,不需要预先根据待添加对象的数量提前规划待添加对象的布局区域,具有较高的灵活度,并且在布局过程中,不需要人为调整大小、位置,可以有效地降低布局的复杂度。
在本申请可选的实施例中,区域调整规则为区域划分规则,若目标第一子布局区域的至少一条边界属于第一对象布局区域的边界,根据目标第一子布局区域的区域调整规则,对第一对象布局区域进行相应的区域调整,包括:
根据目标第一子布局区域对应的区域划分规则,对第一对象布局区域进行重新划分,得到至少两个子对象布局区域。
在实际应用中,若目标第一子布局区域的至少一条边界为第一对象布局区域的部分边界或整个边界,此时即目标第一子布局区域与第一对象布局区域存在共用边界。例如,第一对象布局区域所包括的第一子布局区域的示意图2A,其中第一子布局区域1~第一子布局区域4与第一对象布局区域存在共用的边界。如,第一子布局区域1、3、4与第一对象布局区域共用边界a,第一子布局区域1、2、4与第一对象布局域共用边界b,第一子布局区域5与第一对象布局区域不存在共用的边界。
在实际应用中,区域调整规则可以为区域划分规则,也就是说,可以预先配置第一子布局区域与区域划分规则的对应关系。相应的,若所确定的目标第一子布局区域的至少一条边界属于第一对象布局区域的边界,此时可以确定目标第一子布局区域对应的区域划分规则,然后根据对应的区域划分规则对第一对象布局区域进行重新划分,得到至少两个子对象布局区域。
在一示例中,假设第一对象布局区域被划分为第一子布局区域1~第一子布局区域4,其中,第一子布局区域1和第一子布局区域3的区域处理规则为基于预配置的尺寸竖向分割第一对象布局区域,第一子布局区域2和第一子布局区域4的区域处理规则为基于预配置的尺寸横向分割第一对象布局区域。进一步,若第一添加位置所对应的目标第一子布局区域为第一子布局区域1或第一子布局区域3,则基于预配置的尺寸竖向分割第一对象布局区域,得到左右两个子布局区域;若目标第一子布局区域为第一子布局区域2或第一子布局区域4,则基于预配置的尺寸横向分割第一对象布局区域,得到上下两个子布局区域。
在本申请可选的实施例中,得到各子对象布局区域后,方法还包括:
将每个子对象布局区域作为一个新的对象布局区域,对每个子对象布局区域分别进行区域划分,得到每个子对象布局区域的各第二子布局区域。
在实际应用中,得到各子对象布局区域之后,此时所得到的两个子对象布局区域可以作为一个新的对象布局区域,相应的,可以对每个子对象布局区域分别进行区域划分,得到每个子对象布局区域的各第二子布局区域,并且在基于各子对象布局区域接收到对象添加请求时,相当于基于第一对象布局区域接收到对象添加请求,此时可以执行在基于第一对象布局区域接收到对象添加请求时的相同的操作。
此外,在得到至少两个子布局区域后,可以将得到的两个子对象布局区域的指示信息提供给用户,如得到左右两个子对象布局区域时,可以在左右两个子对象布局区域的分界处显示分界线,具体可以如图2B中的虚线显示,且两个子对象布区域中也还会被划分为各第二子布局区域。
此外,在实际应用中,若所确定的目标第一子布局区域与第一对象布局区域不存在公用的边界,此时可以仅根据第一添加位置,将第一对象添加至第一对象布局区域中即可,不需要根据目标第一子布局区域,对第一对象布局区域进行相应的区域调整。
在本申请可选的实施例中,若第一对象布局区域中存在第一已添加对象,且第一已添加对象所在的区域属于至少两个不同的子对象布局区域,方法还包括:
基于预设置的第一调整规则,对第一已添加对象的位置进行相应的调整,以使得调整后的第一已添加对象所在的区域不属于至少两个不同的子对象布局区域。
其中,第一已添加对象指的是在接收到第一对象添加请求之前,第一对象布局区域中已经存在的对象,且其所在的区域属于至少两个不同的子对象布局区域。例如,假设第一对象布局区域如图3所示,且第一对象布局区域中存在已添加对象A,根据区域划分规则确定的分割位置如图中的虚线所示,此时添加对象A所在的区域属于两个不同的子对象布局区域,此时可以对添加对象A的位置进行调整。
其中,第一调整规则的具体方式可以根据预先配置,本申请实施例不限定,如可以根据区域划分规则确定第一调整规则,而不同区域划分规则对应的第一调整规则可以相同,也可以不相同,本申请实施例不限定。此外,调整第一已添加对象的位置的时机可以是在对第一对象布局区域进行划分处理之前,也可以是在得到两个不同的子对象布局区域之后,本申请实施例不限定。
在一示例中,假设已添加对象处于第一对象布局区域中的上检测区域,且所在的区域属于两个不同的子对象布局区域,而目标第一子布局区域对应的区域划分规则为横向分割处理,此时可以将已添加对象调整至分割得到的上子布局区域中的上部区域等。
在本申请可选的实施例中,若第一添加位置在第一对象布局区域中对应的区域存在第二已添加对象,方法还包括:
基于预设置的第二调整规则,对第二已添加对象的位置进行相应的调整,以使第一添加位置在第一对象布局区域中对应的区域不存在第二已添加对象。
其中,第一添加位置在第一对象布局区域中对应的区域指的是待添加的第一对象在第一对象布局区域中对应的区域。在实际应用中,若第一添加位置在第一对象布局区域中对应的区域存在第二已添加对象,此时可以基于预设置的第二调整规则对第二已添加对象的位置进行相应的调整,以使待添加的第一对象在第一对象布局区域中对应的区域与第二已添加对象在第一对象布局区域中对应的区域不重叠。其中,第二调整规则的具体方式可以根据预先配置,本申请实施例不限定。
在一示例中,假设第一对象布局区域如图3所示,且第一对象布局区域中存在第二已添加对象A,第二已添加对象A在第一对象布局区域中所占的区域范围如图中的a区域所示。此时,若第一添加位置在第一对象布局区域中对应的区域处于a区域内,则可以基于预设置的第二调整规则对第二已添加对象A的位置进行相应的调整,例如,可以将第二已添加对象A的调整至第一对象布局区域的左部区域(如图3中的b区域所示),以使第一添加位置在第一对象布局区域中对应的区域不存在第二已添加对象。
在本申请可选的实施例中,若目标第一子布局区域的所有边界均属于第一对象布局区域的边界,且目标第一子布局区域中存在第三已添加对象,该方法还包括:
将第三已添加对象从第一对象布局区域中删除。
在实际应用中,在当所确定的目标第一子布局区域的所有边界均属于第一对象布局区域的边界时,若目标第一子布局区域中存在已添加对象(即第三已添加对象),此时可以将已添加对象从目标第一子布布局区域中删除。
在本申请可选的实施例中,指示信息为各子对象布局区域之间的分界标识线,方法还包括:
接收用户对分界标识线的位置调整操作;
基于位置调整操作,对位置调整操作所针对的分界标识线所对应的各子对象布局区域进行相应的调整。
在实际应用中,指示信息可以为各子对象布局区域之间的分界标识线,用户可以基于该分界标识线可以知晓各子对象布局区域的区域。可以理解的是,对象布局区域中也可以显示有分界标识线,以使用户知晓各子布局区域的区域。
其中,位置调整操作指的是用户想要调整分界标识线的位置的动作,进而达到调整子对象布局区域的目的,而触发该位置调整操作的方式本申请实施例不限定。例如,可以在显示界面中设置虚拟按钮,当用户点击该虚拟按钮时,即视为用户触发了位置调整操作触发请求,此时可以显示各子对象布局区域之间的分界标识线(如显示虚线),当用户拖动各子对象布局区域之间的分界标识线即可以视为用户触发了位置调整操作,此时用户拖动分界标识线的最终位置即为选中的分界标识线调整后的位置,然后可以基于位置调整操作,对位置调整操作所针对的分界标识线所对应的各子对象布局区域进行相应的调整。
在一示例中,如图4A所示,假设第一对象布局区域的长和宽为10cm*10cm,且被分割为左右两个子对象布局区域,两个子对象布局区域的大小均为5cm*10cm,此时,在两个子对象布局区域的分界处可以显示有分界标识线(如图4中的虚线),两个子对象布局区域为该分界标识线对应的子布局区域。其中,若用户将分界标识线向左拖动了2cm,此时可以将左子对象布局区域调整为3cm*10cm,将右子对象布局区域调整为7cm*10cm,以保证第一对象布局区域的长和宽为10cm*10cm,具体如图4B所示。
在本申请可选的实施例中,该方法还包括:
在接收到模式切换操作时,将第一用户操作界面切换至操作对应于第二布局模式的第二用户操作界面,第二用户操作界面中显示有第二对象布局区域;
接收用户在第二布局模式下触发的第二对象添加请求,第二对象添加请求中包括用户选择的待添加的第二对象和第二对象在第二对象布局区域中的第二添加位置;
根据第二添加位置,将第二对象添加至第二对象布局区域。
其中,模式切换操作表示用户切换布局模式的动作,而用户触发选择模式切换操作的方式,本申请实施例不限定。例如,可以在显示界面中设置虚拟按钮,当用户点击该虚拟按钮时,即视为用户触发了模式切换操作触发请求,此时可以在显示界面显示不同的布局模式标识信息,标识信息的具体形式本申请实施例不做限定,如可以是文字、图片等。相应的,当用户选择某一个布局模式标识信息时,即为用户选择了该布局模式标识信息对应的布局模式为当前所采用的布局模式。
第二添加对象的类型本申请实施例也不做限定,如可以是与第一添加对象相同的类型,具体可参见上文中对第一添加对象的说明在,在此就不再赘述。而第二布局模式用于表征不同于前文中第一布局模式的其它布局模式。
在实际应用中,若用户选择了当前布局模式为第二布局模式,此时第二用户操作界面中显示有第二对象布局区域,在接收到用户基于时第二用户操作界面触发的第二对象添加请求后,可以直接基于第二对象添加请求中的第二添加位置将用户选择的待添加的第二对象添加至第二对象布局区域中,无需根据二添加位置所对应的子布局区域对第二对象布局区域进行调整。
可以理解的是,上述中的第一对象添加请求和第二对象添加请求是用于区分在哪个布局模式接收到的对象添加请求,二者并无本质上的区别。同理,上述中的第一对象布局区域和第二对象布局区域是用于区分在哪个布局模式下的对象布局区域,二者在本质上也并无区别。
本申请实施例提供了一种显示界面的布局装置,如图5所示,该显示界面的布局装置60可以包括:添加请求接收模块601、对象添加模块602以及区域调整模块603,其中,
添加请求接收模块601,用于通过第一用户操作界面接收用户在第一布局模式下触发的第一对象添加请求,其中,第一用户操作界面中显示有第一对象布局区域,第一对象布局区域中包括各第一子布局区域,第一对象添加请求中包括用户选择的待添加的第一对象和第一对象在第一对象布局区域中的第一添加位置;
对象添加模块602,用于根据第一添加位置,将第一对象添加至对应的目标第一子布局区域;
区域调整模块603,用于根据目标第一子布局区域的区域调整规则,对第一对象布局区域进行相应的区域调整,并将调整后的布局区域的指示信息提供给用户,以使用户根据指示信息确定下一待添加对象的添加位置。
本申请可选的实施例中,区域调整规则为区域划分规则,若目标第一子布局区域的至少一条边界属于第一对象布局区域的边界,根据目标第一子布局区域的区域调整规则,对第一对象布局区域进行相应的区域调整,包括:
根据目标第一子布局区域对应的区域划分规则,对第一对象布局区域进行重新划分,得到至少两个子对象布局区域。
本申请可选的实施例中,区域调整模块还用于:
在得到各子对象布局区域后,将每个子对象布局区域作为一个新的对象布局区域,对每个子对象布局区域分别进行区域划分,得到每个子对象布局区域的各第二子布局区域。
本申请可选的实施例中,区域调整模块还用于:
若第一对象布局区域中存在第一已添加对象,且第一已添加对象所在的区域属于至少两个不同的子对象布局区域,则基于预设置的第一调整规则,对第一已添加对象的位置进行相应的调整,以使得调整后的第一已添加对象所在的区域不属于至少两个不同的子对象布局区域。
本申请可选的实施例中,该装置还包括对象调整装置,具体用于:
在第一添加位置在第一对象布局区域中对应的区域存在第二已添加对象时,基于预设置的第二调整规则,对第二已添加对象的位置进行相应的调整,以使第一添加位置在第一对象布局区域中对应的区域不存在第二已添加对象。
本申请可选的实施例中,对象调整装置还用于:
在目标第一子布局区域的所有边界均属于第一对象布局区域的边界,且目标第一子布局区域中存在第三已添加对象时,将第三已添加对象从第一对象布局区域中删除。
本申请可选的实施例中,指示信息为各子对象布局区域之间的分界标识线,该装置还包括区域大小调整模块,用于:
接收用户对分界标识线的位置调整操作;
基于位置调整操作,对位置调整操作所针对的分界标识线所对应的各子对象布局区域进行相应的调整。
本申请可选的实施例中,该装置还包括模式切换模块,用于:
在接收到模式切换操作时,将第一用户操作界面切换至操作对应于第二布局模式的第二用户操作界面,第二用户操作界面中显示有第二对象布局区域;
接收用户在第二布局模式下触发的第二对象添加请求,第二对象添加请求中包括用户选择的待添加的第二对象和第二对象在第二对象布局区域中的第二添加位置;
根据第二添加位置,将第二对象添加至第二对象布局区域。
本实施例的显示界面的布局装置可执行本申请实施例一提供的一种显示界面的布局方法,其实现原理相类似,此处不再赘述。
本申请实施例提供了一种电子设备,如图6所示,图6所示的电子设备2000包括:处理器2001和存储器2003。其中,处理器2001和存储器2003相连,如通过总线2002相连。可选地,电子设备2000还可以包括收发器2004。需要说明的是,实际应用中收发器2004不限于一个,该电子设备2000的结构并不构成对本申请实施例的限定。
其中,处理器2001应用于本申请实施例中,用于实现图5所示的各模块的功能。
处理器2001可以是CPU,通用处理器,DSP,ASIC,FPGA或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框,模块和电路。处理器2001也可以是实现计算功能的组合,例如包含一个或多个微处理器组合,DSP和微处理器的组合等。
总线2002可包括一通路,在上述组件之间传送信息。总线2002可以是PCI总线或EISA总线等。总线2002可以分为地址总线、数据总线、控制总线等。为便于表示,图6中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。
存储器2003可以是ROM或可存储静态信息和指令的其他类型的静态存储设备,RAM或者可存储信息和指令的其他类型的动态存储设备,也可以是EEPROM、CD-ROM或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质,但不限于此。
存储器2003用于存储执行本申请方案的应用程序代码,并由处理器2001来控制执行。处理器2001用于执行存储器2003中存储的应用程序代码,以实现图5所示实施例提供的显示界面的布局装置的动作。
本申请实施例提供了一种电子设备,本申请实施例中的电子设备包括:处理器;以及存储器,存储器配置用于存储机器可读指令,该指令在由该处理器执行时,使得该处理器执行显示界面的布局法。
本申请实施例提供了一种计算机可读存储介质,该计算机可读存储介质上用于存储计算机指令,当计算机指令在计算机上运行时,使得计算机可以执行实现显示界面的布局方法。
本申请中的一种计算机可读存储介质所涉及的名词及实现原理具体可以参照本申请实施例中的一种显示界面的布局方法,在此不再赘述。
应该理解的是,虽然附图的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,其可以以其他的顺序执行。而且,附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段,这些子步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,其执行顺序也不必然是依次进行,而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
以上所述仅是本发明的部分实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本发明原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也应视为本发明的保护范围。
Claims (8)
1.一种显示界面的布局方法,其特征在于,包括:
通过第一用户操作界面接收用户在第一布局模式下触发的第一对象添加请求,其中,所述第一用户操作界面中显示有第一对象布局区域,所述第一对象布局区域中包括各第一子布局区域,所述第一对象添加请求中包括用户选择的待添加的第一对象和所述第一对象在所述第一对象布局区域中的第一添加位置;
根据所述第一添加位置,将所述第一对象添加至对应的目标第一子布局区域;
根据所述目标第一子布局区域的区域调整规则,对所述第一对象布局区域进行相应的区域调整,并将调整后的布局区域的指示信息提供给所述用户,以使所述用户根据所述指示信息确定下一待添加对象的添加位置,
所述区域调整规则为区域划分规则,若所述目标第一子布局区域的至少一条边界属于所述第一对象布局区域的边界,所述根据所述目标第一子布局区域的区域调整规则,对所述第一对象布局区域进行相应的区域调整,包括:
根据所述目标第一子布局区域对应的区域划分规则,对所述第一对象布局区域进行重新划分,得到至少两个子对象布局区域,
若所述第一对象布局区域中存在第一已添加对象,且所述第一已添加对象所在的区域属于至少两个不同的所述子对象布局区域,所述方法还包括:
基于预设置的第一调整规则,对所述第一已添加对象的位置进行相应的调整,以使得调整后的所述第一已添加对象所在的区域不属于至少两个不同的所述子对象布局区域。
2.根据权利要求1所述的方法,其特征在于,所述得到各子对象布局区域后,所述方法还包括:
将每个所述子对象布局区域作为一个新的对象布局区域,对每个所述子对象布局区域分别进行区域划分,得到每个子对象布局区域的各第二子布局区域。
3.根据权利要求1所述的方法,其特征在于,若所述第一添加位置在所述第一对象布局区域中对应的区域存在第二已添加对象,所述方法还包括:
基于预设置的第二调整规则,对所述第二已添加对象的位置进行相应的调整,以使所述第一添加位置在所述第一对象布局区域中对应的区域不存在所述第二已添加对象。
4.根据权利要求1所述的方法,其特征在于,若所述目标第一子布局区域的所有边界均属于所述第一对象布局区域的边界,且目标第一子布局区域中存在第三已添加对象,所述方法还包括:
将所述第三已添加对象从所述第一对象布局区域中删除。
5.根据权利要求1至4任一项所述的方法,其特征在于,所述指示信息为各所述子对象布局区域之间的分界标识线,所述方法还包括:
接收用户对所述分界标识线的位置调整操作;
基于所述位置调整操作,对所述位置调整操作所针对的分界标识线所对应的各子对象布局区域进行相应的调整。
6.一种显示界面的布局装置,其特征在于,包括:
添加请求接收模块,用于通过第一用户操作界面接收用户在第一布局模式下触发的第一对象添加请求,其中,所述第一用户操作界面中显示有第一对象布局区域,所述第一对象布局区域中包括各第一子布局区域,所述第一对象添加请求中包括用户选择的待添加的第一对象和所述第一对象在所述第一对象布局区域中的第一添加位置;
对象添加模块,用于根据所述第一添加位置,将所述第一对象添加至对应的目标第一子布局区域;
区域调整模块,用于根据所述目标第一子布局区域的区域调整规则,对所述第一对象布局区域进行相应的区域调整,并将调整后的布局区域的指示信息提供给所述用户,以使所述用户根据所述指示信息确定下一待添加对象的添加位置,
所述区域调整规则为区域划分规则,若所述目标第一子布局区域的至少一条边界属于所述第一对象布局区域的边界时,
所述区域调整模块包括,
划分单元,用于根据所述目标第一子布局区域对应的区域划分规则,对所述第一对象布局区域进行重新划分,得到至少两个子对象布局区域,
若所述第一对象布局区域中存在第一已添加对象,且所述第一已添加对象所在的区域属于至少两个不同的所述子对象布局区域,所述装置还包括:
调整单元,用于基于预设置的第一调整规则,对所述第一已添加对象的位置进行相应的调整,以使得调整后的所述第一已添加对象所在的区域不属于至少两个不同的所述子对象布局区域。
7.一种电子设备,其特征在于,包括处理器和存储器:
所述存储器被配置用于存储机器可读指令,所述指令在由所述处理器执行时,使得所述处理器执行权利要求1至5任一项所述的方法。
8.一种计算机可读存储介质,存储有计算机程序,其特征在于,所述计算机存储介质用于存储计算机指令,当所述计算机指令在所述计算机上运行时,使得所述计算机可以执行上述权利要求1至5中任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010102795.2A CN111338522B (zh) | 2020-02-19 | 2020-02-19 | 显示界面的布局方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010102795.2A CN111338522B (zh) | 2020-02-19 | 2020-02-19 | 显示界面的布局方法、装置、电子设备及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111338522A CN111338522A (zh) | 2020-06-26 |
CN111338522B true CN111338522B (zh) | 2021-06-18 |
Family
ID=71184228
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010102795.2A Active CN111338522B (zh) | 2020-02-19 | 2020-02-19 | 显示界面的布局方法、装置、电子设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111338522B (zh) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117435091B (zh) * | 2023-12-19 | 2024-04-09 | 麦格纳汽车动力总成(天津)有限公司 | 一种能源管理方法、系统、设备及介质 |
Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104750406A (zh) * | 2013-12-31 | 2015-07-01 | 深圳迈瑞生物医疗电子股份有限公司 | 监护设备及其显示界面布局调整方法、装置 |
CN108415703A (zh) * | 2018-02-08 | 2018-08-17 | 武汉斗鱼网络科技有限公司 | 一种界面布局方法、装置、电子设备及存储介质 |
CN109284152A (zh) * | 2017-07-21 | 2019-01-29 | 中兴通讯股份有限公司 | 一种菜单可视化配置方法、设备及计算机可读存储介质 |
CN110007915A (zh) * | 2018-01-04 | 2019-07-12 | 武汉斗鱼网络科技有限公司 | 一种自适应子控件的线性布局方法及装置 |
CN110007999A (zh) * | 2019-04-15 | 2019-07-12 | 成都四方伟业软件股份有限公司 | 页面布局方法、装置及计算机可读存储介质 |
CN110597510A (zh) * | 2019-08-09 | 2019-12-20 | 华为技术有限公司 | 一种界面的动态布局方法及设备 |
Family Cites Families (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2001184344A (ja) * | 1999-12-21 | 2001-07-06 | Internatl Business Mach Corp <Ibm> | 情報処理システム、プロキシサーバ、ウェブページ表示制御方法、記憶媒体、及びプログラム伝送装置 |
CN100456239C (zh) * | 2007-08-28 | 2009-01-28 | 中国科学院软件研究所 | 一种图形用户界面的多语言自适应方法 |
CN104423874B (zh) * | 2013-09-10 | 2018-12-21 | 上海联影医疗科技有限公司 | 一种用户界面的显示方法及装置 |
CN106681586A (zh) * | 2016-12-21 | 2017-05-17 | 广东欧珀移动通信有限公司 | 布局位置调整方法及装置 |
CN110069683B (zh) * | 2017-09-18 | 2021-08-13 | 北京国双科技有限公司 | 一种基于浏览器爬取数据的方法及装置 |
CN108932144B (zh) * | 2018-06-11 | 2021-02-09 | 广州视源电子科技股份有限公司 | 显示界面控制方法、装置、设备及存储介质 |
CN109358854A (zh) * | 2018-10-22 | 2019-02-19 | 中国银行股份有限公司 | 一种页面布局的修改方法及装置 |
CN109614176B (zh) * | 2018-10-30 | 2021-10-15 | 努比亚技术有限公司 | 一种应用界面布局方法、终端及计算机可读存储介质 |
CN110096328A (zh) * | 2019-05-09 | 2019-08-06 | 中国航空工业集团公司洛阳电光设备研究所 | 一种基于飞行任务的hud界面优化布局自适应方法及系统 |
-
2020
- 2020-02-19 CN CN202010102795.2A patent/CN111338522B/zh active Active
Patent Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104750406A (zh) * | 2013-12-31 | 2015-07-01 | 深圳迈瑞生物医疗电子股份有限公司 | 监护设备及其显示界面布局调整方法、装置 |
CN109284152A (zh) * | 2017-07-21 | 2019-01-29 | 中兴通讯股份有限公司 | 一种菜单可视化配置方法、设备及计算机可读存储介质 |
CN110007915A (zh) * | 2018-01-04 | 2019-07-12 | 武汉斗鱼网络科技有限公司 | 一种自适应子控件的线性布局方法及装置 |
CN108415703A (zh) * | 2018-02-08 | 2018-08-17 | 武汉斗鱼网络科技有限公司 | 一种界面布局方法、装置、电子设备及存储介质 |
CN110007999A (zh) * | 2019-04-15 | 2019-07-12 | 成都四方伟业软件股份有限公司 | 页面布局方法、装置及计算机可读存储介质 |
CN110597510A (zh) * | 2019-08-09 | 2019-12-20 | 华为技术有限公司 | 一种界面的动态布局方法及设备 |
Also Published As
Publication number | Publication date |
---|---|
CN111338522A (zh) | 2020-06-26 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
EP3001331B1 (en) | Method and system for ranking desktop objects | |
CN109376316B (zh) | 动态加载路由的方法、系统和服务器 | |
CN111840989B (zh) | 虚拟对象移动路线的处理方法、装置及电子设备 | |
CN103164191A (zh) | 网页元素拖拽方法和装置 | |
CN109710362B (zh) | 截图处理方法、计算设备及计算机存储介质 | |
CN111338522B (zh) | 显示界面的布局方法、装置、电子设备及存储介质 | |
CN107908604A (zh) | 报表图形生成方法、装置、计算机设备和存储介质 | |
CN110058778A (zh) | 输入面板切换方法及装置 | |
CN105824843B (zh) | 一种地理信息系统地图渲染方法和装置 | |
CN110413161A (zh) | 组件配置方法、装置以及电子设备 | |
CN111158840B (zh) | 图像轮播方法及装置 | |
CN109309858B (zh) | 一种互斥图标的显示方法、装置、设备及介质 | |
CN113419806B (zh) | 图像处理方法、装置、计算机设备和存储介质 | |
CN112214704B (zh) | 页面处理方法及装置 | |
JP2013120201A (ja) | 情報処理装置及び方法 | |
CN115185415A (zh) | 扫描数据显示方法、装置、设备及存储介质 | |
CN106547528B (zh) | 一种界面布局方法以及装置 | |
CN113656533A (zh) | 一种树形控件处理方法、装置及电子设备 | |
CN106648729A (zh) | 应用冻结方法及系统 | |
CN108122240B (zh) | 一种三维图像中的目标区域的确定方法、装置及设备 | |
CN109066973B (zh) | 一种智能变电站的可视化方法、系统及终端设备 | |
KR101678541B1 (ko) | 메뉴를 표시하는 방법, 장치 및 디바이스 | |
CN106569785B (zh) | 一种作业表单生成方法及设备 | |
JP6575221B2 (ja) | 表示制御方法、情報処理装置及び表示制御プログラム | |
CN114296609B (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 |