CN117215584B - 一种ui自动排列方法、系统、存储介质及电子设备 - Google Patents

Abstract

本发明提供了一种UI自动排列方法、系统、存储介质及电子设备，该方法通过创建一用于排列子UI的固定区域，并设置子UI的数量、整体排列方式、尺寸以及各子UI的间距；根据上述参数，挂载对应的排列组件，并在固定区域中随机创建子UI，形成子UI组群，确定子UI组群中各子UI中孙UI的初始宽高比和初始锚点坐标，其中，排列组件包括水平排列组件、竖直排列组件及网格排列组件；获取子UI组群的目标尺寸，并根据目标尺寸，判断子UI组群是否超过固定区域；若是，则缩小子UI组群，直至子UI组群位于固定区域内，当遇到在固定区域内创建并排列多个子UI的需求时，可以快速实现需求。

Description

一种UI自动排列方法、系统、存储介质及电子设备

技术领域

本发明属于UI自动排列的技术领域，具体涉及一种UI自动排列方法、系统、存储介质及电子设备。

背景技术

UI设计（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。

在UI设计过程中，往往需要在一固定区域内，基于项目需求，对子UI进行依次排列，目前的操作手段为，对逐个UI进行调整，特别是当遇到在固定区域内创建并排列多个子UI的需求时，若依次进行调整的话，操作较为繁琐，且工作量大，减缓了项目开发进程。

发明内容

基于此，本发明实施例当中提供了一种UI自动排列方法、系统、存储介质及电子设备，以解决现有技术中，当遇到在固定区域内创建并排列多个子UI的需求时，若依次进行调整的话，操作较为繁琐，且工作量大的问题。

本发明实施例的第一方面提供了一种UI自动排列方法，应用于UnityUGUI开发平台中，所述方法包括：

创建一用于排列子UI的固定区域，并设置子UI的目标参数，其中，所述目标参数至少包括子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距；

根据子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距，挂载对应的排列组件，并在所述固定区域中随机创建子UI，形成子UI组群，确定所述子UI组群中各子UI中孙UI的初始宽高比和初始锚点坐标，其中，排列组件包括水平排列组件、竖直排列组件及网格排列组件；

获取所述子UI组群的目标尺寸，并根据所述目标尺寸，判断所述子UI组群是否超过所述固定区域；

若是，则缩小所述子UI组群，直至子UI组群位于所述固定区域内。

进一步的，所述根据子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距，挂载对应的排列组件的步骤中，当子UI的整体排列方式为水平排列时，则挂载水平排列组件；当子UI的整体排列方式为竖直排列时，则挂载竖直排列组件；当子UI的整体排列方式为网格排列时，则挂载网格排列组件，其中，水平排列组件为UnityUGUI开发平台中的HorizontalLyaoutGroup，竖直排列组件为UnityUGUI开发平台中的VerticalLayoutGroup，网格排列组件为UnityUGUI开发平台中的GridLayoutGroup。

进一步的，所述获取所述子UI组群的目标尺寸，并根据所述目标尺寸，判断所述子UI组群是否超过所述固定区域的步骤包括：

当挂载网格排列组件时，获取子UI组群中代表头部子UI的第一坐标、子UI组群中代表尾部子UI的第二坐标、子UI组群与所述固定区域上边界的第一距离、以及子UI组群与所述固定区域下边界的第二距离；

计算所述第二坐标与所述第一坐标在竖直方向上的差值，并将所述差值、所述第一距离及所述第二距离求和，得到第一高度；

获取所述固定区域的第二高度，判断所述第一高度是否大于所述第二高度；

若是，则说明所述子UI组群超过所述固定区域。

进一步的，所述获取所述子UI组群的目标尺寸，并根据所述目标尺寸，判断所述子UI组群是否超过所述固定区域的步骤包括：

当挂载水平排列组件时，获取子UI组群中代表头部子UI的第三坐标、子UI组群中代表尾部子UI的第四坐标、子UI组群与所述固定区域左边界的第三距离、以及子UI组群与所述固定区域右边界的第四距离；

计算所述第三坐标与所述第四坐标在水平方向上的差值，并将所述差值、所述第三距离及所述第四距离求和，得到第一宽度；

