CN109074246B - 自动确定布局约束的系统和方法 - Google Patents

Abstract

本主题技术的各方面涉及用于表示用户界面的小组件上的复杂约束的系统和方法，使用允许开发者表示小组件之间的任意一对一关系的小通用规则集。可以提供布局工具，其在操作中向开发者显示布局区域。布局工具可以包括用户界面(UI)推理引擎，当在布局区域内放置和/或移动一个或多个小组件时，生成对一个或多个小组件的推断的约束。基于布局区域中的一个或多个小组件的相对位置，可以在具有或不具有来自开发者的进一步输入的情况下生成这些推断的约束。可以提供推断约束按钮，当在布局区域中放置小组件之后选择时，导致生成对每个小组件的推断的约束。

Description

自动确定布局约束的系统和方法

相关申请的交叉引用

本申请根据35U.S.C.§119规定要求于2016年5月17日提交的题为“CONSTRAINTS-BASED LAYOUT SYSTEM FOR EFFICIENT LAYOUT AND CONTROL OF USER INTERFACEELEMENTS(用于用户界面元素的高效布局和控制的基于约束的布局系统)”的美国临时专利申请序列号62/337,850和2016年5月17日提交的题为“SYSTEMS AND METHODS FORAUTOMATIC DETERMINATION OF LAYOUT CONSTRAINTS(用于布局约束的自动确定的系统和方法)”的美国临时专利申请序列号62/337,852的优先权的权益，出于所有目的其公开内容通过引用被整体合并在此。

技术领域

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

背景技术

用户界面被设计以能够适应各种屏幕条件，诸如屏幕尺寸、屏幕密度和使用的人类语言。传统的布局系统允许开发者指定如何布置小组件(widget)，以及其布局位置将会如何改变以适应不断改变的屏幕条件。然而，传统的布局系统能够是复杂的，并且能够具有性能限制，这能够使创建用户界面成为开发者不合需要的耗时过程。

背景技术部分中提供的描述不应仅被假定为现有技术，因为在背景部分中被提及或者其与背景部分相关联。背景部分可以包括描述主题技术的一个或多个方面的信息。

发明内容

所公开的主题涉及用于用户界面开发和部署的系统和方法，诸如用于用户界面元素的有效布局和控制的基于约束的布局系统。更具体地，提供基于约束的布局系统和方法，其允许开发者更容易和有效地指定如何布置小组件，以及其位置将如何改变以适应那些改变和/或可变的显示条件(例如，用于各种屏幕大小、屏幕密度和语言)。有助于附加的用户界面复杂性和设计选项。

根据一些方面，提供一种计算机实现的方法，其包括显示布局工具，该布局工具包括用于用户界面的一个或多个显示对象的视觉布局的布局区域。该方法还包括接收输入，该输入包括在所显示的布局工具的布局区域内的位置处放置用于用户界面的所述显示对象中的所选择的一个显示对象。该方法还包括：在没有进一步输入的情况下，至少部分地基于位置来为所述显示对象中的所选择的一个显示对象确定至少一个推断的布局约束。

根据一些方面，提供一种非暂时性机器可读介质，其包括用于显示布局工具的代码，该布局工具包括用于用户界面的一个或多个显示对象的视觉布局的布局区域。非暂时性机器可读介质还包括用于接收输入的代码，该输入包括当显示时在布局工具的布局区域内的位置处放置用于用户界面的所述显示对象中的所选择的一个显示对象。非暂时性机器可读介质还包括用于至少部分地基于位置来为所述显示对象中的所选择的一个显示对象确定至少一个推断的布局约束的代码。

根据一些方面，提供一种计算机实现的方法，其包括向布局工具提供在相应的多个位置处具有多个显示对象的现有用户界面。该方法还包括至少部分地基于对应的多个位置利用布局工具生成与多个显示对象相关联的多个推断的约束。

附图说明

附图被包括以提供进一步的理解并且被并入且组成本说明书的一部分，图示所公开的实施例并且与说明书一起用于解释所公开的实施例的原理。在附图中：

图1图示用于适用于实践本公开的一些实施方式的布局工具的示例架构。

图2是图示根据本公开的某些方面的来自图1的架构的示例客户端和服务器的块图。

图3图示使用图2的示例客户端构建基于约束的布局系统的示例过程。

图4图示使用图2的示例客户端和服务器进行用户界面开发和部署的示例过程。

图5至图9图示示例布局约束的示意图。

图10图示与维度相关的布局约束的示例的示意图。

图11A和11B图示链相关布局约束的示例。

图12图示用于设置布局约束的虚拟对象的示例。

图13A和13B图示指示在运行时消失的对象的布局约束的示例。

图14图示用于开发和部署用户界面的应用的编辑器界面的示例。

图15图示根据本主题技术的各个方面的基于所提议的用户界面布局的布局工具中的推断的约束的示例显示。

图16图示根据本主题技术的各个方面的对添加到具有约束的布局的对象的推断的约束的示例显示。

图17图示根据本主题技术的各个方面的对添加到具有约束的布局的对象的修改的推断的约束的示例显示。

图18图示根据本主题技术的各个方面的用于推断对所提议的用户界面布局的约束的示例过程的流程图。

图19图示根据本主题技术的各个方面的用于生成如图18中描述的约束的示例过程的流程图。

图20图示根据本主题技术的各个方面的基于现有用户界面的推断的约束的示例显示。

图21图示根据本主题技术的各个方面的用于生成对现有用户界面的推断的约束的示例过程的流程图。

图22是图示通过其能够实现图2的客户端和服务器的示例计算机系统的块图。

在一个或一个以上实施方式中，可能不需要每个附图中所描绘的所有组件，并且一个或多个实施方式可以包括在附图中未示出的附加组件。在不脱离本主题公开的范围的情况下，可以进行组件的排列和类型的变化。在本主题公开的范围内可以利用附加的组件、不同的组件或更少的组件。

具体实施方式

下面阐述的详细描述旨在作为各种实施方式的描述，而不是旨在表示其中可以实践主题技术的仅有的实施方式。如本领域的技术人员将认识到，在全部没有脱离本公开的范围的情况下，可以以各种不同方式修改所描述的实施方式。因此，附图和描述本质上被认为是说明性的而非限制性的。

