CN108780401A - 用于用户界面元素的有效布局和控制的基于约束的布局系统 - Google Patents

Abstract

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

Description

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

相关申请的交叉引用

本申请根据35U.S.C.§119，要求2016年5月17日提交的名为“CONSTRAINTS-BASEDLAYOUT SYSTEM FOR EFFICIENT LAYOUT AND CONTROL OF USER INTERFACE ELEMENTS”的美国临时专利申请序列号No.62/337,850以及2016年5月17日提交的名为“SYSTEMS ANDMETHODS FOR AUTOMATIC DETERMINATION OF LAYOUT CONSTRAINTS”的美国临时专利申请序列号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布局的行为。这种暴露还会造成降低布局系统的性能问题，并且由于布局系统的困难输入要求，还会不利地影响开发人员的用户体验。例如，这样的布局系统要求开发人员通过主要编写线性方程来指定布局，这对开发人员来说是一项繁重的任务。其他的传统布局系统将各种功能划分为特定用例(例如，将内容布局实现为一系列窗口小部件，按网格组织布局等)，由此在得到最终布局之前，给使用多个组件的开发人员造成不必要的负担。

所公开的技术提供了使用允许开发人员表示窗口小部件之间的任意关系(例如，一对一、串链)的小的通用规则集来表示对窗口小部件的复杂约束。该系统基于通用线性方程求解器，有助于内部灵活性和适应性。所定义的特定规则集提供了更好的性能和可预测性，并且允许以比直接创建线性方程更简单的方式来表达窗口小部件位置。此外，通过在单个位置移动整个布局过程，可以实现更好的布局性能(不再需要通常在移动操作系统上找到复杂的视图层次结构)，以及更好的灵活性和新的动画能力。

所公开的技术通过提供也来源于计算机技术的解，即通过定义被用于表达布局关系的更高级的约束集来解决特别出现在计算机技术领域中的传统布局系统的问题。本公开的布局系统基于Cassowary算法的特别创建的有效实施方式。本公开的布局系统与传统布局系统之间的区别特征之一是用在传统布局系统中的Cassowary方法要求开发人员通过主要编写线性方程来指定布局，而本公开为布局开发和部署提供了图形方法。关于这一点，本公开的布局系统消除了开发人员编写线性方程的负担。

除了本公开的布局系统的基本布局能力之外，所公开的技术允许窗口小部件层次结构与定位窗口小部件的方式之间的完全分离。在性能和灵活性方面，具有广泛的影响。例如，传统布局系统提供由于布局而倾向于深且复杂的视图层次结构，而本公开的布局系统消除了该需求。另外，本公开的布局系统提供概念虚拟容器/帮助器以及动画元素，其在布局系统中产生更大的灵活性，因为它们共享相同“场景(scene)”。

所公开的技术进一步提供对计算机本身的功能的改进，因为：(1)需要最少的不同约束集，由此要求更少计算机操作和存储器资源；(2)更易于将该解传达给用户，而不是要求用户提供识别所编写的线性方程的输入；(3)可预测-从用户的角度和从性能的角度来看-关键点；以及(4)允许所支持的布局类型的更大灵活性。

示例性系统架构

图1示出了在用户界面的开发和部署期间，在基于约束的布局系统的基础上，用户界面元素的有效布局和控制的示例性架构100。架构100包括通过网络150连接的服务器130和客户端110。

许多服务器130中的一个被配置为托管应用服务器和/或web服务器。服务器130可以是具有用于托管应用服务器和/或web服务器的适当的处理器、存储器和通信能力的任何设备。可在各种客户端110上访问基于约束的布局系统。在一些方面中，基于约束的布局系统可以通过网络150从服务器130下载，并且安装在客户端110上。客户端110可以是例如，台式计算机、移动计算机、平板计算机(例如，包括电子书阅读器)、移动设备(例如，智能电话或PDA)，或具有用于访问服务器130中的一个上的图像搜索引擎的适当处理器、存储器和通信能力的任何其他设备。网络150可以包括例如局域网(LAN)、广域网(WAN)、因特网等中的任何一个或多个。此外，网络150可以包括但不限于下述网络拓扑中的任何一个或多个，包括总线网络、星形网络、环形网络、网状网络、星形总线网络、树或层次网络等。

示例性基于约束的布局系统

图2是根据本公开的某些方面，示出图1的架构100中的示例性服务器130和客户端110的框图200。服务器130包括处理器236、通信模块238和存储器232。存储器232包括资源234。客户端110包括处理器212、通信模块218和存储器220。客户端110和服务器130分别经由通信模块218和238，通过网络150连接。通信模块218和238被配置为连接网络150，以向网络上的其他设备发送和接收诸如数据、请求、响应和命令的信息。通信模块218和238可以是例如调制解调器或以太网卡。

客户端110的存储器220包括应用221、UI构建引擎222、UI推理引擎223和线性方程引擎224。存储器220还包括约束数据225和库226。(例如，使用约束数据225和/或库226)可以操作应用221、UI构建引擎222、UI推理引擎223和线性方程引擎224中的一个或多个来为开发人员提供用于用户界面的显示对象的视觉布局的布局工具。

客户端110的处理器212被配置为执行指令，诸如物理地编码到处理器212中的指令、从存储器220中的软件接收的指令，或两者的组合。例如，客户端110的处理器212执行指令以在输出设备214上提供用于开发应用的用户界面(UI)的布局工具以供显示。在一些方面中，布局工具包括页面的表示。在一些实施方式中，页面表示网页或登录页面。

在某些方面中，客户端110的处理器212被配置为经由应用221的编辑器界面(例如，布局工具)，从用户接收用户输入。用户输入指示在页面上定位第一UI元素的指令。例如，可以通过用户在用户的客户端110上访问存储器220中的应用221，并且用户使用客户端110的输入设备216提交用户输入来接收该用户输入。在另一方面中，客户端110的处理器212被配置为经由布局工具，从用户接收第二用户输入。第二用户输入可以指示在页面上定位第二UI元素的指令。

客户端110的用户可以使用输入设备216来提交第三用户输入，该第三用户输入指示经由布局工具，创建从第二UI元素到第一UI元素的连接的指令。布局工具可以包括输入部，其中，可以由用户操纵所显示的窗口小部件的定位。输入部可以包括布局区域和一个或多个控件，以允许用户将窗口小部件连接在一起以及在布局区域内相对于彼此对齐窗口小部件。例如，第一UI元素可以是第一窗口小部件，以及第二UI元素可以是第二窗口小部件，其中，相对于第一窗口小部件定位第二窗口小部件。在该示例中，可以将第一窗口小部件连接到第二窗口小部件的一侧(或经由一个锚)，由此在第一窗口小部件和第二窗口小部件之间创建空间关系。在这方面，空间关系可以在不需要对第一窗口小部件和第二窗口小部件的每一个指定特定的位置(或坐标)的情况下指示在页面(或应用界面布局)上，相对于第二窗口小部件如何定位第一窗口小部件，反之亦然。

在某些方面中，处理器212使用应用221和UI构建引擎222基于该连接来生成指示第一UI元素和第二UI元素之间的空间关系的布局约束。布局约束指示在一些实施例中，第一UI元素和第二UI元素共同位于页面上的相同位置，或者第一UI元素和第二UI元素在空间上彼此分开限定的间距。取决于实施方式，间距可以依据密度无关像素(dp或dip)、缩放无关像素(sp)、像素(px)或点(pt)。在一些方面中，处理器212使用UI构建引擎222和线性方程引擎224，在与UI相关联的布局数据文件中提供布局约束。例如，布局约束可以包括线性方程，其将第一UI元素和第二UI元素之间的连接表示为数学表达式。在一些方面中，布局约束被存储为约束数据225。在一些实施方式中，处理器212使用应用221和库226，向线性方程引擎224提供布局约束以从约束数据225中的布局约束对线性方程求解。例如，线性方程引擎224可以被配置为确定第一UI元素和第二UI元素之间的连接中的一个或多个错误，并且通过对线性方程求解来最小化连接中的错误的数量。在一些方面中，对线性方程求解可以包括修改第一UI元素和第二UI元素之间的空间关系，其最小化连接中的错误的数量，并且提供表示所修改的空间关系的新的线性方程。库226可以是识别如何定义每个布局约束的数据结构。

如上所述，本主题技术在不要求最终用户的手动输入的情况下将诸如窗口小部件的显示对象的二维放置映射到线性方程，由此增强了开发用于应用的UI的最终用户体验。本主题技术还通过定义基于相对于彼此定位窗口小部件的约束来降低传统布局工具中发现的层次排列的复杂性，其中，与父容器相关地定义层次。

在一些实施方式中，约束由窗口小部件的锚定位置处的窗口小部件之间的互连来定义(参见图5)。布局约束可以包括定义空间相关窗口小部件之间的距离的锚间距(参见图6)。布局约束可以包括通过相对连接的锚，至少两个窗口小部件之间的互连，其中，本主题技术试图对表示相对连接的锚的线性方程求解(参见图7A和7B)。在这方面，可能需要对约束进行调整以扩散在窗口小部件的锚点之间的连接中检测到的错误量。在一些实施方式中，布局约束包括维度相关的约束，其中，修改窗口小部件的一个或多个维度以便于扩散在窗口小部件之间的连接中发现的错误(参见图9和10)。本主题技术可以使用由特定规则集确定的居中约束，使窗口小部件相对于其他相邻窗口小部件(或层次相关的窗口小部件)自动地居中(参见图9)。在一些实施方式中，布局约束包括链相关约束，其中，窗口小部件被连接为链，指示链中的窗口小部件之间的基于序列的关系(参见图11A和11B)。在一些实施方式中，本主题技术包括虚拟容器和/或模板，以帮助在UI开发过程期间，分组显示对象并且指导显示对象的布局(参见图12)。在这方面，在最终布局的运行时过程之前，从显示器移除虚拟向导和/或模板。在一个或多个实施方式中，虚拟向导和/或模板不包括在布局约束中并且不是UI布局层次结构的一部分。

