CN110832456B - 为图形界面创建默认布局约束 - Google Patents

Abstract

在一些实施方式中，一种从静态图形用户界面(GUI)设计生成基于约束的自适应GUI的方法包括：获得包括多个视图的静态GUI；识别静态GUI的根视图和子视图；基于子视图与根视图边界的空间关系，将一个或多个约束应用于子视图；确定子视图未被完全约束；响应于确定子视图未被完全约束，基于子视图和作为子视图的邻居的附加视图之间的空间距离将一个或多个附加约束应用于子视图；并且基于一个或多个约束以不同于静态GUI的尺寸的一个或多个尺寸生成基于约束的自适应GUI。

Description

为图形界面创建默认布局约束

背景技术

与现代软件应用(app)的用户交互是由图形用户界面(graphical userinterface，GUI)作为媒介的。历史上，GUI已经被设计用于特定集合的静态显示器尺寸和分辨率(例如，膝上型计算机屏幕或台式计算机监视器)。通常，输入是通过使用触摸屏、触控板、鼠标或其他定位输入组件来提供的。在传统系统中，经由定位输入组件与GUI的用户交互采取一个或多个定位事件的形式，每个定位事件相对于系统的显示空间具有各自的位置。对于这些定位事件中的每一个，底层GUI框架操作来将输入事件分派到预期的视图进行处理。移动计算平台的兴起导致了GUI必须出现在其上的显示器尺寸数量的大幅增加。

发明内容

本文档涉及为图形用户界面(GUI)创建默认布局约束，该默认布局约束可用于使用GUI的单个静态设计来动态创建各种不同尺寸的其他GUI。

一般地，本说明书中描述的主题的一个创新方面可以体现在从静态图形用户界面(GUI)设计生成基于约束的自适应GUI的方法中，该方法包括：获得包括多个视图的静态GUI设计，其中每个视图是静态GUI设计的元素，识别静态GUI设计的根视图，识别静态GUI设计的子视图，其中子视图嵌套在根视图内，基于子视图与根视图边界的空间关系将一个或多个约束应用于子视图；在将一个或多个约束应用于子视图之后，确定子视图未被完全约束，响应于确定子视图未被完全约束，基于子视图和作为静态GUI设计中子视图的邻居的附加视图之间的空间距离，将一个或多个附加约束应用于子视图，以及基于一个或多个约束和一个或多个附加约束，以不同于静态GUI设计的尺寸的一个或多个尺寸生成基于约束的自适应GUI。

这些和其他实施例各自可以可选地包括一个或多个以下特征。

在一些示例中，该方法包括生成布局图形(layout graph)，该布局图形包括子视图的顶点和作为静态GUI设计中子视图的邻居的两个或更多个附加视图的两个或更多个附加顶点，在布局图形中，用图形边缘(graph edge)将子视图的顶点连接到两个或更多个附加视图的两个或更多个附加顶点，给图形边缘中的每一个图形边缘分配相应的权重，其中分配给每个图形边缘的权重基于子视图和通过图形边缘连接到子视图的附加顶点之间的空间距离，以及基于具有最低权重的图形边缘的附加顶点，将附加约束应用于子视图。

在一些示例中，该方法包括检测用户设备处的显示器改变。在一些示例中，检测用户设备处的显示器改变包括检测用户设备的显示器方向的改变。在一些示例中，检测用户设备处的显示器改变包括检测从用户设备到另一显示器设备的传输。在一些示例中，响应于检测到用户设备处的显示器改变，该方法还包括从显示器改变中检测终端显示器的尺寸，应用基于约束的自适应GUI来为终端显示器创建与检测到的终端显示器的尺寸相匹配的终端显示器GUI，以及向终端显示器提供终端显示器GUI。

在一些示例中，该方法包括识别嵌套在子视图内的、静态GUI设计的孙视图，以及基于孙视图与子视图边界的空间关系，将一个或多个约束应用于孙视图。在一些示例中，基于孙视图与子视图边界的空间关系将一个或多个约束应用于孙视图包括确定孙视图的一个或多个边缘是否与子视图的一个或多个边缘重叠，以及当孙视图的一个或多个边缘与子视图的一个或多个边缘之间存在重叠时，在孙视图的一个或多个边缘和子视图的一个或多个边缘之间创建约束。在一些示例中，基于孙视图与子视图边界的空间关系将一个或多个约束应用于孙视图包括确定孙视图的中心是否等于子视图的中心，以及当孙视图的中心等于子视图的中心时，在孙视图的中心和子视图的中心之间创建约束。

在一些示例中，该方法包括基于作为给定视图的约束的当前状态的约束掩码来确定是否针对给定轴指定了根视图的布局。

在一些示例中，子视图和作为子视图的邻居的附加视图各自是多个子视图中的一个子视图，并且该方法还包括识别未被完全约束的多个子视图中的每个附加视图，以及对于未被完全约束的多个子视图当中的每个附加子视图，基于子视图与根视图边界的空间关系，将一个或多个约束应用于附加子视图，在将一个或多个约束应用于附加子视图之后，确定附加子视图是否被完全约束，以及响应于确定附加子视图未被完全约束，基于附加子视图和作为静态GUI设计中附加子视图的邻居的一个或多个其他附加视图之间的空间距离，将一个或多个附加约束应用于附加子视图，其中以不同于静态GUI设计的尺寸的一个或多个尺寸生成基于约束的自适应GUI还包括基于应用于每个附加子视图的一个或多个约束中的每一个和应用于每个附加子视图的一个或多个附加约束中的每一个生成基于约束的自适应GUI。

在一些示例中，基于子视图与根视图边界的空间关系将一个或多个约束应用于子视图包括，对于根视图的每个轴和子视图的对应轴：确定子视图的边缘是否与根视图的边缘重叠，以及响应于确定子视图的边缘与根视图的边缘重叠，在子视图的边缘和根视图的边缘之间针对该轴创建约束。

一般地，本说明书中描述的主题的另一创新方面可以体现在用于从静态图形用户界面(GUI)设计生成基于约束的自适应GUI的系统中，该系统包括：数据处理装置和与数据处理装置进行数据通信的存储器存储装置，该存储器存储装置存储可由数据处理装置执行的指令，并且基于这种执行，使得数据处理装置执行操作。操作包括获得包括多个视图的静态GUI设计，其中每个视图是静态GUI设计的元素，识别静态GUI设计的根视图，识别静态GUI设计的子视图，其中子视图嵌套在根视图内，基于子视图与根视图边界的空间关系，将一个或多个约束应用于子视图，在将一个或多个约束应用于子视图之后，确定子视图未被完全约束，响应于确定子视图未被完全约束，基于子视图和作为静态GUI设计中子视图的邻居的附加视图之间的空间距离，将一个或多个附加约束应用于子视图，以及基于一个或多个约束和一个或多个附加约束，以不同于静态GUI设计的尺寸的一个或多个尺寸生成基于约束的自适应GUI。

一般地，本说明书中描述的主题的另一创新方面可以体现在编码有计算机程序的非暂时性计算机存储介质中，该计算机程序包括指令，当由数据处理装置执行时，该指令使得数据处理装置执行操作。操作包括获得包括多个视图的静态GUI设计，其中每个视图是静态GUI设计的元素，识别静态GUI设计的根视图，识别静态GUI设计的子视图，其中子视图嵌套在根视图内，基于子视图与根视图边界的空间关系，将一个或多个约束应用于子视图，在将一个或多个约束应用于子视图之后，确定子视图未被完全约束，响应于确定子视图未被完全约束，基于子视图和作为静态GUI设计中子视图的邻居的附加视图之间的空间距离，将一个或多个附加约束应用于子视图，以及基于一个或多个约束和一个或多个附加约束，以不同于静态GUI设计的尺寸的一个或多个尺寸生成基于约束的自适应GUI。

该方面的其他实施例包括被配置为执行编码在计算机存储设备上的方法的动作的对应的系统、装置和计算机程序。

可以实施本文档中描述的主题的特定实施例，以便实现一个或多个以下优点。在创建移动app时，期望流线化将设计制品(artifact)转化成可被快速配置为几个不同显示器尺寸的工作app的过程，而不需要设计者为多个不同的显示器尺寸分别创建多个不同的UI设计，因为创建多个不同UI设计的手动过程延迟了不同GUI的部署，并且是一个以前不能被自动化的自然主观过程，因为没有一组规则来指导多个不同UI的创建。

通过使用自动化布局约束系统基于一组试探法创建默认布局约束，相关联的数据结构和算法可以从静态设计制品自动生成基于约束的自适应GUI。也就是说，系统可以结合静态设计制品利用一组规则来确定当创建不同尺寸和/或纵横比的UI时各种不同的UI元素相对于其他UI元素将如何出现，并且自动指定将为不同尺寸和/或纵横比的UI提供适当的UI设计的约束。布局约束系统能够为任意数量的屏幕尺寸操作和创建布局约束，减少所需的大量人工输入，减少在各种不同的呈现环境中实施UI所需的时间量，并且不需要人类设计者的主观分析。使用本文描述的方法，静态设计制品或用户界面最终可以响应于静态设计制品或用户界面被提供在其之上的显示器而制作。

本说明书中描述的主题的一个或多个实施例的细节在附图和以下描述中阐述。从说明书、附图和权利要求书中，主题的其他特征、方面和优点将变得显而易见。

