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

Abstract

本发明实施例公开了一种界面布局方法、装置、电子设备及存储介质。该方法包括：通过设定封装程序接口获取数据源数组以及布局规则参数；依据数据源数组，在界面布局程序中构建父视图程序以及与所述数据源数组对应数量的子视图程序，其中，各子视图布局在父视图的范围内；依据父视图尺寸以及所述布局规则参数，计算各所述子视图的视图间约束参数；依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序。通过上述技术方案，能够更加简便且快速地实现界面布局中多个模块化子视图的批量布局，简化开发过程，提高开发人员的开发效率。

Description

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

技术领域

本发明实施例涉及应用开发技术，尤其涉及一种界面布局方法、装置、电子设备及存储介质。

背景技术

在应用程序的界面布局程序开发过程中，会遇到很多模块化的子视图布局的需求，例如，word应用程序界面中的菜单栏，有诸如“文件”、“开始”和“插入”等功能菜单选项。整个菜单栏相当于父视图，每个菜单选项都相当于子视图。在创建菜单栏的界面布局程序时，基于一个子视图程序模板，根据不同数据源生成多个子视图的程序代码段，子视图程序中还需生成表示子视图之间位置布局约束的视图布局约束程序，从而形成界面布局程序。

对于IOS或Android等移动操作系统的界面布局程序的开发而言，目前已有单个子视图的自动布局算法来生成界面布局程序中的视图布局约束程序。利用现有的单个子视图自动布局算法进行界面布局程序生成时，开发人员需要先在初始界面布局程序中创建子视图程序，然后手动设定单个待布局子视图的视图间约束参数，例如相邻子视图的中心轴线需重合等位置约束参数，并调用约束创建语句创建相应的视图布局约束程序，即可生成完整的界面布局程序。

但是，在利用现有的单个子视图自动布局算法，对多个模块化的子视图布局时，就需要开发人员人为地为每一个待布局子视图设定视图间约束参数，并多次重复调用相同的约束创建语句为每一个待布局子视图创建视图布局约束程序，这无疑增大了开发人员的工作量，降低了开发人员的开发效率。

发明内容

本发明实施例提供一种界面布局方法、装置、电子设备及存储介质，能够更加简便且快速地实现界面布局中多个模块化子视图的批量布局，简化开发过程，提高开发人员的开发效率。

第一方面，本发明实施例提供了一种界面布局方法，包括：

通过设定封装程序接口获取数据源数组以及布局规则参数；

依据数据源数组，在界面布局程序中构建父视图程序以及与所述数据源数组对应数量的子视图程序，其中，各子视图布局在父视图的范围内；

依据父视图尺寸以及所述布局规则参数，计算各所述子视图的视图间约束参数；

依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序。

第二方面，本发明实施例还提供了一种界面布局装置，该装置包括：

数据获取模块，用于通过设定封装程序接口获取数据源数组以及布局规则参数；

初始程序构建模块，用于依据数据源数组，在界面布局程序中构建父视图程序以及与所述数据源数组对应数量的子视图程序，其中，各子视图布局在父视图的范围内；

参数确定模块，用于依据父视图尺寸以及所述布局规则参数，计算各所述子视图的视图间约束参数；

约束程序构建模块，用于依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序。

第三方面，本发明实施例还提供了一种电子设备，该电子设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例中任一所述的界面布局方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本发明实施例中任一所述的界面布局方法。

本发明实施例通过依据父视图尺寸以及所述布局规则参数，自动计算各所述子视图的视图间约束参数，并调用单个子视图的自动布局算法分别为各所述子视图创建视图布局约束程序，从而自动完善所述界面布局程序。该技术方案能够基于开发人员输入的数据源数组及布局规则参数，自动确定各子视图在父视图中布局的视图间约束参数，减少开发人员在界面开发过程中手动设定各子视图在父视图中布局的视图间约束参数的工作量；能够自动给各子视图创建视图布局约束程序，减少开发人员重复性的手动为各子视图创建视图布局约束程序的工作量，从而更加简便且快速地实现界面布局中多个模块化子视图的批量布局，简化开发过程，提高开发人员的开发效率。

附图说明

图1是本发明实施例一中的一种界面布局方法的流程图；

图2是本发明实施例二中的一种界面布局方法的流程图；

图3是本发明实施例三中的一种界面布局方法的流程图；

图4是本发明实施例四中的一种界面布局方法的流程图；

图5是本发明实施例四中的界面布局显示示意图；

图6是本发明实施例五中的一种界面布局装置的结构示意图；

图7是本发明实施例六中的一种电子设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

