[发明专利]一种页面布局处理方法及装置

说明书

本申请实施例公开了一种页面布局处理方法及装置。所述方法包括：获取页面布局视图中视觉元素的树形结构，以及所述视觉元素的属性信息；确定所述树形结构中作为父节点的父视觉元素，以及所述父节点的孩子节点对应的子视觉元素；根据所述父视觉元素与所述子视觉元素之间的位置关系，确定父布局类型；基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局。利用本申请方法或装置实施例，可以使得页面布局视图中的视觉元素自适应不同尺寸的显示屏，进行良好的视觉效果展示。

技术领域

本申请涉及软件开发技术领域，特别涉及一种页面布局处理方法及装置。

背景技术

在应用开发过程中，开发人员需要对应用的界面进行布局。一般的页面布局流程如下所述：应用界面设计师根据应用的业务需求设计应用界面的视觉图稿，该视觉图稿往往布局合理，能够给用户提供较好的视觉体验和操作体验。设计师在完成视觉图稿之后，将视觉图稿提交给开发人员。开发人员在接收到视觉图稿之后，主要任务是将该视觉图稿转换成开发代码，以便于用户在-打开应用时，复原视觉图稿中的界面布局。

在最初阶段，开发人员的转换方式主要是人工获取视觉图稿中各个元素的属性信息，如文字的字体、颜色、大小、位置，图片的大小、位置等，再根据各个元素的属性信息编写相应的开发代码。上述方式不仅费时费力，还存在一个弊端：当客户端设备显示屏的尺寸变化时，应用界面设计师需要重新设计视觉图稿，且开发人员需要重新开发代码，导致开发成本较高。

因此，现有技术中亟需一种高效、开发成本低的页面布局的方法。

发明内容

本申请实施例的目的在于提供一种页面布局处理方法及装置，可以使得页面布局视图中的视觉元素自适应不同尺寸的显示屏，进行良好的视觉效果展示。

本申请实施例提供的一种页面布局处理方法及装置具体是这样实现的：

一种页面布局处理方法，所述方法包括：

获取页面布局视图中视觉元素的树形结构，以及所述视觉元素的属性信息；

确定所述树形结构中作为父节点的父视觉元素，以及所述父节点的孩子节点对应的子视觉元素；

根据所述父视觉元素与所述子视觉元素之间的位置关系，确定父布局类型；

基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局。

一种页面布局处理装置，包括处理器以及用于存储处理器可执行指令的存储器，所述处理器执行所述指令时实现：

获取页面布局视图中视觉元素的树形结构，以及所述视觉元素的属性信息；

确定所述树形结构中作为父节点的父视觉元素，以及所述父节点的孩子节点对应的子视觉元素；

根据所述父视觉元素与所述子视觉元素之间的位置关系，确定父布局类型；

基于所述父布局类型以及所述视觉元素的属性信息，对所述子视觉元素进行页面布局。

一种计算机可读存储介质，其上存储有计算机指令，所述指令被执行时实现上述的方法。

本申请提供的页面布局处理方法及装置，可以根据页面布局视图中视觉元素的树形结构，确定视觉元素的布局类型，再根据所述布局类型，设置各个元素的布局方式。基于上述页面布局方式，使得页面布局视图中的视觉元素自适应不同尺寸的显示屏，进行良好的视觉效果展示。相对于现有技术而言，当显示屏的尺寸发生变化时，可以不需要重新计算视觉元素的属性，即能够合理地展示视觉元素。

附图说明