附图说明

图1是示出示例图形用户界面(GUI)的图。

图2A-2C是示出与两个屏幕边缘相交的子视图的示例屏幕快照图。

图3A-3C是示出与两个轴的边缘相交的子视图的附加示例屏幕快照图。

图4A-4C是示出关于屏幕居中的子视图的附加示例屏幕快照图。

图5A-5C是示出在父视图或组内居中的子视图的附加示例屏幕快照图。

图6A-6C、7A-7C、8A-8C和9A-9C是示出在不同位置处和以不同显示器尺寸的子视图的附加示例屏幕快照图。

图10是示出子视图和孙视图的约束指示符的附加示例屏幕快照图。

图11是用于从静态GUI设计生成基于约束的自适应GUI的示例过程的流程图。

图12是用于基于最低权重的图形边缘生成布局图形并将约束应用于子视图的示例过程的流程图。

图13A-13D是示出轴的可用布局属性的示例框图。

图14A-14B是示出针对轴的示例布局图形边缘的示例权重计算的示例框图。

图15是用于将基于约束的自适应GUI应用于用户设备上检测到的显示器改变的示例过程的流程图。

图16是示例计算系统的框图。

不同附图中相似的附图标记和名称表示相似的元素。

具体实施方式

一般地，本文描述的系统和技术可以从静态设计制品或“未被约束的”静态GUI自动生成基于约束的自适应GUI。如在本文档中所使用的，短语“未被约束的静态GUI”是指不将子视图的位置约束到父视图或根视图的边界框或其他边界的GUI。如贯穿本文档所使用的，视图是用户界面中的元素，由可以渲染在屏幕上的矩形定义。在一些实施方式中，每个视图可以由可以渲染在屏幕上的矩形(或另一几何形状)定义。子视图是嵌套在另一视图(例如，父视图)内的视图。

如下文更详细描述的，约束可以以分层方式应用于视图，使得父视图在子视图之前被评估，并且放置在每个父视图上的约束可以被该父视图的每个子视图继承。约束可以继续应用于每个视图，直到该视图被完全约束。当GUI的视图已经被完全约束时，这些约束可以用于创建各种不同尺寸和/或纵横比的对应GUI，而不必为每个不同的对应GUI创建单独的设计。因此，GUI可以被更有效地、并且根据从初始静态设计制品中导出的默认约束集自动创建。

一般地，基于约束的自适应GUI的创建将从相对于GUI的根视图的视图的评估开始。例如，根视图的子视图(例如，嵌套在根视图内的子视图)将被识别，并且基于子视图的边缘到根视图的边缘之间的空间关系和/或子视图的中心到根视图的中心之间的空间关系，约束可以被应用于所识别的子视图。

如下文更详细描述的，在评估子视图相对于根视图的边缘和中心之后，将导致完全约束的子视图的附加约束的可能组合可以在布局图形中表示，并且最小生成树分析(或一些其他图形分析)可以用于选择将应用于子视图的附加约束的组合，以创建完全约束的子视图。对于更低级别的子视图(例如，嵌套在已经评估的子视图内的子视图，诸如根视图的孙视图)，该评估过程可以迭代地继续，直到GUI中的所有视图(或指定数量或部分的视图)被完全约束。约束然后可以用来生成不同尺寸和/或纵横比的GUI。

图1是示出电子设备104的示例显示器102中的示例图形用户界面(GUI)的图。GUI106包括嵌套在电子设备104的显示器102中的父视图内的多个子视图(例如，110、120、130)。电子设备104可以包括一个或多个定位用户输入组件(图1中未示出)，诸如触摸屏、触控板、鼠标或另一适当的用户输入组件。电子设备104可以包括例如计算使能的蜂窝电话、平板计算机、计算使能的手表或其他计算使能的可穿戴设备、笔记本计算机、台式计算机、游戏控制台、遥控器、网络设备、服务器计算机、家庭自动化控制器、汽车显示器接口、计算使能的医疗设备、辅助设备(例如，个人数字助理和/或智能扬声器)或具有计算能力的另一设备(例如，包括至少一个处理器)。

电子设备104经由显示器102向用户呈现GUI 106。一般地，GUI 106的设计始于在其上布置其他用户界面元素的画布的创建、选择和/或指定。出于本示例的目的，假设GUI106整体呈现在显示器102内。这样，在其上呈现GUI 106的画布(例如，由显示器边缘界定的矩形)可以被认为是GUI 106的整体视图。GUI 106还包括当前显示在显示器102中的用户界面元素。这些用户界面元素可以被指定为一组其他视图，诸如视图110、120、130。对于该示例，视图110、120是窗口视图，视图130是按钮视图。在一些示例中，视图130包括输入组件，其中与输入组件的用户交互指示用户输入。

一般地，视图本质上被认为是分层的，因此嵌套在其他视图内的视图被认为是子视图嵌套在其内的视图的子视图。例如，在本示例中，视图110、120、130嵌套在根视图内，并且因此被认为是根视图的子视图，而根视图被认为是子视图110、120、130的父视图。视图112也是按钮视图，并且被认为是视图110的子视图，视图110又是根视图的子视图。因此，在该示例中，视图112被认为是根视图的孙视图，并且视图110被认为是视图112的父视图。此外，视图120包含视图122、124，这使得这些视图122、124是视图120的子视图，并且是根视图的孙视图，因此根视图是视图122、124的祖视图，并且视图120是视图122、124的父视图。

在一些示例中，视图120、122、124中的一些可操作来向用户提供内容，并且其他视图112、130可操作来接收来自用户的输入。可选地，至少一些视图110可操作来提供内容和接收输入两者。

设计者通常根据静态GUI规范来创建GUI的布局，因为它涉及显示器102的特定尺寸。此外，设计者选择与各种元素的尺寸和位置相关的特定静态值。因此，尽管电子设备104可以是在本文中讨论的任何设备，但是在不必由软件工程师根据布局约束来分解该设计的情况下，该设计不能被自动转化到另一设备的对应显示器。将设计制品转化成软件实现的过程是繁重而耗时的，并且经常导致GUI的设计与其代码实现之间的保真度大大降低。一般地，设计者没有时间针对所有显示器屏幕尺寸和方向进行设计，通常会导引一两种尺寸成为焦点。这导致耗时的跨学科迭代，难以满足规范。本文所述的过程使用一组试探法、相关联的数据结构和算法，这些试探法、相关联的数据结构和算法可以通过提取包含在设计制品中的布局信息并计算一个布局约束集来从单个静态设计制品自动生成基于约束的自适应GUI，以在一系列可能的显示器尺寸内表达预期的设计。

图2-10是示出基于元素在GUI中所处的位置的不同布局约束示例的示例屏幕快照图。参考图2-10的以下讨论将讨论根据GUI设计中视图的空间特征(例如，位置和/或方向)来约束视图的各种方式。然后，图11和12将讨论可用于使用默认约束集(例如，单个约束集)来创建能够在各种尺寸的显示器上呈现的动态GUI的方法。然后，图13和14将用针对图形边缘的、用以确定默认约束的示例权重计算来讨论可以与每个布局轴相关联的各种约束。如同本文讨论的其他示例，在给定方面，所描述的特征可以单独和/或组合使用，或者根本不使用。

图2A-2C是示出与两个屏幕边缘相交的子视图202的示例屏幕快照图210、220和230。在这些示例中，每个屏幕快照图都示出以不同显示器尺寸呈现的GUI。出于本示例的目的，假设图2A表示来自开发者的原始静态GUI设计，其中视图202是根视图204的子视图。在该示例中，子视图202位于根视图204的上水平边缘，并且与根视图204的两个屏幕边缘相交。给定子视图202的空间方向(即，子视图202沿根视图的上水平轴的位置，以及子视图与两个屏幕边缘相交的事实)，要求子视图202位于根视图204的上水平轴并要求子视图202与两个屏幕边缘相交的布局约束将导致子视图202呈现在GUI的顶部并延伸到显示器的两个边缘，而与显示器的尺寸规格(dimension)无关。然而，如图2B和2C所示，在不存在另外指定的一些约束或指令的情况下，子视图将继续以固定高度(例如，在垂直轴上)呈现。例如，如图2B所示，呈现GUI的显示器相对于图2A具有横向方向，并且子视图202以与图2A中相同的固定高度呈现，但由于它与横向方向上具有更大距离的两个屏幕边缘相交，因此沿水平轴的宽度更大。同时，图2C的显示器类似于图2A的纵向方向，但是相对于图2A具有更大的显示器。在该示例中，如图2C所示，子视图202以与图2A中相同的固定高度呈现，但由于比图2A更大的屏幕尺寸，沿水平轴的宽度更大以与两个屏幕边缘相交。