本发明实施例一提供的界面布局方法可适用于基于自动布局算法的界面布局开发，形成应用程序中的界面布局程序代码段。该方法可以由界面布局装置来执行，该装置可以由软件和/或硬件的方式实现，该装置可以集成在配置有自动布局算法框架的设备中，例如典型的是用户终端设备，例如笔记本电脑或台式电脑等。参见图1，本实施的方法包括：

S110、通过设定封装程序接口获取数据源数组以及布局规则参数。

其中，设定封装程序接口指的是在封装程序时设置的，用于程序调用时接收参数的程序接口。本发明实施例中的封装程序指的是对现有自动布局框架进行封装而形成的界面布局程序。数据源数组指的是存储数据源的数组，数组的大小与开发人员需要布局的子视图个数相等。该数据源数组的数据格式可以是单变量，也可以是结构体变量，比如数据源数组的数组元素可以是单独的文本、数字或图片等，也可以是包含文本、数字、图片或动态图中的至少两项内容。该数据源数组所存储的数据用于给待布局的各个子视图赋值，或称为初始化各个子视图。

布局规则参数指的是需要开发人员输入或设定的总的布局参数，其是表示界面布局设计的整体布局要求的参数，可用于计算各个子视图在父视图中布局时的视图间约束参数。优选是子视图在父视图中布局的排列规则参数，子视图在父视图中布局时距离父视图边界的距离参数，子视图之间的距离参数或者子视图尺寸参数等。上述排列规则参数可以是表征子视图在父视图中横列间距均相等的均匀排列的规则性参数(即视图均匀布局规则)；也可以是子视图间距递增/递减布局规则，即子视图在父视图中布局时，子视图之间的间距呈等差或等比形式递增或递减；还可以是子视图分段均匀布局规则，即子视图在父视图中分块布局，每个布局块内子视图横列间距相等的均匀排列等。

具体地，开发人员在调用本发明实施例中的封装程序(即界面布局程序)时，设定该界面布局程序的调用参数，即数据源数组和布局规则参数，则本发明实施例中的界面布局程序就可以通过设定封装程序接口，接收开发人员设定的数据源数组和布局规则参数。

S120、依据数据源数组，在界面布局程序中构建父视图程序以及与数据源数组对应数量的子视图程序。

其中，对应数量指的是与数据源数组的大小一致的数量值。各子视图布局在父视图的范围内。这里父视图与子视图是用于表征视图之间依赖关系或约束关系的一组概念。父视图是一个容器视图，其用来容纳其他视图，这里被容纳的其他视图即为子视图。应当理解，这里所说的子视图在父视图范围内，是指各个子视图的视图间约束参数的参数范围在父视图对应参数的范围内，即子视图的显示位置在父视图的位置范围内。

具体地，由于子视图需要布局在父视图内部，那么在构建界面布局程序时，先构建父视图程序，以获得父视图，该父视图程序内可以对父视图的位置、尺寸、内容及样式等进行设置。同样地，在对待布局的子视图进行布局设置之前，先根据数据源数组构建对应数量的子视图程序，以获得各个子视图。例如，子视图程序可以是开辟对应数量个子视图存储空间的程序，利用数据源数组初始化各个子视图的程序，或者对各个子视图内部进行样式编排的程序等。

本实施例中，具体可以在获取到数据源数组后，先创建一个子视图数组，该子视图数组的大小与数据源数组大小一致。此时子视图数组中的元素值可以为空或者一个缺省值。之后，遍历数据源数组，并给子视图数组赋值，获得赋值后的子视图数组。即逐个地获取数据源数组中的单个数据源，并逐个地用获取的单个数据源对创建的子视图数组中的单个子视图进行赋值操作，以此来获得对应数量的子视图程序。比如，对于IOS移动操作系统的界面布局而言，使用编程语言Objective-C官方提供的数组遍历方法enumerateObjectsUsingBlock遍历数据源数组。在拿到单个数据源后，采用类似于视图布局工具UICollectionView的赋值操作函数cellForItemAtIndexPath，对单个子视图进行赋值操作。

S130、依据父视图尺寸以及布局规则参数，计算各子视图的视图间约束参数。

其中，父视图尺寸指的是父视图的大小，比如父视图宽度和/或父视图高度等。视图间约束参数指的是视图布局时不同视图之间进行布局约束的参数，其可以是子视图与父视图之间的约束参数，也可以是相邻子视图之间的约束参数。基于自动布局思想，这里的约束参数是一个相对参数，比如子视图距离父视图边界的距离、子视图之间的距离或者子视图尺寸等，并非子视图在屏幕中的绝对坐标。