图3示出了使用图2的示例性客户端110，构建识别布局关系的约束的示例性过程300。尽管参考图2描述图3，但可以注意到图3的过程步骤可以由其他系统执行。

过程300从开始步骤301开始。在步骤301中，在计算设备上提供以供显示的布局工具可以包括页面的表示，其中，页面还可以包括在页面上定位的第一UI元素。第一UI元素可以是第一窗口小部件。布局工具有时可以被称为图形开发环境或布局应用。

接着，在步骤302，处理器236使用UI构建引擎222接收指示在页面上定位第一UI元素的指令的第一用户输入。在步骤303中，处理器236使用UI构建引擎222接收指示在页面上定位第二UI元素的指令的第二用户输入。第二UI元素可以是第二窗口小部件。接下来，在步骤304中，处理器236使用UI构建引擎222接收第三用户输入，该第三用户输入指示创建从第二UI元素到第一UI元素的连接的指令。一方面，该连接可以是从第一UI元素的锚到第二UI元素的锚的连接。另一方面，可以通过将窗口小部分与虚拟容器中的其他窗口小部件组合在一起来创建连接(参见图12)。

依次地，在步骤305中，处理器236使用UI构建引擎222，基于该连接，生成指示第一UI元素和第二UI元素之间的空间关系的布局约束。在这方面，布局约束表示指示在页面上，相对于第一UI元素，如何定位第二UI元素的特定规则。在一个或多个实施方式中，特定规则由UI构建引擎222生成为线性方程，其将UI元素之间的空间关系指示为数学表达式。UI元素的二维放置在不要求指示线性方程的用户输入的情况下被自动地映射到线性方程。接着后，在步骤306中，处理器236使用UI构建引擎222，在与UI相关联的布局数据文件中提供布局约束。在一些实施方式中，布局数据文件是以可扩展标记语言(XML)文件格式。

处理器236使用UI构建引擎222和线性方程引擎224，通过将连接映射到空间定位数据和关系数据来生成布局约束，空间定位数据指示页面上相对于第一UI元素和第二UI元素的位置，基于空间定位数据和关系数据，分别为第一UI元素和第二UI元素确定页面上的坐标，并且在所确定的坐标处提供第一UI元素和第二UI元素以供显示。关系数据指示相对于第一UI元素或第二UI元素中的一个，第一UI元素和第二UI元素之间的方向关系。

处理器236使用UI构建引擎222，处理空间定位数据和关系数据，并且基于该处理，确定关系数据和空间定位数据是否模糊。当对第一UI元素或第二UI元素中的至少一个计算多于一个潜在的坐标集时，关系数据和空间定位数据可能是模糊的。例如，如果空间定位数据和/或关系数据指示窗口小部件的至少一个已知维度是已知的，则可能不要求线性方程求解器，由此将关系数据和空间定位数据渲染为模糊。在这方面，处理器236使用UI构建引擎222独立于线性方程求解器(例如，线性方程引擎224)，解析关系数据和空间定位数据，以在确定关系数据和空间定位数据不模糊时确定坐标。

然而，如果无已知变量满足布局约束，则可以将关系数据和空间定位数据变换成线性方程。在这方面，当确定关系数据和空间定位数据模糊时，处理器236使用UI构建引擎222和线性方程引擎224，将关系数据和空间定位数据变换为一个或多个线性方程，并且通过线性方程求解器，对一个或多个线性方程求解，以确定当关系数据和空间定位数据被变换成一个或多个线性方程时的坐标。在一些方面中，处理器236使用UI构建引擎222和线性方程引擎224来对布局约束中的线性方程求解。在一个或多个实施方式中，处理器236使用UI构建引擎222，基于求解的线性方程，分别为第一UI元素和第二UI元素确定页面上的坐标。在一个或多个实施方式中，处理器236使用UI构建引擎222，在所确定的坐标处提供第一UI元素和第二UI元素以供显示。

在一个或多个实施方式中，处理器236使用UI构建引擎222，将关系数据和空间定位数据分类为特定类约束，并且确定该特定类约束是与第一类约束还是不同于第一类约束的第二类约束相关联。例如，第一类约束包括不要求线性方程求解器来解析约束的约束，而第二类约束要求线性方程求解器。在这方面，处理器236使用UI构建引擎222独立于线性方程求解器，解析关系数据和空间定位数据，以确定当确定特定类约束与第一类约束相关联时的坐标。另一方面，当确定特定约束集与第二类约束相关联时，处理器236使用UI构建引擎222，将关系数据和空间定位数据变换为一个或多个线性方程，并且通过线性方程求解器，对一个或多个线性方程求解，以确定当关系数据和空间定位数据被转换成一个或多个线性方程时的坐标。

第一UI元素包括第一锚，以及第二UI元素包括第二锚，其中，基于创建从第二UI元素到第一UI元素的连接的指令，将第二UI元素的第二锚连接到第一UI元素的第一锚。创建从第二UI元素到第一UI元素的连接的指令可以指示第一锚和第二锚占据页面上的相同目标位置。创建从第二UI元素到第一UI元素的连接的指令可以指示第一锚和第二锚之间的限定距离。

处理器236使用UI构建引擎222，接收指示在页面上定位第三UI元素的指令的第四用户输入，然后，经由布局应用，接收指示创建从第三UI元素到第一UI元素的第一连接和从第三UI元素到第二UI元素的第二连接的指令的第五用户输入。处理器236使用UI构建引擎222，确定第三UI元素相对于第一UI元素和第二UI元素的位置包括错误，其中，限制第一UI元素上的锚(例如，左侧锚)和第二UI元素上的锚(例如，右侧锚)由于该错误而被定位在页面上的相同目标位置上。在一个或多个实施方式中，在布局约束(例如，定义第一和第二UI元素之间的连接)中发现的错误指示两个UI元素不能位于相对定位的相同目标位置上(例如，第一UI元素位于第二UI元素的左侧)。当在UI元素的两个相对连接的锚之间建立连接(例如，第一UI元素的左侧锚连接到第二UI元素的右侧锚)时，可以发现错误。

处理器236使用UI构建引擎222，将错误扩散到第三UI元素和第一UI元素之间的第一连接以及第三UI元素和第二UI元素之间的第二连接。在这方面，扩散到两个连接上的错误可以被表示为扩散到第一连接的错误量与扩散到第二连接的错误量的比。处理器236使用UI构建引擎222修改第一连接上的错误量与第二连接上的错误量的比率，并且基于该修改的比率，调整第一连接上的错误量和错误量。处理器236使用UI构建引擎222，可以基于存储在存储器220中的用户输入和/或用户偏好来修改该比率。在一些方面中，该比率被从预定比率值修改为定制比率值，其中，可以最小化每个连接上的错误量。在一个或多个实施方式中，处理器236使用UI构建引擎222，基于所修改的比率，将错误减小到预定值。布局约束指示扩散到各个连接的每一个的错误量。然后，处理器236使用UI构建引擎222，基于所调整的第一连接上的错误量和所调整的第二连接上的错误量，确定该第三UI元素的坐标。

在一个或多个实施方式中，布局约束包括与从第三UI元素到第一UI元素的第一连接相关联的第一间距和与从第三UI元素到第二UI元素的第二连接相关联的第二间距，其中，第一间距指示第一UI元素与第三UI元素之间的距离，以及第二间距指示第二UI元素与第三UI元素之间的距离。

处理器236使用UI构建引擎222，在页面上提供虚拟对象以供显示。在一个或多个实施方式中，虚拟对象是页面上的视觉向导。视觉向导可以用作垂直和/或水平网格线，其帮助用户在页面上定位窗口小部件。通过用户选择显示控件来触发视觉向导以供显示，或者在启动布局工具时自动地渲染视觉向导。处理器236使用UI构建引擎222来接收用户输入，该用户输入指示相对于虚拟对象，定位第一UI元素或第二UI元素的指令。处理器236使用UI构建引擎222来基于布局数据文件渲染页面的最终布局。在最终布局的运行时，从显示器移除虚拟对象。虚拟对象旨在页面的布局期间帮助开发人员，并且不是最终布局渲染的一部分(即，不被包括在文档对象模型(DOM)层次结构中)。

图4示出了使用图2的示例性客户端和服务器的用户界面开发和部署的示例性过程400。当用户例如在客户端110上加载应用221以进行用户界面开发和部署时，过程400开始于步骤401。

接着，在步骤402中，客户端110上的应用221经由应用221的编辑器界面提供页面的表示以供显示。页面的表示可以包括相对于其他显示对象、向导或容器特征，能在其内定位、移动、排列和约束诸如显示对象的哪些UI元素的布局。在步骤403中，客户端110使用应用221和UI构建引擎222，基于页面上的UI元素之间的连接来生成约束集。例如，该约束集可以包括定义UI元素之间的某些连接的规则，诸如指示UI元素之间的某些连接和/或UI元素之间的某些空间关系(例如，使第一元素到页面上、第二元素的右侧的位置)。在这方面，UI构建引擎222便于在不需要指示或提供这些线性方程的用户输入的情况下将这些连接映射到表示各个布局约束的线性方程。接着，在步骤404中，客户端110将该约束集和与应用221相关联的库提供给客户端110中的线性方程求解器(例如，224)。线性方程求解器可以处理约束以扩散在约束中找到的任何错误量并且生成具有最小化错误的修改的约束。

在步骤405中，客户端110经由线性方程求解器，基于库，从该约束集对线性方程求解。接着，在步骤406中，客户端110基于所求解的线性方程，生成UI的最终布局。依次地，在步骤407中，客户端110识别对与UI相关联的资源的请求。在步骤408中，客户端110将请求发送到服务器130。

转到服务器130，在步骤409，服务器130从客户端110接收对资源的请求。接着，在步骤410，服务器130从服务器130可访问的数据源获得所请求的资源。在步骤411中，服务器130将所请求的资源提供给客户端110。