图3A-3C是示出与两个轴(例如，X轴和Y轴)的边缘相交的子视图302的示例屏幕快照图310、320和330。在这些示例中，每个屏幕快照图都示出以不同显示器尺寸呈现的GUI。出于本示例的目的，假设图3A表示来自开发者的原始静态GUI设计，其中，作为根视图304的子视图的视图302与根视图304的垂直轴和水平轴(例如，屏幕边缘)相交。在该示例中，子视图302不与根视图304(例如，屏幕)的两个垂直边缘相交，因此上面参考图2A-2C讨论的约束不会导致子视图302在不同尺寸/纵横比的显示器中的一致呈现。相反，在该示例中，子视图具有定义的高度和宽度，该高度和宽度可以在各种不同尺寸/纵横比的显示器中保持，同时确保子视图302与根视图的垂直轴和水平轴两者相交(例如，确保子视图302位于显示器的左上角)。在一些实施方式中，该示例中的布局约束可以指定子视图302需要与根视图304的左垂直边缘和根视图304的上水平边缘相交，同时保持子视图302的尺寸规格。该约束将确保子视图302呈现在显示器的左上角，并且具有相同的尺寸，而与呈现GUI的显示器的尺寸/纵横比无关。例如，如图3B所示，呈现GUI的显示器相对于图3A具有横向方向，并且子视图302以与图3A中相同的固定高度和固定宽度呈现，因此即使沿着水平轴的距离是更大的宽度，子视图302也被约束在与垂直和水平轴相交的位置，并且显示在根视图304的左上角。同时，图3C的显示器类似于图3A的纵向方向，但是相对于图3A具有更大的显示器。在该示例中，如图3C所示，子视图302也以与图3A和3B中相同的固定高度和固定宽度呈现，并且因此被约束在与垂直和水平轴相交的类似位置，并且显示在根视图的左上角。

图4A-4C是示出相对于根视图404处于居中位置的子视图402的示例屏幕快照图410、420和430。在这些示例中，每个屏幕快照图都示出以不同显示器尺寸呈现的GUI。出于本示例的目的，假设图4A表示来自开发者的原始静态GUI设计，其中，作为根视图404的子视图的视图402以定义的高度和宽度关于根视图404的垂直轴和水平轴居中(例如，关于屏幕边缘居中)。

在该示例中，子视图402不与根视图404(例如，屏幕)的边缘相交，因此上面参考图2A-2C讨论的约束不会导致子视图402在不同尺寸/纵横比的显示器中的一致呈现。相反，在该示例中，类似于图3A-3C，子视图402具有定义的高度和宽度，该高度和宽度可以在各种不同尺寸/纵横比的显示器中保持，同时确保子视图402关于根视图404的垂直和水平轴两者居中(例如，确保子视图402位于显示器的中心)。

在一些实施方式中，该示例中的布局约束可以指定子视图402需要以根视图404的垂直边缘和根视图404的水平边缘两者居中，同时保持子视图402的尺寸规格。该约束将确保子视图402呈现在显示器的中心，并且具有相同的尺寸，而与呈现GUI的显示器的尺寸/纵横比无关。例如，如图4B所示，呈现GUI的显示器相对于图4A具有横向方向，并且子视图402以与图4A中相同的固定高度和固定宽度呈现，因此即使沿水平轴和垂直轴的距离不同，子视图402也被约束在中心位置并显示在根视图404的中心。同时，图4C的显示器类似于图4A的纵向方向，但是相对于图4A具有更大的显示器。在该示例中，如图4C所示，子视图402也以与图4A和4B中相同的固定高度和固定宽度呈现，并且因此被约束到垂直轴和水平轴的类似居中位置，并且显示在根视图404的中心。

在一些实施方式中，该示例中的布局约束可以指定子视图402将保持相同的纵横比并且关于垂直和水平轴居中，但是当显示器尺寸关于水平和垂直轴增大或减小时，子视图402的尺寸将以相同的比率扩展或收缩。例如，如果该实施方式被应用于在垂直轴和水平轴两者上都大150％的显示器，则子视图402将在每个轴上增大150％，这将仍然保持居中位置，但是具有不同的尺寸。

图5A-5C是示出相对于父视图504和根视图506处于居中位置的子视图502的示例屏幕快照图510、520、530。在这些示例中，每个屏幕快照图都示出以不同显示器尺寸呈现的GUI。出于本示例的目的，假设图5A表示来自开发者的原始静态GUI设计，其中，作为视图504的子视图的视图502以定义的高度和宽度关于父视图504和根视图506的垂直轴和水平轴居中(例如，关于屏幕边缘居中)。

在该示例中，子视图502不与父视图504的边缘相交，因此上面参考图2A-2C讨论的约束不会导致子视图502在不同尺寸/纵横比的显示器中的一致呈现。相反，在该示例中，类似于图3A-3C和图4A-4C，子视图502具有定义的高度和宽度，该高度和宽度可以在各种不同的尺寸/纵横比的显示器中保持，同时确保子视图502关于父视图504的垂直和水平轴两者居中(例如，确保子视图502位于组或父的中心)。在一些实施方式中，该示例中的布局约束可以指定子视图502需要以父视图504的垂直轴和父视图504的水平轴两者居中，同时保持子视图502的尺寸规格。

该约束将确保子视图502呈现在父视图504的中心，并且具有相同的尺寸，而与呈现GUI的显示器的尺寸/纵横比无关。例如，如图5B所示，呈现GUI的显示器相对于图5A具有横向方向，并且子视图502以与图5A中相同的固定高度和固定宽度呈现，在父视图504内居中，因此即使在根视图506中沿水平轴和垂直轴的距离不同，子视图502也被约束在中心位置并显示在父视图504的中心。同时，图5C的显示器类似于图5A的纵向方向，但是相对于图5A具有更大的显示器。在该示例中，如图5C所示，子视图502也以与图5A和5B中相同的固定高度和固定宽度呈现，并且因此被约束到垂直轴和水平轴的类似居中位置，并且显示在父视图504的中心。

如图5A-5C所示，类似于图4A-4C，子视图504居中到根视图506(例如，居中到屏幕)；然而，在一些实施方式中，父视图，即视图504，可以被约束到角落，如图3所示，或者如果它碰巧与沿特定轴的两个屏幕边缘相交，则可以沿该轴调整尺寸，如图2所示。在任一这些示例中，视图502将仍以固定高度和宽度被约束在视图504的中心，但是不一定关于根视图506居中(例如，关于屏幕居中)。

图6A-6C是示出不与水平轴或垂直轴相交、并且不关于根视图604居中或在父视图或组内居中的子视图602的示例屏幕快照图610、620和630。在这些示例中，每个屏幕快照图都示出以不同显示器尺寸呈现的GUI。出于本示例的目的，假设图6A表示来自开发者的原始静态GUI设计，其中，作为根视图604的子视图的视图602不与根视图604的垂直轴和水平轴(例如，屏幕边缘)中的任何一个相交，并且不在根视图604内居中。

在该示例中，子视图602具有定义的高度和宽度，该高度和宽度可以在各种不同尺寸/纵横比的显示器中保持。在一些实施方式中，该示例中的布局约束可以指定子视图602需要与最靠近的水平轴和最靠近的垂直轴相距设定的距离，同时保持子视图602的尺寸规格。如图6A所示，每个图可以被可视化为分成四个不同的象限。在该示例中，子视图602更靠近左上象限，因此布局约束将利用距左垂直轴和上水平轴的距离。该约束将确保子视图602呈现在显示器的左上象限中，并且具有相同的尺寸，而与呈现GUI的显示器的尺寸/纵横比无关。

例如，如图6B所示，呈现GUI的显示器相对于图6A具有横向方向，并且子视图602以与图6A中相同的固定高度和固定宽度呈现，因此即使沿水平轴的距离是更大的宽度，子视图602被约束到与根视图604的左垂直轴和上水平轴相距相同固定距离的位置，但是由于显示器的方向的改变，不显示在左上象限中。同时，图6C的显示器类似于图6A的纵向方向，但是相对于图6A具有更大的显示器。在该示例中，如图6C所示，子视图602也以与图6A和6B中相同的固定高度和固定宽度呈现，并且因此被约束在与根视图604的左上象限中的左垂直轴和上水平轴相距相同固定距离的类似位置。

如所示出的，当将该约束应用于图6B的显示器尺寸时，视图602现在出现为与下水平轴相交。在一些实施方式中，设计者可以具有在系统中可用的动作来确认该特定布局约束对于特定屏幕尺寸是否可接受或者设计者是否选择覆盖所应用的默认约束，并且以不同的方式约束视图602，或者可能具有调整尺寸的选项。在另外的实施方式中，当布局约束被应用于不同的显示器选项并且子视图现在与之前它们不相交的父视图的轴相交时，以下操作可以在创建默认约束集的整个过程中实施：或者自动将该约束标记为待由设计者手动解决的潜在问题，或者移动到不同的布局约束。本文进一步讨论了该示例实施方式以及用于以分层方式创建默认布局约束集的其他示例，以解决子视图没有被显示为设计者对初始静态设计制品所预期的那样的这些潜在问题。

图7A-7C、8A-8C和9A-9C是示例屏幕快照图710、720、730、810、820、830、910、920和930，示出了子视图702、802或902，这些子视图不与水平轴或垂直轴相交，并且不关于根视图704、804或904居中或者不在父视图或组内居中。在这些示例中，类似于以上对图6A-6C的讨论，每个屏幕快照图都示出以不同显示器尺寸呈现的GUI。出于本示例的目的，假设图7A、8A和9A中所示的示例表示来自开发者的原始静态GUI设计，其中视图702、802、902(每个视图分别是根视图704、804、904的子视图)不与相应根视图704、804、904的垂直轴和水平轴(例如，屏幕边缘)中的任何一个相交，并且不在相应根视图704、804、904内居中。在这些示例中，每个子视图702、802、902具有定义的高度和宽度，该高度和宽度可以在各种不同尺寸/纵横比的显示器中保持。