如本文所使用的，术语“小组件”可以指的是应用或应用的组件，其执行应用的功能的性能或提供对与应用相关联的服务的访问。如这里所使用的，术语“锚(anchor)”可以指的是被用于在页面上与诸如另一小组件的另一对象建立连接的小组件的元素。

总体概述

已经基于Cassowary算法开发传统布局系统，该算法公开用于用户界面的约束系统的使用。具体地，使用基于算法的线性系统求解器来求解约束系统，从而允许迭代解决方案用于用户界面的实时使用。但是，传统的UI布局系统存在问题。UI由通常称为“小组件”的多个显示对象组成。在考虑复杂的考虑因素诸如各种设备屏幕尺寸、显示屏幕密度和/或显示器中包括的各种人类语言的同时确定如何在显示屏幕上定位这些小组件是复杂的任务。表达这些布局考虑因素的现有布局系统不会使开发者的这种复杂性最小化。在某些情况下，这些传统布局系统将线性系统完全暴露给开发者，从而导致复杂且繁琐的开发时间以预测UI布局的行为。这种暴露还会在布局系统中产生降级的性能问题，并且由于布局系统的困难输入要求而对开发者的用户体验产生不利影响。例如，这样的布局系统要求开发者通过基本上编写线性方程来指定布局，这对开发者来说是繁重的任务。其他传统布局系统将各种功能划分为特定情况(例如，执行内容布局作为一系列小组件，将布局组织为网格等)，从而给开发者在到达最终布局之前使用多个组件造成不必要的负担。

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

所公开的技术通过提供也植根于计算机技术的解决方案，即，通过限定被用于表达布局关系的更高级别的约束集来解决特别出现在计算机技术领域中的传统布局系统中的问题。本公开的布局系统基于Cassowary算法的特定创建的有效实现。本公开的布局系统与传统布局系统之间的区别特征之一是传统布局系统中使用的Cassowary方法要求开发者通过基本上编写线性方程来指定布局，然而本公开对布局开发和部署提供图解方法。在这方面，本公开的布局系统消除从开发者写入线性方程的负担。

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

所公开的技术还提供对计算机本身的功能的改进，因为：(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。应用221、UI构建引擎222、UI推理引擎223和线性方程引擎224中的一个或者多个可以(例如，使用约束数据225和/或库226)被操作以为开发者提供用于用户界面的显示对象的视觉布局的布局工具。

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

在某些方面中，客户端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的处理步骤可以由其他系统执行。

通过从开始步骤进行到步骤301过程300开始。在步骤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)。

锚连接的一般见解是连接限定第一类型的约束，其中在来自每个小组件的锚之间建立连接。发起连接的小组件的锚可以被称为“源锚”，而作为目的地接收连接的小组件的锚可以被称为“目标锚”。在一些场景中源锚可以位于与目标锚相同的位置处，或者源锚和目标锚可以位于由其他场景中的边距限定的不同位置中。然后，本公开的布局系统收集所有限定的连接，并且尝试尽可能地最小化误差以生成最终布局。然后能够相对于彼此完全限定小组件，而不是相对于其父容器限定小组件(在传统布局系统中通常是这种情况)。

锚边距

图6A和6B图示识别锚边距的示例布局约束的示意图600和650。在图6A中，锚(例如，502)能够被连接在一起。例如，能够通过将文本视图2(例如，604)的左锚(例如，502)连接到文本视图(例如，602)的右锚(例如，502)来创建其中小组件“文本视图2”(例如，604)可以在“文本视图l”(例如，602)的右边的布局。在图6B中，当锚连接到另一锚(例如，目标锚)时，这意指两个锚可以占据相同的位置。

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

相对连接的锚

图7A和7B图示识别相对连接的锚的示例布局约束的示意图700和750。当连接两个相对的锚(例如，左和右、或顶部和底部)时，锚不能定位在其目标上。从本质上讲，存在布局系统必须接受的不可避免的“误差”(系统试图最小化的误差)。

在图7A中的相对连接的锚固件的特定情况下，本公开的布局系统决定在两个连接上均等地“扩展”误差，从而产生居中的小组件(例如，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中，小组件的定位能够受到不同类别的基于链的约束1150的约束。在第一类基于链的约束中，小组件可以由扩展链1152约束，其中每个小组件沿着链以包括到侧边距的固定距离的固定边界内等距隔开。在第二类基于链的约束中，小组件可以由扩展链1154约束，其中沿着链的每个末端定位的小组件邻接侧边距并且与中间小组件等距地隔开。在第三类基于链的约束中，小组件可以由加权链1156约束，其中某些小组件比沿着链的其他小组件更重地加权以占据侧边距之间的整个长度。在第四类基于链的约束中，小组件可以由包装链1158约束，其中小组件在相对于侧边距的任意一端上以相等的距离串联打包在一起。在第五类基于链的约束中，小组件可以受到偏置的打包链1160的约束，其中小组件分别在相对于侧边距的任意一端上以变化的距离串联打包在一起，这取决于被应用于任意一端的偏置量。

找到居中约束

在一些方面，基于约束系统在布局中居中小组件通过设置两个相等强度的相对约束起作用。例如，如果约束系统具有水平对齐的三个小组件A、B和C，并且目标是使B在A和C之间居中，则约束系统可以在B上设置两个约束：(1)对A的右侧的左约束，和(2)对C的左侧的右约束。因为约束将会是相等的强度，小组件B将最终居中。当快速原型化UI时，逐个设置这些约束可能是不合需要的耗时的。更值得注意的是，要求用户提供线性方程以表达这样的约束不必要地增加在开发UI中用户体验的负担，并且在最小化从用户输入接收的线性方程中可能存在的误差量中提出更大的挑战。

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

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

b.布局系统可以将最佳候选初始化为父小组件的一侧：左候选的父左侧、右候选的父右侧。

c.然后，布局系统可以收集视图层级中作为兄弟的小组件列表。这些是能够被居中的小组件。

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图示指示在运行时消失的对象的布局约束的示例。在一个或多个实施方式中，需要由布局系统指定的最后行为是当小组件被标记为消失时发生的情况——即，它仍然存在，但可能不会影响布局(例如，不可见)。在这方面，本公开的布局系统将小组件保持在求解器传递中，但是将其大小设置为零。另一种方法是进行优化传递，其中布局系统将遵循标记为消失的小组件上设置的约束，并使用其上设置的约束来替换另一小组件对消失的小组件的约束。例如，在图13A中，提供指向小组件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)确定的各种约束1414和1418。还可以生成用于现在包括所确定的约束的用户界面1408的用户界面代码。以这种方式，可以利用改进的功能(例如，由于较浅的层级)生成用于用户界面1408的新的或更新的代码，并且能够通过添加、减少或以其他方式修改确定的约束来向用户界面1408添加附加的修改和复杂性。

