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

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

Interface layout method, device, electronic device and storage medium

The embodiment of the invention discloses an interface layout method, a device, an electronic device and a storage medium. The method includes: acquiring data source array and layout rule parameters by setting wrapper interface; constructing parent view program and child view program corresponding to the number of data source array in interface layout program according to data source array, in which each child view is laid out in the scope of parent view; and according to parent view The dimension and the layout rule parameters are used to calculate the inter-view constraint parameters of the sub-views. According to the inter-view constraint parameters, the automatic layout algorithm of a single sub-view is invoked to create a view layout constraint program for each sub-view to improve the interface layout program. Through the above technical scheme, the batch layout of multiple modular sub-views in the interface layout can be realized more easily and quickly, the development process can be simplified, and the development efficiency of developers can be improved.

【技术实现步骤摘要】
一种界面布局方法、装置、电子设备及存储介质
本专利技术实施例涉及应用开发技术，尤其涉及一种界面布局方法、装置、电子设备及存储介质。
技术介绍
在应用程序的界面布局程序开发过程中，会遇到很多模块化的子视图布局的需求，例如，word应用程序界面中的菜单栏，有诸如“文件”、“开始”和“插入”等功能菜单选项。整个菜单栏相当于父视图，每个菜单选项都相当于子视图。在创建菜单栏的界面布局程序时，基于一个子视图程序模板，根据不同数据源生成多个子视图的程序代码段，子视图程序中还需生成表示子视图之间位置布局约束的视图布局约束程序，从而形成界面布局程序。对于IOS或Android等移动操作系统的界面布局程序的开发而言，目前已有单个子视图的自动布局算法来生成界面布局程序中的视图布局约束程序。利用现有的单个子视图自动布局算法进行界面布局程序生成时，开发人员需要先在初始界面布局程序中创建子视图程序，然后手动设定单个待布局子视图的视图间约束参数，例如相邻子视图的中心轴线需重合等位置约束参数，并调用约束创建语句创建相应的视图布局约束程序，即可生成完整的界面布局程序。但是，在利用现有的单个子视图自动布局算法，对多个模块化的子视图布局时，就需要开发人员人为地为每一个待布局子视图设定视图间约束参数，并多次重复调用相同的约束创建语句为每一个待布局子视图创建视图布局约束程序，这无疑增大了开发人员的工作量，降低了开发人员的开发效率。
技术实现思路
本专利技术实施例提供一种界面布局方法、装置、电子设备及存储介质，能够更加简便且快速地实现界面布局中多个模块化子视图的批量布局，简化开发过程，提高开发人员的开发效率。第一方面，本专利技术实施例提供了一种界面布局方法，包括：通过设定封装程序接口获取数据源数组以及布局规则参数；依据数据源数组，在界面布局程序中构建父视图程序以及与所述数据源数组对应数量的子视图程序，其中，各子视图布局在父视图的范围内；依据父视图尺寸以及所述布局规则参数，计算各所述子视图的视图间约束参数；依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序。第二方面，本专利技术实施例还提供了一种界面布局装置，该装置包括：数据获取模块，用于通过设定封装程序接口获取数据源数组以及布局规则参数；初始程序构建模块，用于依据数据源数组，在界面布局程序中构建父视图程序以及与所述数据源数组对应数量的子视图程序，其中，各子视图布局在父视图的范围内；参数确定模块，用于依据父视图尺寸以及所述布局规则参数，计算各所述子视图的视图间约束参数；约束程序构建模块，用于依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序。第三方面，本专利技术实施例还提供了一种电子设备，该电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本专利技术实施例中任一所述的界面布局方法。第四方面，本专利技术实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本专利技术实施例中任一所述的界面布局方法。本专利技术实施例通过依据父视图尺寸以及所述布局规则参数，自动计算各所述子视图的视图间约束参数，并调用单个子视图的自动布局算法分别为各所述子视图创建视图布局约束程序，从而自动完善所述界面布局程序。该技术方案能够基于开发人员输入的数据源数组及布局规则参数，自动确定各子视图在父视图中布局的视图间约束参数，减少开发人员在界面开发过程中手动设定各子视图在父视图中布局的视图间约束参数的工作量；能够自动给各子视图创建视图布局约束程序，减少开发人员重复性的手动为各子视图创建视图布局约束程序的工作量，从而更加简便且快速地实现界面布局中多个模块化子视图的批量布局，简化开发过程，提高开发人员的开发效率。附图说明图1是本专利技术实施例一中的一种界面布局方法的流程图；图2是本专利技术实施例二中的一种界面布局方法的流程图；图3是本专利技术实施例三中的一种界面布局方法的流程图；图4是本专利技术实施例四中的一种界面布局方法的流程图；图5是本专利技术实施例四中的界面布局显示示意图；图6是本专利技术实施例五中的一种界面布局装置的结构示意图；图7是本专利技术实施例六中的一种电子设备的结构示意图。具体实施方式下面结合附图和实施例对本专利技术作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本专利技术，而非对本专利技术的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本专利技术相关的部分而非全部结构。实施例一本专利技术实施例一提供的界面布局方法可适用于基于自动布局算法的界面布局开发，形成应用程序中的界面布局程序代码段。该方法可以由界面布局装置来执行，该装置可以由软件和/或硬件的方式实现，该装置可以集成在配置有自动布局算法框架的设备中，例如典型的是用户终端设备，例如笔记本电脑或台式电脑等。参见图1，本实施的方法包括：S110、通过设定封装程序接口获取数据源数组以及布局规则参数。其中，设定封装程序接口指的是在封装程序时设置的，用于程序调用时接收参数的程序接口。本专利技术实施例中的封装程序指的是对现有自动布局框架进行封装而形成的界面布局程序。数据源数组指的是存储数据源的数组，数组的大小与开发人员需要布局的子视图个数相等。该数据源数组的数据格式可以是单变量，也可以是结构体变量，比如数据源数组的数组元素可以是单独的文本、数字或图片等，也可以是包含文本、数字、图片或动态图中的至少两项内容。该数据源数组所存储的数据用于给待布局的各个子视图赋值，或称为初始化各个子视图。布局规则参数指的是需要开发人员输入或设定的总的布局参数，其是表示界面布局设计的整体布局要求的参数，可用于计算各个子视图在父视图中布局时的视图间约束参数。优选是子视图在父视图中布局的排列规则参数，子视图在父视图中布局时距离父视图边界的距离参数，子视图之间的距离参数或者子视图尺寸参数等。上述排列规则参数可以是表征子视图在父视图中横列间距均相等的均匀排列的规则性参数(即视图均匀布局规则)；也可以是子视图间距递增/递减布局规则，即子视图在父视图中布局时，子视图之间的间距呈等差或等比形式递增或递减；还可以是子视图分段均匀布局规则，即子视图在父视图中分块布局，每个布局块内子视图横列间距相等的均匀排列等。具体地，开发人员在调用本专利技术实施例中的封装程序(即界面布局程序)时，设定该界面布局程序的调用参数，即数据源数组和布局规则参数，则本专利技术实施例中的界面布局程序就可以通过设定封装程序接口，接收开发人员设定的数据源数组和布局规则参数。S120、依据数据源数组，在界面布局程序中构建父视图程序以及与数据源数组对应数量的子视图程序。其中，对应数量指的是与数据源数组的大小一致的数量值。各子视图布局在父视图的范围内。这里父视图与子视图是用于表征视图之间依赖关系或约束关系的一组概念。父视图是一个容器视图，其用来容纳其他视图，这里被容纳的其他视图即为子视图。应当理解，这里所说的子视图在父视图范围内，是指各个子视图的视图间约束参数的参数范围在父视图对应参数的范围内，即子视图的显示位置在父视图的位置范围内。具体地，由于子视图需要布局在本文档来自技高网...

【技术保护点】
1.一种界面布局方法，其特征在于，包括：通过设定封装程序接口获取数据源数组以及布局规则参数；依据数据源数组，在界面布局程序中构建父视图程序以及与所述数据源数组对应数量的子视图程序，其中，各子视图布局在父视图的范围内；依据父视图尺寸以及所述布局规则参数，计算各所述子视图的视图间约束参数；依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序。

【技术特征摘要】
1.一种界面布局方法，其特征在于，包括：通过设定封装程序接口获取数据源数组以及布局规则参数；依据数据源数组，在界面布局程序中构建父视图程序以及与所述数据源数组对应数量的子视图程序，其中，各子视图布局在父视图的范围内；依据父视图尺寸以及所述布局规则参数，计算各所述子视图的视图间约束参数；依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序。2.根据权利要求1所述的方法，其特征在于，所述依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序包括：根据子视图在父视图中的视图布局顺序，从各所述子视图中确定第一个子视图作为当前子视图；依据当前子视图的视图间约束参数，以父视图为基准，调用所述自动布局算法为当前子视图创建视图布局约束程序；基于当前子视图的视图布局约束程序更新临时视图的视图布局约束程序；以所述临时视图为基准，根据下一个子视图的视图间约束参数调用所述自动布局算法，为下一个子视图创建视图布局约束程序；更新下一个子视图为当前子视图，返回执行更新临时视图的视图布局约束程序的操作，直至所有子视图布局完成，以完善所述界面布局程序。3.根据权利要求1所述的方法，其特征在于，所述依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序包括：确定当前的待布局行号；依据所述待布局行号对应的各子视图的所述视图间约束参数，调用所述自动布局算法，为所述待布局行号对应的各子视图创建视图布局约束程序；返回执行确定当前的待布局行号的操作，直至所有子视图布局完成，以完善所述界面布局程序。4.根据权利要求1所述的方法，其特征在于，所述依据父视图尺寸以及所述布局规则参数，计算各所述子视图的视图间约束参数包括：依据父视图尺寸以及所述布局规则参数中的视图均匀布局规则、布局行数、布局列数、布局间距和布局边距，计算子视图宽度和子视图高度，并将所述子视图宽度、所述子视图高度、所述布局边距中的上边距和左边距以及所述布局间距中的行间距和列间距，作为所述视图间约束参数。5.根据权利要求4所述的方法，其特征在于，所述依据各所述视图间约束参数，调用单个子视图的自动布局算法，分别为各所述子视图创建视图布局约束程序，以完善所述界面布局程序包括：依据所述上边距、所述子视图高度、所述行间距和待布局行号，确定每行中首个子视图的上约束参数，确定所述左边距为所述首个子视图的左约束参数，确定所述子视图高度...

【专利技术属性】
技术研发人员：李琪，陈少杰，张文明，
申请(专利权)人：武汉斗鱼网络科技有限公司，
类型：发明
国别省市：湖北,42