转到客户端110，在步骤412，客户端110从服务器130接收所请求的资源。接着，在步骤413中，客户端110经由具有最终布局的UI提供所请求的资源以供显示。在这方面，可以利用来自所接收的资源的内容(例如，文本、图像、视频)来渲染UI，提供在最终布局中排列的窗口小部件和相关联的内容以供显示。

约束系统语义

图5示出了示例性布局约束语义的示意图500。具体而言，图5提供了在用户界面元素(例如，窗口小部件)上呈现的“锚”的概念。“窗口小部件”每侧(左、上、右、下)具有一个锚和中心(水平和垂直)锚(例如，502)，以及基线锚(例如，506)。

锚连接的一般见解是连接定义第一约束类型，其中，在来自每个小部件的锚之间建立连接。启动连接的窗口小部件的锚可以被称为“源锚(source anchor)”，而将该连接接收为目的地的窗口小部件的锚可以被称为“目标锚(target anchor)”。在一些实施例中，源锚可以位于与目标锚相同的位置，或者在其他实施例中，源锚和目标锚可以位于由间距限定的不同位置中。然后，本公开的布局系统收集所有定义的连接，并且尝试尽可能地最小化错误以生成最终布局。然后可以完全地相对于彼此定义窗口小部件，而不是相对于它们的父容器来定义(在传统布局系统中通常是这种情况)。

锚间距

图6A和6B示出了识别锚间距的示例性布局约束的示意图600和650。在图6A中，锚(例如，502)可以连接在一起。例如，可以通过将TextView2的左锚(例如，502)连接到TextView1(例如，602)的右锚(例如，502)，创建窗口小部件“TextView2”(例如，604)位于窗口小部件“TextView1”(例如，602)的右侧的布局。在图6B中，当锚连接到另一锚(例如，目标锚)时，这意味着两个锚可以占据相同位置。

在一些方面中，还可以定义连接上的两个锚点之间的间距。图6A示出了TextView2的左锚(例如，604)和TextView1的右锚(例如，602)之间的56个像素的间距(例如，606)，而图6B示出了没有定义的间距的相同关系(例如，652)。取决于实施方式，间距可以是任意值。图6A和6B中所示的约束在本文中有时可以被称为单边约束。

相对连接的锚

图7A和7B示出了识别相对连接的锚的示例性布局约束的示意图700和750。当连接两个相对锚(例如，708,710)时，任一锚都不能定位在它们的目标上。从本质上讲，布局系统必须接受存在不可避免的“错误”(系统试图最小化的错误)。

在图7A中的相对连接锚(例如，708,710)的特定情况下，本公开的布局系统决定在两个连接上均等地“扩散(spread)”错误，从而产生居中的窗口小部件(例如，706)。在图7B中，可以定义间距并且间距是图7A中所示的布局约束的一部分(例如，752,754)。

图8A-8C示出了识别错误的扩散比的示例性布局约束的示意图。还可以建立本公开的布局系统以决定将如何根据比率，在连接上扩散错误。可以在双连接上重新定义错误的扩散比。在这方面，间距仍然可以是活动的，如图.8A-8C所示。例如，代替每个链路上50％，布局系统可以决定定位100％(例如，802,804)或诸如80％/20％的不同比率(例如，806,808)。该比率可以取决于实施方式而变化。图7A-8C中所示的约束本文有时被称为居中约束。

维度约束

图9示出了识别约束维度的示例性布局约束的示意图900。除了定位之外，还可以约束窗口小部件维度。最简单的方法是允许窗口小部件拉伸以由定义的约束减少错误。在图9中，示意图示出了窗口小部件拉伸(例如，906)的宽度如何适应左右约束(例如，902,904)。

以类似的方式，本公开的布局系统可以根据另一维度定义窗口小部件的一个维度(宽度或高度)，因此可以应用比率(例如，强制给定窗口小部件必须为正方形，或者以16：9比率显示图像的事实)。

图10示出了维度相关的布局约束的示例的示意图1000。在图10中，窗口小部件维度受不同类约束约束。在第一类维度相关约束中，窗口小部件可能受由扩散约束1002约束，其中，在固定虚拟向导之间扩散窗口小部件的长度。在第二类维度相关约束中，窗口小部件可能受包裹约束1004约束，其中，窗口小部件的长度被包裹在其间具有各自定义的距离的固定虚拟向导之间。在第三类维度相关约束中，窗口小部件可能受包裹约束1006约束，其中，包裹受到窗口小部件的维度约束限制。在第四类维度相关约束中，窗口小部件可能受包裹约束1008约束，其中，包裹由用于所设置的窗口小部件的最小宽度构成。在第五类维度相关约束中，窗口小部件可能受包裹约束1010约束，其中，包裹由用于所设置的窗口小部件的最大宽度构成。

图11A和11B示出了链相关布局约束的示例。在图11A中，布局约束1100包括窗口小部件1102和1104之间的基于链的关系。窗口小部件1102和1104分别包括分别相对于侧边缘的限定距离1108和1110。窗口小部件1102和1104之间的空间关系由于连接1106是双向的。在这方面，布局约束可以应用于绑定到该链的其他窗口小部件。

在图11B中，窗口小部件的定位可以受不同类的基于链的约束的约束。在第一类基于链的约束中，窗口小部件可能受扩散链1152约束，其中，沿着链的每个窗口小部件在包括到侧边缘的固定距离的固定界限内等距间隔开。在第二类基于链的约束中，窗口小部件可能受扩散链1154约束，其中，沿着链的每个位于末端的窗口小部件邻接侧边缘并且与中间窗口小部件等距地间隔开。在第三类基于链的约束中，窗口小部件可能受加权链1156约束，其中，某些窗口小部件比沿着链的其他窗口小部件更重地加权以占据侧边缘之间的整个长度。在第四类基于链的约束中，窗口小部件可能受打包链1158约束，其中，窗口小部件在相对于侧边缘的任一端上以相等的距离串联打包在一起。在第五类基于链的约束中，窗口小部件可以受偏置打包链1160约束，其中，窗口小部件在相对于侧边缘在任一端上，分别以变化的距离串联打包在一起，这取决于应用于任一端的偏置量。

寻找居中约束

在一些方面中，基于约束系统，在布局中居中窗口小部件通过设置两个相等强度的相对约束来工作。例如，如果约束系统具有水平对齐的三个窗口小部件A、B和C，并且目的是使B位于A和C中间，则约束系统可以对B设置两个约束：(1)A的右侧的左约束，以及(2)C的左侧的右约束。由于约束具有相同的强度，窗口小部件B将最终居中。当快速原型化UI时，逐个设置这些约束可能会不期望的耗时。更值得注意的是，要求用户提供线性方程以表达这样的约束不必要地加重用户开发UI的体验，并且在最小化可能出现在从用户输入接收的线性方程中的错误量方面提出了更大的挑战。

本公开的布局系统使窗口小部件的居中自动化。布局系统可以通过找到如在(使用传统布局系统)问题中所述的适当约束并且为用户设置它们来实现这一点。在布局系统中应用的算法工作如下(如对水平居中所述，垂直居中将以类似的方式工作)：

a.布局系统可以对每一侧(左侧和右侧)保持居中的最佳候选。

b.布局系统可以将最佳候选初始化为父窗口小部件侧：父的左侧为左候选，父的右侧为右候选。

c.然后，布局系统可以收集视图层次结构中作为兄弟的窗口小部件r列表。这些是可以居中的窗口小部件。

d.布局系统可以在兄弟的列表上迭代，仅根据居中的方位和搜索的方向来查看特定的一侧。例如，如果布局系统旨在水平居中窗口小部件B，则布局系统将执行两次搜索：一个在左侧，一个在右侧。当在左侧搜索时，布局系统将仅查看布局系统检查的窗口小部件的右侧，并且类似地，当在右侧搜索时，布局系统将仅查看窗口小部件的左侧。

e.对于布局系统评估的每个窗口小部件的侧边，布局系统可以执行两个步骤：1.如果侧边实际上与另一侧相交。例如，对于水平居中，布局系统可以检查两侧在垂直轴上相交。2.布局系统可以保持连接的最佳候选。更好的候选是与另一侧的距离小于当前候选的候选。

f.在窗口小部件的另一侧上重复该过程。该方法允许布局系统易于生成约束，从而允许布局系统居中窗口小部件，从而避免窗口小部件的重叠(不期望的结果)。

虚拟容器

图12示出了标识虚拟容器的示例性布局约束的示意图1200。本公开提供了一种约束的布局系统，旨在易于表示窗口小部件之间的任意一对一关系。一个常见的问题是，有时给定的布局以组表达更简单，而不是考虑单个窗口小部件。例如，用户(例如，开发人员)可能希望垂直居中一组窗口小部件。

大多数传统布局系统(和/或引擎)通过引入以给定方式布局它们包含的窗口小部件的特定容器来满足该需求。在图12中，本公开的布局系统改为引入表示一组窗口小部件的虚拟容器(例如，1202)。然后，可以在组本身而不是其窗口小部件上设置约束。重要的是，这样的虚拟容器不会布置它们的子节点，而是在父约束系统中保持布局计算。虚拟容器为开发人员和UI设计人员提供了一种表达他们的UI设计的更灵活的方式，从而允许他们提供窗口小部件的层次结构，并将容器细分为单独的组件。由于虚拟容器本身不需要任何计算，因此布局系统保持了布局系统可以进行完整布局计算的中心位置的性能优势。这也导致更浅的布局层次结构，进一步增强了布局系统的性能。在传统的布局系统中，布局容器是视图层次结构的一部分，需要在绘制时遍历，从而不利地影响性能。