获取所述固定区域的第二宽度，判断所述第一宽度是否大于所述第二宽度；

若是，则说明所述子UI组群超过所述固定区域。

进一步的，所述获取所述子UI组群的目标尺寸，并根据所述目标尺寸，判断所述子UI组群是否超过所述固定区域的步骤包括：

当挂载竖直排列组件时，获取子UI组群中代表头部子UI的第五坐标、子UI组群中代表尾部子UI的第六坐标、子UI组群与所述固定区域上边界的第五距离、以及子UI组群与所述固定区域下边界的第六距离；

计算所述第五坐标与所述第六坐标在竖直方向上的差值，并将所述差值、所述第五距离及所述第六距离求和，得到第三高度；

获取所述固定区域的第四高度，判断所述第三高度是否大于所述第四高度；

若是，则说明所述子UI组群超过所述固定区域。

进一步的，所述缩小所述子UI组群，直至子UI组群位于所述固定区域内的步骤包括：

获取所述子UI组群与所述固定区域边界的尺寸、所述子UI组群内子UI尺寸、各子UI的间距、以及缩小比例；

将所述子UI组群与所述固定区域边界的尺寸、所述子UI组群内子UI尺寸、各子UI的间距分别与所述缩小比例相乘，得到调整后的子UI组群与固定区域边界的尺寸、子UI组群内子UI尺寸、各子UI的间距；

控制子UI组群和子UI组群中的各子UI按调整后的子UI组群与固定区域边界的尺寸、子UI组群内子UI尺寸、各子UI的间距布置，并采用自动重建布局，自动调整元素的位置和大小，以保持布局的一致性；

将各子UI中孙UI的初始宽高比和初始锚点坐标分别与所述缩小比例相乘，得到各目标宽高比和目标锚点坐标，并根据各目标宽高比和目标锚点坐标，布置孙UI；

获取调整后的子UI组群的目标尺寸，并根据调整后的子UI组群的目标尺寸，判断调整后的子UI组群是否超过所述固定区域；

若是，则循环上述操作，直至子UI组群位于所述固定区域内；

若否，则停止操作。

进一步的，所述采用自动重建布局，自动调整元素的位置和大小，以保持布局的一致性的步骤中，调用LayoutRebuilder.ForceRebuildLayoutImmediate(image.GetComponent<RectTransform>())用于自动重建布局。

本发明实施例的第二方面提供了一种UI自动排列系统，应用于UnityUGUI开发平台中，所述系统包括：

创建模块，用于创建一用于排列子UI的固定区域，并设置子UI的目标参数，其中，所述目标参数至少包括子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距；

挂载模块，用于根据子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距，挂载对应的排列组件，并在所述固定区域中随机创建子UI，形成子UI组群，确定所述子UI组群中各子UI中孙UI的初始宽高比和初始锚点坐标，其中，排列组件包括水平排列组件、竖直排列组件及网格排列组件；

判断模块，用于获取所述子UI组群的目标尺寸，并根据所述目标尺寸，判断所述子UI组群是否超过所述固定区域；

缩小模块，用于当判断所述子UI组群超过所述固定区域时，则缩小所述子UI组群，直至子UI组群位于所述固定区域内。

本发明实施例的第三方面提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面提供的UI自动排列方法。

本发明实施例的第四方面提供了一种电子设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现第一方面提供的UI自动排列方法。

实施本发明实施例当中提供的一种UI自动排列方法、系统、存储介质及电子设备具有以下有益效果：

通过创建一用于排列子UI的固定区域，并设置子UI的目标参数，其中，目标参数至少包括子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距；根据子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距，挂载对应的排列组件，并在固定区域中随机创建子UI，形成子UI组群，确定子UI组群中各子UI中孙UI的初始宽高比和初始锚点坐标，其中，排列组件包括水平排列组件、竖直排列组件及网格排列组件；获取子UI组群的目标尺寸，并根据目标尺寸，判断子UI组群是否超过固定区域；若是，则缩小子UI组群，直至子UI组群位于固定区域内，当遇到在固定区域内创建并排列多个子UI的需求时，可以快速实现需求。