具体地，界面布局程序可以根据父视图程序中父视图的设置参数确定出父视图尺寸。之后，界面布局程序再根据父视图尺寸和获得的布局规则参数，计算出各个子视图相对于父视图的视图间约束参数，或者计算出各个子视图相对于其相邻子视图的视图间约束参数，或者计算出部分子视图相对于父视图的视图间约束参数，剩余部分子视图相对于其相邻子视图的视图间约束参数。

S140、依据各视图间约束参数，调用单个子视图的自动布局算法，分别为各子视图创建视图布局约束程序，以完善界面布局程序。

其中，自动布局算法指的是能够根据子视图的视图间约束参数自动进行视图布局的算法，比如可以是IOS或Android等移动操作系统官方提供的自动布局算法，也可以是第三方提供的自动布局算法，比如对IOS官方自动布局算法进行封装的第三方自动布局框架Masonry。目前的自动布局算法是针对单个视图的自动布局算法，即单个子视图的自动布局算法，也就是说，调用一次自动布局算法中的约束创建语句，只能为单个子视图创建视图布局约束程序。需要说明的是，在使用本发明实施例所提供的界面布局程序之前，用户终端设备中需要集成自动布局算法。视图间约束参数优选是自动布局算法能够解析含义并创建生成程序的参数。

具体地，在确定了各个子视图在父视图中布局的视图间约束参数之后，直接调用单个子视图的自动布局算法中的约束创建语句，在界面布局程序中添加为每个子视图创建视图布局约束的视图布局约束程序。这里的视图布局约束程序，可以是重复编写多次约束创建语句的程序，也可以是基于一次约束创建语句的循环程序。当然，界面布局程序中还可以包含将视图布局约束程序创建的各个视图布局约束添加至父视图的视图布局约束添加程序，以使得子视图布局在父视图中。

至此，形成了较为完善的界面布局程序，该界面布局程序中包含数据源数组及布局规则参数获取程序、父视图程序、子视图程序、计算视图间约束参数程序以及为子视图创建视图布局约束程序，能够更加自动化、批量化地进行子视图布局。

本实施例的技术方案，能够基于开发人员输入的数据源数组及布局规则参数，自动确定各子视图在父视图中布局的视图间约束参数，减少开发人员在界面开发过程中手动设定各子视图在父视图中布局的视图间约束参数的工作量；能够自动给各子视图创建视图布局约束程序，减少开发人员重复性的手动为各子视图创建视图布局约束程序的工作量，从而更加简便且快速地实现界面布局中多个模块化子视图的批量布局，简化开发过程，提高开发人员的开发效率。

实施例二

本实施例在上述实施例一的基础上，对“依据各视图间约束参数，调用单个子视图的自动布局算法，分别为各子视图创建视图布局约束程序，以完善界面布局程序”进行了进一步优化。其中与上述各实施例相同或相应的术语的解释在此不再赘述。参见图2，本实施例提供的界面布局方法包括：

S210、通过设定封装程序接口获取数据源数组以及布局规则参数。

S220、依据数据源数组，在界面布局程序中构建父视图程序以及与数据源数组对应数量的子视图程序。

S230、依据父视图尺寸以及布局规则参数，计算各子视图的视图间约束参数。

S240、根据子视图在父视图中的视图布局顺序，从各子视图中确定第一个子视图作为当前子视图。

具体地，根据数据源数组的大小，可以确定出待布局的子视图的个数，通常，该子视图的个数是多个。而无论这些子视图在父视图中按照何种排列规则进行布局，其在父视图中都有一个不变的布局先后顺序，即视图布局顺序。那么，依照该视图布局顺序，将所有子视图中第一个布局的子视图作为当前子视图。

S250、依据当前子视图的视图间约束参数，以父视图为基准，调用单个子视图的自动布局算法为当前子视图创建视图布局约束程序。

具体地，对于第一个在父视图中布局的子视图，即当前子视图，其没有相邻的子视图，那么当前子视图的视图间约束参数是该当前子视图与父视图之间的约束参数。所以，以父视图为基准，调用单个子视图的自动布局算法，利用当前子视图的视图间约束参数，为该当前子视图创建视图布局约束程序。

S260、基于当前子视图的视图布局约束程序更新临时视图的视图布局约束程序。

其中，临时视图指的是界面布局程序内部设定的一个过渡性视图，其并不具体布局于父视图内，而是作为各个子视图布局的布局参照基准。

具体地，在界面布局程序中，需要构建临时视图程序，以获得临时视图，然后再为其创建视图布局约束程序。为临时视图创建视图布局约束程序的过程，是直接复制当前子视图的视图布局约束程序，并将其中的当前子视图的名称修改为临时视图的名称。也就是，将临时视图的视图间约束参数以及布局参照基准设置为当前子视图的相应参数与基准，并调动与当前子视图相同的自动布局算法，创建临时视图的视图布局约束程序。这样，不必专门为临时视图单独设置视图间约束参数与布局基准，再进行视图间约束参数与布局基准的更新，节省开发人员的编程步骤与时间。