本公开的布局系统允许虚拟容器(例如，1202)表达特定的布局策略。这使得布局系统达到了更高级，因为层次结构允许表达布局的更强大的方式。与传统布局系统相反，虚拟容器只有在建立约束时才必须存在；它们不需要处于最终视图层次结构中，这具有性能优势。例如，在绘制屏幕时需要较少遍历层次结构，并且在某些方面，所有约束被收集在一处。这允许本公开的布局系统完全分开视图层次结构的概念(确定要显示哪些窗口小部件)以及如何定位窗口小部件的概念。这反过来为布局系统提供了关于布局系统如何改变在运行时，布局系统能定位窗口小部件、为它们制作动画等的方式的更大的灵活性。在这方面，虚拟容器不会成为最终布局的一部分和/或页面的DOM。

在图12中，虚拟容器(例如，1202)还可以在视觉上创建布局时提供附加的帮助，诸如(1)提供能被用来帮助创建布局的虚拟视觉向导(例如，1204)以供显示，(2)表、模板或其他更高级结构可供用户使用，以及(3)虚拟助手工具可以限制在设计工具中。

虚拟模板

可能需要以明确定义的方式定位一组窗口小部件，诸如一个接一个地对齐所有窗口小部件，或者将一组窗口小部件组织为表，或者提供遵循给定的规范的特定的全屏布局。在传统的布局系统中，单独的布局组件负责这一点。

在一些方面中，定义虚拟模板以决定如何定位其子窗口小部件。本公开的布局系统与传统布局系统之间的一个区别是虚拟模板不进行布局计算本身；相反，他们只是使用布局系统中定义的概念约束的共同系统来表达它们的孩子如何彼此约束。在孩子上设置的约束将传递给根约束系统容器，该容器执行实际计算。这为本公开的布局系统提供了若干优点：(1)将所有计算保持在单个位置，这具有性能和灵活性的好处；(2)由于这样的虚拟模板直接使用布局系统中定义的约束词汇表，它们通常比手动编程的模板更易于创建；(3)外部开发人员与平台开发人员具有相同的访问权限，可以开发这些自定义模板，从而为他们提供快速创建自己的自定义模板的相同的好处。经由本公开的布局系统易于创建虚拟模板可以帮助开发人员更容易地创建自定义布局。最后，这也显著地减少了UI中深层次层次结构的需求，因为它在概念上将布局本身与视图系统分离，这带来了一组独立的性能和灵活性优势。在这方面，虚拟模板不会成为最终布局的一部分和/或页面的DOM。

虚拟助手对象

用户界面有时可以由开发人员(例如，布局系统的用户)使用实际视图系统中不存在的元素来描述。例如，向导通常被用来表示维度/位置。

本公开的布局系统定义虚拟助手对象，其可以被用来在创建时对窗口小部件设置约束，但是可以在绘制/布局时间期间被安全地丢弃。这些对象只需要在概念时存在，一旦(使用它们)创建了约束系统，就可以删除它们。一个规范示例是虚拟向导(例如，图12的1204)，其允许用户相对于水平和垂直向导定位窗口小部件。这些虚拟向导具有相对于其父级(相对于其父级的给定侧或相对于基于百分比的位置)设置的其自己的位置。当用户加载使用向导的给定约束系统时，向导允许用户在布局系统中正确地生成正确的线性方程。但是在布局/绘制时，这样的虚拟助手不需要成为视图层次结构的一部分。换句话说，虚拟助手对象不会成为最终布局的一部分和/或页面的DOM。可以创建不需要成为最终视图层次结构的一部分的其他这样的助手对象，以允许用户更简单地表达布局。

渲染虚拟组件的背景

在表示用户界面的典型视图层级中，存在各种元素：(1)交互所需的窗口小部件(显示信息或允许动作)，(2)中间布局组件，负责窗口小部件的定位，(3)仅用于绘制装饰的各种装饰性附加窗口小部件，诸如背景内容等。这导致视图层次结构在层次结构层的数量上比纯粹从功能角度来看更复杂和更深，由此性能较差。具体地说，由于这些“装饰性”窗口小部件仅被用作装饰而不起作用，因此仅仅为此任务，使用窗口小部件(复杂的对象)在理论上低效。

如上所述，本公开的布局系统基于被表示为线性方程组的约束。在本公开的布局系统中，提供虚拟容器(例如，图12的1202)，其大大消除了除顶部布局组件之外的中间布局组件的需要(其中，解析定位所有窗口小部件的完整约束系统)。解决层次结构中的装饰窗口小部件的需求的问题的关键是利用该虚拟容器存在的概念，从而允许布局系统的用户指定例如可在虚拟容器上绘制的背景(颜色或图像)。虽然这些虚拟容器不是视图层次结构的一部分，但就视图层次结构的绘制而言，它们仍然可供用户访问。另一方面，包含所有窗口小部件和虚拟容器的顶层布局组件具有首先绘制的机会。通过跟踪虚拟容器中指定的可绘制，该顶层布局组件可以在遍历它包含的窗口小部件并且绘制它们之前执行单个绘制过程。该单个绘图过程将负责绘制虚拟容器中定义的所有可绘制。该方法允许用户创建视觉上相同的UI，但具有绘制这些内容的列表的更有效的方式，以及帮助减少视图层次结构的复杂性。

自定义窗口小部件和模板

对于传统布局系统的用户来说，创建自定义窗口小部件通常是复杂的任务。通常，他们只对创建“复合”窗口小部件感兴趣，诸如纯粹使用其他现有窗口小部件定义的自定义窗口小部件。在定制窗口小部件时，这些传统布局系统中的常见问题是系统的性能和灵活性。在本公开的布局系统中，可以在近乎没有性能损失的情况下定义这样的复合对象。

嵌入式约束系统的崩溃

一些传统布局系统通过具有布局管理器的层次结构来工作，布局管理器包含待布局为子节点的窗口小部件。布局管理器还可以是另一布局管理器的孩子。该方法通常会导致深层视图层次结构，特别是在必须布局复杂的UI和/或使用嵌套的更简单的布局管理器时。深层次结构的问题在于层次结构在性能方面不是最优的。例如，每次需要布局时，都需要遍历层次结构。

在一些方面中，本公开的布局系统将所有约束集中在单个位置以由线性方程引擎求解器(例如，224)解析。传统布局系统支持虚拟布局管理器，将其约束添加到顶层父约束系统。以类似的方式，本公开的布局系统自动地嵌入作为父布局管理器的后代的其他完整约束布局管理器实例，从而将分辨率移动到根约束管理器中。这样做的好处是减少了所使用的资源并且集中了求解过程，从而允许布局系统获得更好的性能。在这方面，播放新布局管理器可能是便宜的，特别是如果它们是直接的后代。这也导致视图系统中层次结构平坦化的实践，这也有助于在不牺牲布局层次结构带来的可表达性的情况下提高性能。

插入和/或删除受约束的UI元素

运行的应用中的窗口小部件的布局通常需要层次结构中的动态改变的能力，例如添加、移除或隐藏窗口小部件。在通用的基于约束的布局中，需要正确且有效地处理这些更改。在基于约束的通用布局引擎中，删除和隐藏窗口小部件至关重要。

在一些方面中，与本公开的布局系统相关的移除过程是双管齐下的：(1)布局系统将需要考虑不同地移除窗口小部件上的约束，以及(2)移除窗口小部件本身。本公开的布局系统利用窗口小部件上的两个固有约束来指定其固定位置。在分解窗口小部件上的约束时，布局系统可以计算该窗口小部件的当前(分解前)位置，并且将其存储在固有约束中，然后安全地删除约束，窗口小部件保持在与之前相同的位置，从而为布局系统的用户提供了简单的工作流程。该问题的第二部分涉及删除窗口小部件本身。此时的问题不是在该窗口小部件上设置的约束(通过窗口小部件删除)，而是在布局中的其他窗口小部件上设置的约束，这些约束指向待移除的窗口小部件。本公开的布局系统将需要在那些窗口小部件迭代，并且遵循与约束移除的步骤#1类似的规则来移除相关联的约束。

图13A和13B示出了指示在运行时消失的对象的布局约束的示例。在一个或多个实施方式中，需要由布局系统指定的最后行为是当窗口小部件被标记为已经消失时发生了什么-即，它仍然存在但可能不会影响布局(例如，不可见)。在这方面，本公开的布局系统使窗口小部件在求解器中通过，但是将其大小设置为零。另一种方法是进行优化遍数，其中，布局系统将遵循标记为消失的窗口小部件上设置的约束，并且使用其上设置的约束来替换该消失的窗口小部件上，另一窗口小部件具有的约束。例如，在图13中，提供了指向窗口小部件B(例如，1302)左侧的窗口小部件A(例如，1304)右侧，其中，窗口小部件B(例如，1302)的位置受一些其他当前约束的约束。如果窗口小部件B(例如，1302)被标记为消失，则布局系统可以将窗口小部件B的维度设置为零(例如，图13B中的1306)，并且一切都将正常工作；或者，布局系统可以评估设置窗口小部件B的左侧的位置的约束，并且使用评估的约束替换窗口小部件A的约束。

图14示出了用于开发和部署用户界面的应用221的编辑器界面1400的示例。编辑器界面1400包括窗口小部件调色板1402、布局编辑器窗口1404、布局检查器窗口1406和用户界面1408。窗口小部件调色板1402可以包括用于在布局编辑器窗口1404内定位的窗口小部件选项的列表。布局编辑器窗口1404提供画布，其中，用户可以操纵窗口小部件的一个或多个位置，包括添加和/或移除定位的窗口小部件之间的连接。这些连接中的一些可以包括经由各个窗口小部件的锚，在放置的窗口小部件之间建立连接。布局检查器窗口1406提供用于获得与在布局编辑器窗口1404内选择的窗口小部件有关的附加信息的界面。附加信息可以包括窗口小部件的描述、窗口小部件的文本标题、窗口小部件的标识符或窗口小部件的特定尺寸。用户界面1408基于在布局编辑器窗口1404内定义的布局约束来提供用户界面布局的运行时表示以供显示。