在一些实施方式中，这些示例中的布局约束可以指定子视图702、802、902需要与最靠近的水平轴和最靠近的垂直轴相距设定的距离，同时保持相应子视图702、802、902的尺寸规格。如图7A、8A和9A所示，每个图可以被可视化为分成四个不同的象限。例如，在图7A中，子视图702更靠近右上象限，因此布局约束将利用距右垂直轴和上水平轴的距离。该约束将确保子视图602呈现在显示器的左上象限中，并且具有相同的尺寸，而与呈现GUI的显示器的尺寸/纵横比无关。

例如，对于图8A，子视图802更靠近左下象限，因此布局约束将利用距左垂直轴和下水平轴的距离。该约束将确保子视图802呈现在显示器的左下象限中，并且具有相同的尺寸，而与呈现GUI的显示器的尺寸/纵横比无关。例如，对于图9A，子视图902更靠近右下象限，因此布局约束将利用距右垂直轴和下水平轴的距离。该约束将确保子视图902呈现在显示器的右下象限，并且具有相同的尺寸，而与呈现GUI的显示器的尺寸/纵横比无关。

对于不同的显示器尺寸，例如，如图7B、8B和9B所示，呈现GUI的显示器相对于图7A、8A和9A具有横向方向，并且相应的子视图702、802和902分别以与图7A、8A和9A中相同的固定高度和固定宽度呈现，因此即使沿水平轴的距离是更大的宽度，子视图702、802和902被约束到与它们相应的根视图704、804和904的最靠近垂直轴和最靠近水平轴相距相同固定距离的位置。如以上结合图6B所讨论的，随着图7B、8B和9B相对于图7A、8A和9A的显示器的不同方向，子视图702、802和902关于象限的位置出现类似的改变。例如，子视图702显示在图7A的右上象限和图7B的右下象限；子视图802显示在图8A的左下象限和图8B的左上象限；并且子视图902显示在图9A的右下象限和图9B的右上象限。同时，图7C、8C和9C的显示器分别处于如图7A、8A和9A的纵向方向，但是各自相对于图7A、8A和9A具有更大的显示器。在这些示例中，如图7C、8C和9C所示，子视图702、802和902也分别以与图7A、8A和9A中相同的固定高度和固定宽度呈现，并且被约束到与相应根视图704、804和904的相同的相应象限中的垂直轴和水平轴相距相同固定距离的类似位置。

在未示出的其他实施方式中，在应用布局约束之后，子视图可能足够大，以至于它将延伸到根视图之外，并且因此被从显示器上的视图中切断或者延伸到父视图之外。如以上针对图6B所讨论的，在一些实施方式中，设计者可以具有在系统中可用的动作来确认该特定布局约束对于特定屏幕尺寸是否可接受或者设计者是否选择覆盖所应用的默认约束，并且以不同方式约束视图，或者可能具有调整尺寸的选项。在另外的实施方式中，当布局约束被应用于不同的显示器选项并且子视图现在与之前它们不相交的父视图的轴相交时，以下操作可以在创建默认约束集的整个过程中实施：或者自动将该约束标记为待由设计者手动解决的潜在问题，或者移动到不同的布局约束。本文进一步讨论了该示例实施方式以及用于以分层方式创建默认布局约束集的其他示例，以解决子视图没有被显示为设计者对初始静态设计制品所预期的那样的这些潜在问题。

图10是示出图1的电子设备104的GUI 106的示例屏幕快照图1000，具有用于根视图1004的约束指示符1011、1012、1013、1014、1015、1021、1022、1023、1024、1025、1031、1032和1033。约束指示符示出为双箭头线或用于居中视图的虚线。具体地，屏幕快照图1000示出了用于每个视图(例如，根视图1004的每个子视图和孙视图)(诸如视图110、112、120、122、124和130)的约束指示符，它们或者对应于每个相应视图的高度或宽度，或者约束指示符(例如，约束指示符1015、1033)可以示出视图关于父视图的视图居中。例如，约束指示符1011对应于视图110的宽度，并且约束指示符1012对应于视图110的高度。类似地，约束指示符1021对应于视图120的宽度，并且约束指示符1022对应于视图120的高度。

根据一些实施方式，默认布局约束可以基于相邻的子视图。例如，屏幕快照图1000示出了两个相邻视图110和120之间的约束指示符1025，以示出关于相邻子视图的约束。默认布局约束然后可以确定视图120可以是关于相邻视图110的固定高度，而不是距每个轴的固定距离。

在示例中，相邻视图110、120可以以某种方式关联或链接。例如，相邻视图110或120中的一个可以被配置为提供内容，而另一个相邻视图110或120包括与内容相关联的用户输入组件。在另一示例中，相邻视图110、120可以被配置为提供链接的或对应的内容，这可以受益于以一致的或以其他方式定义的方式显示。在至少一些这样的示例中，基于相邻子视图的默认布局约束的上述使用可以潜在地改善在一系列GUI或显示器尺寸上提供这样的关联或链接视图110、120。

对图2-10中示例屏幕快照图的前述讨论讨论了可以应用于每个特定示例静态GUI设计的默认布局约束。根据一些示例，对于如何使用单个约束集可能有断点或限制，但是每个约束集都可以用于为不同尺寸的屏幕创建不同的GUI布局。

图11是用于从静态GUI设计生成基于约束的自适应GUI的示例过程1100的流程图。如本文进一步描述的，过程1100的操作可以例如由包括一个或多个数据处理装置的系统(诸如图16的计算机系统1600)来实施。过程1100也可以由存储在计算机存储介质上的指令来实施，其中由包括数据处理装置的系统执行指令使得数据处理装置执行过程1100的操作。

获得包括多个视图的静态GUI设计(1202)，诸如图1所示。在一些实施方式中，每个视图都是静态GUI设计的元素。例如，app开发者可以使用设计工具(例如，Sketch等)为一个尺寸的显示器设计具有几个元素的GUI，并且诸如图16的计算机系统1600的计算系统将从开发者获得静态GUI设计。

识别静态GUI设计的根视图(1104)。例如，根视图可以是呈现GUI的画布，如本文针对图1所述。

识别静态GUI设计的子视图(1106)。在一些实施方式中，子视图嵌套在根视图内。例如，视图110、120和130都是用户面部元素，并且是根视图的子视图，其中，如图1中假设的，GUI 106整体呈现在显示器102内，因此GUI 106示出了根视图。

基于子视图与根视图边界的空间关系，将一个或多个约束应用于子视图(1108)。例如，如本文针对图3A的子视图302所讨论的，利用与屏幕边缘的相交，可以根据固定高度和固定宽度创建到屏幕边缘的约束，当应用于自适应GUI时，子视图302将保持相同的高度和宽度，并且被放置在屏幕边缘的相交点的相同角落，例如，如图3B和3C所示。

在一些实施方式中，对子视图应用一个或多个约束包括确定子视图的边缘是否与根视图的边缘重叠。响应于确定子视图的边缘与根视图的边缘重叠，在子视图的边缘和根视图的边缘之间针对该轴创建约束。例如，如本文针对图2A的子视图202所讨论的，利用与屏幕边缘的相交并在水平轴上重叠，可以以固定的高度创建到屏幕水平轴的约束，即，当应用于自适应GUI时，子视图202将保持相同的高度，并且沿水平轴放置并在该轴上重叠屏幕边缘，例如，如图2B和2C所示。

在将一个或多个约束应用于子视图之后，确定子视图是否被完全约束(1110)。响应于确定子视图未被完全约束，基于子视图和作为静态GUI设计中子视图的邻居的附加视图之间的空间距离，将一个或多个附加约束应用于子视图(1112)。例如，如本文针对图10B的视图110和120所讨论的，视图120比靠近上屏幕边缘更靠近视图110的边缘，因此约束指示符示出视图120被创建为被约束到距视图110的该距离，而不是距屏幕边缘。

基于一个或多个约束和一个或多个附加约束，以不同于静态GUI设计的尺寸的一个或多个尺寸生成基于约束的自适应GUI(1114)。例如，图10示出了可以从原始设计布局(例如，图1)创建的多个子视图和孙视图的约束指示符，以生成可以应用于不同尺寸屏幕的基于约束的自适应GUI。

过程1100还可以包括识别嵌套在子视图中的、静态GUI设计的孙视图，并且基于孙视图与子视图边界的空间关系，将一个或多个约束应用于孙视图。例如，图10示出了视图122和124，它们是关于根视图1004的孙视图。约束指示符1023和1024示出了视图122和124的组的示例约束，视图122和124是相应的父视图120的子视图，并且嵌套在相应的父视图120内。在一个示例中，基于孙视图与子视图边界的空间关系将一个或多个约束应用于孙视图可以包括确定孙视图的一个或多个边缘是否与子视图的一个或多个边缘重叠，以及当孙视图的一个或多个边缘与子视图的一个或多个边缘之间存在重叠时，在孙视图的一个或多个边缘与子视图的一个或多个边缘之间创建约束。