S270、以临时视图为基准，根据下一个子视图的视图间约束参数调用单个子视图的自动布局算法，为下一个子视图创建视图布局约束程序。

具体地，以更新后的临时视图为基准，调用单个子视图的自动布局算法，利用下一个子视图的视图间约束参数，为该下一个子视图创建视图布局约束程序。应当注意的是，由于这里以临时视图为基准，而临时视图的布局状态又与当前子视图的布局状态一致，所以，这里下一个子视图的视图间约束参数应当是子视图之间的约束参数。

这里，下一个子视图是以临时视图为基准的，所以下一个子视图的视图布局约束程序中布局参照基准的部分不需进行更改。而界面布局程序能够自动确定出视图间约束参数并更新，所以下一个子视图的视图布局约束程序中视图间约束参数的部分也不需开发人员介入进行更改。这样，下一个子视图的视图布局约束程序中，每次需要变化的部分就只有下一个子视图的名称部分，该名称部分又可以在循环体中进行循环更改，也不需开发人员介入更改。

S280、更新下一个子视图为当前子视图，返回执行更新临时视图的视图布局约束程序的操作，直至所有子视图布局完成，以完善界面布局程序。

具体地，将下一个子视图更新为当前子视图，然后按照S260-S280循环执行，直至所有子视图布局完成，形成一个循环体程序，以完善界面布局程序。

与IOS移动操作系统提供的均匀布局模块化子视图的视图布局工具UICollectionView相比，本发明实施例中通过借助临时视图，循环布局子视图的界面布局方法，无需设置数据源及代理以实现数据源及其他设置的初始化，且能够基于任何视图生成子视图，无需用UICollectionView中的单元视图UICollectionViewCell去实现子视图，不影响视图的层级。另外，UICollectionView自带重用机制和滑动机制等，对于数据量相对较小的多个子视图布局而言，UICollectionView的代码量就过于繁重，而本发明实施例提供的界面布局方法代码负荷更小，内存占用也就相对较小。

本实施例的技术方案，通过借助一个临时视图，形成一个为各子视图创建视图布局约束程序的循环体程序，能够简化代码，减少代码量，且循环体程序的代码写法固定，便于后续程序优化，从而更加简化开发人员的编程操作，更进一步提高开发效率。

实施例三

本实施例在上述实施例一的基础上，对“依据各视图间约束参数，调用单个子视图的自动布局算法，分别为各子视图创建视图布局约束程序，以完善界面布局程序”进行了进一步优化。其中与上述各实施例相同或相应的术语的解释在此不再赘述。参见图3，本实施例提供的界面布局方法包括：

S310、通过设定封装程序接口获取数据源数组以及布局规则参数。

S320、依据数据源数组，在界面布局程序中构建父视图程序以及与数据源数组对应数量的子视图程序。

S330、依据父视图尺寸以及布局规则参数，计算各子视图的视图间约束参数。

S340、确定当前的待布局行号。

具体地，本实施例中以行为子视图布局单位，对所有的子视图进行视图布局约束程序创建操作。行内及行间的视图布局排列规则参数可以相同，也可以不同。优选是行内布局排列规则参数相同，而行间排列规则参数不同。即本实施例中的界面布局方法，更加适合于行内布局排列规则参数相同，而行间布局排列规则参数不相同的界面布局程序的构建。

在计算子视图的视图间布局参数之后，界面布局程序中添加确定当前的待布局行的行序号，即待布局行号的程序。该待布局行号通常以1开始，以布局规则参数中确定的布局行数结束，并且每次循环行号加1。

S350、依据待布局行号对应的各子视图的视图间约束参数，调用单个子视图的自动布局算法，为待布局行号对应的各子视图创建视图布局约束程序。

具体地，在界面布局程序中，调用单个子视图的自动布局算法，利用待布局行号对应的各个子视图的视图间约束参数，为相应的各子视图创建视图布局约束程序。

优选地，针对行内布局排列规则参数相同的情况，待布局行号对应的各子视图的视图间约束参数，优选是该待布局行中各个子视图之间的视图间约束参数。那么，为各子视图创建视图布局约束程序的基准就为相邻子视图，创建的视图布局约束程序是基于一次约束创建语句的循环程序。这样，能够进一步优化程序，使得程序体量小，便于后续界面布局程序的维护。

S360、返回执行确定当前的待布局行号的操作，直至所有子视图布局完成，以完善界面布局程序。

具体地，按照S340-S360循环执行，直至所有子视图布局完成，以行为单位形成一个循环体程序，以完善界面布局程序。