附图说明

图1为本发明实施例一提供的一种UI自动排列方法的实现流程图；

图2为本发明实施例四提供的一种UI自动排列系统的结构框图；

图3为本发明实施例五提供的一种电子设备的结构框图。

具体实施方式

为了便于理解本发明，下面将参照相关附图对本发明进行更全面的描述。附图中给出了本发明的若干实施例。但是，本发明可以以许多不同的形式来实现，并不限于本文所描述的实施例。相反地，提供这些实施例的目的是使对本发明的公开内容更加透彻全面。

需要说明的是，当元件被称为“固设于”另一个元件，它可以直接在另一个元件上或者也可以存在居中的元件。当一个元件被认为是“连接”另一个元件，它可以是直接连接到另一个元件或者可能同时存在居中元件。本文所使用的术语“垂直的”、“水平的”、“左”、“右”以及类似的表述只是为了说明的目的。

除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。本文所使用的术语“及／或”包括一个或多个相关的所列项目的任意的和所有的组合。

实施例一

请参阅图1，图1示出了本发明实施例一提供的一种UI自动排列方法，应用于UnityUGUI开发平台中，UnityUGUI也即Unity UI（uGUI），uGUI是Unity的内置UI系统，用于创建2D和3D用户界面。它提供了一个可视化的编辑器，使用户可以轻松创建交互式UI元素，例如按钮、文本框、滑动条等。uGUI还支持响应式设计和自动布局，其中，UI自动排列方法具体包括步骤S01至步骤S04。

步骤S01，创建一用于排列子UI的固定区域，并设置子UI的目标参数，其中，所述目标参数至少包括子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距。

具体的，首先创建一固定区域（image），该固定区域用于排列子UI，并针对子UI，设置子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距等参数，另外，可以通过gridHigh=image.GetComponent<RectTransform>().rect.height获取该固定区域的高度。

步骤S02，根据子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距，挂载对应的排列组件，并在所述固定区域中随机创建子UI，形成子UI组群，确定所述子UI组群中各子UI中孙UI的初始宽高比和初始锚点坐标，其中，排列组件包括水平排列组件、竖直排列组件及网格排列组件。

需要说明的是，根据目标参数中的整体排列方式，选择合适的排列组件挂载到该固定区域，其中，排列组件包括水平排列组件、竖直排列组件及网格排列组件，在本实施例当中，当子UI的整体排列方式为水平排列时，则挂载水平排列组件；当子UI的整体排列方式为竖直排列时，则挂载竖直排列组件；当子UI的整体排列方式为网格排列时，则挂载网格排列组件，其中，水平排列组件为UnityUGUI开发平台中的HorizontalLyaoutGroup，竖直排列组件为UnityUGUI开发平台中的VerticalLayoutGroup，网格排列组件为UnityUGUI开发平台中的GridLayoutGroup。

其中，挂载合适的排列组件后，在固定区域中随机创建若干相同的子UI，以形成子UI组群，即一个整体，并记录子UI组群中各子UI中孙UI的初始宽高比（LocalScale）和初始锚点坐标（AnchoredPosition），可以理解的，孙UI即子UI的下级，位置上处于子UI的区域范围内。

步骤S03，获取所述子UI组群的目标尺寸，并根据所述目标尺寸，判断所述子UI组群是否超过所述固定区域，若是，则执行步骤S04。

在本实施例当中，当挂载网格排列组件时，获取子UI组群中代表头部子UI的第一坐标、子UI组群中代表尾部子UI的第二坐标、子UI组群与固定区域上边界的第一距离、以及子UI组群与固定区域下边界的第二距离，需要说明的是，子UI组群中代表头部子UI的第一坐标一般为子UI组群中第一个子UI的区域的左上角坐标，子UI组群中代表尾部子UI的第二坐标一般为子UI组群中最后一个子UI的区域的左上角坐标，而子UI组群与固定区域上边界的第一距离可通过GridLayoutGroup.padding.top获取，子UI组群与固定区域下边界的第二距离可通过GridLayoutGroup.padding.bottom获取。

