CN104063211B

CN104063211B - 用于具有可变的显示屏尺寸和取向的设备的布局系统

Info

Publication number: CN104063211B
Application number: CN201410044826.8A
Authority: CN
Inventors: G.R.恩杰尔; J.赫尔夫曼
Original assignee: Keysight Technologies Inc
Priority date: 2013-03-15
Filing date: 2014-02-07
Publication date: 2021-11-23
Anticipated expiration: 2034-02-07
Also published as: CN104063211A; US20170357393A1; US20140282055A1; US11016635B2

Abstract

本发明公开了操作具有显示GUI的显示屏的数据处理系统的方法。该GUI具有纵横比或像素数量不同的多种配置。该方法包括提供布局描述和响应该布局描述和该显示配置生成GUI的运行时系统。该布局描述在第一容器空间内定义具有在GUI中要显示的多个组件的第一容器。每个组件具有第一容器内的组件布局描述。该运行时系统取决于该显示配置地自动分配该第一容器空间，并自动将该第一容器空间划分成多个组件空间。每个组件被显示在组件空间的相应一个中。该第一容器空间和该组件空间在该显示配置变化时自动变化。

Description

用于具有可变的显示屏尺寸和取向的设备的布局系统

技术领域

本发明涉及用于具有可变的显示屏尺寸和取向的设备的布局系统。

背景技术

跨具有不同纵横比、尺寸和像素数量的许多不同平台工作的图形用户界面（GUI）的设计给人们带来严峻的挑战。任何给定设备都可能具有可在肖像或风景模式下实现的两种不同纵横比。在程序运行期间特定模式通过设备取向触发，因此，程序必须为GUI提供至少两种组织。更进一步，编程人员面临着设计必须工作在具有从智能手机变化到较大固定计算机屏幕的屏幕尺寸的许多不同设备上的GUI的任务。

存在许多技术来定义GUI。两种最常用的是利用编程人员使用编程界面为特定应用创建布局的“代码”设计的那些技术。Visual Basic或Visual C++是这种类型布局的例子。另一种类型是像HTML或Microsoft XAML那样的文本形式的说明性布局。这些都使用XML结构以便映射到GUI表示中的结构。

这些现有技术要求用户以某种形式用具有绝对尺寸要求的元件定义GUI。这样的GUI不能很好地响应诸如在肖像与风景之间切换或从平板电脑切换到手机再切换到宽屏幕监视器时的取向变化。取向问题的一种解决方案要求设计人员创建每种布局是为不同显示器优化的多种“布局”。

发明内容

本发明包括操作具有显示GUI的显示屏的数据处理系统的方法。该GUI具有纵横比或像素数量不同的多种配置。该方法包括提供布局描述和响应该布局描述和该显示配置生成GUI的运行时系统。该布局描述在第一容器空间内定义具有在GUI中要显示的多个组件的第一容器。在该第一容器内每个组件具有组件布局描述。该运行时系统取决于该显示配置地自动分配该第一容器空间，并自动将该第一容器空间划分成多个组件空间。每个组件被显示在组件空间的相应一个中。该第一容器空间和该组件空间在该显示配置变化时自动变化。

在本发明的一个方面，定义该第一容器的该布局描述指示组件的垂直或水平组织，以及该运行时系统分别垂直或水平地划分该第一容器空间，将每个组件指定给相应水平或垂直空间。指定给每个组件的相对空间通过布局权重参数来规定，该布局权重参数可以通过布局描述中的条目从默认值开始变更。在组件的布局权重没有变化的情况下，均等地划分垂直或水平空间。

在本发明的另一个方面，第一个组件包括要显示在GUI中的文本，以及该运行时系统根据该组件的布局描述中的第一字体组规定自动为每个组件设置文本字体。如果两个组件具有相同字体组规定，则该运行时系统自动确定保证两个组件让它们的文本得到适当显示的字体，该字体随显示配置改变。

附图说明

图1A和1B分别例示了在肖像和风景模式下具有三个按钮的VGroup；

图2例示了第一按钮具有两倍于其余两个按钮的权重的三按钮VPanel；

图3例示了示出在图1A和1B中的VPanel的HPanel等效物；

图4例示了将两倍于其它按钮的空间分配给Button1的三按钮面板；

图5A和5B分别例示了在肖像和风景模式下的嵌套显示；

图6A和6B例示了包括显示图形的迹线组件的嵌套显示；

图7例示了使用布局代码明确设置了Button1组件的尺寸的显示；