在另一示例中，基于孙视图与子视图边界的空间关系将一个或多个约束应用于孙视图可以包括确定孙视图的中心是否等于子视图的中心，并且当孙视图的中心等于子视图的中心时，在孙视图的中心和子视图的中心之间创建约束。例如，图5示出了视图502、关于视图504的子视图以及关于根视图506的孙视图。在该示例中，视图502被约束到父视图504的垂直轴和水平轴的居中位置，并且显示在父视图504的中心，例如，如图5B和5C所示。

过程1100还可以包括基于作为给定视图的约束的当前状态的约束掩码来确定是否针对给定轴指定了根视图的布局。例如，设计者可以配置每轴具有固定或灵活尺寸的视图，或者配置每边缘关于相邻视图有固定或灵活空间的配置，并使用约束掩码将它们保存为默认布局约束。过程1100还可以包括在应用过程1100来确定视图是否被完全约束之前，首先使用约束掩模来设置设计者预期的某些布局约束。

在一些实施方式中，过程1100的子视图和作为子视图邻居的附加视图各自是多个子视图中的一个子视图。例如，图1示出了根视图的多个子视图和孙视图。对于多个视图，过程1100还可以包括识别未被完全约束的多个子视图中的每个附加视图，并且对于未被完全约束的多个子视图当中的每个附加子视图，基于子视图与根视图边界的空间关系将一个或多个约束应用于附加子视图，在将一个或多个约束应用于附加子视图之后，确定附加子视图是否被完全约束，并且响应于确定附加子视图未被完全约束，基于附加子视图和作为静态GUI设计中附加子视图的邻居的一个或多个其他附加视图之间的空间距离，将一个或多个附加约束应用于附加子视图。此外，以不同于静态GUI设计的尺寸的一个或多个尺寸生成基于约束的自适应GUI还可以包括基于应用于每个附加子视图的一个或多个约束中的每一个以及应用于每个附加子视图的一个或多个附加约束中的每一个生成基于约束的自适应GUI(1114)。

在一些实施方式中，基于子视图与根视图边界的空间关系将一个或多个约束应用于子视图(1108)还可以包括，对于根视图的每个轴和子视图的对应轴，确定子视图的边缘是否与根视图的边缘重叠，并且响应于确定子视图的边缘与根视图的边缘重叠，在子视图边缘和根视图边缘之间针对该轴创建约束。

图12是用于基于最低权重的图形边缘生成布局图形并将约束应用于子视图的示例过程1200的流程图。过程1200可以是过程1100的一部分或延续。如本文进一步描述的，过程1200的操作可以例如由包括一个或多个数据处理装置的系统(诸如图16的计算机系统1600)来实施。过程1200也可以由存储在计算机存储介质上的指令来实施，其中由包括数据处理装置的系统执行指令使得数据处理装置执行过程1200的操作。

生成布局图形(1202)。在一些实施方式中，布局图形被生成为包括子视图的顶点和作为静态GUI设计中子视图的邻居的两个或更多个附加视图的两个或更多个附加顶点。将视图渲染到屏幕上需要每个视图具有一个其内容应该被渲染在其中的矩形。在不存在与每个视图相关联的显式框架的情况下，可以为所有适用的轴指定基于约束的布局。没有约束的视图不提供关于视图应该被渲染在屏幕上的位置的信息。如本文所讨论的，存在多种方式来约束轴。例如，如图13A-13D所示，存在可以指定针对给定轴的布局的固定属性的四种组合。

图13A-13D是示出针对轴的可用布局属性的示例框图1310、1320、1330和1340。根据一些实施方式，可以独立地生成针对每个布局轴的默认约束。对于每个轴，布局规范有两个组成部分：尺寸和位置。在一些实施方式中，针对轴的规范可以通过约束多个布局属性来实现，多个布局属性共同确定视图的尺寸和位置。根据一些实施方式，用于边缘的术语应该是轴不可知的，从而例如可以在上边缘和下边缘之间进行区分而不指定其在垂直轴上，并且可以定义边缘方向的字段(field)。例如，面向递减值的边缘具有递减方向，而面向递增值的边缘具有递增方向。在这些示例中，每个框图示出了可以指定针对给定轴的布局的固定属性的四种可能组合之一。例如，图13A示出了固定的尺寸和固定的递减边缘以及灵活的递增边缘。图13B示出了固定的尺寸和固定的递增边缘以及灵活的递减边缘。图13C示出了固定尺寸和具有灵活的递增和递减边缘的居中视图。例如，视图关于一个轴居中，但未被约束为关于其它轴居中。图13D示出了具有固定的递减和递增边缘的灵活尺寸。例如，在图2B中，视图202的尺寸关于图2A中的202的尺寸是灵活的，但在水平轴上被约束到固定边缘。

返回参考图12，过程1200继续，并且在布局图形内用图形边缘将子视图的顶点连接到两个或更多个附加视图的两个或更多个附加顶点(1204)。然后将相应的权重分配给图形边缘中的每一个，其中分配给每个图形边缘的权重基于子视图和通过图形边缘连接到子视图的附加顶点之间的空间距离(1206)。有多种方法计算带权边缘。图14A-14B示出了根据示例实施方式的两个这样的示例。

图14A-14B是示出对针对轴的示例布局图形边缘的示例权重计算的示例框图1410和1420。根据一些实施方式，可以通过对图形边缘中包括的每个源布局属性的最小约束常数的绝对值求和来对图形边缘赋予权重。最小约束常数可以计算为从源属性到视图的最近邻居(例如，父视图或同级视图)的适当目标属性的1维距离。例如，14A示出了对具有图13D的约束属性的视图的示例权重计算，图13D示出了具有固定的递减和递增边缘的灵活尺寸。在该示例中，针对图形边缘的权重计算由对视图的固定递减边缘(c1)(距离为100像素)的约束和对递增布局边缘(c2)的约束(距离为-100像素)组成。

对于该示例，权重计算可通过以下公式确定：

权重＝|c1|+|c2|＝|100|+|-100|＝200

为了比较，14B示出了对具有图13B的约束属性的视图的示例权重计算，图13B示出了具有固定的尺寸和固定的递增边缘以及灵活的递减边缘，其中权重计算是利用对视图的尺寸和递增布局边缘的约束针对同一顶点上的另一图形边缘的。在该示例中，针对图形边缘的权重计算由对视图的固定尺寸(c1)的约束(尺寸为128像素)和对递增布局边缘(c2)的约束(距离为-100像素)组成。对于该示例，权重计算可通过以下公式确定：

权重＝|c1|+|c2|＝|128|+|-100|＝228

返回参考图12，基于具有最低权重的图形边缘的附加顶点，将附加约束应用于子视图(1208)。例如，如以上针对图14A-B所讨论的，最低权重的图形边缘将是权重为200的框图1410，而不是更大的计算出的权重为228的框图1420。

根据一些实施方式，通过递归地将分层中的每个视图考虑为边缘带权的无向图，可以简化为给定视图及其子视图选择默认约束集。例如，从指定的根视图开始，为每个布局轴构建一个图形，其中视图的每个子视图被视为单个顶点。每个顶点的图形边缘(不同于布局边缘)表示固定的布局属性的所有可能组合，这些组合产生顶点所表示的视图在指定轴上的完全指定的布局。表示完全未被约束的视图的顶点具有三个或四个图形边缘，表示固定属性的三个或四个可能组合，这将产生如图13A-D所示的完整布局规范：固定的递减边缘和尺寸、固定的尺寸和递增边缘、固定的递减和递增边缘，以及固定的中心和尺寸(如果视图在其父视图中居中)。该示例方法尊重对视图的任何现有约束，因为图形边缘是针对包含现有约束的固定属性的组合创建的。例如，表示尺寸固定的视图的顶点只能有两个或三个图形边缘：固定的递减边缘、固定的递增边缘，以及固定的中心(如果视图在其父视图中居中)。

根据一些实施方式，应用默认约束的过程可以递归地应用于所提供的根视图的后代。例如，对于每个后代视图，可以在一系列布局路径中一次向一个轴应用约束，其中每个路径基于特定试探法应用约束。前两个路径可以将子视图约束到它们的父视图(例如，对齐)。第三布局路径可以构建默认约束图形并应用使每个子视图产生完整的布局规范的约束。在一些实施方式中，对给定根视图应用默认约束的过程可以包括，对于每个布局边缘方向，首先约束布局边缘与其父的布局边缘相交的子视图。其次，示例过程可以约束布局中心与其父的布局中心相交的子视图。然后可以构建根视图的默认约束图形。根据一些实施方式，默认约束图形可以通过首先使用Prim算法计算图形的最小生成树(minimum spanningtree，MST)来构建，其中MST可以表示用于根视图的子视图的默认约束的最优集合。然后，可以通过应用由包含在MST中的每个图形边缘表示的布局约束来构建默认约束图形。然后，可以递归地重复对给定根视图应用默认约束的过程，直到根视图的所有子视图都针对所有轴完全指定了布局。

图15是用于将基于约束的自适应GUI应用于用户设备上检测到的显示器改变的示例过程1500的流程图。过程1500可以是过程1100的一部分或延续。如本文进一步描述的，过程1500的操作可以例如由包括一个或多个数据处理装置的系统(诸如图16的计算机系统1600)来实施。过程1500也可以由存储在计算机存储介质上的指令来实施，其中由包括数据处理装置的系统执行指令使得数据处理装置执行过程1500的操作。