本实施例的技术方案，通过以行为单位，为各个子视图创建视图布局约束程序，相对于逐个为子视图创建视图布局约束程序而言，能够进一步减少程序代码量，便于后续程序优化，从而更加简化开发人员的编程操作，更进一步提高开发效率。当然，本实施例的技术方案也可以结合使用临时视图的技术思路。

实施例四

本实施例在上述实施例一的基础上，对“依据父视图尺寸以及布局规则参数，计算各子视图的视图间约束参数”进行了进一步优化。在此基础上，还可以进一步对“依据各视图间约束参数，调用单个子视图的自动布局算法，分别为各子视图创建视图布局约束程序，以完善界面布局程序”进行优化。其中与上述各实施例相同或相应的术语的解释在此不再赘述。参见图4，本实施例提供的界面布局方法包括：

S410、通过设定封装程序接口获取数据源数组以及布局规则参数。

S420、依据数据源数组，在界面布局程序中构建父视图程序以及与数据源数组对应数量的子视图程序。

S430、依据父视图尺寸以及布局规则参数中的视图均匀布局规则、布局行数、布局列数、布局间距和布局边距，计算子视图宽度和子视图高度，并将子视图宽度、子视图高度、布局边距中的上边距和左边距以及布局间距中的行间距和列间距，作为视图间约束参数。

其中，布局行数和布局列数分别指的是子视图在父视图中布局时，子视图分布的行数和列数。如图5所示，子视图501在父视图500中布局的布局行数和布局列数为2行3列。布局间距指的是子视图在父视图中布局时，子视图之间的距离，其可以包括行间距502和列间距503。布局边距指的是子视图在父视图中布局时，子视图距离父视图边界的距离，其可以包括布局上边距504、下边距505、左边距506和右边距507。父视图尺寸指的是父视图宽度508和父视图高度509。

具体地，根据设定子视图均匀布局规则可以确定，各个子视图之间的行间距和列间距是相等的，且每个子视图的高度和子视图的宽度也是相等的。那么就可以根据父视图尺寸、布局行数、布局列数、布局间距和布局边距，计算出子视图宽度和子视图高度。例如，根据父视图宽度508、布局列数、列间距503、左边距506和右边距507，计算出子视图宽度510，即子视图宽度＝[父视图宽度-左边距-右边距-列间距*(列数-1)]/布局列数。同样地，根据父视图高度509、布局行数、行间距502、上边距504和下边距505，确定子视图高度511，即子视图高度＝[父视图高度-上边距-下边距-行间距*(行数-1)]/布局行数。

在计算出子视图高度和子视图宽度之后，将所子视图宽度、子视图高度、布局边距中的上边距和左边距以及布局间距中的行间距和列间距，作为视图间约束参数。

示例性地，在通过设定封装程序接口，获取数据源数组以及设定布局参数之后，还包括：若布局列数和/或布局行数小于1，则结束操作，并反馈错误信息；若布局间距和/或布局边距小于0，则将布局间距和/或布局边距设置为缺省值。

具体地，可以在界面布局程序中设置布局规则参数判断程序。该布局规则参数判断程序具体用于实现布局规则参数合理性判断以及进行相应的参数异常处理。对于设定布局参数中必须由界面开发人员设定的两个参数——布局列数和布局行数，如果其数值错误，则界面布局程序无法自动确定出后续的视图间约束参数，此时就需要进行程序报错处理，即如果通过设定封装程序接口所获得的布局列数和布局行数中的至少一个数值小于1，则表示界面布局程序调用参数严重错误，该界面布局程序无法执行后续操作。此时，界面布局程序结束运行，并且向开发人员反馈具体参数错误信息，比如“布局行数为大于或等于1的正整数，请重新设置”。即在界面布局程序内构建错误信息反馈程序。这样便于开发人员发现编程错误所在，节省程序调试时间，进一步提高开发效率。

而对于设定布局参数中的布局间距和布局边距，虽然其也是后续确定约束参数的必需参数，但是由于子视图的布局受父视图约束，且这两个参数的具体数值不会影响整体布局框架，那么可以为这两个参数设置默认值(即缺省值)，比如0。这时，如果通过设定封装程序接口所获得的布局间距和布局边距中的任意一个数值小于0，则可以将小于0的参数值设定为缺省值。这样能够使得界面布局程序正常运行。尤其是开发人员暂时无法确定合适的参数值时，其可以通过程序运行结果，即最终的界面布局显示，来确定这两个参数的设置是否合适，并进行参数调整，进一步节省开发人员的开发耗时。

S440、依据上边距、子视图高度、行间距和待布局行号，确定每行中首个子视图的上约束参数，确定左边距为首个子视图的左约束参数，确定子视图高度和子视图宽度为首个子视图的尺寸约束参数，并调用单个子视图的自动布局算法，为首个子视图创建视图布局约束程序。

