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

本主题技术的各方面涉及用于用户界面(UI)元素的基于约束的布局和控制的系统和方法。该系统接收指示在布局应用的页面上定位第一UI元素的指令的第一用户输入。该系统接收指示在页面上定位第二UI元素的指令的第二用户输入。该系统接收指示创建从第二UI元素到第一UI元素的连接的指令的第三用户输入。该系统基于该连接，生成指示第一UI元素和第二UI元素之间的空间关系的布局约束。该系统在与UI相关联的布局数据文件中提供布局约束。

【技术实现步骤摘要】
【国外来华专利技术】用于用户界面元素的有效布局和控制的基于约束的布局系统相关申请的交叉引用本申请根据35U.S.C.§119，要求2016年5月17日提交的名为“CONSTRAINTS-BASEDLAYOUTSYSTEMFOREFFICIENTLAYOUTANDCONTROLOFUSERINTERFACEELEMENTS”的美国临时专利申请序列号No.62/337,850以及2016年5月17日提交的名为“SYSTEMSANDMETHODSFORAUTOMATICDETERMINATIONOFLAYOUTCONSTRAINTS”的美国临时专利申请序列号No.62/337,852的优先权，其全部内容通过引用合并于此。
本公开一般涉及用于用户界面开发和部署的基于计算机的布局系统，更具体地说，涉及用于用户界面元素的有效布局和控制的基于约束的布局系统。
技术介绍
用户界面被设计为能够适应各种屏幕条件，诸如屏幕尺寸、屏幕密度和所使用的人类语言。传统的布局系统允许开发人员指定如何布局窗口小部件，以及它们的布局位置如何改变以适应不断变化的屏幕条件。然而，传统的布局系统很复杂，并且具有性能限制，这可能使创建用户界面成为开发人员不期望的耗时过程。
技术介绍
部分中提供的描述不应当仅仅由于它在
技术介绍
部分中提及或者与
技术介绍
部分相关联而被认为是现有技术。
技术介绍
部分可以包括描述本主题技术的一个或多个方面的信息。
技术实现思路
所公开的主题涉及用于用户界面元素的有效布局和控制的基于约束的布局系统。更具体地，提供了基于约束的布局系统和方法，其允许开发人员更容易和有效地指定如何布局窗口小部件，以及它们的位置如何改变以适应那些改变和/或可变的显示条件(例如，各种屏幕尺寸、屏幕密度和语言)。易于附加的用户界面复杂性和设计选项。根据本公开的方面，提供了一种计算机实现的方法。该方法包括在计算设备上提供用于开发用户界面(UI)的布局应用，其中，该布局应用包括页面的表示。该方法包括经由布局应用，接收第一用户输入，其中，该第一用户输入指示在所述页面上定位第一UI元素的指令。该方法包括经由布局应用接收第二用户输入，其中，该第二用户输入指示在所述页面上定位第二UI元素的指令。该方法包括经由布局应用接收第三用户输入，其中，该第三用户输入指示创建从所述第二UI元素到所述第一UI元素的连接的指令。该方法包括基于该连接，生成指示所述第一UI元素和所述第二UI元素之间的空间关系的布局约束。该方法还包括在与所述UI相关联的布局数据文件中提供所述布局约束。根据本公开的方面，提供了一种系统，包括一个或多个处理器，以及耦合到所述一个或多个处理器的计算机可读存储介质，该计算机可读存储介质包括指令。该指令使得所述一个或多个处理器在计算设备上提供用于开发UI的布局应用，其中，该布局应用包括页面的表示。该指令还使得一个或多个处理器经由布局应用，接收第一用户输入，其中，该第一用户输入指示在所述页面上定位第一UI元素的指令。该指令还使得一个或多个处理器经由布局应用接收第二用户输入，其中，该第二用户输入指示在所述页面上定位第二UI元素的指令。该指令还使得一个或多个处理器经由布局应用接收第三用户输入，其中，该第三用户输入指示创建从所述第二UI元素到所述第一UI元素的连接的指令。该指令还使得一个或多个处理器基于该连接，生成指示所述第一UI元素和所述第二UI元素之间的空间关系的布局约束。该指令还使得一个或多个处理器在与所述UI相关联的布局数据文件中提供所述布局约束。根据本公开的方面，提供了一种包括指令的非暂时性计算机可读存储介质，该指令在由处理器执行时使得处理器执行方法。该方法包括在计算设备上提供用于开发UI的布局应用，其中，该布局应用包括页面的表示。该方法包括经由布局应用，接收第一用户输入，其中，该第一用户输入指示在所述页面上定位第一UI元素的指令。该方法包括经由布局应用接收第二用户输入，其中，该第二用户输入指示在所述页面上定位第二UI元素的指令。该方法包括经由布局应用接收第三用户输入，其中，该第三用户输入指示创建从所述第二UI元素到所述第一UI元素的连接的指令。该方法包括基于该连接，生成指示所述第一UI元素和所述第二UI元素之间的空间关系的布局约束。该方法还包括在与所述UI相关联的布局数据文件中提供所述布局约束。附图说明附图被包括以提供本说明书的进一步理解以及并入本说明书中并且构成本说明书的一部分，图示了所公开的实施例并且与描述一起用来解释所公开的实施例的原理。在附图中：图1示出了适用于实施本公开的一些实施方式的布局工具的示例性架构。图2是示出了根据本公开的某些方面，来自图1的架构的示例性客户端和服务器的框图。图3示出了使用图2的示例性客户端，构建基于约束的布局系统的示例性过程。图4示出了使用图2的示例性客户端和服务器的用户界面开发和部署的示例性过程。图5至图9示出了示例性布局约束的示意图。图10示出了维度相关的布局约束的示例的示意图。图11A和11B示出了链相关布局约束的示例。图12示出了用于设置布局约束的虚拟对象的示例。图13A和13B示出了指示在运行时消失的对象的布局约束的示例。图14示出了用于开发和部署用户界面的应用的编辑器界面的示例。图15示出了可以实现图2的客户端和服务器的示例性计算机系统的框图。在一个或多个实施方式中，并非每个图中所绘出的所有组件都可能是需要的，并且一个或多个实施方式可以包括图中未示出的另外的组件。在不脱离本主题公开的范围的情况下，可以对组件的布置和类型做出变化。在本主题公开的范围内，可以利用另外的组件、不同的组件或更少的组件。具体实施方式下文阐述的详细描述旨在描述各个实施方式，而不旨在表示可以实施本主题技术的唯一实施方式。如本领域技术人员将意识到，所述的实施方式可以以各种不同的方式进行修改，均不脱离本公开的范围。因此，附图和描述在本质上应当被看作是示例性的而不是限制性的。如本文所使用的，术语“窗口小部件(widget)”可以指应用或应用的组件，其执行实现应用的功能或提供对与应用相关联的服务的访问。如本文所使用的，术语“锚(anchor)”可以指被用来与页面上的另一对象，诸如另一窗口小部件建立连接的窗口小部件的元素。总体概述已经基于公开了将约束系统用于用户界面的Cassowary算法开发了传统布局系统。具体地，基于该算法，使用线性系统求解器来求解约束系统，从而允许用户界面的实时使用的迭代解。但是，传统的UI布局系统存在问题。UI由通常称为“窗口小部件”的多个显示对象组成。确定如何在显示屏上定位这些窗口小部件，同时考虑复杂的考虑因素，诸如各种设备屏幕尺寸、显示屏密度和/或包括在显示器中的各种人类语言是一项复杂的任务。表达这些布局考虑因素的现有布局系统不会最小化开发人员的这种复杂性。在某些情况下，这些传统布局系统将线性系统完全暴露给开发人员，导致复杂且繁琐的开发时间来预测UI布局的行为。这种暴露还会造成降低布局系统的性能问题，并且由于布局系统的困难输入要求，还会不利地影响开发人员的用户体验。例如，这样的布局系统要求开发人员通过主要编写线性方程来指定布局，这对开发人员来说是一项繁重的任务。其他的传统布局系统将各种功能划分为特定用例(例如，将内容布局实现为一系列窗口小部本文档来自技高网...

【技术保护点】
1.一种计算机实现的方法，包括：在计算设备上提供用于开发用户界面UI的布局应用，所述布局应用包括页面的表示；接收指示在所述页面上定位第一UI元素的指令的第一用户输入；接收指示在所述页面上定位第二UI元素的指令的第二用户输入；接收指示创建从所述第二UI元素到所述第一UI元素的连接的指令的第三用户输入；基于所述连接，生成指示所述第一UI元素和所述第二UI元素之间的空间关系的布局约束；以及在与所述UI相关联的布局数据文件中提供所述布局约束。

【技术特征摘要】
【国外来华专利技术】2016.05.17 US 62/337,850;2016.05.17 US 62/337,8521.一种计算机实现的方法，包括：在计算设备上提供用于开发用户界面UI的布局应用，所述布局应用包括页面的表示；接收指示在所述页面上定位第一UI元素的指令的第一用户输入；接收指示在所述页面上定位第二UI元素的指令的第二用户输入；接收指示创建从所述第二UI元素到所述第一UI元素的连接的指令的第三用户输入；基于所述连接，生成指示所述第一UI元素和所述第二UI元素之间的空间关系的布局约束；以及在与所述UI相关联的布局数据文件中提供所述布局约束。2.如权利要求1所述的计算机实现的方法，其中，生成所述布局约束包括：将所述连接映射到空间定位数据和关系数据，所述空间定位数据指示所述页面上相对于所述第一UI元素和所述第二UI元素的位置，所述关系数据指示相对于所述第一UI元素或所述第二UI元素中的一个，所述第一UI元素和所述第二UI元素之间的方向关系；基于所述空间定位数据和所述关系数据，分别为所述第一UI元素和所述第二UI元素确定在所述页面上的坐标；以及在所确定的坐标处提供所述第一UI元素和所述第二UI元素以供显示。3.如权利要求2所述的计算机实现的方法，其中，确定所述坐标包括：处理所述空间定位数据和所述关系数据；基于所述处理，确定所述关系数据和所述空间定位数据是否模糊，当对所述第一UI元素或所述第二UI元素中的至少一个能够计算多于一个潜在坐标集时，所述关系数据和所述空间定位数据是模糊的；当确定所述关系数据和所述空间定位数据不模糊时，不依赖于线性方程求解器来解析所述关系数据和所述空间定位数据以确定所述坐标；当确定所述关系数据和所述空间定位数据模糊时，将所述关系数据和所述空间定位数据变换为一个或多个线性方程，并且通过所述线性方程求解器对所述一个或多个线性方程求解以确定所述坐标。4.如权利要求2所述的计算机实现的方法，其中，确定所述坐标包括：处理所述空间定位数据和所述关系数据；将所述关系数据和所述空间定位数据分类为特定类约束；确定所述特定类约束是与第一类约束相关联还是与不同于所述第一类约束的第二类约束相关联；当确定所述特定类约束与所述第一类约束相关联时，不依赖于线性方程求解器来解析所述关系数据和所述空间定位数据以确定所述坐标；当确定所述特定类约束与所述第二类约束相关联时，将所述关系数据和所述空间定位数据变换为一个或多个线性方程，并且通过所述线性方程求解器来对所述一个或多个线性方程求解以确定所述坐标。5.如前述任一权利要求所述的计算机实现的方法，其中，所述第一UI元素包括第一锚，并且所述第二UI元素包括第二锚，其中，基于创建从所述第二UI元素到所述第一UI元素的所述连接的指令，所述第二UI元素的所述第二锚连接到所述第一UI元素的所述第一锚。6.如权利要求5所述的计算机实现的方法，其中，创建从所述第二UI元素到所述第一UI元素的所述连接的指令指示所述第一锚和所述第二锚占据所述页面上的相同目标位置。7.如权利要求5所述的计算机实现的方法，其中，创建从所述第二UI元素到所述第一UI元素的所述连接的指令指示所述第一锚和所述第二锚之间的限定距离。8.如权利要求5-7中的任一项所述的计算机实现的方法，其中，生成所述布局约束包括：确定所述连接包括错误，所述错误指示限制所述第一锚和所述第二锚被定位在所述页面上的目标位置；以及修改所述第一UI元素或所述第二UI元素中的至少一个的一个或多个维度；以及基于所修改的一个或多个维度，使错误量减小到预定值。9.如任一在前权利要求所述的计算机实现的方法，进一步包括：接收指示在所述页面上定位第三UI元素的指令的第四用户输入；接收指示创建从所述第三UI元素到所述第一UI元素的第一连接以及从所述第三UI元素到所述第二UI元素的第二连接的指令的第五用户输入；确定所述第三UI元素相对于所述第一UI元素和所述第二UI元素的位置包括错误；修改所述第一连接的错误量与所述第二连接的错误量的比率；基于所修改的比率，调整所述第一连接的所述错误量和所述第二连接的所述错误量；以及基于所调整的所述第一连接的错误量和所调整的所述第二连接的错误量，确定所述第三UI元素的坐标。10.如权利要求9所述的计算机实现的方法，其中，所述布局约束包括与从所述第三UI元素到所述第一UI元素的所述第一连接相关联的第一间距以及与从所述第三UI元素到所述第二UI元素的所述第二连接相关联的第二间距，所述第一间距指示所述第一UI元素和所述第三UI元素之间的距离，以及所述第二间距指示所述第二UI元素和所述第三UI元素之间的距离。11.如前述任一权利要求所述的计算机实现的方法，进一步包括：在所述页面上提供虚拟对象以供显示，所述虚拟对象是所述页面上的视觉向导；接收指示相对于所述虚拟对象定位所述第一UI元素或所述第二UI元素中的一个或多个的指令的用户输入，所述第一UI元素和所述第二UI元素之间的所述空间关系基于所...

【专利技术属性】
技术研发人员：约翰·霍福德，尼古拉斯·罗阿尔德，罗曼·P·盖，
申请(专利权)人：谷歌有限责任公司，
类型：发明
国别省市：美国,US