检测用户设备处的显示器改变(1502)。在一些实施方式中，检测显示器改变包括检测用户设备的显示器方向的改变。例如，如图2A所示，其中针对屏幕快照图210呈现GUI的显示器以纵向方向显示。检测用户设备的显示器方向的改变可以包括检测用户设备正被旋转90度到横向方向。例如，如图2B所示，呈现GUI的显示器相对于图2A具有横向方向。在一些实施方式中，检测显示器改变包括检测从用户设备到另一显示器设备的传输。例如，用户设备可以将在用户设备的显示器上示出的GUI传输到另一设备上(诸如在电视屏幕的显示器或另一设备的显示器上)的GUI，其中该另一设备可以具有与发送传输的用户设备不同的尺寸规格和纵横比。

响应于检测到显示器改变，过程1500继续，并且从显示器改变检测终端显示器的尺寸(1504)。在一些实施方式中，终端显示器(例如，GUI的新的或修改的显示器)的尺寸更大，并且具有不同的纵横比。例如，如果检测到的显示器改变是将用户设备的显示器传输到电视屏幕，则终端显示器的尺寸将是电视的显示器的尺寸和纵横比。在一些实施方式中，其中，检测用户设备上的显示器改变包括显示器方向的改变，检测终端显示器的尺寸将包括检测固定高度和固定宽度已经被切换。例如，将用户设备旋转90度，得到的高度和宽度测量值将被调换，其中原始的固定高度现在是固定宽度，反之亦然。

应用基于约束的自适应GUI来为终端显示器创建与终端显示器的尺寸相匹配的终端显示器GUI(1506)。例如，图10示出了可以从原始设计布局(例如，图1)创建的、多个子视图和孙视图的约束指示符，以生成可以应用于不同尺寸屏幕(诸如方向改变，或者到不同的显示器的传输)的基于约束的自适应GUI。

向终端显示器提供终端显示器GUI(1508)。例如，如果检测到的显示器改变是将用户设备的显示器传输到电视屏幕，则电视上显示的GUI将与用户设备上的显示器相适配。

以下是本文描述的一些实施方式的示例伪代码列表：

(A)需要顶层或根视图作为参数。

(B)从顶层视图开始：

(1)将子边缘约束到父边缘。

(a)对于每个布局轴，对于每个布局边缘方向，对于在该轴上布局未被完全指定的每个子，检查该边缘的子的值是否等于父的值：

(i)如果是，在子和父边缘之间创建约束。

(ii)如果不是，继续。

(2)将子中心约束到父中心。

(a)对于每个布局轴，对于在该轴上布局未被完全指定的每个子，检查子的中心是否等于父的中心：

(i)如果是，在子和父中心之间创建约束。

(ii)如果不是，继续。

(3)建立布局图形。

(a)对于每个布局轴，对于布局未被完全指定的每个子，将顶点添加到图形中，并且对于将为该子定义完全指定的布局的布局属性的每个潜在集合：

(i)计算到最靠近集合中每个子属性的相邻视图(父或同级)的距离。

(ii)为集合中的每个子属性创建权重等于到最近邻居的距离绝对值之和的图形边缘。

(iii)将带权边缘添加到顶点。

(4)计算布局图形的最小生成树。

(a)对于每个布局轴，当存在视图的布局未被完全指定的顶点时，选择具有最小总权重的顶点，并且对于顶点边缘中的每一个，检查边缘的权重是否小于顶点的当前最小总权重：

(i)如果是，更新当前顶点的当前最小权重。

(ii)如果不是，继续。

(5)使用布局图形创建默认约束。

(a)对于每个子/顶点，创建由具有最小权重的图形边缘表示的布局约束。

(C)对每个子视图重复，递归进行，直到顶层视图的所有后代都被考虑。

“视图”是指用户界面中的元素，由可以渲染在屏幕上的矩形定义。“子”是指嵌套在另一(父)视图中的视图。“布局轴”是指水平轴或垂直轴。“布局边缘方向”可能是递减或递增的。“布局属性”是指尺寸、中心以及递减的和递增的边缘。“属性值”是指特定视图的布局属性的数值位置。“完全指定的布局”是指在根据其视图的位置和尺寸可以在给定的布局轴上明确确定而不管显示该视图的尺寸的布局约束集。“布局图形”是指将视图及其子视图表示为无向边缘带权的图形的数据结构，其中图形中的每个顶点表示子视图，并且与顶点相关联的每个图形边缘表示为相关联的子视图定义完全指定的布局的一个或多个布局约束的集合。

图16是可用于执行上述操作的示例计算机系统1600的框图。系统1600包括处理器1610、存储器1620、存储设备1630和输入/输出设备1640。组件1610、1620、1630和1640中的每一个可以例如使用系统总线1650互连。处理器1610能够处理在系统1600内执行的指令。在一个实施方式中，处理器1610是单线程处理器。在另一实施方式中，处理器1610是多线程处理器。处理器1610能够处理存储在存储器1620或存储设备1630中的指令。

存储器1620存储系统1600内的信息。在一个实施方式中，存储器1620是计算机可读介质。在一个实施方式中，存储器1620是易失性存储器单元。在另一实施方式中，存储器1620是非易失性存储器单元。

存储设备1630能够为系统1600提供大容量存储。在一个实施方式中，存储设备1630是计算机可读介质。在各种不同的实施方式中，存储设备1630可以包括例如硬盘设备、光盘设备、由多个计算设备(例如，云存储设备)通过网络共享的存储设备或者一些其他大容量存储设备。

输入/输出设备1640为系统1600提供输入/输出操作。在一个实施方式中，输入/输出设备1640可以包括一个或多个网络接口设备，例如以太网卡、串行通信设备，例如和RS-232端口，和/或无线接口设备，例如和802.11网卡。在另一实施方式中，输入/输出设备可以包括驱动设备，其被配置为接收输入数据并将输出数据发送到其他输入/输出设备，例如键盘、打印机和显示器设备1660。然而，也可以使用其他实施方式，诸如移动计算设备、移动通信设备、机顶盒电视用户设备等。

尽管在图16中已经描述了示例处理系统，但是本说明书中描述的主题和功能操作的实施方式可以在其他类型的数字电子电路中实施，或者在计算机软件、固件或硬件中实施，包括本说明书中公开的结构及其结构等同物，或者在它们中的一个或多个的组合中实施。

电子文档(为简洁起见，将被简称为文档)不一定对应于文件。文档可以存储在保存其他文档的文件的一部分中，存储在专用于所讨论的文档的单个文件中，或者存储在多个协调文件中。

本说明书中描述的主题和操作的实施例可以在数字电子电路中实施，或者在计算机软件、固件或硬件中实施，包括本说明书中公开的结构及其结构等同物，或者在它们中的一个或多个的组合中实施。本说明书中描述的主题的实施例可以被实施为一个或多个计算机程序，即计算机程序指令的一个或多个模块，编码在计算机存储介质(或多个介质)上，用于由数据处理装置执行或控制数据处理装置的操作。替代地或附加地，程序指令可以被编码在人工生成的传播信号上，例如机器生成的电、光或电磁信号，该信号被生成以编码信息，用于传输到合适的接收器装置以由数据处理装置执行。计算机存储介质可以是或包括在计算机可读存储设备、计算机可读存储基底、随机或串行存取存储器阵列或设备、或它们中的一个或多个的组合中。此外，虽然计算机存储介质不是传播信号，但是计算机存储介质可以是编码在人工生成的传播信号中的计算机程序指令的源或目的地。计算机存储介质也可以是或包括在一个或多个单独的物理组件或介质(例如，多个CD、磁盘或其他存储设备)中。

本说明书中描述的操作可以被实施为由数据处理装置对存储在一个或多个计算机可读存储设备上或从其他源接收的数据执行的操作。

术语“数据处理装置”涵盖用于处理数据的所有类型的装置、设备和机器，举例来说，包括可编程处理器、计算机、片上系统、或前述中的多个或其组合。该装置可以包括专用逻辑电路，例如，FPGA(现场可编程门阵列)或ASIC(专用集成电路)。除了硬件之外，该装置还可以包括为所讨论的计算机程序创建执行环境的代码，例如，构成处理器固件、协议栈、数据库管理系统、操作系统、跨平台运行时环境、虚拟机或它们中的一个或多个的组合的代码。该装置和执行环境可以实现各种不同的计算模型基础设施，诸如网络服务、分布式计算和网格计算基础设施。

计算机程序(也称为程序、软件、软件应用、脚本或代码)可以以任何形式的编程语言编写，包括编译或解释语言、声明或过程语言，并且可以以任何形式部署，包括作为独立程序或作为模块、组件、子例程、对象或适合在计算环境中使用的其他单元。计算机程序可以但不需要对应于文件系统中的文件。程序可以存储在保存其他程序或数据的文件的一部分中(例如，存储在标记语言文档中的一个或多个脚本)，存储在专用于所讨论的程序的单个文件中，或者存储在多个协调文件(例如，存储一个或多个模块、子程序或部分代码的文件)中。计算机程序可以被部署为在一个计算机上或者在位于一个站点或跨多个站点分布并通过通信网络互连的多个计算机上执行。