图8A和8B例示了要在肖像或风景取向运行在像智能手机那样的设备上的GUI；

图9A和9B例示了各个组件具有它们根据组件的尺寸调整的字体的显示；以及

图10A和10B例示了将相同字体大小用于许多不同组件的显示。

具体实施方式

一般说来，按照本发明的GUI由一个或多个“组件”构成。每个组件具有图形表示和确定组件的行为和如何显示组件的代码部分。一般说来，每个组件具有在当前显示器上针对指定给该组件的空间大小自动改变图形表示的大小的默认表示。当显示器改变取向时，各种组件的空间量也变化，并相应地调整图形表示。可以将组件的集合一起分组在一个容器中。在容器内的组件之间划分为该容器分配的空间。存在除了为容器规定不同分配之外应用的默认空间分配。整个显示器是最高级别的容器。

用两种类型的容器来表示可以更容易地理解本发明提供其好处的方式。在在如下的讨论中称为VGroup的第一种类型的容器中，默认空间分配由在容器中的对象之间均等地划分容器中的垂直空间组成。应当注意到，当显示屏从肖像模式变成风景模式时，容器中的可用空间发生了变化，垂直空间缩小，水平空间扩大。因此，当发生取向变化时，对容器中的每个组件指定新空间，同样调整组件的表示。

第二种类型的容器被称为HGroup。HGroup中的默认空间分配由在容器中的对象之间均等地划分容器中的水平空间组成。并且，当显示屏从肖像模式变成风景模式时，容器中的可用空间发生了变化，垂直空间缩小，水平空间扩大。

VPanels和HPanels分别是VGroup和HGroup的特殊类型，其中对各个组件和面板自动提供划定所涉及的元件的边界。现在参照图1A和1B，它们分别例示了包括在肖像和风景模式下具有三个按钮的VGroup的数据处理系统上的显示。当取向从肖像变到风景时，可用于每个按钮的空间发生了变化，使得每个按钮的垂直高度减小，宽度增大。相应地改变字体以适合可用空间。

在本发明的一个方面，用户用诸如XML的说明性语言定义显示的布局。如果利用本发明的容器，则只有未包含在组件的默认规定中的那些项目需要包括在文件中。例如，显示在图1A和1B中的三按钮显示的XML代码由如下组成：

</Vpanel>

应当注意到，只需规定文本，因为显示空间被自动划分成分配给各种按钮的三个垂直部分。与按钮相联系的代码自动关心针对当前显示屏和取向改变文本和按钮的尺寸。

在上述的例子中，三个按钮具有默认分配的相同尺寸。但是，用户可能想为按钮之一提供更大空间。在本发明的一个方面，用户可以规定容器内的组件的相对布局权重。默认权重是1。为了改变默认布局权重，使相应条目处在布局文件中。例如，如果想对Button1指定更大空间，则XML文件将是：

</Vpanel>

现在参照图2，其例示了第一按钮具有两倍于其余两个按钮的权重的三按钮VPanel。在这种情况下，Button1具有两倍于其它两个按钮的高度。应当注意到，按钮的宽度与其它按钮保持相同。由于宽度限制用于标记的字体尺寸，所以Button1具有与其余按钮相同的字体尺寸。

本发明还实现提供与上述的VPanel类似的功能的水平面板HPanel。在HPanel中，均等地划分水平空间。HPanel是显示在图1A和1B中的VPanel的等效物。HPanel的布局如下：

</Hpanel>

现在参照图4，其例示了将两倍于其它按钮的空间分配给Button1的三按钮面板。并且，如果将更大的空间分配给一个按钮，则可以再次使用布局权重参数。但是，由于这是HPanel，所以布局权重的增大使面板中分配给Button1的水平空间增大而不是垂直空间增大。权重增大的HPanel的布局文件如下：

</Hpanel>

应当注意到，VPanel和HPanel以及相应VGroup和HGroup本身是与其它组件服从相同规则的组件。因此，可以无需规定组合的精确尺寸地使各种面板和群体相互嵌套，以提供更复杂的布局。

现在参照图5A和5B，它们分别例示了在肖像和风景模式下的嵌套显示。这些显示包括许多嵌套面板。所涉及的显示的布局描述如下：

</HPanel>

</VPanel>

</HPanel>

</VPanel>

</HPanel>

</VPanel>