具体地，对于每行的第一个子视图(即首个子视图)的视图间约束参数，本实施例中设定其为距离父视图上方边界及左边边界的距离，子视图高度以及子视图宽度，即上约束参数、左约束参数和尺寸约束参数。其中的左约束参数和尺寸约束参数，对于每行的第一个子视图而言，都是不变的。而上约束参数则会根据子视图所在的具体行数而变，其可以根据父视图的上边距、子视图高度、行间距和待布局行号进行计算，即上约束＝上边距+(子视图高度+行间距)*(待布局行号-1)。在确定首个子视图的视图间约束参数之后，就可以调用单个子视图的自动布局算法，为该首个子视图创建视图布局约束程序。

S450、按照每行的布局顺序，将下一个子视图确定为当前子视图。

S460、分别确定当前子视图的前一个子视图的纵向中点、列间距和尺寸约束参数为当前子视图的水平方向约束参数、左约束参数和尺寸约束参数。

其中，纵向中点指的是子视图中心点的竖直坐标轴的坐标值。

具体地，由于待布局子视图处于同一行，且列间距和子视图尺寸均相同，所以，相对于前一个子视图而言，当前子视图的视图间约束参数就可以设置为水平方向约束参数、左约束参数和尺寸约束参数。其中当前子视图的水平方向约束参数是前一个子视图的纵向中点Center Y，当前子视图的左约束参数为当前子视图的左边界相对于前一个子视图右边界的距离，即列间距。

S470、以前一个子视图为基准，调用单个子视图的自动布局算法，为当前子视图创建视图布局约束程序。

具体地，在确定当前子视图的视图间约束参数之后，就可以以前一个子视图为基准，调用单个子视图的自动布局算法，利用上述确定的当前子视图的视图间约束参数，为该当前子视图创建视图布局约束程序。当然，本实施例的技术方案也可以结合使用临时视图的技术思路。

S480、将下一个子视图更新为当前子视图，并返回执行确定当前子视图的视图间约束参数的操作，直至各行子视图布局完成，以完善界面布局程序。

具体地，将下一个子视图更新为当前子视图，然后按照S460-S480循环执行，直至所有子视图布局完成，形成循环体程序，以完善界面布局程序。

本实施例的技术方案，通过将布局规则参数设定为视图均匀布局规则、布局行数、布局列数、布局间距和布局边距，使得在模块化子视图均匀布局的场景下，开发人员设置的布局规则参数更加简化，进一步提升开发效率。通过将每行首个子视图的视图间约束参数设定为上约束参数、左约束参数以及尺寸约束参数，同时将该行其余子视图的视图间约束参数设定为水平方向约束参数、左约束参数和尺寸约束参数，能够便于代码编写与理解，使得界面布局程序易于维护，进一步提高开发效率。

以下是本发明实施例提供的界面布局装置的实施例，该装置与上述各实施例的界面布局方法属于同一个发明构思，在界面布局装置的实施例中未详尽描述的细节内容，可以参考上述界面布局方法的实施例。

实施例五

本实施例提供一种界面布局装置，参见图6，该装置具体包括：

数据获取模块610，用于通过设定封装程序接口获取数据源数组以及布局规则参数；

初始程序构建模块620，用于依据数据源数组，在界面布局程序中构建父视图程序以及与数据源数组对应数量的子视图程序，其中，各子视图布局在父视图的范围内；

参数确定模块630，用于依据父视图尺寸以及布局规则参数，计算各子视图的视图间约束参数；

约束程序构建模块640，用于依据各视图间约束参数，调用单个子视图的自动布局算法，分别为各子视图创建视图布局约束程序，以完善界面布局程序。

可选地，约束程序构建模块640具体用于：

根据子视图在父视图中的视图布局顺序，从各子视图中确定第一个子视图作为当前子视图；

依据当前子视图的视图间约束参数，以父视图为基准，调用单个子视图的自动布局算法为当前子视图创建视图布局约束程序；

基于当前子视图的视图布局约束程序更新临时视图的视图布局约束程序；

以临时视图为基准，根据下一个子视图的视图间约束参数调用单个子视图的自动布局算法，为下一个子视图创建视图布局约束程序；

更新下一个子视图为当前子视图，返回执行更新临时视图的视图布局约束程序的操作，直至所有子视图布局完成，以完善界面布局程序。

可选地，约束程序构建模块640具体用于：

确定当前的待布局行号；

依据待布局行号对应的各子视图的视图间约束参数，调用单个子视图的自动布局算法，为待布局行号对应的各子视图创建视图布局约束程序；