根据某些方面，本主题公开提供用于自动推断诸如用户界面显示的显示器的一个或多个显示对象(例如，小组件、图像、文本、web视图等)之间的一个或多个关系的系统。以这种方式，能够进一步减轻用户界面的开发者的负担。

更具体地，本文描述的系统和方法可以提供包括对居中的小组件的推断、小组件分组的推断、相对于邻近对象(例如，其他小组件、图像、边界、虚拟边界、虚拟模板、虚拟容器、虚拟指南等)的约束的推断和/或支持包裹内容的弱约束的推断的特征。

如图15中所示，布局系统的显示器2000(这里有时称为布局工具或图形开发环境)，诸如基于约束的布局系统(例如，图2的应用221和/或UI构建引擎222的实施方式)可以包括父容器2002(例如，“根(root)”容器)，开发者能够在其中添加各种显示元素(这里有时称为显示对象或对象)，诸如小组件、图像、文本视图、web视图等。图15中所示的布局工具的显示器2000的部分包括用于用户界面的一个或多个显示元素的视觉布局的布局区域。布局区域可以对应于父容器2002的内部。在图15的示例中，仅示出布局工具的布局区域。然而，应理解，可以提供布局工具的各种其他部分，诸如用于操作和控制布局工具的一个或多个可选工具、工具条、菜单按钮等，如本领域的技术人员将会理解的。

在图15的示例中，父容器2002包括小组件2006、各种复选框2008、各种文本视图2010和单选按钮2012。还示出虚拟指南2004。为了使开发者在布局工具的布局区域中放置诸如小组件2006、各种复选框2008、各种文本视图2010和/或单选按钮2012的一个或多个显示元素，开发者可以(例如，从工具栏或诸如下拉菜单、弹出菜单或横幅菜单的菜单中)选择所需的显示元素(例如，使用鼠标控制的光标或预定的击键)。然后，开发者可以通过点击位置(例如，当光标在该位置处时通过鼠标或触摸板的单击、双击、右键等，或在该位置处使用触摸屏的单击、双击、右击等)，或者通过将显示元素的表示拖动到所需位置，并将显示元素的表示放在所需位置处，将所选择的显示元素放置在布局区域内的期望位置。基于所选显示元素的已知尺寸和/或特征(例如，锚和/或基线)，并且基于点击(或拖放或屏幕轻敲)时布局区域中的光标或触摸位置，可以通过布局工具确定所选显示对象的期望位置。

附加地或可替选地，开发者可以在选择期望的显示元素之前点击或轻敲布局区域内的期望位置，并且响应于点击，接收要放置在点击的位置处的显示元素的可选择的选项。然后可以通过选择对应于所需显示元素的可选择选项之一将所需的显示元素放置在该位置。

如本文所述，基于约束的布局系统中的小组件能够通过具有被应用的约束来定位在用户界面中。然而，当在图形开发环境/诸如布局工具的显示器2000的可视编辑器中制作UI时，在每个小组件上设置约束的过程能够是耗时的。例如，在具有四十个小组件的布局中，对于要约束的每个小组件，可能需要设置四十个或更多个约束。

为了提供增强效率布局工具，应用221(参见图2)可以包括UI推理引擎223，其提供用于约束小组件的自动过程。当UI被添加到布局工具的布局区域和/或在布局工具的布局区域周围移动时(例如，当每个小组件被添加和/或移动时或者基于推断的约束的用户指导不接受来自开发者的显式约束的情况下)，UI推理引擎223自动生成推断的约束，诸如用于UI内的各个显示对象的被推断的布局约束。例如，UI推理引擎223可以将每个小组件的两个固有或初始约束设置为来自其父容器的原点的固定偏移坐标，向其中小组件最初保持在最初放置的任何位置处的可视设计器提供自由流动的固定定位。例如，当相对于父容器的原点的特定位置处将小组件放置到布局区域中(例如，放入父容器2002中)时，小组件最初被约束为固定在该位置的坐标处。例如，UI推理引擎223可以生成和/或存储初始固定坐标约束对，其对应于相对于父容器2002的原点的固定坐标，与该小组件的标识符相关联。

然而，在现代UI设计中，小组件的固定定位能够是有问题的。更具体地，小组件在UI中的固定定位不提供UI对屏幕大小的改变或语言改变的适应性。因此，UI推理引擎223生成和存储的初始固有固定约束可以仅在设计和开发阶段期间由应用221允许，并且可以在生产中部署UI期间由应用221去除。在此方法的一个方面，在应用221的操作期间，响应于设计者/开发者简单地移动小组件(例如，通过选择、拖动和/或拖放小组件)，UI推理引擎223能够破坏或修改初始固定约束。以这种方式，可以简化与布局工具的视觉显示的交互。也可以在显示器2000中提供对于那些固定定位的内在约束的清晰标识符(未明确示出)以警告设计者关于固定约束的存在，并且有助于在生产时防止剩余的固定约束，同时仍然保持在设计阶段容易理解和无摩擦流动，通常期望设计发生重大改变。