如上所述，VPanel和HPanel具有围绕它们的子组件的清晰边界。当嵌套时，HPanel和VPanel组件用于分组有时可以导致混乱显示的边界阴影。HGroup和VGroup组件以与HPanel和VPanel相同的方式表现，但它们没有边界。另外，在本发明的一个方面，HGroup和VGroup具有透明背景，而HPanel和VPanel没有。这种差异例示在图6A和6B中，它们例示了包括显示图形的迹线组件21的嵌套显示。图6A示出了只使用VPanel和HPanel时的显示。图6A的布局代码如下：

</VPanel>

</HPanel>

</VPanel>

在图6B中示出了使用HGroup和VGroup时的相应显示。图6B的布局代码如下：

</VGroup>

</HGroup>

</VPanel>

在上述的例子中，组件具有自动计算的尺寸。但是，存在设计人员可能偏爱将特定尺寸指定给一个或多个组件的状况。在本发明的一个方面，组件也可以具有以与指定相对尺寸的权重机制分开的方式指定的明确尺寸。按照本发明的组件也具有可以由设计人员在布局代码中指定的layout_width和layout_height属性。

现在参照图7，其例示了使用如下布局代码明确设置了Button1组件的尺寸的显示：

<Button text="Button1"

layout_width="60dp"

layout_height="40dp"/>

</HPanel>

在本发明的这个方面，可以用显示像素px、缩放独立像素sp、或密度独立像素dp规定布局宽度和高度。sp单位根据显示屏密度以及用户的字体大小偏爱选择字体大小。当这个信息不可用于实现时，将sp值解释为dp值。一般说来，当希望大小与用户字体选择偏爱有关时，使用sp。dp单位根据密度独立像素选择字体大小。一个dp在160dpi（点数每英寸）屏幕上是一个像素，但在320dpi屏幕上是两个像素。对于文本，优选的是sp，因为它接受用户的字体大小偏爱。一般说来，应该避免ps单位，因为它在设备之间不能很好地缩放。

固定尺寸组件的引入可以导致在容器中有额外空间可用。作为运行时系统库的一部分的布局引擎利用布局描述分配空间。容器中的空间按照该容器中的组件的layout_weights来划分。当一个组件使用不超过该组件份额的空间时，在其余组件之间与它们各自的layout_weights成比例地划分另外的空间。定义了固定宽度和高度的组件也可以具有非零layout_weight。在这种情况下，分配给该组件的最终空间是规定的固定宽度或高度与它分享的任何其余空间的总和。如果设计人员不想以这种方式伸展固定宽度或高度组件时，则可以将零的layout_weight指定给该组件，因此，该组件将不接受任何其余空间。

在本发明的一个方面，可以将组件的尺寸缩小到超过它们由指定固定宽度或高度所致的固有尺寸。如果可用空间小于通过layout_width和layout_height参数规定的对象的固有尺寸的总和，就发生这样的缩小。在这种情况下，根据其layout_weight剥夺每个组件的部分空间。

包括文字材料的组件的自动尺寸改变给人们带来额外的挑战。现在参考图8A和8B，它们例示了要在肖像或风景取向运行在像智能手机那样的设备上的GUI。尤其，GUI包括其包括文本的许多方框。图8A中的特定GUI正运行在风景模式下的设备上。当将设备旋转成如图8B所示的肖像模式时，方框的尺寸发生了变更，以便更有利地使用显示空间。

不幸的是，不能在不引起问题的情况下以相同程度的灵活性调整方框内文本的大小。给定字体的文本的纵横比通常是固定的。考虑具有屏幕处在风景模式下时正好适合方框的文本的方框。当屏幕旋转成肖像模式时，必须减小方框的宽度。如果不改变字体的大小，则如图8B所示，原始文本在方框中不再适合。因此，改变文本尺寸以适应取向的变化。必须改变文本字体大小以适应取向的变化的数量对于GUI中的不同对象是不同的。

改变字体大小的一种方法牵涉到当对象尺寸随取向的变化改变时，将字体大小调整成正好适合在对象中。不幸的是，这种策略可能导致如可以从图9A和9B中看到，从相同文本大小开始的不同组件在新取向中具有不同文本大小，图9A和9B例示了各个组件具有它们根据组件的尺寸调整的字体的显示。图9A示出了设备处在风景模式下的显示，图9B示出了设备处在肖像模式下的显示。从这些图中可以看出，这种做法可以导致缺乏原始显示的美观的显示。