在图14的示例中，可以(例如，经由UI推理引擎223)分析具有诸如图像1410和文本视图1412的各种显示对象的用户界面1408来确定其中的各个显示对象之间的约束。如由箭头1416所示，然后，(例如，使用UI构建引擎222)将布局编辑器窗口1404提供给开发人员，其包括对现有的用户界面(例如，1408)确定的各种约束1418。还可以生成用于现在包括所确定的约束的用户界面1408的用户界面代码。以这种方式，可以利用(例如，由于较浅的层次结构)改进的功能和另外的改进生成用于用户界面1408的新的或更新的代码，并且通过添加、减少或以其他方式修改所确定的约束，向用户界面1408添加复杂性。

硬件概述

图15是示出可以实现图1的客户端110和服务器130的示例性计算机系统1500的框图。在某些方面，计算机系统1500可以或在专用的服务器中，使用硬件或软件和硬件的组合来实现，或被集成在另一实体中，或分布在多个实体中。

计算机系统1500(例如，客户端110和服务器130)包括用于传送信息的总线1508或其他通信机制，以及与总线1508耦合的用于处理信息的处理器1502(例如处理器212和236)。举例来说，计算机系统1500可以利用一个或多个处理器1502来实现。处理器1502可以是通用微处理器、微控制器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、可编程逻辑器件(PLD)、控制器、状态机、门逻辑、分立的硬件组件、或可以执行信息的计算或其他操纵的任何其他合适的实体。

除了硬件之外，计算机系统1500可以包括创建为所述的计算机程序创建执行环境的代码，例如，存储在所包括的存储器1504(例如，存储器220和232)中的构成处理器固件、协议栈、数据库管理系统、操作系统或它们中的一个或多个的组合的代码，该存储器诸如随机存取存储器(RAM)、闪存、只读存储器(ROM)、可编程只读存储器(PROM)、可擦PROM(EPROM)、寄存器、硬盘、可移动盘、CD-ROM、DVD、或任何其他合适的存储设备，该存储器被耦合到总线1508以存储信息和将由处理器1502执行的指令。处理器1502和存储器1504可以通过专用逻辑电路补充或被合并在专用逻辑电路中。

指令可以被存储在存储器1504中并且被实现在一个或多个计算机程序产品中，即，在计算机可读介质上编码的计算机程序指令的一个或多个模块，用于由计算机系统1500执行或控制计算机系统1500的操作，并且根据本领域的技术人员熟知的任何方法，包括但不限于计算机语言，例如面向数据的语言(例如，SQL、dBase)、系统语言(例如，C、Objective-C、C++、Assembly)、构架语言(例如，Java、.NET)、和应用语言(例如，PHP、Ruby、Perl、Python)。指令还可以由计算机语言实现，计算机语言诸如：数组语言、面向方面语言、汇编语言、编辑语言、命令行接口语言、编译语言、并发式语言、波形括号语言、数据流语言、数据结构语言、声明性语言、深奥语言、扩散语言、第四代语言、函数语言、交互模式语言、解释语言、迭代语言、基于列表的语言、小众语言、基于逻辑的语言、机器语言、宏语言、元编程语言、多重范型编程语言、数值分析、基于非英语的语言、面向对象的基于类的语言、面向对象的基于原型的语言、越位规则语言、过程语言、反射性语言、基于规则的语言、脚本语言、基于栈的语言、同步语言、语法处理语言、视觉语言、wirth语言和基于xml的语言。存储器1504还可以被用于在执行将由处理器1502执行的指令期间，存储临时变量或其他中间信息。

如本文讨论的计算机程序不一定对应于文件系统中的文件。程序可以被存储在容纳其他程序或数据(例如，存储在标记语言文档中的一个或多个脚本)的文件的一部分中、专用于所述程序的单一文件中，或在多个协调文件(例如，存储一个或多个模块、子程序或代码的部分的文件)中。计算机程序可以被部署为在一个计算机上或在位于一个站点处或分布在多个站点上并且由通信网络互连的多个计算机上执行。在本说明书中所述的过程和逻辑流程可以由执行一个或多个计算机程序的一个或多个可编程处理器执行以通过对输入数据操作并且生成输出来执行功能。

计算机系统1500进一步包括耦合到总线1508、用于存储信息和指令的数据存储设备1506，诸如磁盘或光盘。计算机系统1500可以经由输入/输出模块1510耦合到各种设备。输入/输出模块1510可以是任何输入/输出模块。示例性输入/输出模块1510包括诸如USB端口的数据端口。输入/输出模块1510被配置为连接到通信模块1512。示例性通信模块1512(例如，通信模块218和238)包括网络接口卡，诸如以太网卡和调制解调器。在某些方面，输入/输出模块1510被配置为连接到多个设备，诸如输入设备1514(例如，输入设备216)和/或输出设备1516(例如，输出设备214)。示例性输入设备1514包括键盘和指示设备，例如鼠标或轨迹球，用户通过该输入设备可以向计算机系统1500提供输入。其他类型的输入设备1514可以被用来提供与用户的交互，例如触觉输入设备、视觉输入设备、音频输入设备、或大脑-计算机接口设备。例如，提供给用户的反馈可以是任何形式的感官反馈，例如视觉反馈、听觉反馈、或触觉反馈；并且可以以任何形式接收来自用户的输入，包括声学、语音、触觉或脑电波输入。示例性输出设备1516包括用于向用户显示信息的显示设备，诸如LCD(液晶显示)监视器。

根据本公开的一个方面，客户端110和服务器130可以响应于处理器1502执行容纳在存储器1504中的一个或多个指令的一个或多个序列而使用计算机系统1500来实现。这样的指令可以从例如数据存储设备1506的另一个机器可读介质读取入存储器1504中。容纳在主存储器1504中的指令序列的执行使处理器1502执行本文所述的过程步骤。在多处理布置中的一个或多个处理器也可以被采用以执行容纳在存储器1504中的指令序列。在替选方面，可以使用硬布线的电路来代替或与软件指令组合以实现本公开的各个方面。因此，本公开的方面不限于硬件电路和软件的任何特定的组合。

在本说明书中所述的主题的各个方面可以实现在计算系统中，该计算系统包括后端组件，例如作为数据服务器；或者包括中间件组件，例如应用服务器；或包括前端组件，例如具有用户通过其可以与在本说明书中所述的主题的实施方式交互的图形用户界面或web浏览器的客户端计算机；或一个或多个这样的后端、中间件或前端组件的任何组合。系统的组件可以通过任何形式或介质的数字数据通信(例如通信网络)互连。通信网络(例如，网络150)可以包括例如LAN、WAN、因特网等中的任何一个或多个。此外，通信网络可以包括但不限于例如下述网络拓扑中的任何一个或多个，包括总线网络、星形网络、环形网络、网状网络、星形总线网络、树形或层次网络等。通信模块可以是例如调制解调器或以太网卡。

计算机系统1500可以包括客户端和服务器。客户端和服务器通常彼此远离并且典型地通过通信网络交互。客户端和服务器的关系借助于在各自的计算机上运行并且彼此具有客户端-服务器关系的计算机程序产生。计算机系统1500可以是例如但不限于台式计算机、膝上计算机、或平板电脑。计算机系统1500也可以被嵌入在另一个设备中，例如但不限于移动电话、PDA、移动音频播放器、全球定位系统(GPS)接收器、视频游戏控制台、和/或电视机顶盒。

如本文使用的术语“机器可读存储介质”或“计算机可读介质”是指参与将指令提供给处理器1502以执行的任何介质或媒介。这样的介质可以采取许多形式，包括但不限于非易失性介质、易失性介质和传输介质。非易失性介质包括例如光盘或磁盘，诸如数据存储设备1506。易失性介质包括动态存储器，诸如存储器1504。传输介质包括同轴电缆、铜线和光纤，包括包含总线1508的导线。机器可读介质的通用形式包括例如软盘、柔性盘、硬盘、磁带、任何其他磁介质、CD-ROM、DVD、任何其他光学介质、穿孔卡片、纸带、具有孔图案的任何其他物理介质、RAM、PROM、EPROM、闪速EPROM、任何其他存储器芯片或卡盒，或计算机可以从其读取的任何其他介质。机器可读存储介质可以是机器可读存储设备、机器可读存储基片、存储器设备，实现机器可读的传播信号的物质组分，或它们中的一个或多个的组合。

在下文中，描述本公开的方面的各个示例。这些被提供为示例，而不限制本主题技术。

根据本公开的方面，提供一种计算机实现的方法。该方法包括在计算设备上提供用于开发用户界面(UI)的布局应用，其中，所述布局应用包括页面的表示。该方法包括经由布局应用，接收第一用户输入，其中，第一用户输入指示在所述页面上定位第一UI元素的指令。该方法包括经由布局应用，接收第二用户输入，其中，第二用户输入指示在所述页面上定位第二UI元素的指令。该方法包括经由布局应用接收第三用户输入，其中，第三用户输入指示创建从所述第二UI元素到所述第一UI元素的连接的指令。该方法包括基于所述连接，生成指示所述第一UI元素和所述第二UI元素之间的空间关系的布局约束。该方法还包括在与所述UI相关联的布局数据文件中提供所述布局约束。

在生成所述布局约束中，该方法还包括将所述连接映射到空间定位数据和关系数据。在一个或多个方面中，所述空间定位数据指示所述页面上相对于所述第一UI元素和所述第二UI元素的位置。在一个或多个方面中，所述关系数据指示相对于所述第一UI元素或所述第二UI元素中的一个，所述第一UI元素和所述第二UI元素之间的方向关系。该方法还包括基于所述空间定位数据和所述关系数据，分别为所述第一UI元素和第二UI元素确定在所述页面上的坐标。该方法还包括在所确定的坐标处提供所述第一UI元素和所述第二UI元素以供显示。