返回执行确定当前的待布局行号的操作，直至所有子视图布局完成，以完善界面布局程序。

可选地，参数确定模块630具体用于：

依据父视图尺寸以及布局规则参数中的视图均匀布局规则、布局行数、布局列数、布局间距和布局边距，计算子视图宽度和子视图高度，并将子视图宽度、子视图高度、布局边距中的上边距和左边距以及布局间距中的行间距和列间距，作为视图间约束参数。

进一步地，约束程序构建模块640具体用于：

依据上边距、子视图高度、行间距和待布局行号，确定每行中首个子视图的上约束参数，确定左边距为首个子视图的左约束参数，确定子视图高度和子视图宽度为首个子视图的尺寸约束参数，并调用单个子视图的自动布局算法，为首个子视图创建视图布局约束程序；

按照每行的布局顺序，将下一个子视图确定为当前子视图；

分别确定当前子视图的前一个子视图的纵向中点、列间距和尺寸约束参数为当前子视图的水平方向约束参数、左约束参数和尺寸约束参数；

以前一个子视图为基准，调用单个子视图的自动布局算法，为当前子视图创建视图布局约束程序；

将下一个子视图更新为当前子视图，并返回执行确定当前子视图的视图间约束参数的操作，直至各行子视图布局完成，以完善界面布局程序。

可选地，在上述装置的基础上，该装置还包括：

参数异常处理模块，用于在通过设定封装程序接口获取数据源数组以及布局规则参数之后，若布局列数和/或布局行数小于1，则结束操作，并反馈错误信息；

若布局间距和/或布局边距小于0，则将布局间距和/或布局边距设置为缺省值。

通过本发明实施例五的一种界面布局装置，能够更加简便地实现界面布局中多个模块化子视图的快速布局，简化开发过程，提高开发人员的开发效率。

本发明实施例所提供的界面布局装置可执行本发明任意实施例所提供的界面布局方法，具备执行方法相应的功能模块和有益效果。

值得注意的是，上述界面布局装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

实施例六

参见图7，本实施例提供了一种电子设备700，其包括：一个或多个处理器720；存储装置710，用于存储一个或多个程序，当一个或多个程序被一个或多个处理器720执行，使得一个或多个处理器720实现本发明实施例所提供的界面布局方法，包括：

通过设定封装程序接口获取数据源数组以及布局规则参数；

依据数据源数组，在界面布局程序中构建父视图程序以及与数据源数组对应数量的子视图程序，其中，各子视图布局在父视图的范围内；

依据父视图尺寸以及布局规则参数，计算各子视图的视图间约束参数；

依据各视图间约束参数，调用单个子视图的自动布局算法，分别为各子视图创建视图布局约束程序，以完善界面布局程序。

当然，本领域技术人员可以理解，处理器720还可以实现本发明任意实施例所提供的界面布局方法的技术方案。

图7显示的电子设备700仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图7所示，该电子设备700包括处理器720、存储装置710、输入装置730和输出装置740；电子设备中处理器720的数量可以是一个或多个，图7中以一个处理器720为例；电子设备中的处理器720、存储装置710、输入装置730和输出装置740可以通过总线或其他方式连接，图7中以通过总线750连接为例。

存储装置710作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本发明实施例中的界面布局方法对应的程序指令/模块(例如，界面布局装置中的数据获取模块、参数确定模块和约束创建模块模块)。

存储装置710可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端的使用所创建的数据等。此外，存储装置710可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储装置710可进一步包括相对于处理器720远程设置的存储器，这些远程存储器可以通过网络连接至电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置730可用于接收输入的数字或字符信息，以及产生与电子设备的用户设置以及功能控制有关的键信号输入。输出装置740可包括显示屏等显示设备。

实施例七

本实施例提供一种包含计算机可执行指令的存储介质，计算机可执行指令在由计算机处理器执行时用于执行一种界面布局方法，该方法包括：

通过设定封装程序接口获取数据源数组以及布局规则参数；

依据数据源数组，在界面布局程序中构建父视图程序以及与数据源数组对应数量的子视图程序，其中，各子视图布局在父视图的范围内；

依据父视图尺寸以及布局规则参数，计算各子视图的视图间约束参数；

依据各视图间约束参数，调用单个子视图的自动布局算法，分别为各子视图创建视图布局约束程序，以完善界面布局程序。

当然，本发明实施例所提供的一种包含计算机可执行指令的存储介质，其计算机可执行指令不限于如上的方法操作，还可以执行本发明任意实施例所提供的界面布局方法中的相关操作。

通过以上关于实施方式的描述，所属领域的技术人员可以清楚地了解到，本发明可借助软件及必需的通用硬件来实现，当然也可以通过硬件实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如计算机的软盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(RandomAccess Memory，RAM)、闪存(FLASH)、硬盘或光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例的界面布局方法。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (10)