在图15的示例中，各种显示元素(例如，小组件2006、复选框2008、文本视图2010、单选按钮2012等)位于特定位置处，例如由开发者放置在父容器2002中。为了提供如箭头2009所指示的用于布局的更有效的基于约束的系统，可以通过例如UI推理引擎223(例如，通过如本文所述推断的约束)自动地生成对每个显示元素的约束。作为示例，当每个显示元素被放置到容器2002中时，将显示元素周期性地放置到容器2002中，并且/或者响应于用户对推断的约束的请求(例如，响应于开发者点击诸如布局系统或工具中的推理约束按钮的按钮)，可以自动生成约束。推断的约束可以是相对于布局区域中的另一位置(例如，相对于父容器本身的一部分、相对于虚拟指南、相对于显示元素链中的一个或多个其他显示元素、和/或相对于布局区域中的一个或多个其他显示元素)的位置约束或距离约束和/或如本文所述的维度相关布局约束。

如图15中所示，系统(例如，UI推理引擎223)可以自动地推断一个或多个约束，诸如每个显示元素的距离约束和/或维度相关约束，并且可以为每个推断的约束提供具有视觉指示符的更新显示2000'。在图15的示例中5，为相对于父容器2002(例如，相对于父容器2002的顶部、底部或侧边)的推断的约束2020、虚拟对象约束(例如，相对于虚拟指南2004的推断的约束2022、推断模板约束2026(例如，推断表)和/或推断的链相关布局约束)、推断的居中约束2024、以及相对于其他显示元素的推断的约束2028，示出视觉指示符。可以由UI推理引擎生成的附加推断的约束包括如结合例如图11A和图11B在本文描述的维度有关的布局约束。诸如虚拟指南、虚拟链和虚拟表的虚拟对象也可以由UI推理引擎223作为约束推理过程的一部分来推断，或者可以在推理约束期间或之前由开发者生成。

在图15的示例中，推断的居中约束2024包括相对于父容器2002的左边和右边的推断表约束2026的左侧和右侧中的每一个的约束，以保持表在父容器中居中。然而，还应理解，取决于推断表的位置，可以在相对于父容器2002的对应边的单侧(或顶部或底部)上为推断表提供单个推断的约束，或者左侧和右侧的两个约束可以是不相等的，如在上面结合图8A-8C所讨论的。

如所示的，诸如约束2022、2026、2024和2028的约束可以是约束每个显示对象与一个或多个其他显示对象、一个或多个虚拟指南、一个或多个边、角、或父容器的其他特征之间、链内的一个或多个其他显示对象之间、或虚拟容器内的相对距离的距离约束。推断的约束还可以包括与维度相关的布局约束，诸如扩展约束或包裹约束。可以在没有来自开发者的任何进一步的开发者输入的情况下，为布局区域中的每个新的或移动的显示对象或者响应于来自开发者的推断请求生成推断的约束。但是，这仅仅是说明性的。在一些实施方式中，可以在来自开发者的用户指导输入的情况下，针对布局区域中的每个新的或移动的显示对象或者响应于来自开发者的推断请求，生成推断的约束。例如，可以选择性地提供一个或多个可选约束，其能够在存储所选择的推断的约束之前由开发者选择。

如图15中所示，UI推理引擎223可以推断虚拟对象约束，诸如表约束，其在空间上将一个或多个元素(例如，元素2010和2008)约束在按行和列排列的虚拟表单元(例如，结合图10在上面所描述的)。UI推理引擎223可以通过例如检测布局区域中的至少三个相邻显示对象并且检测到至少两个相邻对象基本上水平对齐并且至少两个相邻对象垂直对齐来推断表约束。在图15的示例中，三个文本视图2010相邻并且垂直对齐，两个复选框2008相邻并且垂直对齐，并且每个复选框2008与对应的文本视图2010水平对齐。将会理解，推断表约束2026仅包括六个可用表单元(两列三行)中的五个显示对象。在各种情况下，UI推理引擎223生成具有多个行和多个列的表约束，其考虑到一个或多个空表单元，最小化空表单元的数量，并且仍然包括所有检测到的垂直和水平对齐表中的相邻对象。在下文中结合图18和图19进一步详细讨论可以由例如UI推理引擎223和/或UI构建引擎222执行的用于基于布局确定推断的约束的各种操作。

图16示出进一步更新的显示2000”的示例，其中在为现有的对象已经建立显示2000'中的约束(例如，通过用户推断或者添加)之后，在容器2002内已经添加附加显示对象2100(例如，诸如复选框的附加小组件)。如所示的，UI推理引擎223将附加显示对象2100保持在其放置的位置(例如，通过指配如本文所讨论的初始内在约束)。如箭头2109所指示的，可以为附加显示对象2100推断新约束(例如，新的对象对对象约束2028和新的对象对虚拟指南约束2020)并且在更新的显示2000”'中指示新的推断的约束。例如，可以由UI推理引擎223基于新对象被拖放的位置(例如，基于与另一实际或虚拟对象的接近度)来推断新的约束。

在将附加对象2100放置在布局区域内的特定位置之后，可以由UI推理引擎223生成对附加对象2100的新的推断的约束，或者当开发者在容器2002内的各个位置之间拖动附加对象2100时，能够基于从开发者(例如，连续地)接收对应于附加对象2100的改变位置的输入来自动地和连续地更新对附加对象2100的新的推断的约束。

例如，可以首先临时显示推断的约束，使得能够如图17的进一步更新的显示2000””中所示改变约束。例如，能够将附加显示对象2100移动到新位置，如图17中所示，并且能够生成相对于父容器2002的新的推断的约束，诸如新的推断的约束2020。例如，当在布局区域周围拖动附加对象2100时，建议约束的指示符能够出现和消失。在一个实施方式中，指示符能够从附加对象2100朝向其他对象或容器生长一段时间以指示一个或多个建议约束并且(a)在对象已经被保持在单个位置足够的时间段或由开发者拖放在单个位置之后变得完全显示和锁定(例如，从附加对象完全延伸到另一对象或容器)，或者(b)当附加对象2100从单个位置移开时，消失。