本说明书中描述的过程和逻辑流程可以由执行一个或多个计算机程序以通过对输入数据进行操作并生成输出来执行动作的一个或多个可编程处理器执行。过程和逻辑流程也可以由专用逻辑电路来执行，并且装置也可以被实施为专用逻辑电路，例如，FPGA(现场可编程门阵列)或ASIC(专用集成电路)。

举例来说，适于执行计算机程序的处理器包括通用和专用微处理器两者。一般地，处理器将从只读存储器或随机存取存储器或两者接收指令和数据。计算机的基本元件是用于根据指令执行动作的处理器和用于存储指令和数据的一个或多个存储器设备。一般地，计算机还将包括一个或多个用于存储数据的大容量存储设备，例如磁盘、磁光盘或光盘，或者被可操作地耦合以从一个或多个用于存储数据的大容量存储设备接收数据或向其传送数据，或者上述两种情况。然而，计算机不需要这样的设备。此外，计算机可以嵌入到另一设备中，例如移动电话、个人数字助理(personal digital assistant，PDA)、移动音频或视频播放器、游戏控制台、全球定位系统(Global Positioning System，GPS)接收器或便携式存储设备(例如通用串行总线(universal serial bus，USB)闪存驱动器)，仅举几个示例。适于存储计算机程序指令和数据的设备包括所有形式的非易失性存储器、介质和存储器设备，举例来说，包括半导体存储器设备，例如，EPROM、EEPROM和闪存设备；磁盘，例如内部硬盘或可移动磁盘；磁光盘；和CD ROM以及DVD-ROM盘。处理器和存储器可以由专用逻辑电路来补充或结合到专用逻辑电路中。

为了提供与用户的交互，本说明书中描述的主题的实施例可以在计算机上实施，该计算机具有用于向用户显示信息的显示器设备(例如，CRT(cathode ray tube，阴极射线管)或LCD(liquid crystal display，液晶显示器))，以及键盘和用户可以通过其向计算机提供输入的定点设备(例如，鼠标或轨迹球)。也可以使用其他类型的设备来提供与用户的交互；例如，提供给用户的反馈可以是任何形式的感觉反馈，例如视觉反馈、听觉反馈或触觉反馈；并且可以以任何形式接收来自用户的输入，包括声音、语音或触觉输入。此外，计算机可以通过向用户使用的设备发送文档和从用户使用的设备接收文档来与用户交互；例如，通过响应于从网络浏览器接收的请求，向用户的用户设备上的网络浏览器发送网页。

本说明书中描述的主题的实施例可以在计算系统中实施，该计算系统包括后端组件(例如，作为数据服务器)，或者包括中间件组件(例如，应用服务器)，或者包括前端组件(例如，具有用户可以通过其与本说明书中描述的主题的实现进行交互的图形用户界面或网络浏览器的客户端计算机)，或者一个或多个这样的后端、中间件或前端组件的任意组合。系统的组件可以通过任何形式或介质的数字数据通信(例如，通信网络)相互连接。通信网络的示例包括局域网(local area network，“LAN”)和广域网(wide area network，“WAN”)、网络间(例如，互联网)和对等网络(例如，自组织对等网络)。

计算系统可以包括客户端和服务器。客户端和服务器通常彼此远离，并且通常通过通信网络进行交互。客户机和服务器的关系是通过在各自的计算机上运行的计算机程序产生的，并且彼此之间具有客户端-服务器关系。在一些实施例中，服务器向用户设备发送数据(例如，HTML页面)(例如，为了向与用户设备交互的用户显示数据和从与用户设备交互的用户接收用户输入)。可以在服务器处从用户设备接收在用户设备处生成的数据(例如，用户交互的结果)。

上面讨论的实施方式细节可能与特定代码相关，诸如特定的API和特定的示例程序，因此不需要出现在每个实施例中。本领域技术人员还将理解，在讨论细节时使用的程序标识符和一些其他术语是实施方式特定的，因此不需要与每个实施例相关。尽管如此，尽管它们不一定需要在这里呈现，但是提供这些细节是因为它们可以通过提供上下文来帮助一些读者和/或可以说明本文讨论的技术的许多可能的实施方式中的一些。

虽然本说明书包含许多具体的实施方式细节，但这些不应被解释为对任何发明或可能要求保护的范围的限制，而是对特定于特定发明的特定实施例的特征的描述。本说明书中在单独实施例的上下文中描述的某些特征也可以在单个实施例中组合实施。相反，在单个实施例的上下文中描述的各种特征也可以在多个实施例中单独或以任何合适的子组合来实施。此外，尽管在上文中特征可能被描述为以某些组合起作用，并且甚至最初也是这样要求保护的，但是在某些情况下，所要求保护的组合中的一个或多个特征可从该组合中删除，并且所要求保护的组合可针对子组合或子组合的变体。

类似地，尽管在附图中以特定顺序描绘了操作，但这不应被理解为要求以所示的特定顺序或连续顺序执行这些操作，或者要求执行所有示出的操作，来获得期望的结果。在某些情况下，多任务处理和并行处理可能是有利的。此外，上述实施例中的各种系统组件的分离不应理解为在所有实施例中都需要这种分离，并且应当理解，所描述的程序组件和系统通常可以在单个软件产品中集成在一起或者打包到多个软件产品中。

因此，已经描述了主题的特定实施例。其他实施例在所附权利要求的范围内。在一些情况下，权利要求中列举的动作可以以不同的顺序执行，并且仍然获得期望的结果。此外，附图中描绘的过程不一定需要所示的特定顺序或连续顺序来获得期望的结果。在某些实施方式中，多任务处理和并行处理可能是有利的。

Claims (25)

1.一种从静态图形用户界面GUI设计生成基于约束的自适应GUI的方法，所述方法包括：

获得包括多个视图的静态GUI设计，其中每个视图是所述静态GUI设计的元素；

识别所述静态GUI设计的根视图；

识别所述静态GUI设计的子视图，其中所述子视图嵌套在所述根视图内；

基于所述子视图与根视图边界的空间关系，将一个或多个约束应用于所述子视图；

在将所述一个或多个约束应用于所述子视图之后，确定所述子视图未被完全约束；

响应于确定所述子视图未被完全约束，基于所述子视图和作为所述静态GUI设计中所述子视图的邻居的附加视图之间的空间距离，将一个或多个附加约束应用于所述子视图；

生成导致所述子视图被完全约束的约束的多种不同组合；

基于约束的多种不同组合的图分析，在约束的多种不同组合中选择特定组合；以及

基于所述一个或多个约束和所述一个或多个附加约束，以不同于所述静态GUI设计的尺寸的一个或多个尺寸使用所述特定组合生成基于约束的自适应GUI。

2.根据权利要求1所述的方法，还包括：

生成布局图形，所述布局图形包括所述子视图的顶点和作为所述静态GUI设计中所述子视图的邻居的两个或更多个附加视图的两个或更多个附加顶点；

在所述布局图形内，用图形边缘将所述子视图的顶点连接到所述两个或更多个附加视图的两个或更多个附加顶点；

给所述图形边缘中的每一个图形边缘分配相应的权重，其中分配给每个图形边缘的权重基于所述子视图和通过所述图形边缘连接到所述子视图的附加顶点之间的空间距离；以及

基于具有最低权重的图形边缘的附加顶点，将附加约束应用于所述子视图。

3.根据权利要求1所述的方法，还包括检测用户设备处的显示器改变，其中检测用户设备处的显示器改变包括检测所述用户设备的显示器方向的改变或检测从所述用户设备到另一显示器设备的传输之一。

4.根据权利要求3所述的方法，其中，响应于检测到所述用户设备处的显示器改变，所述方法还包括：

从所述显示器改变中检测终端显示器的尺寸；

应用所述基于约束的自适应GUI来为所述终端显示器创建与检测到的所述终端显示器的尺寸相匹配的终端显示器GUI；以及

向所述终端显示器提供终端显示器GUI。

5.根据权利要求1所述的方法，还包括：

识别嵌套在所述子视图内的、静态GUI设计的孙视图；以及

基于所述孙视图与子视图边界的空间关系，将一个或多个约束应用于所述孙视图。

6.根据权利要求5所述的方法，其中，基于所述孙视图与子视图边界的空间关系将一个或多个约束应用于所述孙视图包括：

确定所述孙视图的一个或多个边缘是否与所述子视图的一个或多个边缘重叠；以及

当所述孙视图的一个或多个边缘和所述子视图的一个或多个边缘之间存在重叠时，在所述孙视图的一个或多个边缘和所述子视图的一个或多个边缘之间创建约束。

7.根据权利要求5所述的方法，其中，基于所述孙视图与子视图边界的空间关系将一个或多个约束应用于所述孙视图包括：

确定所述孙视图的中心是否等于所述子视图的中心；以及

当所述孙视图的中心等于所述子视图的中心时，在所述孙视图的中心和所述子视图的中心之间创建约束。

8.根据权利要求1所述的方法，还包括基于作为给定视图的约束的当前状态的约束掩码来确定是否针对给定轴指定了所述根视图的布局。

9.根据权利要求1所述的方法，其中，所述子视图和作为所述子视图的邻居的附加视图各自是多个子视图中的一个子视图，所述方法还包括：

识别未被完全约束的多个子视图中的每个附加视图；以及