在确定所述坐标中，该方法还包括处理所述空间定位数据和所述关系数据。该方法还包括基于所述处理，确定所述关系数据和所述空间定位数据是否模糊。在一个或多个方面中，当对所述第一UI元素或所述第二UI元素中的至少一个计算多于一个潜在坐标集时，所述关系数据和所述空间定位数据是模糊的。该方法还包括当确定所述关系数据和所述空间定位数据不模糊时，不依赖于线性方程求解器来解析所述关系数据和所述空间定位数据以确定所述坐标。该方法还包括当确定所述关系数据和所述空间定位数据模糊时，将所述关系数据和所述空间定位数据变换为一个或多个线性方程。该方法还包括当所述关系数据和所述空间定位数据变换为一个或多个线性方程时，通过所述线性方程求解器对所述一个或多个线性方程求解以确定所述坐标。

在确定所述坐标中，该方法还包括处理所述空间定位数据和所述关系数据。该方法还包括将所述关系数据和所述空间定位数据分类为特定类约束。该方法还包括确定所述特定类约束是与第一类约束还是不同于所述第一类约束的第二类约束相关联。该方法还包括当确定所述特定类约束与所述第一类约束相关联时，不依赖于线性方程求解器来解析所述关系数据和所述空间定位数据以确定所述坐标。该方法还包括当确定所述特定类约束与所述第二类约束相关联时，将所述关系数据和所述空间定位数据变换为一个或多个线性方程。该方法还包括当所述关系数据和所述空间定位数据变换为一个或多个线性方程时，通过所述线性方程求解器来对所述一个或多个线性方程求解以确定所述坐标。

在一个或多个方面中，所述第一UI元素包括第一锚，并且所述第二UI元素包括第二锚。基于创建从所述第二UI元素到所述第一UI元素的连接的指令，所述第二UI元素的第二锚连接到所述第一UI元素的第一锚。

在一个或多个方面中，创建从所述第二UI元素到所述第一UI元素的连接的指令指示所述第一锚和所述第二锚占据所述页面上的相同目标位置。

在一个或多个方面中，创建从所述第二UI元素到所述第一UI元素的连接的指令指示所述第一锚和所述第二锚之间的限定距离。

在生成所述布局约束中，该方法还包括确定所述连接包括错误。在一个或多个方面中，所述错误指示限制所述第一锚和所述第二锚被定位在所述页面上的目标位置。该方法还包括修改所述第一UI元素或所述第二UI元素中的至少一个的一个或多个维度。该方法还包括基于所修改的一个或多个维度，使错误量减小到预定值。

该方法还包括接收指示在所述页面上定位第三UI元素的指令的第四用户输入。该方法还包括接收指示创建从所述第三UI元素到所述第一UI元素的第一连接以及从所述第三UI元素到所述第二UI元素的第二连接的指令的第五用户输入。该方法还包括确定所述第三UI元素相对于所述第一UI元素和所述第二UI元素的位置包括错误。该方法还包括修改所述第一连接的错误量与所述第二连接的错误量的比率。该方法还包括基于所修改的比率，调整所述第一连接的错误量和所述第二连接的错误量。该方法还包括基于所调整的第一连接的错误量和所调整的第二连接的错误量，确定所述第三UI元素的坐标。

在一个或多个方面中，所述布局约束包括与从所述第三UI元素到所述第一UI元素的所述第一连接相关联的第一间距以及与从所述第三UI元素到所述第二UI元素的所述第二连接相关联的第二间距。在一个或多个方面中，所述第一间距指示所述第一UI元素和所述第三UI元素之间的距离，以及所述第二间距指示所述第二UI元素和所述第三UI元素之间的距离。

该方法还包括在所述页面上提供虚拟对象以供显示，所述虚拟对象是所述页面上的视觉向导。该方法还包括接收指示相对于所述虚拟对象定位所述第一UI元素或所述第二UI元素中的一个或多个的指令的用户输入，所述第一UI元素和所述第二UI元素之间的空间关系基于所述虚拟对象。该方法还包括基于所述布局数据文件渲染所述页面的最终布局。在一个或多个方面中，在所述最终布局的运行时，从所述页面上的显示中移除所述虚拟对象。

根据本发明的方面，提供一种系统，包括一个或多个处理器；以及耦合到所述一个或多个处理器的计算机可读存储介质，所述计算机可读存储介质包括指令。所述指令使得所述一个或多个处理器在计算设备上提供用于开发UI的布局应用，其中，所述布局应用包括页面的表示。所述指令还使得所述一个或多个处理器经由布局应用，接收第一用户输入，其中，第一用户输入指示在所述页面上定位第一UI元素的指令。所述指令还使得所述一个或多个处理器经由布局应用，接收第二用户输入，其中，第二用户输入指示在所述页面上定位第二UI元素的指令。所述指令还使得所述一个或多个处理器经由布局应用接收第三用户输入，其中，第三用户输入指示创建从所述第二UI元素到所述第一UI元素的连接的指令。所述指令还使得所述一个或多个处理器基于所述连接，生成指示所述第一UI元素和所述第二UI元素之间的空间关系的布局约束。所述指令还使得所述一个或多个处理器在与所述UI相关联的布局数据文件中提供所述布局约束。

在一个或多个方面中，所述用户输入指示所述两个或更多个UI元素中的至少两个之间的限定距离。

所述指令进一步使得一个或多个处理器将一个或多个连接映射到空间定位数据和关系数据。在一个或多个方面中，所述空间定位数据指示所述页面上相对于所述第一UI元素和所述第二UI元素的位置。在一个或多个方面中，所述关系数据指示相对于所述第一UI元素或所述第二UI元素中的一个，所述第一UI元素和所述第二UI元素之间的方向关系。所述指令进一步使得所述一个或多个处理器基于所述空间定位数据和所述关系数据，分别为所述第一UI元素和第二UI元素确定在所述页面上的坐标。所述指令进一步使得所述一个或多个处理器在所确定的坐标处提供所述第一UI元素和所述第二UI元素以供显示。

所述指令进一步使得一个或多个处理器处理所述空间定位数据和所述关系数据。所述指令进一步使得一个或多个处理器基于所述处理，确定所述关系数据和所述空间定位数据是否模糊。在一个或多个方面中，当对所述第一UI元素或所述第二UI元素中的至少一个计算多于一个潜在坐标集时，所述关系数据和所述空间定位数据是模糊的。所述指令进一步使得一个或多个处理器当确定所述关系数据和所述空间定位数据不模糊时，不依赖于线性方程求解器来解析所述关系数据和所述空间定位数据以确定所述坐标。所述指令进一步使得一个或多个处理器当确定所述关系数据和所述空间定位数据模糊时，将所述关系数据和所述空间定位数据变换为一个或多个线性方程。所述指令进一步使得一个或多个处理器当所述关系数据和所述空间定位数据变换为一个或多个线性方程时，通过所述线性方程求解器对所述一个或多个线性方程求解以确定所述坐标。

所述指令进一步使得一个或多个处理器处理所述空间定位数据和所述关系数据。所述指令进一步使得一个或多个处理器将所述关系数据和所述空间定位数据分类为特定类约束。所述指令进一步使得一个或多个处理器确定所述特定类约束是与第一类约束还是不同于所述第一类约束的第二类约束相关联。所述指令进一步使得一个或多个处理器当确定所述特定类约束与所述第一类约束相关联时，不依赖于线性方程求解器来解析所述关系数据和所述空间定位数据以确定所述坐标。所述指令进一步使得一个或多个处理器当确定所述特定类约束与所述第二类约束相关联时，将所述关系数据和所述空间定位数据转换为一个或多个线性方程。所述指令进一步使得一个或多个处理器当所述关系数据和所述空间定位数据转换为一个或多个线性方程时，通过所述线性方程求解器来对所述一个或多个线性方程求解以确定所述坐标。

所述指令进一步使得所述一个或多个处理器在所述页面上提供虚拟对象以供显示。在一个或多个方面中，所述虚拟对象是所述页面上的视觉向导。所述指令进一步使得所述一个或多个处理器接收指示相对于所述虚拟对象定位所述两个或更多个UI元素中的至少一个的指令的用户输入。在一个或多个方面中，所述两个或更多个UI元素之间的空间关系基于所述虚拟对象。所述指令进一步使得所述一个或多个处理器基于所述布局数据文件渲染所述页面的最终布局。在一个或多个方面中，在所述最终布局的运行时，从所述页面上的显示中移除所述虚拟对象。

根据本公开的方面，提供一种非暂时性计算机可读存储介质，包括指令，当所述指令由处理器执行时，使所述处理器执行方法。该方法包括在计算设备上提供用于开发UI的布局应用，其中，所述布局应用包括页面的表示。该方法包括经由布局应用，接收第一用户输入，其中，第一用户输入指示在所述页面上定位第一UI元素的指令。该方法包括经由布局应用，接收第二用户输入，其中，第二用户输入指示在所述页面上定位第二UI元素的指令。该方法包括经由布局应用接收第三用户输入，其中，第三用户输入指示创建从所述第二UI元素到所述第一UI元素的连接的指令。该方法包括基于所述连接，生成指示所述第一UI元素和所述第二UI元素之间的空间关系的布局约束。该方法还包括在与所述UI相关联的布局数据文件中提供所述布局约束。

所述指令进一步使得所述一个或多个处理器将所述一个或多个连接中的每一个映射到表示所述第一UI元素和所述第二UI元素之间的空间关系的线性方程。所述指令进一步使得所述一个或多个处理器对所述线性方程求解以产生在所述一个或多个连接中具有最小错误量的解。所述指令进一步使得所述一个或多个处理器基于所求解的线性方程，分别为所述第一UI元素和所述第二UI元素确定在所述页面上的坐标。所述指令进一步使得所述一个或多个处理器将所确定的坐标提供给所述布局数据文件。