例如，当小组件的左侧移动到诸如另一小组件、虚拟指南、或诸如父容器的容器的边的另一显示对象的预定接近度内时，UI推理引擎223可以生成从小组件的左侧开始增长的线或箭头。然后，UI推理引擎223可以基于小组件和另一对象之间的减小的距离来增加在另一显示对象的方向上的线或箭头的长度。例如，UI推理引擎223可以与小组件和另一对象之间的距离成反比例增加线或箭头的长度，直到线或箭头长度等于距离，并且因此线或箭头跨越整个距离。UI推理引擎223还可以确定存在多个附近对象并且生成多个对应的建议约束，这些约束基于布局区域中的小组件的移动以及产生的小组件和其它对象之间的距离改变来生长、进化、锁定或消失。

除了显示如图15、图16以及图17中所示的推断的约束的指示符，系统可以针对每个推断的约束生成布局代码(这里有时称为布局数据文件)，该布局代码能够直接解析和/或馈送到线性方程求解器，诸如图2的线性方程引擎224，如这里针对用户界面的操作所讨论的。

在一些场景中，当显示对象在显示器内周围移动时，生成的布局代码可以被实时地解析和/或提供给线性方程引擎224，使得根据现有约束移动和调整到具有到移动对象的现有约束(例如，推断的或用户生成的约束)的对象。以这种方式，开发者能够实时地看到约束的效果和对各种显示对象的位置的调整的影响。然而，在许多情况下，能够在不采用线性方程引擎224的情况下解决约束。随着一个或多个显示对象在布局区域内移动，UI推理引擎223可以因此提供实时推断的约束和其他显示对象的移动，使得在不使用线性方程引擎224的情况下，根据约束移动和调整具有对移动对象的约束(例如，推断的或用户生成的约束)的对象。

图18描绘根据主题技术的方面的用于推断用户界面布局的约束的示例过程的流程图。出于解释的目的，在本文中参考图1-图17的组件描述图18的示例过程。此外，出于解释的目的，图18的示例过程的块图在这里被描述为串行或线性发生。然而，图18的示例过程的多个块可以并行发生。另外，图18的示例过程的块不需要以所示的顺序执行并且/或者图18的示例过程的一个或多个块不需要被执行。

在所描绘的示例流程图中，在块2300处，其中诸如在图15的显示2000中显示的初始布局已经生成的系统，可以(例如，启发式地)计算对应于虚拟模板的任何显示对象(例如，小组件)的集合的概率(例如，诸如表概率的虚拟模板约束概率)。例如，虚拟模板可以是表。例如，诸如聚类对象和/或以网格状排列对齐的对象(例如，大致在一行或多行和一列或多列中对齐的两个、三个或更多个相邻对象)的小组件集合可以通过图2的UI推理引擎223被推断为虚拟表中的对象。通过首先启发式地计算是小组件表的一个或多个小组件集合的概率，可以由UI推理引擎223执行表推断。表概率可以由UI推理引擎223基于若干因素来计算，所述因素包括小组件集合的聚类的确定的数值密度、小组件的集合的网格形式(例如，行和列)的确定的数值一致性(例如，逆方差)等等。对于作为表候选的每个小组件集合，可以应用一个或多个过滤器(例如，概率阈值过滤器)以尽早消除表候选。例如，可以确定具有低于聚类阈值的聚类因子和/或低于网格一致性阈值的网格形成得分的表候选不是表，并且可以不生成表约束。

在块2302处，对于具有都大于其各自的阈值的表概率(例如，聚类因子和/或网格形成分数)的小组件的一个或者多个集合，可以为用户界面(例如，通过UI推理引擎223和/或UI构建引擎222)生成、显示和添加对诸如用户界面布局代码(例如，诸如XML代码文件的布局数据文件)的诸如图15的虚拟表约束2026的模板约束。以这种方式，UI推理引擎223可以确定约束显示对象以及各种附加显示对象(例如，在布局工具的布局区域中具有存储位置的附加显示对象)中的至少两个的相对位置的虚拟模板约束。

然后，可以通过UI推理引擎223来识别一个或多个(例如，每个)显示对象的一般约束。例如，可以通过在块2304处计算通过对任何其它锚点的约束相关的每个小组件的概率，并且在块2306处计算被约束在两个锚点的相对侧上的每个小组件的单独概率表(例如，居中约束概率)，来部分地识别一般约束。可以基于例如与另一对象的接近度(例如，在预定数量的显示像素内)、对象相对于多个其他对象的位置(例如，与其对齐、在之间近似居中或其他相对位置属性)、基于用户提供的和/或系统学习的用户偏好、和/或基于诸如显示对象的内容或类型的其他属性来生成概率。基于所计算的概率和所计算的单独概率表，在块2308处，可以为每个小组件生成(例如，选择)约束(例如，在一系列通过概率的传递中，如下文结合图19进一步详细描述的)。

