CN112230828A - 组件布局方法及装置、存储介质 - Google Patents

组件布局方法及装置、存储介质 Download PDF

Info

Publication number
CN112230828A
CN112230828A CN201910640103.7A CN201910640103A CN112230828A CN 112230828 A CN112230828 A CN 112230828A CN 201910640103 A CN201910640103 A CN 201910640103A CN 112230828 A CN112230828 A CN 112230828A
Authority
CN
China
Prior art keywords
component
components
groups
type
target
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201910640103.7A
Other languages
English (en)
Other versions
CN112230828B (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.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen 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 Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201910640103.7A priority Critical patent/CN112230828B/zh
Publication of CN112230828A publication Critical patent/CN112230828A/zh
Application granted granted Critical
Publication of CN112230828B publication Critical patent/CN112230828B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

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/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
    • 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
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • 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
    • G06F3/0486—Drag-and-drop
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
    • Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
    • Y02P90/30—Computing systems specially adapted for manufacturing

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是本申请实施例提供的一种组件布局方法的方法流程图；
图2是本申请实施例提供的另一种组件布局方法的方法流程图；
图3是本申请实施例提供的一种在布局客户端的用户界面中选择的多个组件的示意图；
图4是本申请实施例提供的一种对每种类型的组件进行排序的方法流程图；
图5是对图3所示的多个组件进行分组后的示意图；
图6是本申请实施例提供的一种对至少两个组件组进行初始网格排布的方法流程图；
图7是本申请实施例提供的一种对至少两个组件组进行初始网格排布后的示意图；
图8是本申请实施例提供的一种调整至少两个组件组的方法流程图；
图9是本申请实施例提供的一种对至少两个组件组进行调整后的示意图；
图10是本申请实施例提供的一种组件布局装置的框图；
图11是本申请实施例提供的另一种组件布局装置的框图；
图12是本申请实施例提供的一种排布模块的框图；
图13是本申请实施例提供的一种终端的结构框图。
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。
具体实施方式
为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请作进一步地详细描述。
本申请实施例提供的组件布局方法可以由终端执行，该终端中可以安装有布局客户端，终端可以通过布局客户端执行本申请实施例提供的组件布局方法。其中，该终端可以为智能手机、平板电脑、笔记本电脑或台式电脑等等，该布局客户端可以为PS客户端(一种图像处理客户端)、办公软件客户端(例如word文档客户端)等，在一些实施场景中，布局客户端又可以称为布局工具，组件例如图片、文本框或按钮等。
其中，布局客户端可以提供用户界面，用户界面中可以显示有多个组件，用户可以在该用户界面中触发对该多个组件的布局指令，终端在接收到该布局指令后，可以执行本申请实施例提供的组件布局方法来对该多个组件进行布局。
请参考图1，其示出了本申请实施例提供一种组件布局方法的方法流程图，该组件布局方法可以由终端执行。如图1所示，该方法可以包括如下几个步骤：
步骤101、确定多个组件的类型分布信息，多个组件中存在至少一种类型的组件，类型分布信息指示多个组件中每种类型的组件的数量，多个组件中不同类型的组件的数量呈倍数关系。
可选地，终端中安装有布局客户端，该布局客户端可以提供有用户界面，多个组件可以是用户在用户界面中选择的多个组件，该多个组件可以包括图片、文本框和按钮等，且图片、文本框和按钮为不同类型的组件。
步骤102、根据多个组件的类型分布信息，对多个组件进行分组得到至少两个组件组，组件组包括至少一种类型的组件。
可选地，每个组件组可以包括上述多个组件中所有类型的组件，且每个组件组中同一类型的组件可以是一个或一个以上。例如，每个组件组可以包括1个图片、2个文本框和1个按钮。
步骤103、对至少两个组件组进行网格排布，使至少两个组件组中位于同一行的组件组对齐，位于同一列的组件组对齐。
其中，每个组件组中，不同组件可以按照列方向排布。位于同一行的组件组对齐，位于同一列的组件组对齐指的可以是：位于同一行的所有组件组的高度相等，位于同一列的所有组件组的宽度相等，位于同一行中的同一类型的组件的高度相等，且每个组件组中相邻组件的间距相等。示例地，每个组件组可以包括1个图片、2个文本框和1个按钮，则位于同一行中的同一类型的组件的高度相等指的是：位于同一行的图片的高度相等，位于同一行的文本框的高度相等，且位于同一行的按钮的高度相等。
可选地，终端可以先对该至少两个组件组进行初始网格排布，以确定出对该至少两个组件组进行网格排布的行数、每行的组件组的数量以及每行的组件组(也即是确定出行数和列数)，之后，调整该至少两个组件组的尺寸和位置中的至少一种，使位于同一行的组件组对齐，且位于同一列的组件组对齐。
综上所述，本申请实施例提供的组件布局方法，终端确定多个组件的类型分布信息后，根据该多个组件类型分布信息，对该多个组件进行分组得到至少两个组件组，之后对该至少两个组件组进行网格排布，使该至少两个组件组中位于同一行的组件组对齐，位于同一列的组件组对齐。由于是终端对组件进行布局的，因此可以简化组件布局过程，提高布局精度。
请参考图2，其示出了本申请实施例提供另一种组件布局方法的方法流程图，该组件布局方法可以由终端执行。如图2所示，该方法可以包括如下几个步骤：
步骤201、确定多个组件的类型分布信息，多个组件中存在至少一种类型的组件，类型分布信息指示多个组件中每种类型的组件的数量，多个组件中不同类型的组件的数量呈倍数关系。
可选地，终端中可以安装有布局客户端，该布局客户端可以提供用户界面，该多个组件可以是用户在该用户界面中选择的多个组件，该多个组件中可以存在至少一种类型的组件，且该多个组件中不同类型的组件的数量通常可以呈倍数关系，以便于能够对该多个组件进行网格排布。其中，用户可以通过拖拽操作对组件进行选择，该多个组件可以包括图片、文本框和按钮，图片、文本框和按钮为三种不同类型的组件。
示例地，请参考图3，其示出了本申请实施例提供的一种用户在布局客户端的用户界面Q中选择的多个组件的示意图，如图3所示，该多个组件可以包括4个图片，8个文本框和4个按钮，该4个图片为图片P1～图片P4，8个文本框为文本框T1～文本框T8，4个按钮为按钮B1～按钮B4，文本框的数量为图片的数量的2倍，按钮的数量为图片的数量的1倍，也即是，图片、文本框和按钮的数量呈倍数关系。
可选地，终端可以对该多个组件进行类型统计，得到每个组件的类型，进而根据该多个组件的类型确定该多个组件的类型分布信息。示例地，当该多个组件包括4个图片，8个文本框和4个按钮时，该多个组件的类型分布信息可以如下表1所示：
表1
类型 数量
图片 4
文本框 8
按钮 4
步骤202、根据多个组件的类型分布信息，确定分组数量。
可选地，终端根据多个组件的类型分布信息，将上述至少一种类型的组件的数量中，最少的数量确定为分组数量，该分组数量可以采用m表示，m为大于或等于1的整数。
示例地，由表1所示的类型分布信息可知，在多个组件中，图片、文本框和按钮这三种类型的组件的数量中，最少的数量为4，因此终端可以确定分组数量为4，也即是，m＝4,。其中，该最少的数量4可以是图片的数量，也可以是按钮的数量。
步骤203、根据多个组件中每种类型的组件的数量和分组数量，确定每个组件组中该每种类型的组件的数量。
可选地，终端可以将多个组件中，每种类型的组件的数量和分组数量的商值，确定为每个组件组中该每种类型的组件的数量，每个组件组中该每种类型的组件的数量可以采用n表示，n为大于或等于1的整数。
示例地，多个组件包括4个图片，8个文本框和4个按钮，分组数量为4，则终端可以将该多个组件中，图片的数量与分组数量的商值确定为每个组件组中图片的数量，文本框的数量与分组数量的商值确定为每个组件组中文本框的数量，按钮的数量与分组数量的商值确定为每个组件组中按钮的数量，也即是，终端确定每个组件组包括1个图片，2个文本框和1个按钮，也即是对于图片，n＝1，对于文本框，n＝2，对于按钮，n＝1。
步骤204、对每种类型的组件进行排序，得到每种类型的组件序列。
可选地，终端可以对每种类型的组件进行排序，得到每种类型的组件序列，例如，终端对多个组件中的图片进行排序得到图片序列，对多个组件中的文本框进行排序得到文本框序列，对多个组件中的按钮进行排序得到按钮序列。
示例地，请参考图4，其示出了本申请实施例提供的一种对每种类型的组件进行排序的方法流程图，参见图4，该方法可以包括：
子步骤2041、确定多个组件中的每个组件在目标坐标系中的位置坐标。
其中，目标坐标系可以是二维坐标系，且可以是布局客户端自带的坐标系，该目标坐标系可以位于布局客户端的用户界面中，用户界面通常可以为矩形，该目标坐标系的原点可以位于矩形的一个角上。例如，如图3所示，该目标坐标系的原点位于用户界面Q的左上角。
用户界面中的每个组件在该目标坐标系中可以具有一个位置坐标，终端可以确定该多个组件中，每个组件在该目标坐标系中的位置坐标。容易理解，组件通常具有一定体积，组件在目标坐标系中的位置坐标可以是组件的等效位置点在该目标坐标系中的位置坐标，该等效位置点可以是组件上的任意位置点，例如，该等效位置点可以是组件的中心点，或者，当组件为矩形组件时，该等效位置点可以是组件的左上角、右上角、左下角或右下角中的任一角所在的位置点。
可选地，终端可以确定每个组件的等效位置点与目标坐标系的y轴之间的距离，以及，每个组件的等效位置点与目标坐标系的x轴之间的距离，将每个组件的等效位置点与目标坐标系的y轴之间的距离确定该每个组件的x坐标，根据该每个组件的等效位置点与目标坐标系的x轴之间的距离确定该每个组件的y坐标，从而得到每个组件在目标坐标系中的位置坐标。
子步骤2042、对于每种类型的任意两个组件，当该任意两个组件的x坐标的差值小于第一目标阈值时，按照该任意两个组件的y坐标的大小对该任意两个组件进行排序，当该任意两个组件的x坐标的差值不小于第一目标阈值时，按照该任意两个组件的x坐标的大小对该任意两个组件进行排序，得到初始组件序列，初始组件序列中每相邻的n个组件构成一个组件子组，初始组件序列包括m个组件子组。
可选地，对于每种类型的任意两个组件，终端可以确定该任意两个组件的x坐标的差值，然后将该任意两个组件的x坐标的差值与第一目标阈值比较，来判断该任意两个组件的x坐标的差值是否小于第一目标阈值，当该任意两个组件的x坐标的差值小于第一目标阈值时，终端按照该任意两个组件的y坐标的大小对该任意两个组件进行排序，当该任意两个组件的x坐标的差值不小于(也即是大于或等于)第一目标阈值时，终端按照该任意两个组件的x坐标的大小对该任意两个组件进行排序。对于每种类型的所有组件，终端通过执行该判断与排序过程，以实现对该每种类型的组件的排序，得到该每种类型的初始组件序列，该初始组件序列中每相邻的n个组件可以构成一个组件子组，因此该初始组件序列可以包括m个组件子组。
其中，第一目标阈值可以根据实际情况确定，例如，根据布局客户端提供的用户界面的尺寸，布局工具的坐标刻度等确定。示例地，第一目标阈值可以为30。
示例地，以第一目标阈值为30为例，对于步骤201中提供的图片P1～图片P4，首先，假设图片P1的x坐标与图片P2的x坐标的差值不小于30，且图片P1的x坐标小于图片P2的x坐标，则终端按照图片P1和图片P2的x坐标的大小将图片P1排在图片P2之前；接着，假设图片P2的x坐标与图片P3的x坐标的差值不小于30，且图片P2的x坐标大于图片P3的x坐标，则终端按照图片P2和图片P3的x坐标的大小将图片P3排在图片P2之前；然后，假设图片P1的x坐标与图片P3的x坐标的差值小于30，且图片P1的y坐标小于图片P3的y坐标，则终端按照图片P1和图片P3的y坐标的大小将图片P1排在图片P3之前；之后，假设图片P2的x坐标与图片P4的x坐标的差值小于30，且图片P2的y坐标小于图片P4的y坐标，则终端按照图片P2和图片P4的y坐标的大小将图片P2排在图片P4之前；依次类推，对于图片P1～图片P4中的每两个图片，执行上述排序操作，得到的初始组件序列可以为：图片P1、图片P3、图片P2、图片P4，该初始组件序列中每相邻的1(n＝1)个组件构成一个组件子组，因此该初始组件序列可以包括4个组件子组，也即是，图片P1、图片P3、图片P2和图片P4各自构成一个组件子组。
同理，对文本框T1～文本框T8进行排序得到的初始组件序列为：文本框T1、文本框T2、文本框T5、文本框T6、文本框T3、文本框T4、文本框T7、文本框T8，该初始组件序列中每相邻的2(n＝2)个组件构成一个组件子组，因此该初始组件序列可以包括4个组件子组，也即是，文本框T1和文本框T2构成一个组件子组，文本框T5和文本框T6构成一个组件子组，文本框T3和文本框T4构成一个组件子组，文本框T7和文本框T8构成一个组件子组。
同理，对按钮B1～按钮B4进行排序得到的初始组件序列为：按钮B1、按钮B3、按钮B2、按钮B4，该初始组件序列中每相邻的1(n＝1)个组件构成一个组件子组，因此该初始组件序列可以包括4个组件子组，也即是，按钮B1、按钮B3、按钮B2、按钮B4各自构成一个组件子组。
子步骤2043、根据初始组件序列中，每个组件子组中的n个组件的位置坐标，确定每个组件子组的位置坐标，得到m个组件子组的位置坐标。
可选地，终端可以将每个组件子组中的所有组件在目标坐标系中的位置坐标中，最大的x坐标确定为该组件子组的x坐标，最大的y坐标确定为该组件子组的y坐标，从而得到该组件子组在目标坐标系中的位置坐标，或者，终端可以将每个组件子组中的所有组件在目标坐标系中的位置坐标中，最小的x坐标确定为该组件子组的x坐标，最小的y坐标确定为该组件子组的y坐标，从而得到该组件子组在目标坐标系中的位置坐标，或者，终端可以根据每个组件子组中的各个组件在目标坐标系中的位置坐标，确定该组件子组中的各个组件的等效位置点，根据该组件子组中所有组件的等效位置点，确定该组件子组在目标坐标系中的等效位置点，将该组件子组在目标坐标系中的等效位置点的位置坐标确定为该组件子组在目标坐标系中的位置坐标，本申请实施例对此不做限定。
子步骤2044、对于m个组件子组中的任意两个组件子组，当任意两个组件子组的y坐标的差值小于第二目标阈值时，按照任意两个组件子组的x坐标的大小对任意两个组件子组进行排序，当任意两个组件子组的y坐标的差值不小于第二目标阈值时，按照任意两个组件子组的y坐标的大小对任意两个组件子组进行排序，得到每种类型的组件序列。
可选地，对于m个组件子组中的任意两个组件子组，终端可以确定该任意两个组件子组的y坐标的差值，然后将该任意两个组件子组的y坐标的差值与第二目标阈值比较，来判断该任意两个组件子组的y坐标的差值是否小于第二目标阈值，当该任意两个组件子组的y坐标的差值小于第二目标阈值时，终端按照该任意两个组件子组的x坐标的大小对该任意两个组件子组进行排序，当该任意两个组件子组的y坐标的差值不小于(也即是大于或等于)第二目标阈值时，终端按照该任意两个组件子组的y坐标的大小对该任意两个组件子组进行排序。对于m个组件子组，终端通过执行该判断与排序过程，以实现对该m个组件子组的排序，得到该每种类型的组件序列。
其中，第二目标阈值可以根据实际情况确定，且第二目标阈值与第一目标阈值可以相等或不相等，例如，第二目标阈值根据布局客户端提供的用户界面的尺寸，布局工具的坐标刻度等确定。示例地，第二目标阈值可以为30。
示例地，终端对图片P1、图片P3、图片P2和图片P4各自构成的4个组件子组进行上述排序得到的图片序列可以为：图片P1、图片P2、图片P3、图片P4。同理，对文本框T1和文本框T2构成一个组件子组，文本框T5和文本框T6构成一个组件子组，文本框T3和文本框T4构成一个组件子组，文本框T7和文本框T8构成的4个组件子组进行排序得到的文本框序列可以为：文本框T1、文本框T2、文本框T3、文本框T4、文本框T5、文本框T6、文本框T7、文本框T8；对按钮B1、按钮B3、按钮B2、按钮B4构成的组件子组进行排序得到的按钮序列可以为：按钮B1、按钮B2、按钮B3、按钮B4。
步骤205、根据每个组件组中至少一种类型的组件的数量，对多个组件执行至少两次分组操作得到至少两个组件组。
其中，每次分组操作用于确定一个组件组的至少一种类型的组件，也即是，每执行一次分组操作可以确定一个组件组，每个组件组中的各个组件可以按照组件的y坐标的大小排序。其中，执行第k次分组操作得到的组件组中，每种类型的组件为该每种类型的组件序列中序号属于目标范围的组件，该目标范围为[(k-1)*n+1，k*n+1)，1≤k≤m，n表示组件组中每种类型的组件的数量，m表示分组数量。
示例地，继续以上述4个图片，8个文本框和4个按钮为例，则由步骤202可以确定m＝4，由步骤203可以确定对于图片，n＝1，对于文本框，n＝2，对于按钮，n＝1。则执行第一次分组操作得到的组件组G1中的图片为上述图片序列中，序号属于目标范围[(k-1)*n+1，k*n+1)＝[(1-1)*1+1，1*1+1)＝[1，2)的图片，也即是序号为1的图片，文本框为上述文本框序列中，序号属于目标范围[(k-1)*n+1，k*n+1)＝[(1-1)*2+1，1*2+1)＝[1，3)的文本框，也即是序号为1和2的文本框，按钮为上述按钮序列中，序号属于目标范围[(k-1)*n+1，k*n+1)＝[(1-1)*1+1，1*1+1)＝[1，2)的按钮，也即是序号为1的按钮，因此执行第一次分组操作得到的组件组G1包括：图片P1、文本框T1、文本框T2和按钮B1。同理可得执行第二次分组操作得到的组件组G2包括：图片P2、文本框T3、文本框T4和按钮B2，执行第三次分组操作得到的组件组G3包括：图片P3、文本框T5、文本框T6和按钮B3，执行第四次分组操作得到的组件组G4包括：图片P4、文本框T7、文本框T8和按钮B4。示例地，该组件组G1～组件组G4可以如图5所示。
本领域技术人员容易理解，上述步骤202至步骤205是用于实现组件分组的步骤，也即是，上述步骤202至步骤205能够实施成为图1所示实施例的步骤102，本申请实施例对此不做限定。
步骤206、根据至少两个组件组中的每个组件组所包括的组件的位置，对至少两个组件组进行初始网格排布。
可选地，请参考图6，其示出了本申请实施例提供的一种对至少两个组件组进行初始网格排布的方法流程图，参见图6，该方法可以包括：
子步骤2061、对于至少两个组件组中的每个组件组，根据组件组中的组件在目标坐标系中的位置坐标，确定组件组在目标坐标系中的位置坐标。
每个组件组包括至少两个组件，终端可以根据每个组件组的所有组件在目标坐标系中的位置坐标，确定该每个组件组在目标坐标系中的位置坐标。
可选地，终端可以将每个组件组中的所有组件在目标坐标系中的位置坐标中，最大的x坐标确定为该组件组的x坐标，最大的y坐标确定为该组件组的y坐标，从而得到该组件组在目标坐标系中的位置坐标，或者，终端可以将每个组件组中的所有组件在目标坐标系中的位置坐标中，最小的x坐标确定为该组件组的x坐标，最小的y坐标确定为该组件组的y坐标，从而得到该组件组在目标坐标系中的位置坐标，或者，终端可以根据每个组件组中的各个组件在目标坐标系中的位置坐标，确定该组件组中的各个组件的等效位置点，根据该组件组中所有组件的等效位置点，确定该组件组在目标坐标系中的等效位置点，将该组件组在目标坐标系中的等效位置点的坐标确定为该组件组在目标坐标系中的位置坐标，本申请实施例对此不做限定。
子步骤2062、根据至少两个组件组的位置坐标，对至少两个组件组进行排序，得到组件组序列。
可选地，对于至少两个组件组中的任意两个组件组，终端可以确定该任意两个组件组的y坐标的差值，然后将该任意两个组件组的y坐标的差值与第三目标阈值比较，来判断该任意两个组件组的y坐标的差值是否小于第三目标阈值，当该任意两个组件组的y坐标的差值小于第三目标阈值时，终端按照该任意两个组件组的x坐标的大小对该任意两个组件组进行排序，当该任意两个组件组的y坐标的差值不小于(也即是大于或等于)第三目标阈值时，终端按照该任意两个组件组的y坐标的大小对该任意两个组件组进行排序。对于至少两个组件组，终端通过执行该判断与排序过程，以实现对该至少两个组件组的排序，得到组件组序列。其中，第三目标阈值可以根据实际情况确定，且第三目标阈值与第一目标阈值、第二目标阈值可以相等或不相等，例如，第三目标阈值根据布局客户端提供的用户界面的尺寸，布局工具的坐标刻度等确定。示例地，第三目标阈值可以为30。
示例地，终端对上述组件组G1～组件组G4进行排序得到的组件组序列可以为：组件组G1、组件组G2、组件组G3、组件组G4。
子步骤2063、以组件组序列为目标序列执行行划分过程，行划分过程包括：依次对目标序列中的每个组件组执行判断子过程，对目标序列中的第i个组件组执行的判断子过程包括：确定目标序列的前i个组件组中，与目标序列中第1个组件组位于同一行的组件组的x坐标与第i个组件组的x坐标的方差，i≥1；当方差小于目标方差阈值时，确定第i个组件组与第1个组件组位于同一行；当方差不小于目标方差阈值时，确定第i个组件组与第1个组件组位于不同行。
可选地，终端可以将子步骤2062得到的组件组序列为目标序列，从该组件组序列的第1个组件组开始，依次对该目标序列中的每个组件组执行判断子过程。其中，终端对目标序列中的第i个组件组执行的判断子过程可以包括：终端首先采用方差公式确定该目标序列的前i个组件组中，与该目标序列中第1个组件组位于同一行的组件组的x坐标与第i个组件组的x坐标的方差，然后判断该方差是否小于目标方差阈值，当该方差小于目标方差阈值时，终端确定该第i个组件组与该第1个组件组位于同一行，当该方差不小于目标方差阈值时，确定该第i个组件组与该第1个组件组位于不同行。其中，该方差公式可以为：
Figure BDA0002130835510000121
ai表示该目标序列中当前参与计算的组件组(也即是该目标序列的前i个组件组中与该目标序列中第1个组件组位于同一行的组件组和该第i个组件组)的x坐标的方差，xj表示该前i个组件组中与该目标序列中第1个组件组位于同一行的组件组的x坐标，u表示当前参与计算的组件组的x坐标的均值，s表示当前参数计算的组件组的数量。其中，目标方差阈值可以根据实际情况设置，在本申请实施例中，该目标方差阈值可以为400。
示例地，对于目标序列中的第2个组件组G2，终端采用方差公式
Figure BDA0002130835510000122
确定该目标序列的前2个组件组(也即是组件组G1和组件组G2)中，与该目标序列中第1个组件组G1位于同一行的组件组的x坐标与第2个组件组G2的x坐标的方差a2，然后判断该方差a2是否小于400，假设该方差a2小于400，则终端确定该第2个组件组G2与该第1个组件组G1位于同一行。再示例地，对于目标序列中的第3个组件组G3，终端采用方差公式
Figure BDA0002130835510000131
确定该目标序列的前3个组件组(也即是组件组G1～组件组G3)中，与该目标序列中第1个组件组G1位于同一行的组件组的x坐标与第3个组件组G3的x坐标的方差a3，然后判断该方差a3是否小于400，假设该方差a3不小于400，则终端确定该第3个组件组G3与该第1个组件组G1位于不同行。又示例地，对于目标序列中的第4个组件组G4，终端采用方差公式
Figure BDA0002130835510000132
确定该目标序列的前4个组件组(也即是组件组G1～组件组G4)中，与该目标序列中第1个组件组G1位于同一行的组件组的x坐标与第4个组件组G4的x坐标的方差a4，然后判断该方差a4是否小于400，假设该方差a4不小于400，则终端确定该第4个组件组G4与该第1个组件组G1位于不同行。需要说明的是，由于目标序列中的第3个组件组G3与第1个组件组G1位于不同行，因此在确定目标序列中的第4个组件组G4与第1个组件组G1是否位于同一行时，计算方差的过程无需考虑第3个组件组G3的坐标。
子步骤2064、当目标序列存在与该目标序列的第1个组件组位于不同行的至少一个组件组时，将目标序列更新为该至少一个组件组构成的序列，重复执行行划分过程，直至确定出至少两个组件组中的每个组件组所在行。
可选地，在执行子步骤2063的过程中，如果终端确定目标序列(也即是排序得到的组件组序列)存在与该目标序列的第1个组件组位于不同行的至少一个组件组，则终端将目标序列更新为由该至少一个组件组构成的序列，重复执行上述行划分过程，直至确定出至少两个组件组中的每个组件组所在行。
示例地，由子步骤2063可知，目标序列中的组件组G3和组件组G4与该目标序列的第1个组件组G1位于不同行，因此终端将目标序列更新为组件组G3和组件组G4构成的序列，重复执行行划分过程，直至确定出组件组G3和组件组G4所在行。以组件组G3和组件组G4构成的序列为目标序列执行行划分过程的实现过程可以参考上述子步骤2063，本申请实施例在此不再赘述，但是需要说明的是，在以组件组G3和组件组G4构成的序列为目标序列执行行划分过程时，该目标序列的第1个组件组为组件组G3。
本领域技术人员容易理解，通过执行该步骤206，终端可以确定出至少两个组件组中的各个组件组所在行，也即是，可以确定出至少两个组件组中，哪些组件组位于同一行。示例地，请参考图7，其示出的是本申请实施例提供的一种对至少两个组件组进行初始网格排布后的示意图，组件组G1和组件组G2位于第1行R1中，组件组G3和组件组G4位于第2行R2中。
步骤207、调整至少两个组件组中的每个组件组的位置和尺寸中的至少一种，使至少两个组件组中位于同一行的组件组对齐，位于同一列的组件组对齐。
可选地，请参考图8，其示出了本申请实施例提供的一种调整至少两个组件组的方法流程图，参见图8，该方法可以包括：
子步骤2071、根据对至少两个组件组进行初始网格排布的结果，确定至少两个组件组的行分布信息，行分布信息指示每行组件组的数量。
对至少两个组件组进行初始网格排布，可以确定出该至少两个组件组中，位于同一行的组件组，从而确定出每行组件组的数量，因此终端可以根据对该至少两个组件组进行初始网格排布的结果，确定该至少两个组件组的行分布信息，该行分布信息指示每行组件组的数量。
示例地，以步骤206中的组件组G1～组件组G4为例，则行分布信息可以如下表2所示：
表2
行号 数量
R1 2
R2 2
子步骤2072、根据布局区域的宽度、目标间距和每行组件组的数量，确定每行组件组中的各个组件组的目标宽度。
其中，布局区域可以是布局客户端的用户界面，或者是该用户界面中的某个区域，该某个区域可以是用户在用户界面中选择的，也可以是终端对布局客户端的用户界面进行划分得到的，则相应的，布局区域的宽度可以是用户界面的宽度，或者是该某一区域的宽度。目标间距可以根据实际情况确定，例如，由终端根据布局区域的宽度以及需要达到的布局效果确定。
可选地，终端可以根据宽度确定公式确定每行的各个组件组的宽度，该宽度确定公式可以为：wp＝[w-(ep+1)×d]/ep，wp表示第p行中的各个组件组的目标宽度，w表示布局区域的宽度，ep表示第p行的组件组的数量，d表示目标间距。其中，d通常为常数，对于一确定的布局区域，该w为定值，终端可以将每行组件组的数量带入上述公式，确定出该行的各个组件组的宽度。
子步骤2073、确定每行组件组中，每种类型的组件的目标高度。
可选地，终端可以将每行组件组中，每种类型的组件的高度的平均值，确定为该每行组件组中，该每种类型的组件的目标高度。
示例地，第1行R1包括图片P1，图片P2，文本框T1～文本框T4，按钮B1和按钮B2，则终端将图片P1与图片P2的高度的平均值确定为该第1行R1中的图片的目标高度，将文本框T1～文本框T4的高度的平均值确定为该第1行R1中的文本框的目标高度，将按钮B1与按钮B2的高度的平均值确定为该第1行R1中的按钮的目标高度。同理，终端可以确定第2行R2中的每种类型的组件的目标高度。容易理解，每行组件组中，不同类型的组件的目标高度可以相同或不同。
子步骤2074、调整至少两个组件组中的每个组件组的位置和尺寸中的至少一种，使每行组件组中的各个组件组的宽度等于目标宽度，每行组件组中每种类型的组件的高度等于目标高度，相邻的组件组的间距等于目标间距，且组件组中的相邻组件的间距等于目标间距。
可选地，终端可以根据至少两个组件组的位置坐标，调整每个组件组在目标坐标系中的位置，根据子步骤2072确定出的目标宽度，上述子步骤2073确定出目标高度，以及目标间距调整各个组件组的尺寸，使每行组件组中的各个组件组的宽度等于目标宽度，每行组件组中每种类型的组件的高度等于目标高度，相邻的组件组的间距等于目标间距，且每个组件组中的相邻组件的间距等于目标间距。其中，该子步骤2074所述的目标间距通常与上述子步骤2072所述的目标间距相等。
示例地，请参考图9，其示出的是本申请实施例提供的一种对至少两个组件组进行调整后的示意图，参见图9并结合图7，对至少两个组件组进行调整之后，位于第1行R1的组件组G1和组件组G2对齐，且组件组G1和组件组G2中，类型相同的组件对齐，位于第2行R2的组件组G3和组件组G4对齐，且组件组G3和组件组G4中，类型相同的组件对齐，且位于同一列的组件组G1和组件组G3对齐，且组件组G1和组件组G3中，类型相同的组件对齐，位于同一列的组件组G2和组件组G4对齐，且组件组G2和组件组G4中，类型相同的组件对齐，。
本领域技术人员容易理解，上述步骤206至步骤207是实现组件组网格排布且对齐的步骤，也即是，上述步骤202至步骤205能够实施成为图1所示实施例的步骤102，本申请实施例对此不做限定。
需要说明的是，本申请实施例提供的组件布局方法步骤的先后顺序可以进行适当调整，步骤也可以根据情况进行相应增减，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化的方法，都应涵盖在本申请的保护范围之内，因此不再赘述。
综上所述，本申请实施例提供的组件布局方法，终端确定多个组件的类型分布信息后，根据该多个组件类型分布信息，对该多个组件进行分组得到至少两个组件组，之后对该至少两个组件组进行网格排布，使该至少两个组件组中位于同一行的组件组对齐，位于同一列的组件组对齐。由于是终端对组件进行布局的，因此可以简化组件布局过程，提高布局精度。此外，多个组件可以是用户通过随意简单的拖拽操作选择的，用户选择多个组件后，终端可以自动对多个组件分组并网格排布，整个过程十分快速自然，对于用户的交互效率有很大提升。
下述为本申请装置实施例，可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。
请参考图10，其示出了本申请实施例提供的一种组件布局装置1000的框图，该组件布局装置1000可以为终端中的功能组件，用于执行上述实施例提供的组件布局方法，参见图10，该组件布局装置1000可以包括但不限于：
确定模块1010，用于确定多个组件的类型分布信息，多个组件中存在至少一种类型的组件，类型分布信息指示多个组件中每种类型的组件的数量，多个组件中不同类型的组件的数量呈倍数关系；
分组模块1020，用于根据多个组件的类型分布信息，对多个组件进行分组得到至少两个组件组，组件组包括至少一种类型的组件；
排布模块1030，用于对至少两个组件组进行网格排布，使至少两个组件组中位于同一行的组件组对齐，位于同一列的组件组对齐。
综上所述，本申请实施例提供的组件布局装置，确定模块确定多个组件的类型分布信息后，分组模块根据该多个组件类型分布信息，对该多个组件进行分组得到至少两个组件组，之后排布模块对该至少两个组件组进行网格排布，使该至少两个组件组中位于同一行的组件组对齐，位于同一列的组件组对齐。由于是终端对组件进行布局的，因此可以简化组件布局过程，提高布局精度。
可选地，分组模块1020，用于：
根据多个组件的类型分布信息，确定分组数量；
根据多个组件中每种类型的组件的数量和分组数量，确定组件组中每种类型的组件的数量；
根据组件组中至少一种类型的组件的数量，对多个组件执行至少两次分组操作得到至少两个组件组，每次分组操作用于确定一个组件组的至少一种类型的组件。
可选地，请参考图11，其示出了本申请实施例提供的另一种组件布局装置1000的框图，在图10的基础上，该组件布局装置1000还包括：
排序模块1040，用于对每种类型的组件进行排序，得到每种类型的组件序列；
该分组模块1020，用于根据组件组中至少一种类型的组件的数量，对多个组件执行至少两次分组操作得到至少两个组件组，执行第k次分组操作得到的组件组中，每种类型的组件为每种类型的组件序列中序号属于目标范围的组件，目标范围为[(k-1)*n+1，k*n+1)，1≤k≤m，n表示组件组中每种类型的组件的数量，m表示分组数量。
可选地，排序模块1040，用于：
确定多个组件中的每个组件在目标坐标系中的位置坐标；
对于每种类型的任意两个组件，当任意两个组件的x坐标的差值小于第一目标阈值时，按照任意两个组件的y坐标的大小对任意两个组件进行排序，当任意两个组件的x坐标的差值不小于第一目标阈值时，按照任意两个组件的x坐标的大小对任意两个组件进行排序，得到初始组件序列，该初始组件序列中每相邻的n个组件构成一个组件子组，该初始组件序列包括m个组件子组；
根据初始组件序列中，每个组件子组中的n个组件的位置坐标，确定每个组件子组的位置坐标，得到m个组件子组的位置坐标；
对于m个组件子组中的任意两个组件子组，当任意两个组件子组的y坐标的差值小于第二目标阈值时，按照任意两个组件子组的x坐标的大小对任意两个组件子组进行排序，当任意两个组件子组的y坐标的差值不小于第二目标阈值时，按照任意两个组件子组的y坐标的大小对任意两个组件子组进行排序，得到每种类型的组件序列；
分组模块1020，用于根据组件组中至少一种类型的组件的数量，对多个组件执行至少两次分组操作得到至少两个组件组，组件组中的各个组件按照y坐标的大小排序。
可选地，请参考图12，其示出了本申请实施例提供的一种排布模块1030的框图，参见图12，该排布模块1030包括：
排布单元1031，用于根据至少两个组件组中的每个组件组所包括的组件的位置，对至少两个组件组进行初始网格排布；
调整单元1032，用于调整至少两个组件组中的每个组件组的位置和尺寸中的至少一种，使至少两个组件组中位于同一行的组件组对齐，位于同一列的组件组对齐。
可选地，排布单元1031，用于：
对于至少两个组件组中的每个组件组，根据组件组中的组件在目标坐标系中的位置坐标，确定组件组在目标坐标系中的位置坐标；
根据至少两个组件组的位置坐标，对至少两个组件组进行排序，得到组件组序列；
以组件组序列为目标序列执行行划分过程，行划分过程包括：依次对目标序列中的每个组件组执行判断子过程，对目标序列中的第i个组件组执行的判断子过程包括：确定目标序列的前i个组件组中，与目标序列中第1个组件组位于同一行的组件组的x坐标与第i个组件组的x坐标的方差，i≥1；当方差小于目标方差阈值时，确定第i个组件组与第1个组件组位于同一行；当方差不小于目标方差阈值时，确定第i个组件组与第1个组件组位于不同行；
当目标序列存在与第1个组件组位于不同行的至少一个组件组时，将目标序列更新为至少一个组件组构成的序列，重复执行行划分过程，直至确定出至少两个组件组中的每个组件组所在行。
可选地，调整单元1032，用于：
根据对至少两个组件组进行初始网格排布的结果，确定至少两个组件组的行分布信息，行分布信息指示每行组件组的数量；
根据布局区域的宽度、目标间距和每行组件组的数量，确定每行组件组中的各个组件组的目标宽度；
确定每行组件组中，每种类型的组件的目标高度；
调整至少两个组件组中的每个组件组的位置和尺寸中的至少一种，使每行组件组中的各个组件组的宽度等于目标宽度，每行组件组中每种类型的组件的高度等于目标高度，相邻的组件组的间距等于目标间距，且组件组中的相邻组件的间距等于目标间距。
综上所述，本申请实施例提供的组件布局装置，确定模块确定多个组件的类型分布信息后，分组模块根据该多个组件类型分布信息，对该多个组件进行分组得到至少两个组件组，之后排布模块对该至少两个组件组进行网格排布，使该至少两个组件组中位于同一行的组件组对齐，位于同一列的组件组对齐。由于是终端对组件进行布局的，因此可以简化组件布局过程，提高布局精度。
关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
请参考图13，其示出了本申请实施例提供的一种终端900的结构框图。该终端900可以是智能手机、平板电脑、笔记本电脑或台式电脑等终端。该终端900还可能被称为用户设备、便携式终端、膝上型终端或台式终端等其他名称。
通常，终端900包括有：处理器901和存储器902。
处理器901可以包括一个或多个处理核心，比如4核心处理器、9核心处理器等。处理器901可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器901也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器901可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器901还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。
存储器902可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器902还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器902中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器901所执行以实现本申请实施例提供的组件布局方法。
在一些实施例中，终端900还可选包括有：外围设备接口903和至少一个外围设备。处理器901、存储器902和外围设备接口903之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口903相连。具体地，外围设备包括：射频电路904、触摸显示屏905、摄像头906、音频电路907、定位组件908和电源909中的至少一种。
外围设备接口903可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器901和存储器902。在一些实施例中，处理器901、存储器902和外围设备接口903被集成在同一芯片或电路板上；在一些其他实施例中，处理器901、存储器902和外围设备接口903中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。
射频电路904用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路904通过电磁信号与通信网络以及其他通信设备进行通信。射频电路904将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路904包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路904可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路904还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。
显示屏905用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏905是触摸显示屏时，显示屏905还具有采集在显示屏905的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器901进行处理。此时，显示屏905还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏905可以为一个，设置在终端900的前面板；在另一些实施例中，显示屏905可以为至少两个，分别设置在终端900的不同表面或呈折叠设计；在另一些实施例中，显示屏905可以是柔性显示屏，设置在终端900的弯曲表面上或折叠面上。甚至，显示屏905还可以设置成非矩形的不规则图形，也即异形屏。显示屏905可以采用LCD(Liquid Crystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode，有机发光二极管)等材质制备。
摄像头组件906用于采集图像或视频。可选地，摄像头组件906包括前置摄像头和后置摄像头。通常，前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件906还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。
音频电路907可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器901进行处理，或者输入至射频电路904以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端900的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器901或射频电路904的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路907还可以包括耳机插孔。
定位组件908用于定位终端900的当前地理位置，以实现导航或LBS(LocationBased Service，基于位置的服务)。定位组件908可以是基于美国的GPS(GlobalPositioning System，全球定位系统)、中国的北斗系统、俄罗斯的格雷纳斯系统或欧盟的伽利略系统的定位组件。
电源909用于为终端900中的各个组件进行供电。电源909可以是交流电、直流电、一次性电池或可充电电池。当电源909包括可充电电池时，该可充电电池可以支持有线充电或无线充电。可充电电池还可以用于支持快充技术。
在一些实施例中，终端900还包括有一个或多个传感器910。该一个或多个传感器910包括但不限于：加速度传感器911、陀螺仪传感器912、压力传感器913、指纹传感器914、光学传感器915以及接近传感器916。
加速度传感器911可以检测以终端900建立的坐标系的三个位置坐标轴上的加速度大小。比如，加速度传感器911可以用于检测重力加速度在三个位置坐标轴上的分量。处理器901可以根据加速度传感器911采集的重力加速度信号，控制触摸显示屏905以横向视图或纵向视图进行用户界面的显示。加速度传感器911还可以用于游戏或者用户的运动数据的采集。
陀螺仪传感器912可以检测终端900的机体方向及转动角度，陀螺仪传感器912可以与加速度传感器911协同采集用户对终端900的3D动作。处理器901根据陀螺仪传感器912采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。
压力传感器913可以设置在终端900的侧边框和/或触摸显示屏905的下层。当压力传感器913设置在终端900的侧边框时，可以检测用户对终端900的握持信号，由处理器901根据压力传感器913采集的握持信号进行左右手识别或快捷操作。当压力传感器913设置在触摸显示屏905的下层时，由处理器901根据用户对触摸显示屏905的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。
指纹传感器914用于采集用户的指纹，由处理器901根据指纹传感器914采集到的指纹识别用户的身份，或者，由指纹传感器914根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器901授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器914可以被设置终端900的正面、背面或侧面。当终端900上设置有物理按键或厂商Logo时，指纹传感器914可以与物理按键或厂商Logo集成在一起。
光学传感器915用于采集环境光强度。在一个实施例中，处理器901可以根据光学传感器915采集的环境光强度，控制触摸显示屏905的显示亮度。具体地，当环境光强度较高时，调高触摸显示屏905的显示亮度；当环境光强度较低时，调低触摸显示屏905的显示亮度。在另一个实施例中，处理器901还可以根据光学传感器915采集的环境光强度，动态调整摄像头组件906的拍摄参数。
接近传感器916，也称距离传感器，通常设置在终端900的前面板。接近传感器916用于采集用户与终端900的正面之间的距离。在一个实施例中，当接近传感器916检测到用户与终端900的正面之间的距离逐渐变小时，由处理器901控制触摸显示屏905从亮屏状态切换为息屏状态；当接近传感器916检测到用户与终端900的正面之间的距离逐渐变大时，由处理器901控制触摸显示屏905从息屏状态切换为亮屏状态。
本领域技术人员可以理解，图13中示出的结构并不构成对终端900的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。
本申请实施例中还提供了一种计算机可读存储介质，该存储介质中可以存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现上述实施例提供的组件布局方法。
本申请中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。
本申请中术语“至少一种”表示一种或多种，多种表示两种或两种以上。
本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。
以上所述仅为本申请的可选实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种组件布局方法，其特征在于，用于终端，包括：
确定多个组件的类型分布信息，所述多个组件中存在至少一种类型的组件，所述类型分布信息指示所述多个组件中每种类型的组件的数量，所述多个组件中不同类型的组件的数量呈倍数关系；
根据所述多个组件的类型分布信息，对所述多个组件进行分组得到至少两个组件组，所述组件组包括所述至少一种类型的组件；
对所述至少两个组件组进行网格排布，使所述至少两个组件组中位于同一行的所述组件组对齐，位于同一列的所述组件组对齐。
2.根据权利要求1所述的方法，其特征在于，
所述根据所述多个组件的类型分布信息，对所述多个组件进行分组得到至少两个组件组，包括：
根据所述多个组件的类型分布信息，确定分组数量；
根据所述多个组件中每种类型的组件的数量和所述分组数量，确定所述组件组中所述每种类型的组件的数量；
根据所述组件组中所述至少一种类型的组件的数量，对所述多个组件执行至少两次分组操作得到所述至少两个组件组，每次分组操作用于确定一个所述组件组的所述至少一种类型的组件。
3.根据权利要求2所述的方法，其特征在于，
在根据所述组件组中所述至少一种类型的组件的数量，对所述多个组件执行至少两次分组操作得到所述至少两个组件组之前，所述方法还包括：
对所述每种类型的组件进行排序，得到所述每种类型的组件序列；
所述根据所述组件组中所述至少一种类型的组件的数量，对所述多个组件执行至少两次分组操作得到所述至少两个组件组，包括：
根据所述组件组中所述至少一种类型的组件的数量，对所述多个组件执行至少两次分组操作得到所述至少两个组件组，执行第k次分组操作得到的所述组件组中，所述每种类型的组件为所述每种类型的组件序列中序号属于目标范围的组件，所述目标范围为[(k-1)*n+1，k*n+1)，1≤k≤m，n表示所述组件组中所述每种类型的组件的数量，m表示所述分组数量。
4.根据权利要求3所述的方法，其特征在于，
所述对所述每种类型的组件进行排序，得到所述每种类型的组件序列，包括：
确定所述多个组件中的每个组件在目标坐标系中的位置坐标；
对于所述每种类型的任意两个组件，当所述任意两个组件的x坐标的差值小于第一目标阈值时，按照所述任意两个组件的y坐标的大小对所述任意两个组件进行排序，当所述任意两个组件的x坐标的差值不小于所述第一目标阈值时，按照所述任意两个组件的x坐标的大小对所述任意两个组件进行排序，得到初始组件序列，所述初始组件序列中每相邻的n个组件构成一个组件子组，所述初始组件序列包括m个组件子组；
根据所述初始组件序列中，每个组件子组中的n个组件的位置坐标，确定所述每个组件子组的位置坐标，得到所述m个组件子组的位置坐标；
对于所述m个组件子组中的任意两个组件子组，当所述任意两个组件子组的y坐标的差值小于第二目标阈值时，按照所述任意两个组件子组的x坐标的大小对所述任意两个组件子组进行排序，当所述任意两个组件子组的y坐标的差值不小于所述第二目标阈值时，按照所述任意两个组件子组的y坐标的大小对所述任意两个组件子组进行排序，得到所述每种类型的组件序列；
所述根据所述组件组中所述至少一种类型的组件的数量，对所述多个组件执行至少两次分组操作得到所述至少两个组件组，包括：
根据所述组件组中所述至少一种类型的组件的数量，对所述多个组件执行至少两次分组操作得到所述至少两个组件组，所述组件组中的各个组件按照y坐标的大小排序。
5.根据权利要求1至4任一所述的方法，其特征在于，
所述对所述至少两个组件组进行网格排布，使所述至少两个组件组中位于同一行的所述组件组对齐，且位于同一列的所述组件组对齐，包括：
根据所述至少两个组件组中的每个组件组所包括的组件的位置，对所述至少两个组件组进行初始网格排布；
调整所述至少两个组件组中的每个组件组的位置和尺寸中的至少一种，使所述至少两个组件组中位于同一行的所述组件组对齐，位于同一列的所述组件组对齐。
6.根据权利要求5所述的方法，其特征在于，
所述根据所述至少两个组件组中的每个组件组所包括的组件的位置，对所述至少两个组件组进行初始网格排布，包括：
对于所述至少两个组件组中的每个组件组，根据所述组件组中的组件在所述目标坐标系中的位置坐标，确定所述组件组在所述目标坐标系中的位置坐标；
根据所述至少两个组件组的位置坐标，对所述至少两个组件组进行排序，得到组件组序列；
以所述组件组序列为目标序列执行行划分过程，所述行划分过程包括：依次对所述目标序列中的每个组件组执行判断子过程，对所述目标序列中的第i个组件组执行的判断子过程包括：确定所述目标序列的前i个组件组中，与所述目标序列中第1个组件组位于同一行的组件组的x坐标与所述第i个组件组的x坐标的方差，i≥1；当所述方差小于目标方差阈值时，确定所述第i个组件组与所述第1个组件组位于同一行；当所述方差不小于所述目标方差阈值时，确定所述第i个组件组与所述第1个组件组位于不同行；
当所述目标序列存在与所述第1个组件组位于不同行的至少一个组件组时，将所述目标序列更新为所述至少一个组件组构成的序列，重复执行所述行划分过程，直至确定出所述至少两个组件组中的每个组件组所在行。
7.根据权利要求5所述的方法，其特征在于，
所述调整所述至少两个组件组中的每个组件组的位置和尺寸中的至少一种，使所述至少两个组件组中位于同一行的所述组件组对齐，位于同一列的所述组件组对齐，包括：
根据对所述至少两个组件组进行初始网格排布的结果，确定所述至少两个组件组的行分布信息，所述行分布信息指示每行组件组的数量；
根据布局区域的宽度、目标间距和所述每行组件组的数量，确定所述每行组件组中的各个组件组的目标宽度；
确定所述每行组件组中，每种类型的组件的目标高度；
调整所述至少两个组件组中的每个组件组的位置和尺寸中的至少一种，使所述每行组件组中的各个组件组的宽度等于所述目标宽度，所述每行组件组中所述每种类型的组件的高度等于所述目标高度，相邻的所述组件组的间距等于所述目标间距，且所述组件组中的相邻组件的间距等于所述目标间距。
8.一种组件布局装置，其特征在于，用于终端，包括：
确定模块，用于确定多个组件的类型分布信息，所述多个组件中存在至少一种类型的组件，所述类型分布信息指示所述多个组件中每种类型的组件的数量，所述多个组件中不同类型的组件的数量呈倍数关系；
分组模块，用于根据所述多个组件的类型分布信息，对所述多个组件进行分组得到至少两个组件组，所述组件组包括所述至少一种类型的组件；
排布模块，用于对所述至少两个组件组进行网格排布，使所述至少两个组件组中位于同一行的所述组件组对齐，位于同一列的所述组件组对齐。
9.一种终端，其特征在于，所述终端包括：处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如权利要求1至7任一所述的组件布局方法。
10.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如权利要求1至7任一所述的组件布局方法。
CN201910640103.7A 2019-07-15 2019-07-15 组件布局方法及装置、存储介质 Active CN112230828B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910640103.7A CN112230828B (zh) 2019-07-15 2019-07-15 组件布局方法及装置、存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910640103.7A CN112230828B (zh) 2019-07-15 2019-07-15 组件布局方法及装置、存储介质

Publications (2)

Publication Number Publication Date
CN112230828A true CN112230828A (zh) 2021-01-15
CN112230828B CN112230828B (zh) 2023-07-25

Family

ID=74111194

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910640103.7A Active CN112230828B (zh) 2019-07-15 2019-07-15 组件布局方法及装置、存储介质

Country Status (1)

Country Link
CN (1) CN112230828B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113792237A (zh) * 2021-09-13 2021-12-14 山石网科通信技术股份有限公司 卡片式布局的优化方法、装置、存储介质及处理器

Citations (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080059877A1 (en) * 2006-08-29 2008-03-06 David Brookler Method for automatically adjusting the components of a screen region to maintain layout integrity in multiple languages
CN101620591A (zh) * 2009-08-12 2010-01-06 国网电力科学研究院 一种基于单元格方式的组件化报表布局设计方法
US20110099494A1 (en) * 2009-10-22 2011-04-28 Microsoft Corporation Dynamic graphical user interface layout
US20120147046A1 (en) * 2009-09-09 2012-06-14 Hui Chao Generating Graphic Object Collages
CN102629197A (zh) * 2012-02-28 2012-08-08 上海万得信息技术股份有限公司 一种灵活屏分组管理系统及方法
US20130083028A1 (en) * 2011-09-30 2013-04-04 Google Inc. Efficient layout of components on a user-interface
US20140304681A1 (en) * 2007-08-03 2014-10-09 Adobe Systems Incorporated User Interfaces, Methods, and Systems for Developing Computer Applications Using Artwork
JP2016095624A (ja) * 2014-11-13 2016-05-26 富士通株式会社 情報処理装置、設計支援方法、及び設計支援プログラム
CN105723358A (zh) * 2013-09-12 2016-06-29 维克斯网有限公司 用于在交互式站点与用于支持移动设备和其它显示环境的应用之间的自动转换的系统和方法
US20170102927A1 (en) * 2015-10-09 2017-04-13 Oracle International Corporation Automated responsive grid-based layout design system
US20170337161A1 (en) * 2016-05-17 2017-11-23 Google Inc. Constraints-based layout system for efficient layout and control of user interface elements
CN108052662A (zh) * 2017-12-29 2018-05-18 上海器魂智能科技有限公司 基于网页的组件布局方法、装置、设备及存储介质
CN109582411A (zh) * 2018-10-17 2019-04-05 深圳壹账通智能科技有限公司 图形用户界面生成方法、装置、计算机设备及存储介质

Patent Citations (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080059877A1 (en) * 2006-08-29 2008-03-06 David Brookler Method for automatically adjusting the components of a screen region to maintain layout integrity in multiple languages
US20140304681A1 (en) * 2007-08-03 2014-10-09 Adobe Systems Incorporated User Interfaces, Methods, and Systems for Developing Computer Applications Using Artwork
CN101620591A (zh) * 2009-08-12 2010-01-06 国网电力科学研究院 一种基于单元格方式的组件化报表布局设计方法
US20120147046A1 (en) * 2009-09-09 2012-06-14 Hui Chao Generating Graphic Object Collages
US20110099494A1 (en) * 2009-10-22 2011-04-28 Microsoft Corporation Dynamic graphical user interface layout
US20130083028A1 (en) * 2011-09-30 2013-04-04 Google Inc. Efficient layout of components on a user-interface
CN102629197A (zh) * 2012-02-28 2012-08-08 上海万得信息技术股份有限公司 一种灵活屏分组管理系统及方法
CN105723358A (zh) * 2013-09-12 2016-06-29 维克斯网有限公司 用于在交互式站点与用于支持移动设备和其它显示环境的应用之间的自动转换的系统和方法
JP2016095624A (ja) * 2014-11-13 2016-05-26 富士通株式会社 情報処理装置、設計支援方法、及び設計支援プログラム
US20170102927A1 (en) * 2015-10-09 2017-04-13 Oracle International Corporation Automated responsive grid-based layout design system
US20170337161A1 (en) * 2016-05-17 2017-11-23 Google Inc. Constraints-based layout system for efficient layout and control of user interface elements
CN108052662A (zh) * 2017-12-29 2018-05-18 上海器魂智能科技有限公司 基于网页的组件布局方法、装置、设备及存储介质
CN109582411A (zh) * 2018-10-17 2019-04-05 深圳壹账通智能科技有限公司 图形用户界面生成方法、装置、计算机设备及存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
方美玉;: "基于Java的复杂GUI布局之实现", 浙江教育学院学报, no. 02 *

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113792237A (zh) * 2021-09-13 2021-12-14 山石网科通信技术股份有限公司 卡片式布局的优化方法、装置、存储介质及处理器
CN113792237B (zh) * 2021-09-13 2024-05-31 山石网科通信技术股份有限公司 卡片式布局的优化方法、装置、存储介质及处理器

Also Published As

Publication number Publication date
CN112230828B (zh) 2023-07-25

Similar Documents

Publication Publication Date Title
CN110992493B (zh) 图像处理方法、装置、电子设备及存储介质
CN109308205B (zh) 应用程序的显示适配方法、装置、设备及存储介质
CN110059685B (zh) 文字区域检测方法、装置及存储介质
CN109862412B (zh) 合拍视频的方法、装置及存储介质
CN109522863B (zh) 耳部关键点检测方法、装置及存储介质
CN110321126B (zh) 生成页面代码的方法和装置
CN112230908B (zh) 一种对齐组件的方法、装置、电子设备及存储介质
CN110288689B (zh) 对电子地图进行渲染的方法和装置
CN108764530B (zh) 油井抽油机的工作参数配置方法及装置
CN111857793B (zh) 网络模型的训练方法、装置、设备及存储介质
CN112116681A (zh) 图像生成方法、装置、计算机设备及存储介质
CN112989198B (zh) 推送内容的确定方法、装置、设备及计算机可读存储介质
CN112612405B (zh) 窗口显示方法、装置、设备及计算机可读存储介质
CN112560435A (zh) 文本语料处理方法、装置、设备及存储介质
CN112230828B (zh) 组件布局方法及装置、存储介质
CN115798417A (zh) 背光亮度的确定方法、装置、设备及计算机可读存储介质
CN111369434B (zh) 拼接视频封面生成的方法、装置、设备和存储介质
CN112052153B (zh) 产品版本测试方法及装置
CN110555443B (zh) 颜色分类方法、装置及存储介质
CN113535039A (zh) 更新页面的方法、装置、电子设备及计算机可读存储介质
CN113409235B (zh) 一种灭点估计的方法及装置
CN113763486B (zh) 主色调提取方法、装置、电子设备及存储介质
CN116681755B (zh) 位姿预测方法和装置
CN111381765B (zh) 文本框的显示方法、装置、计算机设备及存储介质
CN113052408B (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