界面图形布局方法、系统及相关设备技术方案

技术编号:38345888 阅读:17 留言:0更新日期:2023-08-02 09:26
本发明专利技术提供一种界面图形布局方法、系统及相关设备,该方法包括:获取自动布局容器创建请求,自动布局容器创建请求由用户在当前布局页面中选中至少一个待自动布局容器或多个待自动布局图层后,触发属性面板里的自动布局添加按钮得到,待自动布局容器内设置有多个元素;根据自动布局容器创建请求,获取用户在当前布局页面中弹出的自动布局面板中设置的待自动布局容器的各个布局参数信息;依据各个布局参数信息,对待自动布局容器进行自动布局。在本方案中,通过设置待自动布局容器的各个布局参数信息,实现待自动布局容器的自动布局,从而能够快速创建和修改布局,节省时间,通过设置间距、边距的布局方式,提高维护性和可扩展性。展性。展性。

【技术实现步骤摘要】
界面图形布局方法、系统及相关设备


[0001]本专利技术涉及数据处理
,尤其涉及一种界面图形布局方法、系统及相关设备。

技术介绍

[0002]在界面图形设计中,界面布局是一个非常重要的问题。
[0003]传统的界面布局方法通常需要手动调整界面元素的位置和大小,但是,该方法既费时又容易出错,而且,维护性和可扩展性差。

技术实现思路

