CN111651161A - 图形化界面构建方法、装置、计算机设备及存储介质 - Google Patents

图形化界面构建方法、装置、计算机设备及存储介质 Download PDF

Info

Publication number
CN111651161A
CN111651161A CN202010688253.8A CN202010688253A CN111651161A CN 111651161 A CN111651161 A CN 111651161A CN 202010688253 A CN202010688253 A CN 202010688253A CN 111651161 A CN111651161 A CN 111651161A
Authority
CN
China
Prior art keywords
target
control
frame control
view
graphical interface
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202010688253.8A
Other languages
English (en)
Other versions
CN111651161B (zh
Inventor
黄俊联
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Yihongda Software Development Co ltd
Original Assignee
Shenzhen Yihongda Software Development Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shenzhen Yihongda Software Development Co ltd filed Critical Shenzhen Yihongda Software Development Co ltd
Priority to CN202010688253.8A priority Critical patent/CN111651161B/zh
Publication of CN111651161A publication Critical patent/CN111651161A/zh
Application granted granted Critical
Publication of CN111651161B publication Critical patent/CN111651161B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种图形化界面构建方法、装置、计算机设备及存储介质。该方法包括：若图形化界面中新增了控件，将该新增的控件作为第一当前控件；获取先于第一当前控件的视图/框架控件作为第一目标视图/框架控件，获取第一当前控件所在的行作为第一目标行；计算第一目标行在新增第一当前控件后的实际高度与第一目标行在新增第一当前控件前的实际高度的差值作为第一目标差值；判断第一目标差值是否大于零；若是，将第一目标行的实际高度增加第一目标差值；将第一目标视图/框架控件中第一目标行之后的各行中的控件的位置下移。本发明能够在增加、删除或者修改控件时，自动调整图形化界面中各控件以及各行的高度(位置)，极大地提高了编辑效率。

Description

图形化界面构建方法、装置、计算机设备及存储介质
技术领域
本发明涉及软件设计技术领域，尤其涉及一种图形化界面构建方法、装置、计算机设备及存储介质。
背景技术
在交互式软件设计中，图形化界面的构建不可或缺，现行的软件平台，支持图形化编辑的常用工具有几类。1.浏览器(调试器)如谷歌、火狐等，是以代码方式在调试器中输入，而在显示区中看到最终显示结果，不可保存。2.软件开发工具Visual Studio、AndroidStudio、IOS Studio等，可以拖拉拽控件到显示区，以绝对定位方式显示控件，位置。3.作图软件如Photoshop、illustrator、CAD等，与上述软件开发工具类似，以绝对定位方式显示控件。
发明内容
本发明实施例提供了一种图形化界面构建方法、装置、计算机设备及存储介质，旨在解决现有软件图形化编辑工具中，控件采用绝对定位，对控件的位置调整复杂，导致开发效率低下的问题。
第一方面，本发明实施例提供了一种图形化界面构建方法，图形化界面包括幕布，所述幕布包括多个行，所述图形化界面构建方法包括：
若检测到图形化界面中新增了控件，将该新增的控件作为第一当前控件；
获取先于所述第一当前控件的视图/框架控件作为第一目标视图/框架控件，以及获取所述第一当前控件所在的行作为第一目标行；
计算所述第一目标行在新增所述第一当前控件后的实际高度与所述第一目标行在新增所述第一当前控件前的实际高度的差值作为第一目标差值；
判断所述第一目标差值是否大于零；
若所述第一目标差值大于零，将所述第一目标行的实际高度增加第一目标差值；
将所述第一目标视图/框架控件中第一目标行之后的各行中的控件的位置下移第一目标差值。
第二方面，本发明实施例提供了一种图形化界面构建方法，图形化界面包括幕布，所述幕布包括多个行，所述图形化界面构建方法包括：
若检测到图形化界面中删除了控件，将该删除的控件作为第二当前控件；
获取先于所述第二当前控件的视图/框架控件作为第二目标视图/框架控件，以及获取所述第二当前控件所在的行作为第二目标行；
计算所述第二目标行在删除所述第二当前控件之前的实际高度与所述第二目标行在删除所述第二当前控件之后的实际高度的差值作为第三目标差值；
判断所述第三目标差值是否大于零；
若所述第三目标差值大于零，将所述第二目标行的实际高度减少第三目标差值；
将所述第二目标视图/框架控件中第二目标行之后的各行中的控件的位置上移第三目标差值。
第三方面，本发明提供一种图形化界面构建方法，图形化界面包括幕布，所述幕布包括多个行，所述图形化界面构建方法包括：
若检测到图形化界面中修改了控件，将修改之前的控件删除，并执行如第二方面所述的方法；
在图形化界面中新增修改后的控件，并执行如第一方面所述的方法。
第四方面，本发明实施例还提供了一种图形化界面构建装置，其包括用于执行上述第一方面、第二方面或者第三方面的方法的单元。
第五方面，本发明实施例还提供了一种计算机设备，其包括存储器及处理器，所述存储器上存储有计算机程序，所述处理器执行所述计算机程序时实现上述第一方面、第二方面或者第三方面的方法。
第六方面，本发明实施例还提供了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序当被处理器执行时可实现上述第一方面、第二方面或者第三方面的方法。
通过应用本实施例的技术方案，能够在增加、删除或者修改控件时，自动调整(自动伸缩)图形化界面中各控件以及各行的高度(位置)，操作便捷，无需用户手动调整，极大地提高了用户的编辑效率。
附图说明
为了更清楚地说明本发明实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的具有六个控件元素的图形化界面的层次组织树的示意图；
图2为本发明实施例提供的具有行结构的六个控件元素的图形化界面的控件存储结构图；
图3为本发明实施例提供的一种图形化界面构建方法的流程示意图；
图4为本发明另一实施例提供的一种图形化界面构建方法的流程示意图；
图5为本发明一实施例中新增控件C之前的图形化界面的显示示意图；
图6为本发明一实施例中新增控件C之后的图形化界面的显示示意图；
图7为本发明一实施例中删除控件C之前的图形化界面的显示示意图；
图8为本发明一实施例中删除控件C之后的图形化界面的显示示意图；
图9为本发明实施例提供的一种图形化界面构建装置的示意性框图；
图10为本发明另一实施例提供的图形化界面构建装置的示意性框图；
图11为本发明实施例提供的计算机设备的示意性框图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
还应当理解，在此本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。
还应当进一步理解，在本发明说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。
如在本说明书和所附权利要求书中所使用的那样，术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地，短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。
为了准确阐述本发明的技术方案，将本发明中涉及的定义以及术语介绍如下：
1.组成图形化界面的控件元素及其层次结构
1)组成图形化界面的控件元素
简单控件：属于图形化界面中常用的、独立、原子的控件，包括按钮、编辑框、静态文本、文本链接、多行编辑、多媒体；
复合控件：属于图形化界面中复合的、可由原子控件组成的控件，可分为逻辑复合和物理复合，包括增减数、下拉框、列表框、多选控、单选控、图标多选、图标单选，其中单选、多选的控件为逻辑复合，其他为物理复合；
视图/框架控件：属于图形化界面中可以任意组织和摆放其他简单控件、复合控件、视图/框架控件的控件，包括基本框架、标签框架、树框架、图控视图、面板框架、表格框架、编辑框架、菜单框架以及模式框架。
2)图形化界面的层次结构
图形化界面最原始是一块幕布(英文canvas)，在幕布上初始化一个基本框架控件，这个基本框架控件可以理解为与幕布浑然一体，可以任意摆放控件，任意扩展和延伸，我们可以得到层次结构化的图形化界面，定义如下：
a.图形化界面可以是一个初始的幕布化的基本框架控件；
b.基本框架控件可以摆放简单控件、复合控件和视图/框架控件(含基本框架控件)；
c.由视图/框架控件(含基本框架控件)嵌套或摆放视图/框架控件(含基本框架控件)、以及其他简单控件、复合控件，则形成层次化的图形界面。
3)图形化界面的形式化表示
假设图形化界面是由一组控件组成，分别为C1,C2,...,Cn，每一个控件有两个表达因子，即显示风格Style，记为s，和位置信息position，记为p，则Ci(s,p)可完整地表达每一个控件在图形化界面中的显示，当然，C1,C2,...,Cn存在一定次序关系，即同一视图/框架控件(含基本框架控件)所摆放或包含的控件，不存在先后次序关系，但是，视图/框架控件(含基本框架控件)一定先于它所摆放或包含的控件。
定义二元运算“先于”关系，记为“<”，而“不先于”记为“</”；假如说控件Ci中摆放了控件Ci1,Ci2,...,Cin，则称控件Ci“先于”控件Ci1,Ci2,...,Cin，有Ci<Cil，而Cil</Cik，其中l，k＝1，2，...，n，那么，图形化界面UI定义为，
UI＝{Ci(si,pi)|i＝1,2,...,n，C1＝FormView0，Vi<j，必有Cj</Ci}
其中，FormView0是最初始的幕布化的基本框架控件，称上述表达式为UI界面的逻辑模型。
4)扩展的图形化界面的形式化表示
我们在上述图形化界面的基础上，增加一个行的概念，即每一个视图/框架控件，其幕布被行所分割，而视图/框架控件内所摆放的控件，与行关联，即摆放在某个行上，那么，控件的表达因子又增加了一个“行”因子r，即C(r,s,p)清晰完整地表达了界面中控件的显示，那么，图形化界面UI定义为，
UI＝{Ci(ri,si,pi)|i＝1,2,...,n，C1＝FormView0,Vi<j，必有Cj</Ci}
其中，FormView0是最初始的幕布化的基本框架控件。
2.图形化界面对应的存储结构即物理模型
存储结构要表达每一个UI中的控件元素，还要表达UI中控件元素的层次组织结构，可从如下几个方面讨论。
1)控件元素的存储结构
我们习惯上使用C(s,p)来表示一个图形化界面中的控件，其中s是表示显示样式(style)的信息，p是表示控件所在界面中位置(position)的信息，当然，实际的应用中，控件元素还有一个很重要的内容，即所显示的字符串及其相关字体，因此，我们分别用STYLE表示显示样式，POSITION表示控件位置，FONT表示控件字体，则，可以得到如下基本的控件结构OBJECT
typedef struct OBJECT＝{
int id； //控件id，唯一地标识一个控件
int ctrltype； //控件类型，系统所规定的控件类型集中的一种
CString text； //控件所显示的字符串
STYLE s； //控件的显示样式
POSITION p； //控件所在界面中位置的信息
FONT f； //控件所显示的字符串的相关字体
}
这里的OBJECT的定义，隐去了一些细节，表示了控件C(s,p)所存储的物理模型。
2)图形化界面中控件元素的层次组织树
在这里，我们构建能表示UI＝{Ci(s,p)|i＝1,2,...,n，C1＝FormView0,Vi<j，必有Cj</Ci}在内存中存储的物理模型。
我们通过下述步骤，构建一个表示UI的树结构：
a)把C1＝FormView0做为树的根节点，此时i＝1
b)如果Ci是视图/框架控件，那么，在Ci中可以摆放Ci1,Ci2,...,Cik，此时Ci<Cil
c)我们把Ci1,Ci2,...,Cik做为Ci的子节点
d)重复b)，c)，则得到UI的层次组织树
参见图1，是一个有六个控件元素的UI界面的层次组织树，UI＝{Ci(si,pi)|i＝1,2,...,6,C1＝FormView0,C1<C2,C1<C3,C1<C4,C2<C5,C2<C6}
3)扩展的图形化界面的层次组织结构
扩展的UI界面的表达式为UI＝{Ci(r,s,p)|i＝1,2,...,n，C1＝FormView0,Vi<j，必有Cj</Ci}，其中控件元素Ci(r,s,p)是摆放在由“行”所分割的幕布中的第r行，此时，UI界面的物理存储结构可以表示成由各个视图/框架控件指向行，每行又指向其上所摆放的控件，这样可方便得到对控件的遍历。
假设上述六个元素的UI增加了“行”因子后，有UI＝{Ci(ri,si,pi)|i＝1,2,...,6,C1＝FormView0,C1<C2(2,s2,p2),C1<C3(2,s3,p3),C1<C4(3,s4,p4),C2<C5(1,s5,p5),C2<C6(2,s6,p6)}，那么，该UI界面的层次组织树如图2所示。
3.控件的各种“高度”的定义：
设置高度：动态编辑时，通过平台设定的控件高度，是由控件的各个占位的高度元素的累加，简化标记如c.p.height＝30，即高度为30pm。
缺省高度：动态编辑时，未通过平台设定控件高度，简化标记如c.p.height＝NULL，此时，控件的高度为平台默认的某个高度，也是由控件的各个占位的高度元素的缺省值的累加，假设为50pm。
实际高度：若控件未抻高，则实际高度为设置高度或缺省高度，若抻高，则为抻高高度；对于行的实际高度也是类似定义。
占位高度：控件在行中的占位，除了控件本身的高度外，还有top margin(上缘高度)，bottom margin(下缘高度)，上述加起来就是控件的占位高度；对于行的占位，除了行本身的高度外，还有top padding(顶部填充高度)，bottom padding(底部填充高度)，上述加起来就是行的占位高度。对于行而言，通常不设置其top margin以及bottom margin。本领域技术人员可根据其自身实际需求对上述top margin、bottom margin、top padding以及bottom padding进行设定，这并不会超出本发明的保护范围。
需要说明的是，在本发明中，控件/行的设置高度、缺省高度以及实际高度均是指控件/行的占位高度。
参见图3，本发明实施例提出一种图形化界面构建方法，图形化界面包括幕布，所述幕布包括多个行。如图3所示，所述图形化界面构建方法包括如下步骤：
S1，若检测到图形化界面中新增了控件，将该新增的控件作为第一当前控件。
具体实施中，若检测到图形化界面中新增了控件，即用户在图形化界面中新增了控件，将该新增的控件作为第一当前控件。
S2，获取先于所述第一当前控件的视图/框架控件作为第一目标视图/框架控件，以及获取所述第一当前控件所在的行作为第一目标行。
具体实施中，获取先于所述第一当前控件的视图/框架控件作为第一目标视图/框架控件。第一目标视图/框架控件先于所述第一当前控件，即表示第一目标视图/框架控件中摆放了所述第一当前控件。
同时，获取所述第一当前控件所在的行作为第一目标行。即，确实所述第一当前控件在所述第一目标视图/框架控件中的哪一行。
S3，计算所述第一目标行在新增所述第一当前控件后的高度与所述第一目标行在新增所述第一当前控件前的高度的差值作为第一目标差值。
具体实施中，计算所述第一目标行在新增所述第一当前控件后的实际高度与所述第一目标行在新增所述第一当前控件前的实际高度的差值作为第一目标差值。
在本发明实施例中，行的实际高度计算方式如下：
设行中有n个控件C1、C2、C3……Cn，各控件互不相交，也不折行；每个控件的占位高度为height(Ci)，i＝1、2、3……n；则行的实际高度计算方式如下：
设
Figure BDA0002588395950000081
设H2为行的设置高度与缺省高度中的较大者；
则，行的实际高度取H1与H2中的较大者。
若行有多个折行，则行的实际高度为多个折行的高度和。
本发明中，若行中的控件的实际高度发生改变，则按照上述计算方式重新计算行的高度。
本发明中，通过以上计算方式分别计算所述第一目标行在新增所述第一当前控件后的实际高度，以及所述第一目标行在新增所述第一当前控件前的实际高度；然后再计算二者的差值。
S4，判断所述第一目标差值是否大于零。
S5，若所述第一目标差值大于零，将所述第一目标行的实际高度增加第一目标差值。
具体实施中，如果所述第一目标差值大于零，则说明所述第一当前控件的占位高度比所述第一目标行的实际高度大，此时需要增加所述第一目标行的高度才能摆放下所述第一当前控件。因此，将所述第一目标行的实际高度增加第一目标差值，以使得所述第一目标行能够容纳所述第一当前控件。
如果所述第一目标差值不大于零，则说明所述第一当前控件的占位高度比所述第一目标行的实际高度小，此时，所述第一目标行能够容纳所述第一当前控件，因此结束流程，无需调整第一目标行的实际高度。
S6，将所述第一目标视图/框架控件中第一目标行之后的各行中的控件的位置下移第一目标差值。
具体实施中，在步骤S5后，由于调整了第一目标行的高度，需适应性的将所述第一目标视图/框架控件中第一目标行之后的各行中的控件的位置下移第一目标差值。
S7，获取所述第一目标视图/框架控件的各行的实际高度的总和与所述第一目标视图/框架控件的实际高度的差值作为第二目标差值。
S8，判断所述第二目标差值是否大于零。
S9，若所述第二目标差值大于零，将所述第一目标视图/框架控件的实际高度增加第二目标差值。
具体实施中，若所述第二目标差值大于零，则说明所述第一目标视图/框架控件的各行的实际高度的比所述第一目标视图/框架控件的实际高度要大，此时需要增加所述第一目标视图/框架控件的实际高度才能容纳其各行，因此，将所述第一目标视图/框架控件的实际高度增加第二目标差值。
若所述第二目标差值不大于零，则说明第一目标视图/框架控件能容纳其各行，因此结束流程，无需调整第一目标视图/框架控件的实际高度。
S10，判断所述第一目标视图/框架控件是否为顶层的视图/框架控件。
具体实施中，顶层的视图/框架控件，是指该视图/框架控件直接摆在幕布中，而未摆放在任何的视图/框架控件中。
S11，若所述第一目标视图/框架控件不是顶层的视图/框架控件，获取先于第一目标视图/框架控件的目标视图/框架控件作为新的第一目标视图/框架控件，并转到步骤S7。
具体实施中，若所述第一目标视图/框架控件不是顶层的视图/框架控件，获取先于第一目标视图/框架控件的目标视图/框架控件作为新的第一目标视图/框架控件，并转到步骤S2，如此循环，直到所述第一目标视图/框架控件是顶层的视图/框架控件为止。
若所述第一目标视图/框架控件是顶层的视图/框架控件，结束流程。
通过应用本实施例的技术方案，能够在增加控件时，自动调整图形化界面中各控件以及各行的高度(位置)，操作便捷，无需用户手动调整，极大地提高了用户的编辑效率。
参见图4，本发明实施例提出一种图形化界面构建方法，图形化界面包括幕布，所述幕布包括多个行。如图4所示，所述图形化界面构建方法包括如下步骤：
S41，若检测到图形化界面中删除了控件，将该删除的控件作为第二当前控件。
具体实施中，若检测到图形化界面中删除了控件，即用户在图形化界面中删除了控件，将该删除的控件作为第二当前控件。
S42，获取先于所述第二当前控件的视图/框架控件作为第二目标视图/框架控件，以及获取所述第二当前控件所在的行作为第二目标行。
具体实施中，获取先于所述第二当前控件的视图/框架控件作为第二目标视图/框架控件。第二目标视图/框架控件先于所述第二当前控件，即表示第二目标视图/框架控件中摆放了所述第二当前控件。
同时，获取所述第二当前控件所在的行作为第二目标行。即，确实所述第二当前控件在所述第二目标视图/框架控件中的哪一行。
S43，计算所述第二目标行在删除所述第二当前控件之前的实际高度与所述第二目标行在删除所述第二当前控件之后的实际高度的差值作为第三目标差值。
具体实施中，计算所述第二目标行在删除所述第二当前控件之前的实际高度与所述第二目标行在删除所述第二当前控件之后的实际高度的差值作为第三目标差值。
在本发明实施例中，行的实际高度计算方式如下：
设行中有n个控件C1、C2、C3……Cn，各控件互不相交，也不折行；每个控件的占位高度为height(Ci)，i＝1、2、3……n；则行的实际高度计算方式如下：
设
Figure BDA0002588395950000101
设H2为行的设置高度与缺省高度中的较大者；
则，行的实际高度取H1与H2中的较大者。
若行有多个折行，则行的实际高度为多个折行的高度和。
本发明中，若行中的控件的实际高度发生改变，则按照上述计算方式重新计算行的高度。
在本发明实施例中，通过以上行高计算方式分别计算所述第二目标行在删除所述第二当前控件之前的实际高度，以及所述第二目标行在删除所述第二当前控件之后的实际高度。然后，再计算二者的差值。
S44，判断所述第三目标差值是否大于零。
S45，若所述第三目标差值大于零，将所述第二目标行的实际高度调整为所述第二目标行中除所述第二当前控件以外的控件的占位高度。
具体实施中，若所述第三目标差值大于零，则第二目标行需要回缩，此时将所述第二目标行的实际高度调整为所述第二目标行中除所述第二当前控件以外的控件的占位高度。
若所述第三目标差值不大于零，则结束流程，无需调整第二目标行的高度。
S46，将所述第二目标视图/框架控件中第二目标行之后的各行中的控件的位置上移第二目标差值。
具体实施中，在步骤S45后，由于调整了第二目标行的高度，需要适应性的将所述第二目标视图/框架控件中第二目标行之后的各行中的控件的位置上移第二目标差值。
S47，判断所述第二目标视图/框架控件的各行的实际高度的总和是否大于参考高度，所述参考高度为所述第二目标视图/框架控件的设置高度与缺省高度中的较大者。
具体实施中，判断所述第二目标视图/框架控件的各行的实际高度的总和是否大于参考高度。其中，所述参考高度为所述第二目标视图/框架控件的设置高度与缺省高度中的较大者。
S48，若所述第二目标视图/框架控件的各行的实际高度的总和大于参考高度，将所述第二目标视图/框架控件的实际高度调整为所述第二目标视图/框架控件的各行的实际高度的总和。
具体实施中，若所述第二目标视图/框架控件的各行的实际高度的总和大于参考高度，将所述第二目标视图/框架控件的实际高度调整为所述第二目标视图/框架控件的各行的实际高度的总和，以使得第二目标视图/框架控件恰好能够摆下其各行。
S49，若所述第二目标视图/框架控件的各行的实际高度的总和不大于参考高度，将所述第二目标视图/框架控件的实际高度调整为所述参考高度。
具体实施中，若所述第二目标视图/框架控件的各行的实际高度的总和不大于参考高度，将所述第二目标视图/框架控件的实际高度调整为所述参考高度。由此可确保第二目标视图/框架控件的实际高度不小于所述参考高度。
S410，判断所述第二目标视图/框架控件是否为顶层的视图/框架控件。
具体实施中，顶层的视图/框架控件，是指该视图/框架控件直接摆在幕布中，而未摆放在任何的视图/框架控件中。
S411，若所述第二目标视图/框架控件不是顶层的视图/框架控件，获取先于第二目标视图/框架控件的目标视图/框架控件作为新的第二目标视图/框架控件，并转到步骤S47。
具体实施中，若所述第二目标视图/框架控件不是顶层的视图/框架控件，获取先于第二目标视图/框架控件的目标视图/框架控件作为新的第二目标视图/框架控件，并转到步骤S47，如此循环，直到所述第二目标视图/框架控件是顶层的视图/框架控件为止。
若所述第二目标视图/框架控件是顶层的视图/框架控件，结束流程。
通过应用本实施例的技术方案，能够在删除控件时，自动调整图形化界面中各控件以及各行的高度(位置)，操作便捷，无需用户手动调整，极大地提高了用户的编辑效率。
本发明实施例还提出一种图形化界面构建方法，图形化界面包括幕布，所述幕布包括多个行，所述图形化界面构建方法包括：
若检测到图形化界面中修改了控件，将修改之前的控件删除，并执行如图4所示的实施例的方法；
在图形化界面中新增修改后的控件，并执行如图3所示的实施例的方法。
需要说明的是，本实施例中，修改控件，相当于先删除修改前的控件，此时执行如图4所示的实施例的方法；然后再新增修改后的控件，此时执行如图3所示的实施例的方法。
通过应用本实施例的技术方案，能够在修改控件时，自动调整图形化界面中各控件以及各行的高度(位置)，操作便捷，无需用户手动调整，极大地提高了用户的编辑效率。
为了阐述本发明实施例提出的图形化界面构建方法在新增控件时的自动调整的效果，参见图5-图6，在一实施例中，在图形化界面的控件C2的第一行新增控件C之后，控件C4和控件C6的位置变化了，控件C1和控件C2的高度变化了。分析如下：当新增控件C到控件C2(属于视图/框架控件)的第一行时，因为行高小于控件高度，则该行被抻开；又由于控件C2的第一行被抻开，控件C2第一行之后的各行控件下移，即控件C6控件的位置变化了，同时，控件C2的高度被抻大；接下来，因为控件C2高度抻大了，控件C2位于控件C1(属于视图/框架控件)的第二行，控件C1第二行又要被抻高，之后的各行控件下移，即控件C4控件的位置变化了，同时，控件C1的高度被抻大。由于控件C1是最顶层控件，控件的连锁位置变化和大小变化过程结束。
为了阐述本发明实施例提出的图形化界面构建方法在删除控件时的自动调整的效果，参见图7-图8，在一实施例中，在图形化界面的控件C2的第一行中删除控件C时，控件C4和控件C6的位置变化了，控件C1和控件C2的高度变化了。分析如下：当从控件C2(属于视图/框架控件)中删除第一行控件C时，因为原行高是被抻高的，删除之后则缩回原设置高度；又由于控件C2的第一行被缩回，控件C2第一行之后的各行控件上移，即控件C6控件的位置变化了，同时，控件C2的高度又恢复原设置高度；接下来，因为控件C2高度缩小了，控件C2位于控件C1(属于视图/框架控件)的第二行，控件C1第二行又要缩回原设置高度，之后的各行控件上移，即控件C4控件的位置变化了，同时，控件C1的高度被缩回。由于控件C1是最顶层控件，控件的连锁位置变化和大小变化过程结束。
图9是本发明实施例提供的一种图形化界面构建装置的示意性框图。如图9所示，本发明还提供一种图形化界面构建装置80。该装置可以被配置于台式电脑、平板电脑、手提电脑、等终端中。具体地，请参阅图9，该图形化界面构建装置80包括：
第一检测单元81，用于若检测到图形化界面中新增了控件，将该新增的控件作为第一当前控件。
第一获取单元82，用于获取先于所述第一当前控件的视图/框架控件作为第一目标视图/框架控件，以及获取所述第一当前控件所在的行作为第一目标行。
第二获取单元83，用于计算所述第一目标行在新增所述第一当前控件后的实际高度与所述第一目标行在新增所述第一当前控件前的实际高度的差值作为第一目标差值。
第一判断单元84，用于判断所述第一目标差值是否大于零。
第一增加单元85，用于若所述第一目标差值大于零，将所述第一目标行的实际高度增加第一目标差值。
下移单元86，用于将所述第一目标视图/框架控件中第一目标行之后的各行中的控件的位置下移第一目标差值。
第三获取单元87，用于获取所述第一目标视图/框架控件的各行的实际高度的总和与所述第一目标视图/框架控件的实际高度的差值作为第二目标差值。
第二判断单元88，用于判断所述第二目标差值是否大于零。
第二增加单元89，用于若所述第二目标差值大于零，将所述第一目标视图/框架控件的实际高度增加第二目标差值。
第三判断单元810，用于判断所述第一目标视图/框架控件是否为顶层的视图/框架控件。
第一跳转单元811，用于若所述第一目标视图/框架控件不是顶层的视图/框架控件，获取先于第一目标视图/框架控件的目标视图/框架控件作为新的第一目标视图/框架控件，并转到获取所述第一目标视图/框架控件的各行的实际高度的总和与所述第一目标视图/框架控件的实际高度的差值作为第二目标差值的步骤。
第一结束单元812，用于若所述第一目标差值不大于零，或者若所述第二目标差值不大于零，或者若所述第一目标视图/框架控件是顶层的视图/框架控件，结束流程。
图10是本发明另一实施例提供的一种图形化界面构建装置的示意性框图。如图10所示，本发明还提供一种图形化界面构建装置90。该装置可以被配置于台式电脑、平板电脑、手提电脑、等终端中。具体地，请参阅图10，该图形化界面构建装置90包括：
第二检测单元91，用于若检测到图形化界面中删除了控件，将该删除的控件作为第二当前控件。
第四获取单元92，用于获取先于所述第二当前控件的视图/框架控件作为第二目标视图/框架控件，以及获取所述第二当前控件所在的行作为第二目标行。
第五获取单元93，用于计算所述第二目标行在删除所述第二当前控件之前的实际高度与所述第二目标行在删除所述第二当前控件之后的实际高度的差值作为第三目标差值。
第四判断单元94，用于判断所述第三目标差值是否大于零。
第一调整单元95，用于若所述第三目标差值大于零，将所述第二目标行的实际高度减少第三目标差值；
上移单元96，用于将所述第二目标视图/框架控件中第二目标行之后的各行中的控件的位置上移第三目标差值。
第五判断单元97，用于判断所述第二目标视图/框架控件的各行的实际高度的总和是否大于参考高度，所述参考高度为所述第二目标视图/框架控件的设置高度与缺省高度中的较大者。
第二调整单元98，用于若所述第二目标视图/框架控件的各行的实际高度的总和大于参考高度，将所述第二目标视图/框架控件的实际高度调整为所述第二目标视图/框架控件的各行的实际高度的总和。
第三调整单元99，用于若所述第二目标视图/框架控件的各行的实际高度的总和不大于参考高度，将所述第二目标视图/框架控件的实际高度调整为所述参考高度。
第六判断单元910，用于判断所述第二目标视图/框架控件是否为顶层的视图/框架控件。
第二跳转单元911，用于若所述第二目标视图/框架控件不是顶层的视图/框架控件，获取先于第二目标视图/框架控件的目标视图/框架控件作为新的第二目标视图/框架控件，并转到判断所述第二目标视图/框架控件的各行的实际高度的总和是否大于参考高度的步骤。
第二结束单元912，用于若所述第三目标差值不大于零，或者若所述第二目标视图/框架控件是顶层的视图/框架控件，结束流程。
需要说明的是，所属领域的技术人员可以清楚地了解到，上述图形化界面构建装置和各单元的具体实现过程，可以参考前述方法实施例中的相应描述，为了描述的方便和简洁，在此不再赘述。
本发明实施例还提供一种图形化界面构建装置，该图像化构建装置包括：
第一执行单元，用于若检测到图形化界面中修改了控件，将修改之前的控件删除，并执行如图4所示的实施例的方法；
第二执行单元，用于在图形化界面中新增修改后的控件，并执行如图3所示的实施例的方法。
上述图形化界面构建装置可以实现为一种计算机程序的形式，该计算机程序可以在如图11所示的计算机设备上运行。
请参阅图11，图11是本申请实施例提供的一种计算机设备的示意性框图。该计算机设备500可以是终端，也可以是服务器，其中，终端可以是智能手机、平板电脑、笔记本电脑、台式电脑、个人数字助理和穿戴式设备等具有通信功能的电子设备。服务器可以是独立的服务器，也可以是多个服务器组成的服务器集群。
参阅图11，该计算机设备500包括通过系统总线501连接的处理器502、存储器和网络接口505，其中，存储器可以包括非易失性存储介质503和内存储器504。
该非易失性存储介质503可存储操作系统5031和计算机程序5032。该计算机程序5032被执行时，可使得处理器502执行一种图形化界面构建方法。
该处理器502用于提供计算和控制能力，以支撑整个计算机设备500的运行。
该内存储器504为非易失性存储介质503中的计算机程序5032的运行提供环境，该计算机程序5032被处理器502执行时，可使得处理器502执行一种图形化界面构建方法。
该网络接口505用于与其它设备进行网络通信。本领域技术人员可以理解，图11中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备500的限定，具体的计算机设备500可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
其中，在一实施例中，所述处理器502用于运行存储在存储器中的计算机程序5032，以实现如下步骤：
若检测到图形化界面中新增了控件，将该新增的控件作为第一当前控件；
获取先于所述第一当前控件的视图/框架控件作为第一目标视图/框架控件，以及获取所述第一当前控件所在的行作为第一目标行；
获取所述第一当前控件的占位高度与所述第一目标行的实际高度的差值作为第一目标差值；
判断所述第一目标差值是否大于零；
若所述第一目标差值大于零，将所述第一目标行的实际高度增加第一目标差值；
将所述第一目标视图/框架控件中第一目标行之后的各行中的控件的位置下移第一目标差值。
在一实施例中，处理器502还实现如下步骤：
获取所述第一目标视图/框架控件的各行的实际高度的总和与所述第一目标视图/框架控件的实际高度的差值作为第二目标差值；
判断所述第二目标差值是否大于零；
若所述第二目标差值大于零，将所述第一目标视图/框架控件的实际高度增加第二目标差值；
判断所述第一目标视图/框架控件是否为顶层的视图/框架控件；
若所述第一目标视图/框架控件不是顶层的视图/框架控件，获取先于第一目标视图/框架控件的目标视图/框架控件作为新的第一目标视图/框架控件，并转到获取所述第一目标视图/框架控件的各行的实际高度的总和与所述第一目标视图/框架控件的实际高度的差值作为第二目标差值的步骤。
在一实施例中，处理器502还实现如下步骤：
若所述第一目标差值不大于零，结束流程；
若所述第二目标差值不大于零，结束流程；
若所述第一目标视图/框架控件是顶层的视图/框架控件，结束流程。
在一实施例中，所述处理器502用于运行存储在存储器中的计算机程序5032，以实现如下步骤：
若检测到图形化界面中删除了控件，将该删除的控件作为第二当前控件；
获取先于所述第二当前控件的视图/框架控件作为第二目标视图/框架控件，以及获取所述第二当前控件所在的行作为第二目标行；
获取所述第二当前控件的占位高度与所述第二目标行中除所述第二当前控件以外的控件的占位高度的差值作为第三目标差值；
判断所述第三目标差值是否大于零；
若所述第三目标差值大于零，将所述第二目标行的实际高度调整为所述第二目标行中除所述第二当前控件以外的控件的占位高度；
将所述第二目标视图/框架控件中第二目标行之后的各行中的控件的位置上移第二目标差值。
在一实施例中，处理器502还实现如下步骤：
判断所述第二目标视图/框架控件的各行的实际高度的总和是否大于参考高度，所述参考高度为所述第二目标视图/框架控件的设置高度与缺省高度中的较大者；
若所述第二目标视图/框架控件的各行的实际高度的总和大于参考高度，将所述第二目标视图/框架控件的实际高度调整为所述第二目标视图/框架控件的各行的实际高度的总和；
若所述第二目标视图/框架控件的各行的实际高度的总和不大于参考高度，将所述第二目标视图/框架控件的实际高度调整为所述参考高度；
判断所述第二目标视图/框架控件是否为顶层的视图/框架控件；
若所述第二目标视图/框架控件不是顶层的视图/框架控件，获取先于第二目标视图/框架控件的目标视图/框架控件作为新的第二目标视图/框架控件，并转到判断所述第二目标视图/框架控件的各行的实际高度的总和是否大于参考高度的步骤。
在一实施例中，处理器502还实现如下步骤：
若所述第三目标差值不大于零，结束流程；
若所述第二目标视图/框架控件是顶层的视图/框架控件，结束流程。
在一实施例中，所述处理器502用于运行存储在存储器中的计算机程序5032，以实现如下步骤：
若检测到图形化界面中修改了控件，将修改之前的控件删除，并执行如图4所示的实施例的方法；
在图形化界面中新增修改后的控件，并执行如图3所示的实施例的方法。
应当理解，在本申请实施例中，处理器502可以是中央处理单元(CentralProcessing Unit，CPU)，该处理器502还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。其中，通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
本领域普通技术人员可以理解的是实现上述实施例的方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成。该计算机程序可存储于一存储介质中，该存储介质为计算机可读存储介质。该计算机程序被该计算机系统中的至少一个处理器执行，以实现上述方法的实施例的流程步骤。
因此，本发明还提供一种存储介质。该存储介质可以为计算机可读存储介质。该存储介质存储有计算机程序。在一实施例中，该计算机程序被处理器执行时使处理器执行如下步骤：
若检测到图形化界面中新增了控件，将该新增的控件作为第一当前控件；
获取先于所述第一当前控件的视图/框架控件作为第一目标视图/框架控件，以及获取所述第一当前控件所在的行作为第一目标行；
获取所述第一当前控件的占位高度与所述第一目标行的实际高度的差值作为第一目标差值；
判断所述第一目标差值是否大于零；
若所述第一目标差值大于零，将所述第一目标行的实际高度增加第一目标差值；
将所述第一目标视图/框架控件中第一目标行之后的各行中的控件的位置下移第一目标差值。
在一实施例中，所述处理器在执行所述计算机程序还实现如下步骤：
获取所述第一目标视图/框架控件的各行的实际高度的总和与所述第一目标视图/框架控件的实际高度的差值作为第二目标差值；
判断所述第二目标差值是否大于零；
若所述第二目标差值大于零，将所述第一目标视图/框架控件的实际高度增加第二目标差值；
判断所述第一目标视图/框架控件是否为顶层的视图/框架控件；
若所述第一目标视图/框架控件不是顶层的视图/框架控件，获取先于第一目标视图/框架控件的目标视图/框架控件作为新的第一目标视图/框架控件，并转到获取所述第一目标视图/框架控件的各行的实际高度的总和与所述第一目标视图/框架控件的实际高度的差值作为第二目标差值的步骤。
在一实施例中，所述处理器在执行所述计算机程序还实现如下步骤：
若所述第一目标差值不大于零，结束流程；
若所述第二目标差值不大于零，结束流程；
若所述第一目标视图/框架控件是顶层的视图/框架控件，结束流程。
在一实施例中，该计算机程序被处理器执行时使处理器执行如下步骤：
若检测到图形化界面中删除了控件，将该删除的控件作为第二当前控件；
获取先于所述第二当前控件的视图/框架控件作为第二目标视图/框架控件，以及获取所述第二当前控件所在的行作为第二目标行；
获取所述第二当前控件的占位高度与所述第二目标行中除所述第二当前控件以外的控件的占位高度的差值作为第三目标差值；
判断所述第三目标差值是否大于零；
若所述第三目标差值大于零，将所述第二目标行的实际高度调整为所述第二目标行中除所述第二当前控件以外的控件的占位高度；
将所述第二目标视图/框架控件中第二目标行之后的各行中的控件的位置上移第二目标差值。
在一实施例中，所述处理器在执行所述计算机程序还实现如下步骤：
判断所述第二目标视图/框架控件的各行的实际高度的总和是否大于参考高度，所述参考高度为所述第二目标视图/框架控件的设置高度与缺省高度中的较大者；
若所述第二目标视图/框架控件的各行的实际高度的总和大于参考高度，将所述第二目标视图/框架控件的实际高度调整为所述第二目标视图/框架控件的各行的实际高度的总和；
若所述第二目标视图/框架控件的各行的实际高度的总和不大于参考高度，将所述第二目标视图/框架控件的实际高度调整为所述参考高度；
判断所述第二目标视图/框架控件是否为顶层的视图/框架控件；
若所述第二目标视图/框架控件不是顶层的视图/框架控件，获取先于第二目标视图/框架控件的目标视图/框架控件作为新的第二目标视图/框架控件，并转到判断所述第二目标视图/框架控件的各行的实际高度的总和是否大于参考高度的步骤。
在一实施例中，所述处理器在执行所述计算机程序还实现如下步骤：
若所述第三目标差值不大于零，结束流程；
若所述第二目标视图/框架控件是顶层的视图/框架控件，结束流程。
在一实施例中，该计算机程序被处理器执行时使处理器执行如下步骤：
若检测到图形化界面中修改了控件，将修改之前的控件删除，并执行如图4所示的实施例的方法；
在图形化界面中新增修改后的控件，并执行如图3所示的实施例的方法。
所述存储介质为实体的、非瞬时性的存储介质，例如可以是U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的实体存储介质。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的。例如，各个单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。
本发明实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。本发明实施例装置中的单元可以根据实际需要进行合并、划分和删减。另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。
该集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，终端，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详细描述的部分，可以参见其他实施例的相关描述。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，尚且本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种图形化界面构建方法，其特征在于，图形化界面包括幕布，所述幕布包括多个行，所述图形化界面构建方法包括：
若检测到图形化界面中新增了控件，将该新增的控件作为第一当前控件；
获取先于所述第一当前控件的视图/框架控件作为第一目标视图/框架控件，以及获取所述第一当前控件所在的行作为第一目标行；
计算所述第一目标行在新增所述第一当前控件后的实际高度与所述第一目标行在新增所述第一当前控件前的实际高度的差值作为第一目标差值；
判断所述第一目标差值是否大于零；
若所述第一目标差值大于零，将所述第一目标行的实际高度增加第一目标差值；
将所述第一目标视图/框架控件中第一目标行之后的各行中的控件的位置下移第一目标差值。
2.根据权利要求1所述的图形化界面构建方法，其特征在于，还包括：
获取所述第一目标视图/框架控件的各行的实际高度的总和与所述第一目标视图/框架控件的实际高度的差值作为第二目标差值；
判断所述第二目标差值是否大于零；
若所述第二目标差值大于零，将所述第一目标视图/框架控件的实际高度增加第二目标差值；
判断所述第一目标视图/框架控件是否为顶层的视图/框架控件；
若所述第一目标视图/框架控件不是顶层的视图/框架控件，获取先于第一目标视图/框架控件的目标视图/框架控件作为新的第一目标视图/框架控件，并转到获取所述第一目标视图/框架控件的各行的实际高度的总和与所述第一目标视图/框架控件的实际高度的差值作为第二目标差值的步骤。
3.根据权利要求2所述的图形化界面构建方法，其特征在于，还包括：
若所述第一目标差值不大于零，结束流程；
若所述第二目标差值不大于零，结束流程；
若所述第一目标视图/框架控件是顶层的视图/框架控件，结束流程。
4.一种图形化界面构建方法，其特征在于，图形化界面包括幕布，所述幕布包括多个行，所述图形化界面构建方法包括：
若检测到图形化界面中删除了控件，将该删除的控件作为第二当前控件；
获取先于所述第二当前控件的视图/框架控件作为第二目标视图/框架控件，以及获取所述第二当前控件所在的行作为第二目标行；
计算所述第二目标行在删除所述第二当前控件之前的实际高度与所述第二目标行在删除所述第二当前控件之后的实际高度的差值作为第三目标差值；
判断所述第三目标差值是否大于零；
若所述第三目标差值大于零，将所述第二目标行的实际高度减少第三目标差值；
将所述第二目标视图/框架控件中第二目标行之后的各行中的控件的位置上移第三目标差值。
5.根据权利要求4所述的图形化界面构建方法，其特征在于，所述方法还包括：
判断所述第二目标视图/框架控件的各行的实际高度的总和是否大于参考高度，所述参考高度为所述第二目标视图/框架控件的设置高度与缺省高度中的较大者；
若所述第二目标视图/框架控件的各行的实际高度的总和大于参考高度，将所述第二目标视图/框架控件的实际高度调整为所述第二目标视图/框架控件的各行的实际高度的总和；
若所述第二目标视图/框架控件的各行的实际高度的总和不大于参考高度，将所述第二目标视图/框架控件的实际高度调整为所述参考高度；
判断所述第二目标视图/框架控件是否为顶层的视图/框架控件；
若所述第二目标视图/框架控件不是顶层的视图/框架控件，获取先于第二目标视图/框架控件的目标视图/框架控件作为新的第二目标视图/框架控件，并转到判断所述第二目标视图/框架控件的各行的实际高度的总和是否大于参考高度的步骤。
6.根据权利要求5所述的图形化界面构建方法，其特征在于，所述方法还包括：
若所述第三目标差值不大于零，结束流程；
若所述第二目标视图/框架控件是顶层的视图/框架控件，结束流程。
7.一种图形化界面构建方法，其特征在于，图形化界面包括幕布，所述幕布包括多个行，所述图形化界面构建方法包括：
若检测到图形化界面中修改了控件，将修改之前的控件删除，并执行如权利要求4-6任一项所述的方法；
在图形化界面中新增修改后的控件，并执行如权利要求1-3任一项所述的方法。
8.一种图形化界面构建装置，其特征在于，所述图形化界面构建装置包括用于执行如权利要求1-3任一项所述方法的单元，或者所述图形化界面构建装置包括用于执行如权利要求4-6任一项所述方法的单元，或者所述图形化界面构建装置包括用于执行如权利要求7所述方法的单元。
9.一种计算机设备，其特征在于，所述计算机设备包括存储器及处理器，所述存储器上存储有计算机程序；所述处理器执行所述计算机程序时实现如权利要求1-3中任一项所述的方法，或者所述处理器执行所述计算机程序时实现如权利要求4-6中任一项所述的方法，或者所述处理器执行所述计算机程序时实现如权利要求7所述的方法。
10.一种计算机可读存储介质，其特征在于，所述存储介质存储有计算机程序；所述计算机程序当被处理器执行时可实现如权利要求1-3中任一项所述的方法，或者所述计算机程序当被处理器执行时可实现如权利要求4-6中任一项所述的方法，或者所述计算机程序当被处理器执行时可实现如权利要求7所述的方法。
CN202010688253.8A 2020-07-16 2020-07-16 图形化界面构建方法、装置、计算机设备及存储介质 Active CN111651161B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010688253.8A CN111651161B (zh) 2020-07-16 2020-07-16 图形化界面构建方法、装置、计算机设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010688253.8A CN111651161B (zh) 2020-07-16 2020-07-16 图形化界面构建方法、装置、计算机设备及存储介质