1.一种界面布局方法，其特征在于，包括：

通过设定封装程序接口获取数据源数组以及布局规则参数；

依据数据源数组，在界面布局程序中构建父视图程序以及与所述数据源数组对应数量的子视图程序，其中，各子视图布局在父视图的范围内；

依据父视图尺寸以及所述布局规则参数，计算各所述子视图的视图间约束参数；

依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序。

2.根据权利要求1所述的方法，其特征在于，所述依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序包括：

根据子视图在父视图中的视图布局顺序，从各所述子视图中确定第一个子视图作为当前子视图；

依据当前子视图的视图间约束参数，以父视图为基准，调用所述自动布局算法为当前子视图创建视图布局约束程序；

基于当前子视图的视图布局约束程序更新临时视图的视图布局约束程序；

以所述临时视图为基准，根据下一个子视图的视图间约束参数调用所述自动布局算法，为下一个子视图创建视图布局约束程序；

更新下一个子视图为当前子视图，返回执行更新临时视图的视图布局约束程序的操作，直至所有子视图布局完成，以完善所述界面布局程序。

3.根据权利要求1所述的方法，其特征在于，所述依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序包括：

确定当前的待布局行号；

依据所述待布局行号对应的各子视图的所述视图间约束参数，调用所述自动布局算法，为所述待布局行号对应的各子视图创建视图布局约束程序；

返回执行确定当前的待布局行号的操作，直至所有子视图布局完成，以完善所述界面布局程序。

4.根据权利要求1所述的方法，其特征在于，所述依据父视图尺寸以及所述布局规则参数，计算各所述子视图的视图间约束参数包括：

依据父视图尺寸以及所述布局规则参数中的视图均匀布局规则、布局行数、布局列数、布局间距和布局边距，计算子视图宽度和子视图高度，并将所述子视图宽度、所述子视图高度、所述布局边距中的上边距和左边距以及所述布局间距中的行间距和列间距，作为所述视图间约束参数。

5.根据权利要求4所述的方法，其特征在于，所述依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序包括：

依据所述上边距、所述子视图高度、所述行间距和待布局行号，确定每行中首个子视图的上约束参数，确定所述左边距为所述首个子视图的左约束参数，确定所述子视图高度和所述子视图宽度为所述首个子视图的尺寸约束参数，并调用所述自动布局算法，为所述首个子视图创建视图布局约束程序；

按照每行的布局顺序，将下一个子视图确定为当前子视图；

分别确定当前子视图的前一个子视图的纵向中点、所述列间距和所述尺寸约束参数为当前子视图的水平方向约束参数、左约束参数和尺寸约束参数；

以前一个子视图为基准，调用所述自动布局算法，为所述当前子视图创建视图布局约束程序；

将下一个子视图更新为当前子视图，并返回执行确定当前子视图的视图间约束参数的操作，直至各行子视图布局完成，以完善所述界面布局程序。

6.根据权利要求4所述的方法，其特征在于，在通过设定封装程序接口获取数据源数组以及布局规则参数之后，还包括：

若所述布局列数和/或所述布局行数小于1，则结束操作，并反馈错误信息；

若所述布局间距和/或所述布局边距小于0，则将所述布局间距和/或所述布局边距设置为缺省值。

7.一种界面布局装置，其特征在于，包括：

数据获取模块，用于通过设定封装程序接口获取数据源数组以及布局规则参数；

初始程序构建模块，用于依据数据源数组，在界面布局程序中构建父视图程序以及与所述数据源数组对应数量的子视图程序，其中，各子视图布局在父视图的范围内；

参数确定模块，用于依据父视图尺寸以及所述布局规则参数，计算各所述子视图的视图间约束参数；

约束程序构建模块，用于依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序。

8.根据权利要求7所述的装置，其特征在于，所述约束程序构建模块具体用于：

根据子视图在父视图中的视图布局顺序，从各所述子视图中确定第一个子视图作为当前子视图；

依据当前子视图的视图间约束参数，以父视图为基准，调用所述自动布局算法为当前子视图创建视图布局约束程序；

基于当前子视图的视图布局约束程序更新临时视图的视图布局约束程序；

以所述临时视图为基准，根据下一个子视图的视图间约束参数调用所述自动布局算法，为下一个子视图创建视图布局约束程序；

更新下一个子视图为当前子视图，返回执行更新临时视图的视图布局约束程序的操作，直至所有子视图布局完成，以完善所述界面布局程序。

9.一种电子设备，其特征在于，所述电子设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-6中任一所述的界面布局方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-6中任一所述的界面布局方法。