所述指令进一步使得所述一个或多个处理器在所述页面上提供虚拟对象以供显示，所述虚拟对象是所述页面上的视觉向导。所述指令进一步使得所述一个或多个处理器接收指示相对于所述虚拟对象定位所述第一UI元素或所述第二UI元素中的一个或多个的指令的用户输入。在一个或多个方面中，所述第一UI元素和所述第二UI元素之间的空间关系基于所述虚拟对象。所述指令进一步使得所述一个或多个处理器基于所述布局数据文件渲染所述页面的最终布局。在一个或多个方面中，所述指令进一步使得所述一个或多个处理器在所述最终布局的运行时，从所述页面上的显示中移除所述虚拟对象。

根据本公开的方面，提供一种系统，包括用于存储指令的装置，以及用于执行所存储的指令的装置，所述指令当由所述装置执行时，使得所述装置执行一种方法。该方法包括在计算设备上提供用于开发UI的布局应用，其中，所述布局应用包括页面的表示。该方法包括经由布局应用，接收第一用户输入，其中，第一用户输入指示在所述页面上定位第一UI元素的指令。该方法包括经由布局应用，接收第二用户输入，其中，第二用户输入指示在所述页面上定位第二UI元素的指令。该方法包括经由布局应用接收第三用户输入，其中，第三用户输入指示创建从所述第二UI元素到所述第一UI元素的连接的指令。该方法包括基于所述连接，生成指示所述第一UI元素和所述第二UI元素之间的空间关系的布局约束。该方法还包括在与所述UI相关联的布局数据文件中提供所述布局约束。

在生成所述布局约束中，该方法还包括将所述连接映射到空间定位数据和关系数据。在一个或多个方面中，所述空间定位数据指示所述页面上相对于所述第一UI元素和所述第二UI元素的位置。在一个或多个方面中，所述关系数据指示相对于所述第一UI元素或所述第二UI元素中的一个，所述第一UI元素和所述第二UI元素之间的方向关系。该方法还包括基于所述空间定位数据和所述关系数据，分别为所述第一UI元素和第二UI元素确定在所述页面上的坐标。该方法还包括在所确定的坐标处提供所述第一UI元素和所述第二UI元素以供显示。

在确定所述坐标中，该方法还包括处理所述空间定位数据和所述关系数据。该方法还包括基于所述处理，确定所述关系数据和所述空间定位数据是否模糊。在一个或多个方面中，当对所述第一UI元素或所述第二UI元素中的至少一个计算多于一个潜在坐标集时，所述关系数据和所述空间定位数据是模糊的。该方法还包括当确定所述关系数据和所述空间定位数据不模糊时，不依赖于线性方程求解器来解析所述关系数据和所述空间定位数据以确定所述坐标。该方法还包括当确定所述关系数据和所述空间定位数据模糊时，将所述关系数据和所述空间定位数据变换为一个或多个线性方程。该方法还包括当所述关系数据和所述空间定位数据变换为一个或多个线性方程时，通过所述线性方程求解器对所述一个或多个线性方程求解以确定所述坐标。

在确定所述坐标中，该方法还包括处理所述空间定位数据和所述关系数据。该方法还包括将所述关系数据和所述空间定位数据分类为特定类约束。该方法还包括确定所述特定类约束是与第一类约束还是不同于所述第一类约束的第二类约束相关联。该方法还包括当确定所述特定类约束与所述第一类约束相关联时，不依赖于线性方程求解器来解析所述关系数据和所述空间定位数据以确定所述坐标。该方法还包括当确定所述特定类约束与所述第二类约束相关联时，将所述关系数据和所述空间定位数据转换为一个或多个线性方程。该方法还包括当所述关系数据和所述空间定位数据转换为一个或多个线性方程时，通过所述线性方程求解器来对所述一个或多个线性方程求解以确定所述坐标。

在一个或多个方面中，所述第一UI元素包括第一锚，并且所述第二UI元素包括第二锚。基于创建从所述第二UI元素到所述第一UI元素的连接的指令，所述第二UI元素的第二锚连接到所述第一UI元素的第一锚。

在一个或多个方面中，创建从所述第二UI元素到所述第一UI元素的连接的指令指示所述第一锚和所述第二锚占据所述页面上的相同目标位置。

在一个或多个方面中，创建从所述第二UI元素到所述第一UI元素的连接的指令指示所述第一锚和所述第二锚之间的限定距离。

在生成所述布局约束中，该方法还包括确定所述连接包括错误。在一个或多个方面中，所述错误指示限制所述第一锚和所述第二锚被定位在所述页面上的目标位置。该方法还包括修改所述第一UI元素或所述第二UI元素中的至少一个的一个或多个维度。该方法还包括基于所修改的一个或多个维度，使错误量减小到预定值。

该方法还包括接收指示在所述页面上定位第三UI元素的指令的第四用户输入。该方法还包括接收指示创建从所述第三UI元素到所述第一UI元素的第一连接以及从所述第三UI元素到所述第二UI元素的第二连接的指令的第五用户输入。该方法还包括确定所述第三UI元素相对于所述第一UI元素和所述第二UI元素的位置包括错误。该方法还包括修改所述第一连接的错误量与所述第二连接的错误量的比率。该方法还包括基于所修改的比率，调整所述第一连接的错误量和所述第二连接的错误量。该方法还包括基于所调整的第一连接的错误量和所调整的第二连接的错误量，确定所述第三UI元素的坐标。

在一个或多个方面中，所述布局约束包括与从所述第三UI元素到所述第一UI元素的所述第一连接相关联的第一间距以及与从所述第三UI元素到所述第二UI元素的所述第二连接相关联的第二间距。在一个或多个方面中，所述第一间距指示所述第一UI元素和所述第三UI元素之间的距离，以及所述第二间距指示所述第二UI元素和所述第三UI元素之间的距离。

该方法还包括在所述页面上提供虚拟对象以供显示，所述虚拟对象是所述页面上的视觉向导。该方法还包括接收指示相对于所述虚拟对象定位所述第一UI元素或所述第二UI元素中的一个或多个的指令的用户输入，所述第一UI元素和所述第二UI元素之间的空间关系基于所述虚拟对象。该方法还包括基于所述布局数据文件渲染所述页面的最终布局。在一个或多个方面中，在所述最终布局的运行时，从所述页面上的显示中移除所述虚拟对象。

根据本公开的方面，提供一种计算机实现的方法。该方法包括在计算设备上提供用于开发UI的布局应用，其中，所述布局应用包括页面的表示。该方法包括经由布局应用接收用户输入，其中，该用户输入指示在所述页面上对两个或更多个用户界面元素的放置。该方法包括检测所述两个或更多个用户界面元素之间的一个或多个连接。该方法包括基于所述一个或多个连接来确定布局约束，其中，所述布局约束指示所述两个或更多个UI元素之间的空间关系。该方法还包括更新与所述UI相关联的布局数据文件以包括所述布局约束。

根据本公开的方面，提供一种计算机实现的方法。该方法包括在计算设备上提供用于开发UI的布局应用，其中，所述布局应用包括页面的表示。该方法包括检测位于所述页面上的第一UI元素和第二UI元素之间的一个或多个连接，其中，所述一个或多个连接中的每一个指示所述第一UI元素和所述第二UI元素的布局约束，以及其中，所述布局约束指示两个或更多个UI元素之间的空间关系。该方法包括确定所检测的一个或多个连接是否包括错误。该方法包括当所检测的一个或多个连接包括错误时，调整所述布局约束以使所述错误分布在所述一个或多个连接中。该方法包括将所述布局约束提供给具有约束列表的布局数据文件。该方法还包括使用所述布局数据文件来生成所述UI的最终布局。

在一个或多个方面中，下文描述了条款的示例。

一种方法，包括本文所述的一种或多种方法、操作或其一部分。

一种装置，包括一个或多个存储器和一个或多个处理器(例如，110)，所述一个或多个处理器被配置为使得执行本文所述的一个或多个方法、操作或其一部分。

一种装置，包括一个或多个存储器(例如，220，一个或多个内部、外部或远程存储器，或一个或多个寄存器)以及耦合到所述一个或多个存储器的一个或多个处理器(例如，212)，所述一个或多个处理器被配置为使得所述装置执行本文所述的一个或多个方法、操作或其一部分。

一种装置，包括适于执行本文所述的一种或多种方法、操作或其一部分的装置(例如，110)。

一种处理器(例如，212)，包括用于执行本文所述的一个或多个方法、操作或其一部分的模块。

一种硬件设备，包括被配置为执行本文所述的一个或多个方法、操作或其一部分的电路(例如，110)。

一种装置，包括适于执行本文所述的一种或多种方法、操作或其一部分的装置(例如，110)。

一种装置，包括可用来执行本文所述的一种或多种方法、操作或其一部分的组件(例如，110)。

一种包括其中存储的指令的计算机可读存储介质(例如，220、一个或多个内部、外部或远程存储器、或一个或多个寄存器)，所述指令包括用于执行本文所述的一个或多个方法或操作的代码。

一种存储指令的计算机可读存储介质(例如，220、一个或多个内部、外部或远程存储器、或一个或多个寄存器)，所述指令当被一个或多个处理器执行时，使得所述一个或多个处理器执行本文所述的一个或多个方法、操作或其一部分。

在一个方面，方法可以是操作、指令或功能，反之亦然。在一个方面，可以修改条款或权利要求以包括在其它一个或多个条款、一个或多个词、一个或多个句子、一个或多个短语、一个或多个段落和/或一个或多个权利要求中引用的一些或所有词语(例如，指令、操作、功能或组件)。

为了示出硬件和软件的可互换性，通常已经就其功能性描述了诸如各种示例性块、模块、组件、方法、操作、指令和算法的条目。这样的功能性被实现为硬件还是软件或硬件和软件的组合取决于施加在整个系统上的特定应用和设计约束。熟练的技术人员可以对每个特定的应用以不同的方式实现所述的功能性。

除非明确说明，否则以单数形式对元件的引用并不意味着是一个且仅一个，而是指一个或多个。例如，“一”模块可以指一个或多个模块。以“一”，“一个”，“该”或“所述”为前缀的元件在没有进一步的限制的情况下不排除存在另外的相同元件。

标题和副标题(如果有的话)只是为了方便而使用，并不限制本发明。词语“示例性”被用来表示用作示例或图示。就使用术语“包含”、“具有”等来说，这类术语旨在以类似于术语“包括”的方式而是包含性的，因为当在权利要求中被用作过渡词时解释“包括”。诸如“第一”和“第二”等的关系术语可以被用来将一个实体或动作与另一个实体或动作区分开，而不一定要求或暗示这些实体或动作之间的任何实际的这类关系或顺序。

诸如“一方面”、“该方面”、“另一方面”、“一些方面”、“一个或多个方面”、“一实施方式”、“该实施方式”、“另一实施方式”、“一些实施方式”、“一个或多个实施方式”、“一实施例”、“该实施例”、“另一实施例”、“一些实施例”、“一个或多个实施例”、“一配置”、“该配置”、“另一配置”、“一些配置”、“一个或多个配置”、“本主题技术”、“该公开”、“本公开”的短语、其其它变型等都是为了方便起见，并不意味着与这些短语有关的公开对于本主题技术是必不可少的或者这种公开适用于本主题技术的所有配置。与这些短语有关的公开可以适用于所有配置或一个或多个配置。与这些短语有关的公开可以提供一个或多个示例。诸如“方面”或“一些方面”的短语可以指一个或多个方面，反之亦然，并且这类似地适用于其它前述短语。

在一系列条目之前的短语“…中的至少一个”(其中术语“和”或“或”用来分隔条目中的任何一个)整体上修改列表而不是列表的每个成员。短语“…中的至少一个”不需要选择至少一个条目；相反，该短语允许包括任何一个条目中的至少一个和/或条目的任意组合中的至少一个和/或每个条目中的至少一个的含义。作为示例，短语“A、B和C中的至少一个”或“A、B或C中的至少一个”中的每一个指仅A、仅B或仅C；A、B和C的任意组合；和/或A、B和C中的每一个中的至少一个。

应理解到，所公开的步骤、操作或处理的特定顺序或层次是示例性方法的图示。除非另有明确说明，否则应理解到，可以以不同的顺序执行步骤、操作或处理的特定顺序或层次。可以同时执行步骤、操作或处理中的一些。所附方法权利要求(如果有的话)以范例顺序呈现各个步骤、操作或处理的元素，并不意味着限于所呈现的特定顺序或层次。这些可以以串行、线性、并行或不同的顺序执行。应理解到，所述的指令、操作和系统通常可以一起集成在单个软件/硬件产品中或者被封装成多个软件/硬件产品。

提供本公开以使本领域的任何技术人员能够实施本文所述的各个方面。在一些情况下，众所周知的结构和部件以框图形式示出，以避免模糊本主题技术的概念。本公开提供了本主题技术的各种示例，并且本主题技术不限于这些示例。对这些方面的各种修改对于本领域技术人员来说将是显而易见的，并且本文所述的原理可以应用于其它方面。

本领域普通技术人员已知或以后将知道的、贯穿本公开所述的各个方面的元素的所有结构和功能等同物通过引用被明确地并入本文，并且旨在被权利要求所涵盖。而且，本文公开的任何内容都不旨在致力于公众，不管这些公开是否在权利要求中明确陈述。没有权利要求元素将在35U.S.C.§112，第六段限定下解释，除非该元素明确地使用短语“用于…的装置”来阐述或者，在方法权利要求的情况下，元素使用短语“用于…的步骤”来阐述。

标题、背景、附图的简要描述、摘要和附图在此被结合到本公开中，并且被提供为本公开的说明性示例，而不是作为限制性描述。提交时的理解是，它们将不会被用于限制权利要求的范围或含义。此外，在详细描述中，可以看出，为了简化本公开的目的，描述提供了说明性示例，并且各种特征在各种实施方式中被组合在一起。公开的方法不应当被解释为反映所要求保护的主题需要比每个权利要求中明确陈述的特征更多的特征的意图。相反，如权利要求所反映的，发明主题在于少于单个公开的配置或操作的所有特征。权利要求由此被并入到详细描述中，其中，每个权利要求本身就作为单独要求保护的主题。

权利要求不旨在限于本文所述的方面，而是应被赋予与语言权利要求相一致的全部范围，并且涵盖所有的法定等同物。尽管如此，这些权利要求都不旨在涵盖不满足适用专利法的要求的主题，也不应该以这种方式进行解释。

Claims (20)

1.一种计算机实现的方法，包括：

在计算设备上提供用于开发用户界面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元素之间的所述空间关系基于所述虚拟对象；以及

基于所述布局数据文件渲染所述页面的最终布局，

其中，在所述最终布局的运行时，从所述页面上的显示中移除所述虚拟对象。

12.一种系统，包括：

一个或多个处理器；

耦合到所述一个或多个处理器的计算机可读存储介质，所述计算机可读存储介质包括指令，所述指令在由所述一个或多个处理器执行时使所述一个或多个处理器：

在计算设备上提供用于开发用户界面UI的布局应用，所述布局应用包括页面的表示；

接收指示在所述页面上对两个或更多个UI元素的放置的用户输入；

确定所述两个或更多个UI元素之间的一个或多个连接；

基于所述一个或多个连接来确定布局约束，所述布局约束指示所述两个或更多个UI元素之间的空间关系；以及

更新与所述UI相关联的布局数据文件以包括所述布局约束。

13.如权利要求12所述的系统，其中，所述用户输入指示所述两个或更多个UI元素中的至少两个之间的限定距离。

14.如权利要求12或13所述的系统，其中，所述指令进一步使所述一个或多个处理器：

将所述一个或多个连接映射到空间定位数据和关系数据，所述空间定位数据指示所述页面上相对于第一UI元素和第二UI元素的位置，所述关系数据指示相对于所述第一UI元素或所述第二UI元素中的一个，所述第一UI元素和所述第二UI元素之间的方向关系；

基于所述空间定位数据和所述关系数据，分别为所述第一UI元素和所述第二UI元素确定在所述页面上的坐标；以及

在所确定的坐标处提供所述第一UI元素和所述第二UI元素以供显示。

15.如权利要求14所述的系统，其中，所述指令进一步使所述一个或多个处理器：

处理所述空间定位数据和所述关系数据；

基于所述处理，确定所述关系数据和所述空间定位数据是否模糊，当对所述第一UI元素或所述第二UI元素中的至少一个能够计算多于一个潜在坐标集时，所述关系数据和所述空间定位数据是模糊的；

当确定所述关系数据和所述空间定位数据不模糊时，不依赖于线性方程求解器来解析所述关系数据和所述空间定位数据以确定所述坐标；

当确定所述关系数据和所述空间定位数据模糊时，将所述关系数据和所述空间定位数据变换为一个或多个线性方程，并且通过所述线性方程求解器对所述一个或多个线性方程求解以确定所述坐标。

16.如权利要求14所述的系统，其中，所述指令进一步使所述一个或多个处理器：

处理所述空间定位数据和所述关系数据；

将所述关系数据和所述空间定位数据分类为特定类约束；

确定所述特定类约束是与第一类约束相关联还是与不同于所述第一类约束的第二类约束相关联；

当确定所述特定类约束与所述第一类约束相关联时，不依赖于线性方程求解器来解析所述关系数据和所述空间定位数据以确定所述坐标；

当确定所述特定类约束与所述第二类约束相关联时，将所述关系数据和所述空间定位数据变换为一个或多个线性方程，并且通过所述线性方程求解器来对所述一个或多个线性方程求解以确定所述坐标。

17.如权利要求12-17中的任一项所述的系统，其中，所述指令进一步使所述一个或多个处理器：

在所述页面上提供虚拟对象以供显示，所述虚拟对象是所述页面上的视觉向导；

接收指示相对于所述虚拟对象定位所述两个或更多个UI元素中的至少一个的指令的用户输入，所述两个或更多个UI元素之间的所述空间关系基于所述虚拟对象；以及

基于所述布局数据文件渲染所述页面的最终布局，

其中，在所述最终布局的运行时，从所述页面上的显示中移除所述虚拟对象。

18.一种非暂时性计算机可读存储介质，包括指令，所述指令在由处理器执行时使所述处理器：

在计算设备上提供用于开发用户界面UI的布局应用，所述布局应用包括页面的表示；

确定位于所述页面上的第一UI元素和第二UI元素之间的一个或多个连接，所述一个或多个连接中的每一个指示所述第一UI元素和所述第二UI元素的布局约束，所述布局约束指示所述第一UI元素和所述第二UI元素之间的空间关系；

确定所述一个或多个连接是否包括错误；

当所述一个或多个连接包括错误时，调整所述布局约束以使所述错误扩散在所述一个或多个连接之间；

将所述布局约束提供给具有约束列表的布局数据文件；以及

使用所述布局数据文件来生成所述UI的最终布局。

19.如权利要求18所述的非暂时性计算机可读存储介质，其中，所述指令进一步使所述处理器：

将所述一个或多个连接中的每一个映射到表示所述第一UI元素和所述第二UI元素之间的空间关系的线性方程；

对所述线性方程求解以产生在所述一个或多个连接中具有最小错误量的解；

基于所求解的线性方程，分别为所述第一UI元素和所述第二UI元素确定在所述页面上的坐标；以及

将所确定的坐标提供给所述布局数据文件。

20.如权利要求18或19所述的非暂时性计算机可读存储介质，其中，所述指令进一步使所述处理器：

在所述页面上提供虚拟对象以供显示，所述虚拟对象是所述页面上的视觉向导；

接收指示相对于所述虚拟对象定位所述第一UI元素或所述第二UI元素中的一个或多个的指令的用户输入，所述第一UI元素和所述第二UI元素之间的所述空间关系基于所述虚拟对象；以及

基于所述布局数据文件渲染所述页面的最终布局，

其中，在所述最终布局的运行时，从所述页面上的显示中移除所述虚拟对象。