在本发明的一个方面，这个问题通过定义一组元件来克服，该组元件在取向或分辨率变化时都需要共享相同字体大小以保持显示的美观。为这些元件定义一个字体组，并使用这种字体而不是在缺乏该字体组的情况下布局引擎使用的字体。现在参照图10A和10B，它们例示了即使一个或多个组合使用了不同字体大小，也将相同字体大小用于许多不同组件的显示。例如，在图10A和10B中显示在71上的对象在每种取向下需要使用相同字体大小。当取向变化时，对象的尺寸也变化；但是，在这些对象之间字体大小保持不变。

在本发明的这个方面，将两步过程用于为作为同组的一部分的一个容器的所有组件设置字体大小。在第一步骤中，确定需要使文本适合每个组件的字体大小。将字体大小设置成没有对象具有在新取向中截断的文本。不同组件可能具有在这个步骤中确定的不同字体大小。

在第二步骤中，然后为字体组中的所有组件选择所确定字体大小的最小者。这在保证在任何组件中文本不被截断的同时保证了组件具有一致的外观。一旦为字体组中的每个对象确定了字体，就将该字体传递给每个对象以便供该对象使用。

一个组件所属的字体组可以在该组件的布局描述中规定。在显示在图10A和10B中的GUI的情况下，XML描述如下：

</VPanel>

</HPanel>

在一些情况下，为包括许多“子件”的“母”组件定义字体组可能更有效。在这种情况下，将字体组指定应用于母件的所有子件，例如：

</VPanel>

</HPanel>

为了简化布局代码，对每个容器指定“隐式字体组”。隐式字体组只应用于容器的第一级子件。它保证了第一级子件都具有相同字体组。容器的所有子件遗传显式字体组指定。隐式字体组指定可以通过提供像“none（无）”那样的预定显式字体组指定或通过指定像layout_weight=0那样与隐式字体组不兼容的属性来避免。

在本发明的另一个方面，按钮、文本框、和其它主要文本组件具有配置所显示文本的各种方面的许多附加属性。textSize属性在maxChars规定文本字段的最大长度的同时使相对或绝对文本大小得到规定。

textSize属性可以以与针对布局大小规定所述相同的单位规定文本大小。另外，定义了%相对大小。对于文本，sp是优选的，因为它接受用户的字体大小偏爱。%单位是相对自动字体大小。当未为组件规定textSize时，布局引擎自动选择字体大小。如果利用%单位规定字体大小，则所得字体大小将是自动字体大小的百分比。例如，设置textSize=50%将导致字体大小是自动字体大小的50%。

文本大小和字体组两者都可以用在相同容器中。这使相同自动字体组可以用于所有元件，除了一些元件具有缩小的字体大小之外。

在一些情况下，一些文本字段的内容在规定布局的时候是未知的。例如，文本框可能被远程设备的输出填充，文本字串的大小在文本字串实际到达之前是未知的。在本发明的一个方面，提供使设计人员可以将预期输入的最大大小通知布局引擎的字段属性。这被称为MaxChars属性。当规定了MaxChars属性时，文本组件根据规定的长度选择文本大小。布局引擎然后为该数量的字符保存空间。如果小于该数量到达，则犹如定义的最大数量到达，仍然定义字体大小。这保证了文本的外观不会随输入改变，因为文本可能在GUI运行期间改变了长度。

在本发明的另一个方面，可以将宽度或高度规定成与母容器匹配。将宽度或高度规定成match_parent通知布局引擎应该将组件的尺寸改变成与其母容器匹配。也就是说，扩充成填充可用空间。如果未规定明确的宽度或高度，则HPanel、VPanel、HGroup和VGroup的子件默认为match_parent。

在本发明的又一个方面，提供通知布局引擎将组件的尺寸改变成正好大到足以容纳其内容的属性。可以将宽度或高度规定成wrap content。这通常用于环绕一组固定尺寸组件。例如，具有围绕固定尺寸文本组件的layout height="wrap content"的VPanel将导致面板正好大到足以围绕文本。

如果容器中的子件具有固定或固有尺寸以及设计人员不想计算包含子件的最小尺寸容器，则设计人员可以使用分别称为VWrap和HWrap的VPanel和HPanel容器的特殊形式。这些容器自动将容器的高度或宽度设置成正好大到足以适合容器中的所有子件的数值。