在块2310处，可以修改显示2000(例如，如图15的显示2000'中所示)以示出所生成的推断的约束。

在块2312处，可以使用所生成的推断的约束(例如，由UI构建引擎222)来生成和/或修改用户界面代码(例如，XML代码)。

图19描绘根据主题技术的方面的用于基于结合图18描述的计算的概率以及计算的单独概率表推断的约束的示例过程的流程图。出于解释的目的，图19的示例过程的块在这里被描述为串行或线性发生。然而，图19的示例过程的多个块可以并行发生。另外，图19的示例过程的块不需要以所示顺序执行并且/或者图19的示例过程中的一个或多个块不需要被执行。

在所描绘的示例流程图中，在块2400处，可以针对诸如与另一对象的基线对基线约束的基线约束具有高概率(例如，高于基线约束阈值的概率)的对象生成约束。例如，UI推理引擎223可以针对布局区域中的每个显示对象的基线确定与布局区域中的每个其他显示对象的基线对基线约束的概率。对于每个对象基线，UI推理引擎223生成的概率对于更靠近和/或更紧密地对其对象基线的基线可能更高。

在块2402处，可以针对具有在两个锚点(例如，布局区域中的其他显示对象的锚点，在布局工具的操作期间布局工具存储其位置)之间居中的高概率(例如，高于第一基于中心的阈值的概率)的对象生成约束。例如，对于容器2002中的每个显示对象，UI推理引擎223可以确定锚点(例如，其他显示对象的锚点)是否存在于该显示对象的相对(例如，顶部和底部或左侧和右侧)侧。对于在相对侧上存在锚点的显示对象，UI推理引擎223可以确定在该显示对象与第一侧上的最近锚点(例如，另一显示对象的锚点)之间的第一距离和在该显示对象的第二侧上的最近的锚(例如，另一显示对象的锚点)之间的第二距离。然后，UI推理引擎223可以确定该显示对象在相对侧上的锚点之间居中的概率。例如，对于到相对侧上的锚点的距离较小的显示对象以及对于第一和第二距离基本相同的显示对象，概率可能更高。对于具有高于第一基于中心的阈值的确定的中心概率的所有显示对象，可以生成约束。以这种方式，UI推理引擎223可以确定居中约束，该居中约束将显示对象约束在被布置在显示对象的相对侧上的各种附加显示对象中的第一和第二显示对象之间。

在块2404，可以为具有高单侧约束概率(例如，在第一单侧阈值之上的单侧约束概率)的对象生成约束。例如，对于容器2002中的每个显示对象，UI推理引擎223可以确定该显示对象的每个锚点与最近的显示对象、虚拟指南或容器边之间的距离。然后，UI推理引擎223可以基于例如最短距离(例如，与最短距离的倒数成比例)来确定该显示对象被约束到附近显示对象、虚拟指南或容器边的单侧约束概率。对于具有在第一单侧阈值之上的最短距离单侧约束概率的所有显示对象，可以生成约束。

在块2406处，可以基于高于第二阈值的约束，针对所有其他两个锚点(例如，对于具有被居中在两个锚点之间的低于第一基于中心的阈值并且高于第二基于中心的阈值的概率的对象)生成约束。

在块2408处，可以针对所有其他可行的单侧约束生成约束。可行约束可以是不会不可避免地与先前生成的约束冲突的约束。

在块2410处，在一些实施方式中，可以生成附加的弱约束，其从父容器的一侧连接到另一侧以自动建立最小尺寸。通常，这里描述的系统和方法向用户提供允许用户布局屏幕、并且在例如单击中自动推断小组件之间的关系的工具。UI推理引擎223可以通过构建限定任何两个小组件锚点彼此具有约束的概率的一系列表并且构建限定在彼此之间具有匹配的一对锚点的任何小组件的概率来推断关系和结果约束。可以基于诸如小组件的紧密性和/或小组件的对齐的因素来启发式地创建概率图。

然后可以将约束应用于例如固定模式，诸如包括应用(a)基线约束、(b)能够拉伸的居中约束、(c)靠近边距约束、(d)非居中小组件约束、(e)更远的边界约束、以及(f)弱约束的模式。

根据各个方面，推理引擎能够通过合并每个所提出的布局的概率来使用多个提出的布局。

在一些场景中，布局管理器一旦设置就具有固定的行为。然而，对于经常与一些改变相关、或者对于动画目的的改变如何在运行时执行小组件的布局，其能够是有帮助的。例如，取决于内容的滚动位置，标题部分的大小和位置应以不同的方式布局。可以通过显式编程来执行这种运行时的实现。

然而，使用基于如本文所述的约束分辨率的布局系统，利用表达的约束例如作为线性方程，可以通过解析如本文所讨论的给定约束来布置小组件。例如，小组件的大小能够被表达为另一变量的因子，诸如另一小组件的维度。

为了提供改进的运行时行为，在一些场景中，本文公开的系统可以为开发者提供在运行时将新方程注入系统的能力。然而，这些场景可能导致复杂性增加(例如，从开发者的角度来看)，并且可能影响性能的可预测性。为了解决这些潜在问题，在其他情况下，系统可以提供在系统中注入而不是注入方程而是注入值的能力。然后能够关于那些外部限定的值(例如，诸如特定设备的特定显示器的边距宽度的值)来表达一些小组件属性。这使系统易于从开发者的角度理解和易于预测，但允许最常见的任务。

此方法的变型可以包括在系统中自动地映射一些特定外部值。具体地，可以检查布局系统中包含的小组件以收集其内在值中的一些(例如，ScrollView小组件的滚动位置)并在约束系统中自动暴露那些内在值。然后可以向开发者提供对这些值的访问以表示对小组件的附加约束。这种方法可以允许开发者表达以前只能经由显式编程实现的一系列行为。以这种方式，可以提供用户界面开发工具，其不仅更易于开发者使用，而且通常更高效。

根据各个方面，还提供用于为现有用户界面生成基于约束的代码的系统和方法，该现有用户界面当前不是基于约束的，或者对于该现有用户界面对没有生成用户界面的开发者来说约束不可见。例如，为了有助于对现有用户界面的更新或修改，使用本文描述的基于约束的用户界面的系统和方法，可以从现有用户界面生成基于约束的用户界面布局，例如，如图20中所示。

在图20的示例中，可以(例如，通过UI推理引擎223)分析具有各种显示对象诸如图像2504和文本视图2506的现有用户界面2500以确定其中的各种显示对象之间的约束。如箭头2501所指示的，然后可以将包括针对现有用户界面推断的各种约束2508的布局显示2502提供给开发者(例如，使用UI构建引擎222)。还可以生成用于现在包括推断的约束的用户界面的用户界面代码。以这种方式，可以利用改进的功能(例如，由于较浅的层级)生成用于用户界面的新的或更新的代码，并且可以通过添加、减少或以其他方式修改推断的约束来向用户界面添加附加的修改和复杂性。

图21描绘根据主题技术的方面的用于推断现有用户界面的约束的示例过程的流程图。出于解释的目的，这里参考图1-图20的组件描述图21的示例过程。此外，出于解释的目的，图21的示例过程的块在这里被描述为串行或线性发生。然而，图21的示例过程的多个块可以并行发生。另外，图21的示例过程的块不需要以所示的顺序执行并且/或者图21的示例处理的一个或多个块不需要被执行。

在所描绘的示例流程图中，在块2600处，诸如图20的用户界面2500的用户界面可以被提供(例如，被提供给UI推理引擎223)。用户界面可以是现有用户界面，诸如用于现有基于设备或基于web的应用的用户界面。例如，提供现有用户界面可以包括向UI推理引擎223提供用户界面的可执行代码和/或源代码(例如，通过将UI推理引擎223指向代码位于的本地或远程设备或服务器上的位置)。

在块2602处，可以为所提供的用户界面生成约束。例如，可以由例如UI推理引擎223生成在现有用户界面中的诸如图像、小组件等的显示对象与其它对象和/或容器或者模板之间的诸如图20的约束2508的约束。可以基于用户界面中的对象的位置和行为生成约束。例如，用于布局工具的布局区域中的显示对象的上面结合图18和图19描述的过程可以被用于生成对现有用户界面中的显示对象的约束。

在一些场景中，可以分析如在多个不同设备(例如，具有不同显示大小或密度的设备)上实现的和/或以多种语言实现的用户界面，以部分地基于不同设备或不同语言的用户界面的相似性和差异来确定约束。在各种场景中，UI推理引擎223可以生成父容器和/或一个或多个虚拟指南，并且可以相对于父容器的虚拟指南和/或边距生成对一个或多个显示对象的约束。在各种场景中，UI推理引擎223可以生成与现有用户界面中的每个显示对象相关联的一个或多个模板约束诸如表、一个或多个单侧约束、和/或一个或多个居中约束。

在块2604处，可以修改布局工具的显示(例如，如图20的显示2502中所示)以示出现有用户界面的所生成的推断的约束。

在块2606处，可以使用所生成的推断的约束以生成和/或修改用户界面代码(例如，XML代码)。用户界面代码可以是基于多个推断的约束的现有用户界面的新用户界面代码。

图22是图示通过其能够实现图1的客户端110和服务器130的示例性计算机系统2200的块图。在某些方面，计算机系统2200可以使用硬件或软件和硬件的组合，或者在专用服务器中来实现，或者集成到另一实体中，或者分布在多个实体上。

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

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

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

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

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

根据本公开的一个方面，客户端110和服务器130能够使用计算机系统2200响应于处理器2202执行包含在存储器2204中的一个或多个指令的一个或多个序列来实现。这样的指令可以从诸如数据存储设备2206的另一机器可读介质读入到存储器2204中。执行包含在主存储器2204中的指令序列使处理器2202执行这里描述的处理步骤。还可以采用多处理排列中的一个或多个处理器以执行包含在存储器2204中的指令序列。在可替选的方面中，可以使用硬连线电路代替软件指令或与软件指令组合以实现本公开的各种方面。因此，本公开的各方面不限于硬件电路和软件的任何特定组合。

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

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

如这里使用的术语“机器可读存储介质”或“计算机可读介质”指的是参与向处理器2202提供指令以供执行的任何介质或介质。这种介质可以采用许多形式，包括但不限于非易失性介质、易失性介质和传输介质。非易失性介质包括例如光盘或磁盘，诸如数据存储设备2206。易失性介质包括动态存储器，诸如存储器2204。传输介质包括同轴电缆、铜线和光纤，包括包括总线2208的线。机器可读介质的公共形式包括例如软盘、软盘、硬盘、磁带、任何其他磁介质、CD-ROM、DVD、任何其他光学介质、穿孔卡、纸带、任何其他具有孔图案的物理介质、RAM、PROM、EPROM、FLASH EPROM、任何其他存储芯片或盒式磁带、或计算机能够读取的任何其他介质。机器可读存储介质能够是机器可读存储设备、机器可读存储基板、存储器设备、影响机器可读传播信号的物质组合、或其中的一个或多个的组合。

下面描述本公开的各方面的各种示例。这些是作为示例提供，并不限制主题技术。

根据一些方面，提供一种计算机实现的方法，包括在计算设备上提供用于开发用户界面(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/an)”、“该(the)”或“所述(said)”继续的元素不排除存在另外的相同元素。

仅为了方便使用标题和副标题(如果有)，并不限制本发明。示例性词语被用于意指用作示例或说明。在使用术语包括、具有等的程度上，正如当在权利要求中作为过渡词使用包含时所解释地，这样的术语以与术语包含相似的方式旨在是包括性的。在没有必要要求或暗示这些实体或动作之间的任何实际的这种关系或顺序的情况下，诸如第一和第二等的关系术语可以被用于将一个实体或动作与另一实体或动作区分开。

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

具有术语“和”或“或”分隔任何项的、在一系列项之前的短语“中的至少一个”修饰列表整体而不是列表中的每个成员。短语“至少一个”不需要选择至少一个项；相反，该短语允许包括项中的任何一个中的至少一个，和/或项的任何组合中的至少一个、和/或项的每个中的至少一个的含义。举例来说，短语“A、B和C中的至少一个”或“A、B或C中的至少一个”仅指A，仅指B或仅指C；指A、B和C的任意组合；和/或指A、B和C中的每一个中的至少一个。

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

提供本公开以使本领域的技术人员能够实践本文描述的各个方面。在一些实例中，以块图形式示出公知的结构和组件，以避免模糊本主题技术的概念。本公开提供主题技术的各种示例，并且主题技术不限于这些示例。对这些方面的各种修改对于本领域的技术人员而言将是显而易见的，并且本文描述的原理可以应用于其他方面。

本领域的普通技术人员已知或以后将知道的贯穿本公开所描述的各个方面的元素的所有结构和功能等同物通过引用明确地并入本文，并且旨在由权利要求包含。此外，无论在权利要求中是否明确地叙述这样的公开，本文所公开的内容都不旨在致力于公众。根据美国法典第35编第112条第六段规定，任何权利要求元素均不得被解释，除非使用短语“用于......的装置”明确地叙述该元素，或者在方法权利要求的情况下，使用短语“步骤”来叙述该元素。

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

权利要求不旨在限于本文描述的方面，而是与符合语言权利要求的全部范围一致并且包含所有合法等同物。尽管如此，没有一项权利要求旨在包含不满足适用专利法要求的主题，也不能以这种方式进行解释。

Claims (15)

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

显示布局工具，所述布局工具包括用于用户界面的一个或多个显示对象的视觉布局的布局区域；

接收第一输入，所述第一输入包括在所显示的布局工具的所述布局区域内放置所述显示对象中的所选择的第一显示对象；

接收第二输入，所述第二输入包括在所显示的布局工具的所述布局区域内放置所述显示对象中的所选择的第二显示对象；

接收第三输入，所述第三输入指示用于在所述布局区域内创建从所述第二显示对象到所述第一显示对象的第一连接的指令；

在没有进一步输入的情况下，至少部分地基于所述连接来为所选择的第一显示对象和所选择的第二显示对象来自动确定至少一个推断的布局约束和所述布局区域内的相应坐标；

接收第四用户输入，所述第四用户输入包括在所显示的布局工具的所述布局区域内放置所述显示对象中的所选择的第三显示对象；

接收第五用户输入，所述第五用户输入指示用于创建从所述第三显示对象到所述第一显示对象的第二连接和从所述第三显示对象到所述第二显示对象的第三连接的指令；

确定所述第三显示对象相对于所述第一显示对象和所述第二显示对象的所述放置包括不能根据所述第一连接放置所述第一显示对象和所述第二显示对象的误差；

将所述误差扩展到所述第二连接和所述第三连接，并且由此为所选择的第一显示对象和所选择的第二显示对象修改所述至少一个推断的布局约束和所述布局区域内的相应坐标；以及

在所修改的相应坐标处显示所述第一显示对象和所述第二显示对象。

2.根据权利要求1所述的计算机实现的方法，其中，所述推断的布局约束包括相对于所述布局区域内的另一位置的距离约束。

3.根据权利要求1所述的计算机实现的方法，其中，所述至少一个推断的布局约束在所述用户界面中约束所选择的第一显示对象和所选择的第二显示对象中的至少一个相对于所述布局区域中的另一显示对象的位置的显示。

4.根据权利要求3所述的计算机实现的方法，其中，所述至少一个推断的布局约束约束所选择的第一显示对象和所选择的第二显示对象中的至少一个相对于虚拟指南的显示。

5.根据权利要求1所述的计算机实现的方法，其中，所述至少一个推断的约束包括对所选择的第一显示对象和所选择的第二显示对象中的至少一个和多个其他显示对象的推断的虚拟模板约束。

6.根据权利要求5所述的计算机实现的方法，其中，所述推断的虚拟模板约束包括与表对应的表约束，所述表具有其中布置所选择的第一显示对象和所选择的第二显示对象中的至少一个和所述多个其他显示对象的表单元的行和列。

7.根据权利要求1所述的计算机实现的方法，其中，所述确定包括：

为所选择的第一显示对象和所选择的第二显示对象中的至少一个确定多个概率；以及

基于所述多个概率确定所述至少一个推断的约束。

8.根据权利要求7所述的计算机实现的方法，其中，所述多个概率包括单侧约束概率、居中约束概率和虚拟模板约束概率。

9.根据权利要求1所述的计算机实现的方法，进一步包括为所选择的第一显示对象和所选择的第二显示对象中的至少一个生成初始固定坐标约束对。

10.根据权利要求9所述的计算机实现的方法，进一步包括在确定所述至少一个推断的约束之后去除所述初始固定坐标约束对。

11.根据权利要求1所述的计算机实现的方法，进一步包括：

接收与用户将所选择的第一显示对象和所选择的第二显示对象中的至少一个移动到所述布局区域内的各个附加位置对应的连续输入；以及

响应于所述连续输入，生成多个建议的推断的约束，每个建议的推断的约束与所述各个附加位置中的一个相关联。

12.根据权利要求1所述的计算机实现的方法，其中，所选择的第一显示对象和所选择的第二显示对象中的至少一个包括小组件。

13.一种非暂时性机器可读介质，包括：

用于显示布局工具的代码，所述布局工具包括用于用户界面的一个或多个显示对象的视觉布局的布局区域；

用于接收第一输入的代码，所述第一输入包括在所述布局工具当被显示时的布局区域内放置所述显示对象中的所选择的第一显示对象；

用于接收第二输入的代码，所述第二输入包括在所显示的布局工具的所述布局区域内放置所述显示对象中的所选择的第二显示对象；

用于接收第三输入的代码，所述第三输入指示用于在所述布局区域内创建从所述第二显示对象到所述第一显示对象的第一连接的指令；

用于在没有进一步输入的情况下，至少部分地基于所述连接来为所选择的第一显示对象和所选择的第二显示对象来自动确定至少一个推断的布局约束和所述布局区域内的相应坐标的代码；

用于接收第四用户输入的代码，所述第四用户输入包括在所显示的布局工具的所述布局区域内放置所述显示对象中的所选择的第三显示对象；

用于接收第五用户输入的代码，所述第五用户输入指示用于创建从所述第三显示对象到所述第一显示对象的第二连接和从所述第三显示对象到所述第二显示对象的第三连接的指令；

用于确定所述第三显示对象相对于所述第一显示对象和所述第二显示对象的所述放置包括不能根据所述第一连接放置所述第一显示对象和所述第二显示对象的误差的代码；

用于将所述误差扩展到所述第二连接和所述第三连接，并且由此为所选择的第一显示对象和所选择的第二显示对象修改所述至少一个推断的布局约束和所述布局区域内的相应坐标的代码；以及

用于在所修改的相应坐标处显示所述第一显示对象和所述第二显示对象的代码。

14.根据权利要求13所述的非暂时性机器可读介质，进一步包括用于存储在所述布局工具的操作期间在所述布局工具的所述布局区域内多个附加显示对象的多个附加位置的代码，其中，用于确定所述至少一个推断的布局约束的所述代码包括用于确定居中约束的代码，所述居中约束将所选择的第一显示对象和所选择的第二显示对象中的至少一个约束在被布置在所选择的第一显示对象和所选择的第二显示对象中的至少一个的相对侧上的所述多个附加显示对象中的第一个和第二个之间。

15.根据权利要求13所述的非暂时性机器可读介质，进一步包括用于存储在所述布局工具的操作期间在所述布局工具的所述布局区域内多个附加显示对象的多个附加位置的代码，其中，用于确定所述至少一个推断的布局约束的所述代码包括用于确定约束所选择的第一显示对象和所选择的第二显示对象中的至少一个和所述多个附加显示对象中的至少两个附加显示对象的相对位置的虚拟模板约束的代码。

Images