Publications (2)

Publication Number Publication Date
CN111651161A true CN111651161A (zh) 2020-09-11
CN111651161B CN111651161B (zh) 2023-04-18

Family

ID=72345303

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010688253.8A Active CN111651161B (zh) 2020-07-16 2020-07-16 图形化界面构建方法、装置、计算机设备及存储介质

Country Status (1)

Country Link
CN (1) CN111651161B (zh)

Citations (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030025737A1 (en) * 2001-08-02 2003-02-06 Breinberg Steven Adam System and method for automatic and dynamic layout of resizable dialog type windows
NO20051057D0 (no) * 2004-03-31 2005-02-25 Microsoft Corp Gitter lerret
US20110202887A1 (en) * 2010-02-18 2011-08-18 Jonathan Mendez Automatically Suggesting Graphical Program Elements for Inclusion in a Graphical Program
US20120218309A1 (en) * 2009-11-13 2012-08-30 Zhang Kaicheng Aligning user interface elements
CN103176797A (zh) * 2013-02-21 2013-06-26 用友软件股份有限公司 界面布局装置和界面布局方法
CN104267961A (zh) * 2014-09-30 2015-01-07 腾讯科技（深圳）有限公司 滚动条的生成方法及装置
WO2015149679A1 (zh) * 2014-04-04 2015-10-08 华为终端有限公司 界面元素的自动调整方法和装置
CN105930392A (zh) * 2016-04-15 2016-09-07 北京思特奇信息技术股份有限公司 一种基于消息传输的跨域iframe高度自适应方法及其系统
CN108121541A (zh) * 2017-12-21 2018-06-05 深圳市富途网络科技有限公司 一种向画布添加二维界面组件时的建议位置生成方法
CN108628656A (zh) * 2018-05-09 2018-10-09 平安普惠企业管理有限公司 Ios设备上界面适配方法、装置、计算机设备及存储介质
CN109614175A (zh) * 2018-10-17 2019-04-12 平安普惠企业管理有限公司 用户界面异常处理方法、装置、计算机设备及存储介质
GB201910085D0 (en) * 2018-09-16 2019-08-28 Adobe Inc Automatically generating and applying graphical user interface resize-contraints based on design semantics

Patent Citations (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030025737A1 (en) * 2001-08-02 2003-02-06 Breinberg Steven Adam System and method for automatic and dynamic layout of resizable dialog type windows
NO20051057D0 (no) * 2004-03-31 2005-02-25 Microsoft Corp Gitter lerret
US20120218309A1 (en) * 2009-11-13 2012-08-30 Zhang Kaicheng Aligning user interface elements
US20110202887A1 (en) * 2010-02-18 2011-08-18 Jonathan Mendez Automatically Suggesting Graphical Program Elements for Inclusion in a Graphical Program
CN103176797A (zh) * 2013-02-21 2013-06-26 用友软件股份有限公司 界面布局装置和界面布局方法
WO2015149679A1 (zh) * 2014-04-04 2015-10-08 华为终端有限公司 界面元素的自动调整方法和装置
CN104267961A (zh) * 2014-09-30 2015-01-07 腾讯科技（深圳）有限公司 滚动条的生成方法及装置
CN105930392A (zh) * 2016-04-15 2016-09-07 北京思特奇信息技术股份有限公司 一种基于消息传输的跨域iframe高度自适应方法及其系统
CN108121541A (zh) * 2017-12-21 2018-06-05 深圳市富途网络科技有限公司 一种向画布添加二维界面组件时的建议位置生成方法
CN108628656A (zh) * 2018-05-09 2018-10-09 平安普惠企业管理有限公司 Ios设备上界面适配方法、装置、计算机设备及存储介质
GB201910085D0 (en) * 2018-09-16 2019-08-28 Adobe Inc Automatically generating and applying graphical user interface resize-contraints based on design semantics
CN109614175A (zh) * 2018-10-17 2019-04-12 平安普惠企业管理有限公司 用户界面异常处理方法、装置、计算机设备及存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
LIUYANYGZ: "使用GridBagLayout控制行列的高度和宽度" *
南方以北: "Qt中窗体控件按照比例缩放，自适应窗口大小进行布局" *

Also Published As

Publication number Publication date
CN111651161B (zh) 2023-04-18

Similar Documents

Publication Publication Date Title
US8417728B1 (en) User interfaces, methods, and systems for developing computer applications using artwork
US10409895B2 (en) Optimizing a document based on dynamically updating content
US20230367841A1 (en) System and method for implementing containers which extract and apply semantic page knowledge
JP4095558B2 (ja) 文書処理装置及び文書処理方法及びコンピュータプログラム
US8935602B2 (en) Hierarchical drag and drop structure editor for web sites
US8549423B2 (en) Linking and managing mathematical objects
US9360992B2 (en) Three dimensional conditional formatting
JP6018045B2 (ja) 選択したデータの一時的な書式設定とグラフ化
US20100235806A1 (en) Rich Web Site Authoring And Design
CN106294664A (zh) 一种生成思维导图的方法和装置
KR20130083832A (ko) 옵션들을 선택하기 위한 스핀 컨트롤 사용자 인터페이스
EP2409215A2 (en) Smooth layout animation of continuous and non-continuous properties
US8018471B2 (en) Visual component/clause merging
US6212666B1 (en) Graphic representation of circuit analysis for circuit design and timing performance evaluation
US7996780B1 (en) Block visualization
JP4101491B2 (ja) 合成フォント編集装置、合成フォント編集プログラム及びそれを記録した記録媒体
US20070266307A1 (en) Auto-layout of shapes
JP2009515276A (ja) スタイルドメインの製図
US20090282364A1 (en) Graphical user interface for multi-frame presentation
US11763065B2 (en) Font feature selection for text layout
CN111651161B (zh) 图形化界面构建方法、装置、计算机设备及存储介质
JPH09134156A (ja) アウトラインフォントのストローク化及びパーツ化方法
US8160389B2 (en) Method for overlapping visual slices
CN115239846A (zh) 一种切割文件的可视化修改方法、装置及相关组件
US20170068893A1 (en) System, Method and Software for Representing Decision Trees

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant