用于用户界面元素的有效布局和控制的基于约束的布局系统技术方案

技术编号:32769452 阅读:19 留言:0更新日期:2022-03-23 19:24
本发明专利技术涉及用于用户界面元素的有效布局和控制的基于约束的布局系统。该系统接收指示在布局应用的页面上定位第一UI元素的指令的第一用户输入。该系统接收指示在页面上定位第二UI元素的指令的第二用户输入。该系统接收指示创建从第二UI元素到第一UI元素的连接的指令的第三用户输入。该系统基于该连接,生成指示第一UI元素和第二UI元素之间的空间关系的布局约束。该系统在与UI相关联的布局数据文件中提供布局约束。中提供布局约束。中提供布局约束。

【技术实现步骤摘要】
用于用户界面元素的有效布局和控制的基于约束的布局系统
[0001]分案说明
[0002]本申请属于申请日为2017年4月21日的中国专利技术专利申请201780016736.X的分案申请。
[0003]相关申请的交叉引用
[0004]本申请根据35U.S.C.
§
119,要求2016年5月17日提交的名为“CONSTRAINTS

BASED LAYOUT SYSTEM FOR EFFICIENT LAYOUT AND CONTROL OF USER INTERFACE ELEMENTS”的美国临时专利申请序列号No.62/337,850以及2016年5月17日提交的名为“SYSTEMS AND METHODS FOR AUTOMATIC DETERMINATION OF LAYOUT CONSTRAINTS”的美国临时专利申请序列号No.62/337,852的优先权,其全部内容通过引用合并于此。


[0005]本公开一般涉及用于用户界面开发和部署的基于计算机的布局系统,更具体地说,涉及用于用户界面元素的有效布局和控制的基于约束的布局系统。

技术介绍

[0006]用户界面被设计为能够适应各种屏幕条件,诸如屏幕尺寸、屏幕密度和所使用的人类语言。传统的布局系统允许开发人员指定如何布局窗口小部件,以及它们的布局位置如何改变以适应不断变化的屏幕条件。然而,传统的布局系统很复杂,并且具有性能限制,这可能使创建用户界面成为开发人员不期望的耗时过程。
[0007]
技术介绍
部分中提供的描述不应当仅仅由于它在
技术介绍
部分中提及或者与
技术介绍
部分相关联而被认为是现有技术。
技术介绍
部分可以包括描述本主题技术的一个或多个方面的信息。

技术实现思路

