页面的布局方法及装置、存储介质、电子装置制造方法及图纸

本发明专利技术提供了一种页面的布局方法及装置、存储介质、电子装置，其中，该方法包括：获取静态布局页面的第一描述文件，其中，所述第一描述文件用于在固定尺寸的固定位置上生成展示页面，所述第一描述文件包括多个第一元素；将所述第一元素装进容器中，并确定所述第一元素在所述容器中的布局方向；使用所述第一元素和所述布局方向生成第二描述文件，其中，所述第二描述文件用于生成弹性布局的展示页面。通过本发明专利技术，解决了相关技术中无法自动将静态布局转换为弹性布局的技术问题。

【技术实现步骤摘要】
页面的布局方法及装置、存储介质、电子装置
本专利技术涉及计算机领域，具体而言，涉及一种页面的布局方法及装置、存储介质、电子装置。
技术介绍
展示页面是展示在屏幕上的界面，用户可以直接查看，由于屏幕的尺寸通常是固定的，在不同的屏幕上，要自动适配好控件的尺寸，如果展示页面没有根据屏幕大小自适应，将会非常影响用户的视觉体验。相关技术中，视觉设计的工程师的设计稿转换的页面代码布局，都是静态布局页面，位置尺寸都是固定死的，如申请号为CN105630992A的申请文件中，公开了一种在静态页面中显示当前场景的方案，前端开发人员拿到这些静态布局代码后，只能重新改写前端代码，如将其根据屏幕的实际尺寸来改写，或者重写布局类型，将其改写成弹性布局的代码，工作量大，而且容易出错。针对相关技术中存在的上述问题，目前尚未发现有效的解决方案。
技术实现思路
本专利技术实施例提供了一种页面的布局方法及装置、存储介质、电子装置。根据本专利技术的一个实施例，提供了一种页面的布局方法，包括：获取静态布局页面的第一描述文件，其中，所述第一描述文件用于在固定尺寸的固定位置上生成展示页面，所述第一描述文件包括多个第一元素；将所述第一元素装进容器中，并确定所述第一元素在所述容器中的布局方向；使用所述第一元素和所述布局方向生成第二描述文件，其中，所述第二描述文件用于生成弹性布局的展示页面。可选的，确定所述第一元素在所述容器中的布局方向包括：确定直接子元素在所述容器中的布局方向；确定子子元素在所述直接子元素中的布局方向，其中，所述直接子元素在布局完成后为所述容器的子容器；其中，所述第一元素包括所述直接子元素和所述子子元素，所述子子元素是所述直接子元素的子元素。可选的，确定直接子元素在所述容器中的布局方向包括：从多个起始位置分别扫描装进所述容器中的直接子元素，得到直接子元素的个数；根据得到直接子元素的个数最多的扫描方式确定所述直接子元素在所述容器中的布局方向。可选的，从多个起始位置分别扫描装进所述容器中的直接子元素，得到直接子元素的个数包括：以直接子元素在x轴正方向上的最大位置为起始位置扫描装进所述容器中的直接子元素的直接子元素；以直接子元素在y轴负方向上的最大位置为起始位置扫描装进所述容器中的直接子元素的直接子元素。可选的，以直接子元素在x轴正方向上的最大位置为起始位置扫描装进所述容器中的直接子元素的直接子元素包括：以第一直接子元素在x轴正方向上的最大位置为起始位置开始扫描，如果存在第二直接子元素在x轴正方向上的最大位置小于所述第一直接子元素在x轴正方向上的最大位置时，将所述第一直接子元素和所述第二直接子元素合并成一个组，并放进一个容器里面，其中，所述第一直接子元素为在x轴上的坐标值最大的直接子元素；以第二直接子元素在x轴正方向上的最大位置为起始位置继续扫描，直到遍历完所有的直接子元素，其中，每一次扫描完成后直接子元素的计数加1。可选的，以直接子元素在y轴负方向上的最大位置为起始位置扫描装进所述容器中的直接子元素的直接子元素包括：以第三直接子元素在y轴负方向上的最大位置为起始位置开始扫描，如果存在第四直接子元素在y轴负方向上的最大位置小于所述第三直接子元素在y轴负方向上的最大位置时，将所述第三直接子元素和所述第四直接子元素合并成一个组，并放进一个容器里面，其中，所述第三直接子元素为在y轴上的坐标值最小的直接子元素；以第四直接子元素在y轴负方向上的最大位置为起始位置继续扫描，直到遍历完所有的直接子元素，其中，每一次扫描完成后直接子元素的计数加1。可选的，根据得到直接子元素的个数最多的扫描方式确定所述直接子元素在所述容器中的布局方向包括：在采用第一扫描方式得到的直接子元素大于采用第二扫描方式得到的直接子元素时，确定所述直接子元素在所述容器中的布局方向为横向布局；在采用第一扫描方式得到的直接子元素小于采用第二扫描方式得到的直接子元素时，确定所述直接子元素在所述容器中的布局方向为纵向布局，其中，所述第一扫描方式为以直接子元素在x轴正方向上的最大位置为起始位置的扫描方式，所述第二扫描方式为以直接子元素在y轴负方向上的最大位置为起始位置的扫描方式。可选的，在确定子子元素在所述直接子元素中的布局方向之前，所述方法还包括：遍历每个直接子元素的子子元素，确定所述子子元素的个数大于1。可选的，在使用所述第一元素和所述布局方向生成第二描述文件之前，所述方法还包括：将第一元素的绝对位置修改为所述第一元素在所述容器中的相对于父节点的相对位置，其中，所述相对位置包括所述直接子元素在所述容器中的x轴坐标值，y轴坐标值，高度值，宽度值。可选的，获取静态布局页面的第一描述文件包括：接收静态布局页面的原始代码；解析所述原始代码，得到第一描述文件。可选的，在使用所述第一元素和所述布局方向生成第二描述文件之后，所述方法还包括至少之一：加载所述第二描述文件，在用户界面上展示native页面；加载所述第二描述文件，在用户界面上展示H5页面。根据本专利技术的另一个实施例，提供了一种页面的布局装置，包括：获取模块，用于获取静态布局页面的第一描述文件，其中，所述第一描述文件用于在固定尺寸的固定位置上生成展示页面，所述第一描述文件包括多个第一元素；处理模块，用于将所述第一元素装进容器中，并确定所述第一元素在所述容器中的布局方向；生成模块，用于使用所述第一元素和所述布局方向生成第二描述文件，其中，所述第二描述文件用于生成弹性布局的展示页面。可选的，所述处理模块包括：第一确定单元，用于确定直接子元素在所述容器中的布局方向；第二确定单元，用于确定子子元素在所述直接子元素中的布局方向，其中，所述直接子元素在布局完成后为所述容器的子容器；其中，所述第一元素包括所述直接子元素和所述子子元素，所述子子元素是所述直接子元素的子元素。可选的，所述第一确定单元包括：扫描子单元，用于从多个起始位置分别扫描装进所述容器中的直接子元素，得到直接子元素的个数；确定子单元，用于根据得到直接子元素的个数最多的扫描方式确定所述直接子元素在所述容器中的布局方向。可选的，所述扫描子单元还用于：以直接子元素在x轴正方向上的最大位置为起始位置扫描装进所述容器中的直接子元素的直接子元素；以直接子元素在y轴负方向上的最大位置为起始位置扫描装进所述容器中的直接子元素的直接子元素。可选的，所述扫描子单元还还用于：以第一直接子元素在x轴正方向上的最大位置为起始位置开始扫描，如果存在第二直接子元素在x轴正方向上的最大位置小于所述第一直接子元素在x轴正方向上的最大位置时，将所述第一直接子元素和所述第二直接子元素合并成一个组，并放进一个容器里面，其中，所述第一直接子元素为在x轴上的坐标值最大的直接子元素；以第二直接子元素在x轴正方向上的最大位置为起始位置继续扫描，直到遍历完所有的直接子元素，其中，每一次扫描完成后直接子元素的计数加一。可选的，所述扫描子单元还还用于：以第三直接子元素在y轴负方向上的最大位置为起始位置开始扫描，如果存在第四直接子元素在y轴负方向上的最大位置小于所述第三直接子元素在y轴负方向上的最大位置时，将所述第三直接子元素和所述第四直接子元素合并成一个组，并放进一个容器里面，其中，所述第三直接子元素为在y轴上的坐标值最小的直接子元素；以第四直接子元本文档来自技高网...