容器中组件的定位可以使用两个位置规定参数明确地控制。容器可以通过为参数“gravity”规定数值为容器中的所有子件规定布局。例如，如果gravity="left"，则容器中的所有子件将在容器的左边界上对齐。在一些情况下，设计人员可能想不变更其余组件的定位地明确规定容器中一个组件的位置。参数“layout_gravity”使组件可以定义其在母容器中的位置。gravity和layout_gravity的数值不影响组件的尺寸。对于像VPanel那样的垂直取向容器，layout_gravity可以呈现“left”、“center”或“right”的数值，分别导致与容器的左边界、容器的中心、和容器的右边界对齐。对于像HPanel那样的水平取向容器，layout_gravity可以呈现“top”、“center”或“bottom”的数值，分别导致与容器顶部边界、容器的中心、和容器的底部边界对齐。另外，layout_gravity可以具有数值“center_vertical”和“center_horizontal”，分别传信对象在其容器的垂直中心上或在其容器的水平中心上。

上述实施例利用了称为VGroup和HGroup的容器。但是，也可以构建利用自动设置组件尺寸的不同类型容器的本发明实施例。例如，在本发明的一个实施例中定义了SwipePanel。这个面板的子件是用户使用像猛划（swipe）手势那样的手势或“按压（pushing）”按钮在页面之间移动的多页视图中的“pages”。SwipePanel等效于比设备上所提供大得多的显示。设备上分配的空间是较大显示上的“窗口”。容器的定位由猛划手势和当前位置确定。实质上，猛划手势移动窗口和底下显示的相对位置，以便在手势之后出现在窗口中的是底下显示的不同部分。

SwipePanel的子件可以以取决于设备处在肖像还是风景模式下的方式管理。在本发明的一个方面，每个子件都占据显示上的一个空间以便在任何时候都可看见一个子件并填充分配的空间。用户通过做出取决于猛划的方向，用当前子件左边或右边的一个取代当前可见子件的猛划手势来改变子件。

本申请中的附图示出了数据处理系统或计算机的显示器上的组件的各种显示排列。数据处理系统或计算机未明确显示成单独“方框”，因为这样的组件在本领域中是众所周知的。但是，要明白的是，这样的显示也指示底下存在数据处理系统或计算机，并且也是数据处理系统或计算机以及显示器的表示。

提供本发明的上述实施例是为了例示本发明的各个方面。但是，要明白的是，可以组合在不同特定实施例中示出的本发明的不同方面来提供本发明的其它实施例。另外，本发明的各种变型可以从前述和附图中明显看出。于是，本发明只由所附权利要求书的范围限定。

Claims

1.一种操作具有显示GUI的显示屏的数据处理系统的方法，所述GUI具有多种显示配置，所述方法包括：

提供布局描述；以及

提供响应所述布局描述和所述显示配置生成所述GUI的运行时系统，

所述布局描述在第一容器空间内定义具有在所述GUI中要显示的多个组件的第一容器，每个组件具有所述第一容器内的组件布局描述，

其中所述运行时系统取决于所述显示配置自动分配所述第一容器空间，并自动将所述第一容器空间划分成多个组件空间，每个组件被显示在所述组件空间的相应一个中，所述第一容器空间和所述组件空间在所述显示配置变化时自动变化。

2.如权利要求1所述的方法，其中定义所述第一容器的所述布局描述指示所述组件的垂直或水平组织，以及其中所述运行时系统分别垂直或水平地划分所述第一容器空间，将每个组件指定给相应垂直或水平空间。

3.如权利要求2所述的方法，其中指定给每个组件的所述垂直或水平空间分别等于每个其它组件的所述垂直或水平空间。

4.如权利要求2所述的方法，其中所述布局描述为所述第一容器中的所述组件之一规定布局权重，以及其中所述运行时系统以取决于所述权重的方式划分所述垂直或水平空间。

5.如权利要求1所述的方法，其中所述组件之一包含第二容器。

6.如权利要求1所述的方法，其中所述组件的第一个组件包含要显示在所述GUI中的文本，以及其中所述运行时系统根据该组件的所述布局描述中的第一字体组规定自动为该组件设置文本字体。

7.如权利要求6所述的方法，其中所述组件的第二个组件也具有所述第一字体组规定，以及其中所述运行时系统自动确定保证两个组件让它们的文本得到适当显示的字体，所述字体随所述显示配置改变。

8.如权利要求7所述的方法，其中所述第二个组件的所述文本具有与所述第一个组件的所述文本不同的大小，大小差异由所述布局描述中的文本大小规定确定。

9.如权利要求1所述的方法，其中所述运行时系统根据所述组件的所述布局描述中的位置规定将所述组件之一放置在所述第一容器中。