当获取到上述子UI组群的目标尺寸时，计算第二坐标与第一坐标在竖直方向上的差值，可以理解的，该差值为一正数，并将差值、第一距离及第二距离求和，得到第一高度，进一步的，获取固定区域的第二高度，即根据上述的gridHigh获取，后判断第一高度是否大于第二高度，若判断第一高度大于第二高度，则说明子UI组群超过固定区域。

步骤S04，则缩小所述子UI组群，直至子UI组群位于所述固定区域内。

具体的，获取子UI组群与固定区域边界的尺寸、子UI组群内子UI尺寸、各子UI的间距、以及缩小比例；将子UI组群与固定区域边界的尺寸、子UI组群内子UI尺寸、各子UI的间距分别与缩小比例相乘，得到调整后的子UI组群与固定区域边界的尺寸、子UI组群内子UI尺寸、各子UI的间距，可以理解的，设置一个初始float值代表子UI的缩放比例（curScale=1），在Update()中执行curScale-= (curScale*0.02f) 每次curScale减少当前值的2%，即2%为每次调整的缩小比例，每当curScale变小一次，就要调整一下GridLayoutGroup的参数和子UI，即调整子UI组群与固定区域边界的尺寸、子UI组群内子UI尺寸、各子UI的间距，更为具体的，调整GridLayoutGroup.padding.right/left/top/bottom参数和GridLayoutGroup.cellSize/spacing参数的大小为其初始值乘以curScale。

进一步的，控制子UI组群和子UI组群中的各子UI按调整后的子UI组群与固定区域边界的尺寸、子UI组群内子UI尺寸、各子UI的间距布置，并采用自动重建布局，自动调整元素的位置和大小，以保持布局的一致性，其中，因为调整了GridLayoutGroup.cellSize参数，所以子UI的大小会发生变化，需要调用 LayoutRebuilder.ForceRebuildLayoutImmediate(image.GetComponent<RectTransform>())用于自动重建布局，自动调整元素的位置和大小，以保持布局的一致性，需要说明的是，LayoutRebuilder通过遍历UI元素的子元素，根据子元素的布局参数和约束条件，计算出子元素的位置和大小。然后，它会根据这些计算结果，调整子元素的位置和大小，以保持布局的一致性。

随后需要对孙UI进行调整，同理，将各子UI中孙UI的初始宽高比和初始锚点坐标分别与缩小比例相乘，得到各目标宽高比和目标锚点坐标，并根据各目标宽高比和目标锚点坐标，布置孙UI。可以理解的，这样计算执行下来，当curScale变化时，GridLayoutGroup组件参数和所有子UI及其孙UI都会进行一个调整，此调整不会改变子UI的自身的比例及其孙UI的结构，也不会影响整个UI界面的布局。

最后，获取调整后的子UI组群的目标尺寸，并根据调整后的子UI组群的目标尺寸，判断调整后的子UI组群是否超过固定区域；若是，则循环上述操作，直至子UI组群位于固定区域内；若否，则停止操作。可以理解的，不断调整子UI，直到currentHigh<=gridHigh此时表示子UI组群的高度是低于image的高度的，所有的子UI都在image区域内按标准排列。

综上，本发明上述实施例当中的UI自动排列方法，通过创建一用于排列子UI的固定区域，并设置子UI的目标参数，其中，目标参数至少包括子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距；根据子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距，挂载对应的排列组件，并在固定区域中随机创建子UI，形成子UI组群，确定子UI组群中各子UI中孙UI的初始宽高比和初始锚点坐标，其中，排列组件包括水平排列组件、竖直排列组件及网格排列组件；获取子UI组群的目标尺寸，并根据目标尺寸，判断子UI组群是否超过固定区域；若是，则缩小子UI组群，直至子UI组群位于固定区域内，当遇到在固定区域内创建并排列多个子UI的需求时，可以快速实现需求。

实施例二

本发明实施例二同样提供一种UI自动排列方法，与本发明实施例一的区别在于，所述获取所述子UI组群的目标尺寸，并根据所述目标尺寸，判断所述子UI组群是否超过所述固定区域的步骤包括：

当挂载水平排列组件时，获取子UI组群中代表头部子UI的第三坐标、子UI组群中代表尾部子UI的第四坐标、子UI组群与固定区域左边界的第三距离、以及子UI组群与固定区域右边界的第四距离；