[0004]有鉴于此,本专利技术实施例提供一种界面图形布局方法、系统及相关设备,以实现节省时间、提高维护性和可扩展性的目的。
[0005]为实现上述目的,本专利技术实施例提供如下技术方案:
[0006]本专利技术实施例第一方面公开了一种界面图形布局方法,所述方法包括:
[0007]获取自动布局容器创建请求,所述自动布局容器创建请求由用户在当前布局页面中选中至少一个待自动布局容器或多个待自动布局图层后,触发属性面板里的自动布局添加按钮得到,所述待自动布局容器内设置有多个元素;
[0008]根据所述自动布局容器创建请求,获取所述用户在所述当前布局页面中弹出的自动布局面板中设置的所述待自动布局容器的各个布局参数信息,所述布局参数信息包括边距、布局方向、间距、分布式排列方式和对齐方式中的至少一种,所述布局方向包括水平布局和垂直布局;
[0009]依据各个所述布局参数信息,对所述待自动布局容器进行自动布局。
[0010]可选的,若所述布局参数信息包括所述边距,所述依据各个所述布局参数信息,对所述待自动布局容器进行自动布局,包括:
[0011]将所述待自动布局容器与所述待自动布局容器内元素之间的距离调整为所述边距。
[0012]可选的,若所述布局参数信息包括所述布局方向,所述依据各个所述布局参数信息,对所述待自动布局容器进行自动布局,包括:
[0013]依据所述布局方向,调整所述待自动布局容器内元素的排列方向。
[0014]可选的,若所述布局参数信息包括所述边距、所述布局方向、所述间距和所述分布式排列方式,所述依据各个所述布局参数信息,对所述待自动布局容器进行自动布局,包括:
[0015]当所述布局方向为所述水平布局时,将所述待自动布局容器内元素之间的距离确定为列间距,并将所述列间距调整为所述间距;
[0016]根据所述边距和所述间距,按照从左到右顺序,对所述待自动布局容器内的至少一个所述元素在所述待自动布局容器的左侧进行排列;
[0017]和/或,
[0018]当所述布局方向为所述水平布局,且所述分布式排列方式为开启状态时,计算所述待自动布局容器内元素之间的平均距离;
[0019]基于所述边距和所述平均距离,按照所述从左到右顺序,对所述待自动布局容器内的至少一个所述元素在所述待自动布局容器的左侧进行排列。
[0020]可选的,若所述布局参数信息包括所述边距、所述布局方向、所述间距和所述分布式排列方式,所述依据各个所述布局参数信息,对所述待自动布局容器进行自动布局,包括:
[0021]当所述布局方向为所述垂直布局时,将所述待自动布局容器内元素之间的距离确定为行间距,并将所述行间距调整为所述间距;
[0022]根据所述边距和所述间距,按照从上到下顺序,对所述待自动布局容器内的至少一个所述元素在所述待自动布局容器的上侧进行排列;
[0023]和/或,
[0024]当所述布局方向为所述垂直布局,且所述分布式排列方式为开启状态时,计算所述待自动布局容器内元素之间的平均距离;
[0025]基于所述边距和所述平均距离,按照所述从上到下顺序,对所述待自动布局容器内的至少一个所述元素在所述待自动布局容器的上侧进行排列。
[0026]可选的,若所述布局参数信息包括所述布局方向、所述分布式排列方式和所述对齐方式,所述依据各个所述布局参数信息,对所述待自动布局容器进行自动布局,包括:
[0027]当所述布局方向为所述水平布局或所述垂直布局时,基于所述对齐方式,将所述待自动布局容器内元素按照所述对齐方式进行对齐分布;
[0028]和/或,
[0029]当所述布局方向为所述水平布局或所述垂直布局,且所述分布式排列方式为开启状态时,基于所述对齐方式和所述分布式排列方式,将所述待自动布局容器内元素按照所述对齐方式进行平均对齐分布。
[0030]本专利技术实施例第二方面公开了一种界面图形布局系统,所述系统包括:
[0031]第一获取模块,用于获取自动布局容器创建请求,所述自动布局容器创建请求由用户在当前布局页面中选中至少一个待自动布局容器或多个待自动布局图层后,触发属性面板里的自动布局添加按钮得到,所述待自动布局容器内设置有多个元素;
[0032]第二获取模块,用于根据所述自动布局容器创建请求,获取所述用户在所述当前布局页面中弹出的自动布局面板中设置的所述待自动布局容器的各个布局参数信息,所述布局参数信息包括边距、布局方向、间距、分布式排列方式和对齐方式中的至少一种,所述布局方向包括水平布局和垂直布局;
[0033]自动布局模块,用于依据各个所述布局参数信息,对所述待自动布局容器进行自动布局。
[0034]可选的,若所述布局参数信息包括所述边距,所述自动布局模块,具体用于:
[0035]将所述待自动布局容器与所述待自动布局容器内元素之间的距离调整为所述边距。
[0036]本专利技术实施例第三方面公开了一种电子设备,包括:
[0037]存储器和处理器;
[0038]其中,所述存储器用于存储程序;
[0039]所述处理器用于执行所述程序,所述程序被执行时,具体用于实现如本专利技术实施例第一方面任一项所述的界面图形布局方法。
[0040]本专利技术实施例第四方面公开了一种计算机存储介质,用于存储计算机程序,所述计算机程序被执行时,用于实现如本专利技术实施例第一方面任一项所述的界面图形布局方法。
[0041]基于上述本专利技术实施例提供的一种界面图形布局方法、系统及相关设备,所述方法包括:获取自动布局容器创建请求,所述自动布局容器创建请求由用户在当前布局页面中选中至少一个待自动布局容器或多个待自动布局图层后,触发属性面板里的自动布局添加按钮得到,所述待自动布局容器内设置有多个元素;根据所述自动布局容器创建请求,获取所述用户在所述当前布局页面中弹出的自动布局面板中设置的所述待自动布局容器的各个布局参数信息,所述布局参数信息包括边距、布局方向、间距、分布式排列方式和对齐方式中的至少一种,所述布局方向包括水平布局和垂直布局;依据各个所述布局参数信息,对所述待自动布局容器进行自动布局。在本方案中,通过设置待自动布局容器的各个布局参数信息,实现待自动布局容器的自动布局,从而能够快速创建和修改布局,节省时间,通过设置间距、边距的布局方式,提高维护性和可扩展性。
附图说明
[0042]为了更清楚地说明本专利技术实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种界面图形布局方法,其特征在于,所述方法包括:获取自动布局容器创建请求,所述自动布局容器创建请求由用户在当前布局页面中选中至少一个待自动布局容器或多个待自动布局图层后,触发属性面板里的自动布局添加按钮得到,所述待自动布局容器内设置有多个元素;根据所述自动布局容器创建请求,获取所述用户在所述当前布局页面中弹出的自动布局面板中设置的所述待自动布局容器的各个布局参数信息,所述布局参数信息包括边距、布局方向、间距、分布式排列方式和对齐方式中的至少一种,所述布局方向包括水平布局和垂直布局;依据各个所述布局参数信息,对所述待自动布局容器进行自动布局。2.根据权利要求1所述的方法,其特征在于,若所述布局参数信息包括所述边距,所述依据各个所述布局参数信息,对所述待自动布局容器进行自动布局,包括:将所述待自动布局容器与所述待自动布局容器内元素之间的距离调整为所述边距。3.根据权利要求1所述的方法,其特征在于,若所述布局参数信息包括所述布局方向,所述依据各个所述布局参数信息,对所述待自动布局容器进行自动布局,包括:依据所述布局方向,调整所述待自动布局容器内元素的排列方向。4.根据权利要求1所述的方法,其特征在于,若所述布局参数信息包括所述边距、所述布局方向、所述间距和所述分布式排列方式,所述依据各个所述布局参数信息,对所述待自动布局容器进行自动布局,包括:当所述布局方向为所述水平布局时,将所述待自动布局容器内元素之间的距离确定为列间距,并将所述列间距调整为所述间距;根据所述边距和所述间距,按照从左到右顺序,对所述待自动布局容器内的至少一个所述元素在所述待自动布局容器的左侧进行排列;和/或,当所述布局方向为所述水平布局,且所述分布式排列方式为开启状态时,计算所述待自动布局容器内元素之间的平均距离;基于所述边距和所述平均距离,按照所述从左到右顺序,对所述待自动布局容器内的至少一个所述元素在所述待自动布局容器的左侧进行排列。5.根据权利要求1所述的方法,其特征在于,若所述布局参数信息包括所述边距、所述布局方向、所述间距和所述分布式排列方式,所述依据各个所述布局参数信息,对所述待自动布局容器进行自动布局,包括:当所述布局方向为所述垂直布局时,将所述待自动布局容器内元素之间的距离确定为行间距,并将所述行间距调整为所述间距;根据所述边距和所述间...

【专利技术属性】
技术研发人员:王栋
申请(专利权)人:北京尽微致广信息技术有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1