[0008]所公开的主题涉及用于用户界面元素的有效布局和控制的基于约束的布局系统。更具体地,提供了基于约束的布局系统和方法,其允许开发人员更容易和有效地指定如何布局窗口小部件,以及它们的位置如何改变以适应那些改变和/或可变的显示条件(例如,各种屏幕尺寸、屏幕密度和语言)。易于附加的用户界面复杂性和设计选项。
[0009]根据本公开的方面,提供了一种计算机实现的方法。该方法包括在计算设备上提供用于开发用户界面(UI)的布局应用,其中,该布局应用包括页面的表示。该方法包括经由布局应用,接收第一用户输入,其中,该第一用户输入指示在所述页面上定位第一UI元素的指令。该方法包括经由布局应用接收第二用户输入,其中,该第二用户输入指示在所述页面上定位第二UI元素的指令。该方法包括经由布局应用接收第三用户输入,其中,该第三用户输入指示创建从所述第二UI元素到所述第一UI元素的连接的指令。该方法包括基于该连接,生成指示所述第一UI元素和所述第二UI元素之间的空间关系的布局约束。该方法还包括在与所述UI相关联的布局数据文件中提供所述布局约束。
[0010]根据本公开的方面,提供了一种系统,包括一个或多个处理器,以及耦合到所述一个或多个处理器的计算机可读存储介质,该计算机可读存储介质包括指令。该指令使得所述一个或多个处理器在计算设备上提供用于开发UI的布局应用,其中,该布局应用包括页面的表示。该指令还使得一个或多个处理器经由布局应用,接收第一用户输入,其中,该第一用户输入指示在所述页面上定位第一UI元素的指令。该指令还使得一个或多个处理器经由布局应用接收第二用户输入,其中,该第二用户输入指示在所述页面上定位第二UI元素的指令。该指令还使得一个或多个处理器经由布局应用接收第三用户输入,其中,该第三用户输入指示创建从所述第二UI元素到所述第一UI元素的连接的指令。该指令还使得一个或多个处理器基于该连接,生成指示所述第一UI元素和所述第二UI元素之间的空间关系的布局约束。该指令还使得一个或多个处理器在与所述UI相关联的布局数据文件中提供所述布局约束。
[0011]根据本公开的方面,提供了一种包括指令的非暂时性计算机可读存储介质,该指令在由处理器执行时使得处理器执行方法。该方法包括在计算设备上提供用于开发UI的布局应用,其中,该布局应用包括页面的表示。该方法包括经由布局应用,接收第一用户输入,其中,该第一用户输入指示在所述页面上定位第一UI元素的指令。该方法包括经由布局应用接收第二用户输入,其中,该第二用户输入指示在所述页面上定位第二UI元素的指令。该方法包括经由布局应用接收第三用户输入,其中,该第三用户输入指示创建从所述第二UI元素到所述第一UI元素的连接的指令。该方法包括基于该连接,生成指示所述第一UI元素和所述第二UI元素之间的空间关系的布局约束。该方法还包括在与所述UI相关联的布局数据文件中提供所述布局约束。
附图说明
[0012]附图被包括以提供本说明书的进一步理解以及并入本说明书中并且构成本说明书的一部分,图示了所公开的实施例并且与描述一起用来解释所公开的实施例的原理。在附图中:
[0013]图1示出了适用于实施本公开的一些实施方式的布局工具的示例性架构。
[0014]图2是示出了根据本公开的某些方面,来自图1的架构的示例性客户端和服务器的框图。
[0015]图3示出了使用图2的示例性客户端,构建基于约束的布局系统的示例性过程。
[0016]图4示出了使用图2的示例性客户端和服务器的用户界面开发和部署的示例性过程。
[0017]图5至图9示出了示例性布局约束的示意图。
[0018]图10示出了维度相关的布局约束的示例的示意图。
[0019]图11A和11B示出了链相关布局约束的示例。
[0020]图12示出了用于设置布局约束的虚拟对象的示例。
[0021]图13A和13B示出了指示在运行时消失的对象的布局约束的示例。
[0022]图14示出了用于开发和部署用户界面的应用的编辑器界面的示例。
[0023]图15示出了可以实现图2的客户端和服务器的示例性计算机系统的框图。
[0024]在一个或多个实施方式中,并非每个图中所绘出的所有组件都可能是需要的,并
且一个或多个实施方式可以包括图中未示出的另外的组件。在不脱离本主题公开的范围的情况下,可以对组件的布置和类型做出变化。在本主题公开的范围内,可以利用另外的组件、不同的组件或更少的组件。
具体实施方式
[0025]下文阐述的详细描述旨在描述各个实施方式,而不旨在表示可以实施本主题技术的唯一实施方式。如本领域技术人员将意识到,所述的实施方式可以以各种不同的方式进行修改,均不脱离本公开的范围。因此,附图和描述在本质上应当被看作是示例性的而不是限制性的。
[0026]如本文所使用的,术语“窗口小部件(widget)”可以指应用或应用的组件,其执行实现应用的功能或提供对与应用相关联的服务的访问。如本文所使用的,术语“锚(anchor)”可以指被用来与页面上的另一对象,诸如另一窗口小部件建立连接的窗口小部件的元素。
[0027]总体概述
[002本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种方法,包括:由计算设备确定多个连接涉及多个用户界面UI元素,其中,所述多个连接对应于多个布局约束,并且其中,所述多个布局约束中的每个布局约束限定所述多个UI元素中的至少两个UI元素的空间关系;由所述计算设备确定所述多个连接导致所述多个UI元素的定位错误;以及由所述计算设备调整所述多个布局约束中的至少两个布局约束以使所述错误扩散在所述多个连接中的至少两个连接之间。2.如权利要求1所述的方法,其中,确定所述多个连接涉及所述多个UI元素包括:在所述计算设备上提供用于开发UI的布局应用,所述布局应用包括允许将UI元素视觉地相对于彼此定位的页面的表示;以及经由所述布局应用接收用户输入,所述用户输入指示所述多个连接涉及所述多个UI元素。3.如权利要求2所述的方法,进一步包括:在调整所述至少两个布局约束之后,在与所述UI相关联的布局数据文件中提供所述多个布局约束。4.如权利要求1所述的方法,进一步包括修改所述多个UI元素中的一个或多个UI元素的一个或多个维度以促进使所述错误扩散在所述多个连接中的至少两个连接之间。5.如权利要求1所述的方法,其中,调整所述多个布局约束中的至少两个布局约束以使所述错误扩散在所述多个连接中的至少两个连接之间包括确定将扩散到所述多个连接中的第一连接的错误量与将扩散到所述多个连接中的第二连接的错误量的比率。6.如权利要求5所述的方法,其中,确定所述比率是基于用户输入。7.如权利要求5所述的方法,其中,确定所述比率是基于存储在所述计算设备的存储器中的用户偏好。8.如权利要求5所述的方法,其中,确定所述比率包括所述计算设备将预定比率值修改为定制比率值。9.如权利要求5所述的方法,其中,基于将扩散到所述多个连接中的所述第一连接的错误量与将扩散到所述多个连接中的所述第二连接的错误量的比率来确定所述多个UI元素中的一个或多个UI元素的坐标。10.如权利要求1所述的方法,进一步包括基于至少两个经调整的布局约束来生成UI的最终布局。11.如权利要求1所述的方法,其中,调整所述多个布局约束中的至少两个布局约束以使所述错误扩散在所述多个连接中的至少两个连接之间是使用线性方程求解器来执行的。12.如权利要求11所述的方法,其中,响应于确定对所述多个UI元素中的至少一个UI元素能够计算多...

【专利技术属性】
技术研发人员:约翰
申请(专利权)人:谷歌有限责任公司
类型:发明
国别省市:

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

1