计算第三坐标与第四坐标在水平方向上的差值，并将差值、第三距离及第四距离求和，得到第一宽度；

获取固定区域的第二宽度，判断第一宽度是否大于第二宽度；

若是，则说明子UI组群超过固定区域。

当curScale改变时，HorizontalLyaoutGroup组件模式下只需要改变子UI组群和子UI水平方向上的比例即可，另外，HorizontalLyaoutGroup组件模式下，可以选择特殊的子UI下的孙UI不执行改变比例的代码，可以设定如果改变比例的情况下最小比例值，这样处理可以帮助使用者实现横向排布图表的功能，而且不限制横向子UI数量。当然使用者也可以根据自己的喜好扩展其他的功能或者设置指定UI的scale变化效果。

实施例三

本发明实施例三同样提供一种UI自动排列方法，与本发明实施例一的区别在于，所述获取所述子UI组群的目标尺寸，并根据所述目标尺寸，判断所述子UI组群是否超过所述固定区域的步骤包括：

当挂载竖直排列组件时，获取子UI组群中代表头部子UI的第五坐标、子UI组群中代表尾部子UI的第六坐标、子UI组群与所述固定区域上边界的第五距离、以及子UI组群与所述固定区域下边界的第六距离；

计算所述第五坐标与所述第六坐标在竖直方向上的差值，并将所述差值、所述第五距离及所述第六距离求和，得到第三高度；

获取所述固定区域的第四高度，判断所述第三高度是否大于所述第四高度；

若是，则说明所述子UI组群超过所述固定区域。

VerticalLayoutGroup组件主要限制子UI在竖直方向上的布局，同理，VerticalLayoutGroup组件模式下计算的是子UI组群的高度是否超过固定区域的高度来判断子UI是否超出image。当然使用者也可以根据自己的喜好扩展其他的功能或者设置指定UI的scale变化效果。

实施例四

请参阅图2，图2是本发明实施例四提供的一种UI自动排列系统200的结构框图，该UI自动排列系统200应用于UnityUGUI开发平台中，包括：创建模块21、挂载模块22、判断模块23以及缩小模块24，其中：

创建模块21，用于创建一用于排列子UI的固定区域，并设置子UI的目标参数，其中，所述目标参数至少包括子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距；

挂载模块22，用于根据子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距，挂载对应的排列组件，并在所述固定区域中随机创建子UI，形成子UI组群，确定所述子UI组群中各子UI中孙UI的初始宽高比和初始锚点坐标，其中，排列组件包括水平排列组件、竖直排列组件及网格排列组件，当子UI的整体排列方式为水平排列时，则挂载水平排列组件；当子UI的整体排列方式为竖直排列时，则挂载竖直排列组件；当子UI的整体排列方式为网格排列时，则挂载网格排列组件，其中，水平排列组件为UnityUGUI开发平台中的HorizontalLyaoutGroup，竖直排列组件为UnityUGUI开发平台中的VerticalLayoutGroup，网格排列组件为UnityUGUI开发平台中的GridLayoutGroup；

判断模块23，用于获取所述子UI组群的目标尺寸，并根据所述目标尺寸，判断所述子UI组群是否超过所述固定区域；

缩小模块24，用于当判断所述子UI组群超过所述固定区域时，则缩小所述子UI组群，直至子UI组群位于所述固定区域内。

进一步的，在本发明一些可选实施例当中，所述判断模块23包括：

第一获取单元，用于当挂载网格排列组件时，获取子UI组群中代表头部子UI的第一坐标、子UI组群中代表尾部子UI的第二坐标、子UI组群与所述固定区域上边界的第一距离、以及子UI组群与所述固定区域下边界的第二距离；

第一计算单元，用于计算所述第二坐标与所述第一坐标在竖直方向上的差值，并将所述差值、所述第一距离及所述第二距离求和，得到第一高度；

第一判断单元，用于获取所述固定区域的第二高度，判断所述第一高度是否大于所述第二高度；

若是，则说明所述子UI组群超过所述固定区域。

进一步的，在本发明一些可选实施例当中，所述判断模块23还包括：

第二获取单元，用于当挂载水平排列组件时，获取子UI组群中代表头部子UI的第三坐标、子UI组群中代表尾部子UI的第四坐标、子UI组群与所述固定区域左边界的第三距离、以及子UI组群与所述固定区域右边界的第四距离；

第二计算单元，用于计算所述第三坐标与所述第四坐标在水平方向上的差值，并将所述差值、所述第三距离及所述第四距离求和，得到第一宽度；

第二判断单元，用于获取所述固定区域的第二宽度，判断所述第一宽度是否大于所述第二宽度；

若是，则说明所述子UI组群超过所述固定区域。

进一步的，在本发明一些可选实施例当中，所述判断模块23还包括：

第三获取单元，用于当挂载竖直排列组件时，获取子UI组群中代表头部子UI的第五坐标、子UI组群中代表尾部子UI的第六坐标、子UI组群与所述固定区域上边界的第五距离、以及子UI组群与所述固定区域下边界的第六距离；

第三计算单元，用于计算所述第五坐标与所述第六坐标在竖直方向上的差值，并将所述差值、所述第五距离及所述第六距离求和，得到第三高度；

第三判断单元，用于获取所述固定区域的第四高度，判断所述第三高度是否大于所述第四高度；

若是，则说明所述子UI组群超过所述固定区域。

进一步的，在本发明一些可选实施例当中，所述缩小模块24包括：

第四获取单元，用于获取所述子UI组群与所述固定区域边界的尺寸、所述子UI组群内子UI尺寸、各子UI的间距、以及缩小比例；

调整单元，用于将所述子UI组群与所述固定区域边界的尺寸、所述子UI组群内子UI尺寸、各子UI的间距分别与所述缩小比例相乘，得到调整后的子UI组群与固定区域边界的尺寸、子UI组群内子UI尺寸、各子UI的间距；

重建布局单元，用于控制子UI组群和子UI组群中的各子UI按调整后的子UI组群与固定区域边界的尺寸、子UI组群内子UI尺寸、各子UI的间距布置，并采用自动重建布局，自动调整元素的位置和大小，以保持布局的一致性，其中，调用LayoutRebuilder.ForceRebuildLayoutImmediate(image.GetComponent<RectTransform>())用于自动重建布局；

孙UI布置单元，用于将各子UI中孙UI的初始宽高比和初始锚点坐标分别与所述缩小比例相乘，得到各目标宽高比和目标锚点坐标，并根据各目标宽高比和目标锚点坐标，布置孙UI；

第四判断单元，用于获取调整后的子UI组群的目标尺寸，并根据调整后的子UI组群的目标尺寸，判断调整后的子UI组群是否超过所述固定区域；

循环单元，用于当判断调整后的子UI组群超过所述固定区域时，则循环上述操作，直至子UI组群位于所述固定区域内；

停止操作单元，用于当判断调整后的子UI组群未超过所述固定区域时，则停止操作。

实施例五

本发明另一方面还提出一种电子设备，请参阅图3，所示为本发明实施例五当中的电子设备，包括存储器20、处理器10以及存储在存储器上并可在处理器上运行的计算机程序30，所述处理器10执行所述计算机程序30时实现如上述的UI自动排列方法。

其中，处理器10在一些实施例中可以是中央处理器（Central Processing Unit,CPU）、控制器、微控制器、微处理器或其他数据处理芯片，用于运行存储器20中存储的程序代码或处理数据，例如执行访问限制程序等。

其中，存储器20至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器（例如，SD或DX存储器等）、磁性存储器、磁盘、光盘等。存储器20在一些实施例中可以是电子设备的内部存储单元，例如该电子设备的硬盘。存储器20在另一些实施例中也可以是电子设备的外部存储装置，例如电子设备上配备的插接式硬盘，智能存储卡（Smart Media Card, SMC），安全数字（Secure Digital, SD）卡，闪存卡（FlashCard）等。进一步地，存储器20还可以既包括电子设备的内部存储单元也包括外部存储装置。存储器20不仅可以用于存储电子设备的应用软件及各类数据，还可以用于暂时地存储已经输出或者将要输出的数据。