【技术保护点】
1.一种页面的布局方法，其特征在于，包括：获取静态布局页面的第一描述文件，其中，所述第一描述文件用于在固定尺寸的固定位置上生成展示页面，所述第一描述文件包括多个第一元素；将所述第一元素装进容器中，并确定所述第一元素在所述容器中的布局方向；使用所述第一元素和所述布局方向生成第二描述文件，其中，所述第二描述文件用于生成弹性布局的展示页面。

【技术特征摘要】
1.一种页面的布局方法，其特征在于，包括：获取静态布局页面的第一描述文件，其中，所述第一描述文件用于在固定尺寸的固定位置上生成展示页面，所述第一描述文件包括多个第一元素；将所述第一元素装进容器中，并确定所述第一元素在所述容器中的布局方向；使用所述第一元素和所述布局方向生成第二描述文件，其中，所述第二描述文件用于生成弹性布局的展示页面。2.根据权利要求1所述的方法，其特征在于，确定所述第一元素在所述容器中的布局方向包括：确定直接子元素在所述容器中的布局方向；确定子子元素在所述直接子元素中的布局方向，其中，所述直接子元素在布局完成后为所述容器的子容器；其中，所述第一元素包括所述直接子元素和所述子子元素，所述子子元素是所述直接子元素的子元素。3.根据权利要求2所述的方法，其特征在于，确定直接子元素在所述容器中的布局方向包括：从多个起始位置分别扫描装进所述容器中的直接子元素，得到直接子元素的个数；根据得到直接子元素的个数最多的扫描方式确定所述直接子元素在所述容器中的布局方向。4.根据权利要求2所述的方法，其特征在于，从多个起始位置分别扫描装进所述容器中的直接子元素，得到直接子元素的个数包括：以直接子元素在x轴正方向上的最大位置为起始位置扫描装进所述容器中的直接子元素的直接子元素；以直接子元素在y轴负方向上的最大位置为起始位置扫描装进所述容器中的直接子元素的直接子元素。5.根据权利要求4所述的方法，其特征在于，以直接子元素在x轴正方向上的最大位置为起始位置扫描装进所述容器中的直接子元素的直接子元素包括：以第一直接子元素在x轴正方向上的最大位置为起始位置开始扫描，如果存在第二直接子元素在x轴正方向上的最大位置小于所述第一直接子元素在x轴正方向上的最大位置时，将所述第一直接子元素和所述第二直接子元素合并成一个组，并放进一个容器里面，其中，所述第一直接子元素为在x轴上的坐标值最大的直接子元素；以第二直接子元素在x轴正方向上的最大位置为起始位置继续扫描，直到遍历完所有的直接子元素，其中，每一次扫描完成后直接子元素的计数加1。6.根据权利要...

【专利技术属性】
技术研发人员：贺三元，刘国良，黄建锋，
申请(专利权)人：浙江口碑网络技术有限公司，
类型：发明
国别省市：浙江,33