对于未被完全约束的多个子视图当中的每个附加子视图：

基于所述子视图与根视图边界的空间关系，将一个或多个约束应用于所述附加子视图；

在将所述一个或多个约束应用于所述附加子视图之后，确定所述附加子视图是否被完全约束；以及

响应于确定所述附加子视图未被完全约束，基于所述附加子视图和作为所述静态GUI设计中所述附加子视图的邻居的一个或多个其他附加视图之间的空间距离，将一个或多个附加约束应用于所述附加子视图，其中：

以不同于所述静态GUI设计的尺寸的一个或多个尺寸生成所述基于约束的自适应GUI还包括基于应用于每个附加子视图的所述一个或多个约束中的每一个和应用于每个附加子视图的所述一个或多个附加约束中的每一个生成所述基于约束的自适应GUI。

10.根据权利要求1所述的方法，其中，基于所述子视图与根视图边界的空间关系将一个或多个约束应用于所述子视图包括，对于所述根视图的每个轴和所述子视图的对应轴：

确定所述子视图的边缘是否与所述根视图的边缘重叠；以及

响应于确定所述子视图的边缘与所述根视图的边缘重叠，在所述子视图的边缘和所述根视图的边缘之间针对所述根视图的该轴创建约束。

11.一种用于从静态图形用户界面GUI设计生成基于约束的自适应GUI的系统，所述系统包括：

数据处理装置，包括一个或多个处理器；和

与所述数据处理装置进行数据通信的存储器存储设备，所述存储器存储设备存储可由所述数据处理装置执行的指令，并且所述指令在进行这种执行时使得所述一个或多个处理器执行操作，所述操作包括：

获得包括多个视图的静态GUI设计，其中每个视图是所述静态GUI设计的元素；

识别所述静态GUI设计的根视图；

识别所述静态GUI设计的子视图，其中所述子视图嵌套在所述根视图内；

基于所述子视图与根视图边界的空间关系，将一个或多个约束应用于所述子视图；

在将所述一个或多个约束应用于所述子视图之后，确定所述子视图未被完全约束；

响应于确定所述子视图未被完全约束，基于所述子视图和作为所述静态GUI设计中所述子视图的邻居的附加视图之间的空间距离，将一个或多个附加约束应用于所述子视图；

生成导致所述子视图被完全约束的约束的多种不同组合；

基于约束的多种不同组合的图分析，在约束的多种不同组合中选择特定组合；以及

基于所述一个或多个约束和所述一个或多个附加约束，以不同于所述静态GUI设计的尺寸的一个或多个尺寸使用所述特定组合生成基于约束的自适应GUI。

12.根据权利要求11所述的系统，所述操作还包括：

生成布局图形，所述布局图形包括所述子视图的顶点和作为所述静态GUI设计中所述子视图的邻居的两个或更多个附加视图的两个或更多个附加顶点；

在所述布局图形内，用图形边缘将所述子视图的顶点连接到所述两个或更多个附加视图的两个或更多个附加顶点；

给所述图形边缘中的每一个图形边缘分配相应的权重，其中分配给每个图形边缘的权重基于所述子视图和通过所述图形边缘连接到所述子视图的附加顶点之间的空间距离；以及

基于具有最低权重的图形边缘的附加顶点，将附加约束应用于所述子视图。

13.根据权利要求11所述的系统，所述操作还包括检测用户设备处的显示器改变，其中检测用户设备处的显示器改变包括检测所述用户设备的显示器方向的改变或检测从所述用户设备到另一显示器设备的传输之一。

14.根据权利要求13所述的系统，响应于检测到所述用户设备处的显示器改变，所述操作还包括：

从所述显示器改变中检测终端显示器的尺寸；

应用所述基于约束的自适应GUI来为所述终端显示器创建与检测到的所述终端显示器的尺寸相匹配的终端显示器GUI；以及

向所述终端显示器提供终端显示器GUI。

15.根据权利要求11所述的系统，所述操作还包括：

识别嵌套在所述子视图内的、静态GUI设计的孙视图；以及

基于所述孙视图与子视图边界的空间关系，将一个或多个约束应用于所述孙视图。

16.根据权利要求15所述的系统，其中，基于所述孙视图与子视图边界的空间关系将一个或多个约束应用于所述孙视图包括：

确定所述孙视图的一个或多个边缘是否与所述子视图的一个或多个边缘重叠；以及

当所述孙视图的一个或多个边缘和所述子视图的一个或多个边缘之间存在重叠时，在所述孙视图的一个或多个边缘和所述子视图的一个或多个边缘之间创建约束。

17.根据权利要求15所述的系统，其中，基于所述孙视图与子视图边界的空间关系将一个或多个约束应用于所述孙视图包括：

确定所述孙视图的中心是否等于所述子视图的中心；以及

当所述孙视图的中心等于所述子视图的中心时，在所述孙视图的中心和所述子视图的中心之间创建约束。

18.根据权利要求11所述的系统，所述操作还包括基于作为给定视图的约束的当前状态的约束掩码来确定是否针对给定轴指定了所述根视图的布局。

19.根据权利要求11所述的系统，其中，所述子视图和作为所述子视图的邻居的附加视图各自是多个子视图中的一个子视图，所述操作还包括：

识别未被完全约束的多个子视图中的每个附加视图；以及

对于未被完全约束的多个子视图当中的每个附加子视图：

基于所述子视图与根视图边界的空间关系，将一个或多个约束应用于所述附加子视图；

在将所述一个或多个约束应用于所述附加子视图之后，确定所述附加子视图是否被完全约束；以及

响应于确定所述附加子视图未被完全约束，基于所述附加子视图和作为所述静态GUI设计中所述附加子视图的邻居的一个或多个其他附加视图之间的空间距离，将一个或多个附加约束应用于所述附加子视图，其中：

以不同于所述静态GUI设计的尺寸的一个或多个尺寸生成所述基于约束的自适应GUI还包括基于应用于每个附加子视图的所述一个或多个约束中的每一个和应用于每个附加子视图的所述一个或多个附加约束中的每一个生成所述基于约束的自适应GUI。

20.根据权利要求11所述的系统，其中，基于所述子视图与根视图边界的空间关系将一个或多个约束应用于所述子视图包括，对于所述根视图的每个轴和所述子视图的对应轴：

确定所述子视图的边缘是否与所述根视图的边缘重叠；以及

响应于确定所述子视图的边缘与所述根视图的边缘重叠，在所述子视图的边缘和所述根视图的边缘之间针对所述根视图的该轴创建约束。

21.一种编码有计算机程序的非暂时性计算机存储介质，所述计算机程序包括指令，当由数据处理装置执行时，所述指令使得所述数据处理装置执行操作，所述操作包括：

获得包括多个视图的静态图形用户界面GUI设计，其中每个视图是所述静态GUI设计的元素；

识别所述静态GUI设计的根视图；

识别所述静态GUI设计的子视图，其中所述子视图嵌套在所述根视图内；

基于所述子视图与根视图边界的空间关系，将一个或多个约束应用于所述子视图；

在将所述一个或多个约束应用于所述子视图之后，确定所述子视图未被完全约束；

响应于确定所述子视图未被完全约束，基于所述子视图和作为所述静态GUI设计中所述子视图的邻居的附加视图之间的空间距离，将一个或多个附加约束应用于所述子视图；

生成导致所述子视图被完全约束的约束的多种不同组合；

基于约束的多种不同组合的图分析，在约束的多种不同组合中选择特定组合；以及

基于所述一个或多个约束和所述一个或多个附加约束，以不同于所述静态GUI设计的尺寸的一个或多个尺寸使用所述特定组合生成基于约束的自适应GUI。

22.根据权利要求21所述的非暂时性计算机存储介质，其中所述操作还包括：

生成布局图形，所述布局图形包括所述子视图的顶点和作为所述静态GUI设计中所述子视图的邻居的两个或更多个附加视图的两个或更多个附加顶点；

在所述布局图形内，用图形边缘将所述子视图的顶点连接到所述两个或更多个附加视图的两个或更多个附加顶点；

给所述图形边缘中的每一个图形边缘分配相应的权重，其中分配给每个图形边缘的权重基于所述子视图和通过所述图形边缘连接到所述子视图的附加顶点之间的空间距离；以及

基于具有最低权重的图形边缘的附加顶点，将附加约束应用于所述子视图。

23.根据权利要求21所述的非暂时性计算机存储介质，所述操作还包括检测用户设备处的显示器改变，其中检测用户设备处的显示器改变包括检测所述用户设备的显示器方向的改变或检测从所述用户设备到另一显示器设备的传输之一。

24.根据权利要求23所述的非暂时性计算机存储介质，其中，响应于检测到所述用户设备处的显示器改变，所述操作还包括：

从所述显示器改变中检测终端显示器的尺寸；

应用所述基于约束的自适应GUI来为所述终端显示器创建与检测到的所述终端显示器的尺寸相匹配的终端显示器GUI；以及

向所述终端显示器提供终端显示器GUI。

25.根据权利要求21所述的非暂时性计算机存储介质，其中，所述操作还包括：

识别嵌套在所述子视图内的、静态GUI设计的孙视图；以及

基于所述孙视图与子视图边界的空间关系，将一个或多个约束应用于所述孙视图。