需要指出的是，图3示出的结构并不构成对电子设备的限定，在其它实施例当中，该电子设备可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。

本发明实施例还提出一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述的UI自动排列方法。

本领域技术人员可以理解，在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备（如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统）使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，“计算机可读介质”可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。

计算机可读介质的更具体的示例（非穷尽性列表）包括以下：具有一个或多个布线的电连接部（电子装置），便携式计算机盘盒（磁装置），随机存取存储器（RAM），只读存储器（ROM），可擦除可编辑只读存储器（EPROM或闪速存储器），光纤装置，以及便携式光盘只读存储器（CDROM）。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或它们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列（PGA），现场可编程门阵列（FPGA）等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

以上实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (8)

1.一种UI自动排列方法，其特征在于，应用于UnityUGUI开发平台中，所述方法包括：

创建一用于排列子UI的固定区域，并设置子UI的目标参数，其中，所述目标参数至少包括子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距；

根据子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距，挂载对应的排列组件，并在所述固定区域中随机创建子UI，形成子UI组群，确定所述子UI组群中各子UI中孙UI的初始宽高比和初始锚点坐标，其中，排列组件包括水平排列组件、竖直排列组件及网格排列组件；

获取所述子UI组群的目标尺寸，并根据所述目标尺寸，判断所述子UI组群是否超过所述固定区域；

若是，则缩小所述子UI组群，直至子UI组群位于所述固定区域内；

所述缩小所述子UI组群，直至子UI组群位于所述固定区域内的步骤包括：

获取所述子UI组群与所述固定区域边界的尺寸、所述子UI组群内子UI尺寸、各子UI的间距、以及缩小比例；

将所述子UI组群与所述固定区域边界的尺寸、所述子UI组群内子UI尺寸、各子UI的间距分别与所述缩小比例相乘，得到调整后的子UI组群与固定区域边界的尺寸、子UI组群内子UI尺寸、各子UI的间距；

控制子UI组群和子UI组群中的各子UI按调整后的子UI组群与固定区域边界的尺寸、子UI组群内子UI尺寸、各子UI的间距布置，并采用自动重建布局，自动调整元素的位置和大小，以保持布局的一致性，其中，调用LayoutRebuilder.ForceRebuildLayoutImmediate(image.GetComponent<RectTransform>())用于自动重建布局；

将各子UI中孙UI的初始宽高比和初始锚点坐标分别与所述缩小比例相乘，得到各目标宽高比和目标锚点坐标，并根据各目标宽高比和目标锚点坐标，布置孙UI；

获取调整后的子UI组群的目标尺寸，并根据调整后的子UI组群的目标尺寸，判断调整后的子UI组群是否超过所述固定区域；

若是，则循环上述操作，直至子UI组群位于所述固定区域内；

若否，则停止操作。

2.根据权利要求1所述的UI自动排列方法，其特征在于，所述根据子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距，挂载对应的排列组件的步骤中，当子UI的整体排列方式为水平排列时，则挂载水平排列组件；当子UI的整体排列方式为竖直排列时，则挂载竖直排列组件；当子UI的整体排列方式为网格排列时，则挂载网格排列组件，其中，水平排列组件为UnityUGUI开发平台中的HorizontalLyaoutGroup，竖直排列组件为UnityUGUI开发平台中的VerticalLayoutGroup，网格排列组件为UnityUGUI开发平台中的GridLayoutGroup。

3.根据权利要求2所述的UI自动排列方法，其特征在于，所述获取所述子UI组群的目标尺寸，并根据所述目标尺寸，判断所述子UI组群是否超过所述固定区域的步骤包括：

当挂载网格排列组件时，获取子UI组群中代表头部子UI的第一坐标、子UI组群中代表尾部子UI的第二坐标、子UI组群与所述固定区域上边界的第一距离、以及子UI组群与所述固定区域下边界的第二距离；

计算所述第二坐标与所述第一坐标在竖直方向上的差值，并将所述差值、所述第一距离及所述第二距离求和，得到第一高度；

获取所述固定区域的第二高度，判断所述第一高度是否大于所述第二高度；

若是，则说明所述子UI组群超过所述固定区域。

4.根据权利要求2所述的UI自动排列方法，其特征在于，所述获取所述子UI组群的目标尺寸，并根据所述目标尺寸，判断所述子UI组群是否超过所述固定区域的步骤包括：

当挂载水平排列组件时，获取子UI组群中代表头部子UI的第三坐标、子UI组群中代表尾部子UI的第四坐标、子UI组群与所述固定区域左边界的第三距离、以及子UI组群与所述固定区域右边界的第四距离；

计算所述第三坐标与所述第四坐标在水平方向上的差值，并将所述差值、所述第三距离及所述第四距离求和，得到第一宽度；

获取所述固定区域的第二宽度，判断所述第一宽度是否大于所述第二宽度；

若是，则说明所述子UI组群超过所述固定区域。

5.根据权利要求2所述的UI自动排列方法，其特征在于，所述获取所述子UI组群的目标尺寸，并根据所述目标尺寸，判断所述子UI组群是否超过所述固定区域的步骤包括：

当挂载竖直排列组件时，获取子UI组群中代表头部子UI的第五坐标、子UI组群中代表尾部子UI的第六坐标、子UI组群与所述固定区域上边界的第五距离、以及子UI组群与所述固定区域下边界的第六距离；

计算所述第五坐标与所述第六坐标在竖直方向上的差值，并将所述差值、所述第五距离及所述第六距离求和，得到第三高度；

获取所述固定区域的第四高度，判断所述第三高度是否大于所述第四高度；

若是，则说明所述子UI组群超过所述固定区域。

6.一种UI自动排列系统，其特征在于，应用于UnityUGUI开发平台中，所述系统包括：

创建模块，用于创建一用于排列子UI的固定区域，并设置子UI的目标参数，其中，所述目标参数至少包括子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距；

挂载模块，用于根据子UI的数量、整体排列方式、子UI尺寸以及各子UI的间距，挂载对应的排列组件，并在所述固定区域中随机创建子UI，形成子UI组群，确定所述子UI组群中各子UI中孙UI的初始宽高比和初始锚点坐标，其中，排列组件包括水平排列组件、竖直排列组件及网格排列组件；

判断模块，用于获取所述子UI组群的目标尺寸，并根据所述目标尺寸，判断所述子UI组群是否超过所述固定区域；

缩小模块，用于当判断所述子UI组群超过所述固定区域时，则缩小所述子UI组群，直至子UI组群位于所述固定区域内；

所述缩小模块包括：

第四获取单元，用于获取所述子UI组群与所述固定区域边界的尺寸、所述子UI组群内子UI尺寸、各子UI的间距、以及缩小比例；

调整单元，用于将所述子UI组群与所述固定区域边界的尺寸、所述子UI组群内子UI尺寸、各子UI的间距分别与所述缩小比例相乘，得到调整后的子UI组群与固定区域边界的尺寸、子UI组群内子UI尺寸、各子UI的间距；

重建布局单元，用于控制子UI组群和子UI组群中的各子UI按调整后的子UI组群与固定区域边界的尺寸、子UI组群内子UI尺寸、各子UI的间距布置，并采用自动重建布局，自动调整元素的位置和大小，以保持布局的一致性，其中，调用LayoutRebuilder.ForceRebuildLayoutImmediate(image.GetComponent<RectTransform>())用于自动重建布局；

孙UI布置单元，用于将各子UI中孙UI的初始宽高比和初始锚点坐标分别与所述缩小比例相乘，得到各目标宽高比和目标锚点坐标，并根据各目标宽高比和目标锚点坐标，布置孙UI；

第四判断单元，用于获取调整后的子UI组群的目标尺寸，并根据调整后的子UI组群的目标尺寸，判断调整后的子UI组群是否超过所述固定区域；

循环单元，用于当判断调整后的子UI组群超过所述固定区域时，则循环上述操作，直至子UI组群位于所述固定区域内；

停止操作单元，用于当判断调整后的子UI组群未超过所述固定区域时，则停止操作。

7.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1－5任一项所述的UI自动排列方法。

8.一种电子设备，其特征在于，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如权利要求1－5任一项所述的UI自动排列方法。