CN101140516A - 一种动态布局界面元素的方法和系统 - Google Patents

Abstract

本发明提供了一种动态布局界面元素的方法，包括：针对一目标控件，预置该目标控件相对于其父控件的布局参数集合，所述布局参数集合中包括距离固定方式和/或等比缩放方式；所述距离固定方式用于表示该目标控件的各边或者中心点相对于其父控件相应边或者中心点的距离固定不变，所述等比缩放方式用于表示该目标控件的各边相对于其父控件相应边的距离依据实际情况进行等比缩放；获取该目标控件的父控件分别在“设计时”和“运行时”的界面位置信息，以及获取该目标控件在“设计时”的界面位置信息；依据所述布局参数集合及上述界面位置信息，计算得到该目标控件在“运行时”的实际界面位置信息。

Description

一种动态布局界面元素的方法和系统

技术领域

本发明人机界面技术领域，特别是涉及一种在二维平面中动态布局界面元素的方法和系统。

背景技术

在人和机器的互动过程(Human Machine Interaction)中，有一个层面，即我们所说的界面(interface)。人机界面GUI(Graphical User Interface，图形用户接口)是一个让用户和计算机沟通时所需要的沟通环境。

在通常人机界面的二维平面中，各种界面元素的布局非常重要的，而由于屏幕上的一切视觉信息(包括背景色)都是由控件绘制出来的。因此，针对各种控件进行布局，就可以实现对屏幕上的所有元素的布局。其中，为了确定界面中的控件在其中的位置，一般会采用以下的几种方案：

方案1

首先找到当前控件所在的父控件，然后在其中确定一笛卡尔坐标系，然后用一个坐标(x，y)的值描述该控件在其父控件中的位置，并用高h、宽w等值表示该控件本身的具体大小，从而确定当前控件在二维平面中的具体位置。习惯上将这种方式称之为“左、上、高、宽”的绝对定位方式。

方案2

类似于上面的方案，但是其直接采用一对坐标值来描述该控件的具体位置，即(x1，y1)-(x2，y2)，习惯上将这种方式称之为“左上右下”的绝对定位方式。

方案3

采用网格定位，即将可显示区域人为的分割为多个网格状区域。例如，HTML中的<Table>就是用于通过网格的方式布局Web界面的元素。随着显示区域的分辨率不同，网格的大小也根据某个、某行或某列网格的重要性(即权值)随之放缩，在精确设置权值的基础上能实现完美的界面放缩表现。

上述各种现有的定位方式应该说各有所长，在不同的应用场景，能发挥各自的长处。

例如，方案1和方案2的绝对定位方式具有符合习惯、简单易用等优点；但是绝对定位做不到运行时动态变化。当该控件所在的界面的显示大小发生了变化(如，由于分辨率的调整)，则该控件在该界面中的布局位置应该动态的发生变化，但是上述采用绝对定位方式的方案1和方案2不能动态变化，难以实现动态效果。

而对于方案3来说，虽然可以实现控件位置的动态调整，但是实现起来比较复杂。例如，采用网格定位方式，则主要是通过将网页内容分成若干个区，然后将相应的内容分别填入不同的表格；并且，如果存在网格间的嵌套时，还会影响针对该网页的处理速度(如解析和下载)。另外，在界面自动化设计工具中网格状的布局对于IDE(Integrated Development Environment，计算机程序集成开发环境，如eclipse、Visual Studio、Jbuilder等)的使用者而言很不方便，使用IDE的程序员在拖拽和放置控件时不够自由(需要构造具有一定行列的网格，并需要精确放置对应控件到对应格子)。此外，行、列、单元格的众多权值在界面复杂的情况下由人工进行揣摩和设置是一个枯燥和繁杂的工作，并且非常容易出错。

总之，需要本领域技术人员迫切解决的一个技术问题就是：提出一种能够满足动态调整的效果，又较网格定位方式而言更为简单的，在二维平面中能够动态布局各种界面元素的解决方案。

发明内容

本发明所要解决的技术问题是提供一种在二维平面中动态布局界面元素的方法和系统，能够非常简单的实现对各种界面元素的动态布局，使得各个界面元素在界面内的位置和大小能够随着整个界面的变化而动态调整。

为了解决上述问题，本发明公开了一种动态布局界面元素的方法，包括以下步骤：针对一目标控件，预置该目标控件相对于其父控件的布局参数集合，所述布局参数集合中包括距离固定方式和/或等比缩放方式；所述距离固定方式用于表示该目标控件的各边或者中心点相对于其父控件相应边或者中心点的距离固定不变，所述等比缩放方式用于表示该目标控件的各边相对于其父控件相应边的距离依据实际情况进行等比缩放；获取该目标控件的父控件分别在“设计时”和“运行时”的界面位置信息，以及获取该目标控件在“设计时”的界面位置信息；依据所述布局参数集合及上述界面位置信息，计算得到该目标控件在“运行时”的实际界面位置信息。

当所述布局参数集合中包括等比缩放方式时，所述计算过程可以进一步包括：依据目标控件的父控件分别在“设计时”和“运行时”的界面位置信息，计算得到相应的缩放因子；针对目标控件中设定为等比缩放方式的边，将在“设计时”该边相对于其父控件相应边的距离按照所述缩放因子进行等比缩放，确定目标控件中该边在“运行时”的界面位置。

当所述布局参数集合中包括距离固定方式时，所述计算过程可以进一步包括：针对目标控件中设定为距离固定方式的边，获取在“设计时”该边相对于其父控件相应边的距离；依据所得到的距离以及目标控件的父控件在“运行时”的界面位置信息，确定目标控件中该边在“运行时”的界面位置。

依据本发明的另一实施例，公开了一种动态布局界面元素的装置，包括：

参数获取模块，用于获取一目标控件相对于其父控件的布局参数集合，所述布局参数集合中包括距离固定方式和/或等比缩放方式；所述距离固定方式用于表示该目标控件的各边或者中心点相对于其父控件相应边或者中心点的距离固定不变，所述等比缩放方式用于表示该目标控件的各边相对于其父控件相应边的距离依据实际情况进行等比缩放；

界面信息获取模块，获取该目标控件的父控件分别在“设计时”和“运行时”的界面位置信息，以及获取该目标控件在“设计时”的界面位置信息；

实际界面位置信息计算模块，用于依据所述布局参数集合及上述界面位置信息，计算得到该目标控件在“运行时”的实际界面位置信息。

优选的，所述装置还可以包括：参数设定接口组件，用于接收设计人员针对一目标控件的布局参数的设定操作，得到布局参数集合。

当所述布局参数集合中包括等比缩放方式时，所述实际界面位置信息计算模块进一步可以包括：

缩放因子计算子模块，用于依据目标控件的父控件分别在“设计时”和“运行时”的界面位置信息，计算得到相应的缩放因子；

第一确定子模块，用于针对目标控件中设定为等比缩放方式的边，将在“设计时”该边相对于其父控件相应边的距离按照所述缩放因子进行等比缩放，确定目标控件中该边在“运行时”的界面位置。

当所述布局参数集合中包括距离固定方式时，所述实际界面位置信息计算模块进一步可以包括：

距离获取子模块，用于针对目标控件中设定为距离固定方式的边，获取在“设计时”该边相对于其父控件相应边的距离；

第二确定子模块，用于依据所得到的距离以及目标控件的父控件在“运行时”的界面位置信息，确定目标控件中该边在“运行时”的界面位置。

与现有技术相比，本发明具有以下优点：

应用本发明，界面设计人员可以自由拖拽任何控件到设计时界面，可以采用嵌套(形成控件父子关系)、重叠或者并列(形成控件兄弟关系)等方式，然后针对每个控件设置一相应的锚定和/或等比缩放策略(锚定和/或等比缩放的参数集合)。经过上述简单易行、易于被设计人员理解(而并非类似“缩放权值”等易于计算机理解的数值)、便捷的设置方式，该界面控件就可以在运行时通过应用上述参数集合而实现完美的布局表现，可以适应各种情况的界面变化。

附图说明

图1是本发明一种动态布局界面元素的方法实施例的步骤流程图；

图2是一种布局参数设定界面的示意图；

图3是一种具体界面例子在“设计时”的示意图；

图4是图3所示的具体界面例子在“运行时”的示意图；

图5是本发明一种动态布局界面元素的装置实施例的结构框图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

本发明可用于众多通用或专用的计算系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本发明，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

参照图1，示出了本发明一种动态布局界面元素的方法实施例，包括以下步骤：

步骤101、针对一目标控件，预置该目标控件相对于其父控件的布局参数集合，所述布局参数集合中包括距离固定方式和/或等比缩放方式；所述距离固定方式用于表示该目标控件的各边或者中心点相对于其父控件相应边或者中心点的距离固定不变，所述等比缩放方式用于表示该目标控件的各边相对于其父控件相应边的距离依据实际情况进行等比缩放；

步骤102、获取该目标控件的父控件分别在“设计时”和“运行时”的界面位置信息，以及获取该目标控件在“设计时”的界面位置信息；

步骤103、依据所述布局参数集合及上述界面位置信息，计算得到该目标控件在“运行时”的实际界面位置信息。

其中的界面位置信息可以包括位置和大小等，因为大小也是一种位置信息。

本发明所述的动态布局主要针对的是：当外界因素发生变化时，导致整个界面中的界面元素布局发生变化，例如，当界面显示需要在多个复杂的显示环境中运行时，需要适应各种界面的变化；所述的复杂的显示环境可以包括：4∶3屏幕分辨率家族，16∶9/16∶10宽屏分辨率家族、非普通工业标准的特种屏幕分辨率、非最大化状态的用户自定义窗体分辨率等等。所述的外界因素的变化还可以包括纸张大小的变化而影响打印内容的情况。本发明的目的之一就在于：在复杂的客户终端显示环境要求下，使得计算机图形用户接口(GUI)能够根据屏幕的运行时配置去智能调整所显示内容的排版和布局，使GUI始终能够自适应的最优显示整个屏幕内容。

在图1所示的实施例中，当所述布局参数集合中包括等比缩放方式时，所述计算过程可以包括：依据目标控件的父控件分别在“设计时”和“运行时”的界面位置信息，计算得到相应的缩放因子；针对目标控件中设定为等比缩放方式的边，将在“设计时”该边相对于其父控件相应边的距离按照所述缩放因子进行等比缩放，确定目标控件中该边在“运行时”的界面位置。

在图1所示的实施例中，当所述布局参数集合中包括距离固定方式时，所述计算过程可以包括：针对目标控件中设定为距离固定方式的边，获取在“设计时”该边相对于其父控件相应边的距离；依据所得到的距离以及目标控件的父控件在“运行时”的界面位置信息，确定目标控件中该边在“运行时”的界面位置。

由于步骤101对于布局参数集合的描述中，已经能够清晰的表明距离固定方式和等比缩放方式的不同处理过程，所以上述分两种情况详细描述的计算过程仅仅是为了进一步的说明而已，不应当作为本发明的限制。

本实施例中提及的“设计时”和“运行时”属于本技术领域的专业术语，简单介绍如下。

“设计时”是指软件工程师设计计算机人机界面的软件工程阶段。“设计时”只是一个逻辑上的页面展示(严格意义上说，这个时候并不能称其为一个界面，只是一个蓝图)，界面的创建者从工具箱里选出控件，通过鼠标拖拽或键盘操作设定一些布局参数，即能够所见即所得的观察到界面的显示效果。所设定的布局参数在“设计时”通过配置文件存储，然后在界面设计完成时通过操作被发布成程序源代码，发布出来的程序源代码里会包括这些属性值，代码通过编译输出后即可以装入运行环境里进行执行。

“运行时”是指计算机人机界面在客户终端实际运行的软件工程阶段。因为用户的显示环境千差万别，分辨率大小不一，因此，实际运行时各个界面元素的分布就可能发生变化。本发明就是通过一定的算法和逻辑进行控件的屏幕自适应缩放，使得“运行时”的人机界面仍然能够按“设计时”界面设计师通过参数描述的蓝图进行完美的界面缩放。

在图1所示的实施例中，目标控件的父控件的界面位置已经确定，也就是说，如果该人机界面中包含多层父子关系的控件时，可以先确定最高层次的根控件(可以具体为整个计算机的显示单位窗口)的实际位置，然后依次确定各个层次的控件的实际界面位置。进一步，由于外界因素的种类非常多，并且依据各种外界因素的变化而确定根控件实际位置的过程，在现有技术中已经应用，即现有技术采用的定位方式也需要首先确定当外界因素变化时根控件的位置，所以在此不在对如何确定根控件的位置进行详述。

本发明中所述的控件允许嵌套，也就是说一个GUI组件(子控件)可能是一个容器(父控件)，它可以有子控件；或者，一个父控件也可能是更高层次上的子控件。

图1所述的实施例示出了其中最基本的一个流程，因为一个人机界面中至少包含一个根控件(例如，顶层的空白窗体)，而任何复杂的人机界面都是由多个层次的父控件和子控件构成的。因此，完成一个人机界面的动态布局，可能需要多次调用图1所示实施例的流程。

从上面的分析可以得知，一个人机界面可能包含多个层次的父控件和子控件，一般的，每个具有子控件的父控件都需要有一个布局策略来管理和缩放其所有子控件的显示，即在屏幕上确定其子控件相对于自己的屏幕位置；如果该子控件拥有更低层次的子控件，则它也需要一个布局策略，而上述的这两个布局策略是可以不同的。也就是说，一个人机界面中可能存在多种布局策略，而图1所示的实施例就公开了一种新的布局策略。一个人机界面中可以全部采用本发明所公开的布局策略，也可以部分采用本发明所公开的布局策略。

为了描述简单，下面以具有四边的矩形控件为例进行说明，需要说明的是，由于矩形控件可以成为任意对象的外包范围，例如各种形状的控件或者窗口等，因此实际上本发明可应用于任意的界面绘制过程。

在矩形控件的情况下，本发明所述的距离固定方式可以分为上边锚定、下边锚定、左边锚定、右边锚定和中心锚定四种。某个方向上的锚定，表示被布局的子控件相对其父控件对应边的距离固定，中心锚定表示控件的中心点相对父容器的中心点保持界面设计时确定的一个距离。

等比缩放方式可以分为上边等比缩放，下边等比缩放、左边等比缩放和右边等比缩放四种，某个方向上的等比缩放，表示被布局子控件的按照设计时的原始位置相对其父控件的运行时实际大小进行缩放。

上述两种方式的组合，大致可以分为以下三种情况：

A、综合使用锚定和等比缩放，使控件的向某个或某几个事先指定的方向上进行放缩；(参见图2)

B、四边完全锚定，使子控件始终与父容器的运行时放缩保持一致；

C、只使用等比缩放，不锚定任何一条边，形成最灵活，不会发生重叠的界面伸缩表现。

当采用四边完全锚定时，针对单个控件的是有效的，但在同级控件为复数个的情况下，由于被布局控件一定存在某个点相对其父控件为绝对定位方式(即该点无论在何种分辨率下相对其父控件的位置不发生变化)，因此单个维度上的过度缩小可能会造成屏幕上的空白过多，过度放大则可能会发生控件相互重叠。而当只使用等比缩放方式时，可能会导致计算量较大。所以本发明的优选实施例是二者组合使用。

下面通过一个更为具体的数据处理流程对本发明所公开的具有创新性的布局策略作进一步的说明，包含以下步骤：

(1)、布局模块从父控件那里得到其在“设计时”的大小；

(2)、布局模块从父控件那里得到其在“运行时”被它自己的父控件所赋予的实际大小；

(3)、布局模块根据步骤(1)、(2)计算出一个从“设计时”到“运行时”的横向和竖向上的两个放缩因子；

(4)、布局模块从子控件处获取相对父控件的锚定方式(例如左边锚定表示子控件的左侧距离父控件左侧的距离固定，等等)，锚定方式是一个组合概念，例如左边锚定、上边锚定、下边等比缩放和右边等比缩放是一个组合，表示左上固定，随“运行时”屏幕的大小向右下进行放缩；

(5)、布局模块从子控件那里拿到“设计时”的大小；

(6)、布局模块通过“放缩因子”、“锚定方式”、“设计时大小”通过运算计算出实际显示时子控件的位置和大小；

(7)、计算结果设置给被布局的子控件，布局完毕。

参照图3和图4，示出了在一个具体界面在“设计时”和“运行时”的显示截图，可以体现出本发明动态布局的优点。

对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明的描述，本领域技术人员易于得知某些步骤可以采用其他顺序或者同时进行，例如上述的步骤(1)和(2)，以及图1所示实施例中的步骤101和步骤102。

参照图5，示出了本发明一种动态布局界面元素的装置实施例500的结构框图，具体可以包括：

参数获取模块501，用于获取一目标控件相对于其父控件的布局参数集合，所述布局参数集合中包括距离固定方式和/或等比缩放方式；所述距离固定方式用于表示该目标控件的各边或者中心点相对于其父控件相应边或者中心点的距离固定不变，所述等比缩放方式用于表示该目标控件的各边相对于其父控件相应边的距离依据实际情况进行等比缩放；

界面信息获取模块502，获取该目标控件的父控件分别在“设计时”和“运行时”的界面位置信息，以及获取该目标控件在“设计时”的界面位置信息；

实际界面位置信息计算模块503，用于依据所述布局参数集合及上述界面位置信息，计算得到该目标控件在“运行时”的实际界面位置信息。

当所述布局参数集合中包括等比缩放方式时，所述实际界面位置信息计算模块503进一步包括：

缩放因子计算子模块，用于依据目标控件的父控件分别在“设计时”和“运行时”的界面位置信息，计算得到相应的缩放因子；

第一确定子模块，用于针对目标控件中设定为等比缩放方式的边，将在“设计时”该边相对于其父控件相应边的距离按照所述缩放因子进行等比缩放，确定目标控件中该边在“运行时”的界面位置。

当所述布局参数集合中包括距离固定方式时，所述实际界面位置信息计算模块503进一步包括：

距离获取子模块，用于针对目标控件中设定为距离固定方式的边，获取在“设计时”该边相对于其父控件相应边的距离；

第二确定子模块，用于依据所得到的距离以及目标控件的父控件在“运行时”的界面位置信息，确定目标控件中该边在“运行时”的界面位置。

由上述各个模块组成的动态布局界面元素的装置500，可以用于针对某一父控件下的所有子控件的动态布局。

优选的，图5所示的装置实施例还可以包括参数设定接口组件504，用于接收设计人员针对一目标控件的布局参数的设定操作，得到布局参数集合。对于参数设定接口组件504，可以通过各种方式实现和用户的交互，例如，提供一个文本输入框给用户以直接录入结合有属性值的表达式。当然，优选的，也可以提供友好的用户界面以方便用户设定属性值，例如，图2所示的就是一种可行的组件表现形式。

在本发明中，“组件”等指应用于计算机的相关实体，如硬件、硬件和软件的组合、软件或执行中的软件等。详细地说，例如，组件可以、但不限于是运行于处理器的过程、处理器、对象、可执行组件、执行线程、程序和/或计算机。还有，运行于服务器上的应用程序或脚本程序、服务器都可以是组件。一个或多个组件可在执行的过程和/或线程中，并且组件可以在一台计算机上本地化和/或分布在两台或多台计算机之间，并可以由各种计算机可读介质运行。组件还可以根据具有一个或多个数据包的信号，例如，来自一个与本地系统、分布式系统中另一组件交互的，和/或在因特网的网络通过信号与其它系统交互的数据的信号通过本地和/或远程过程来进行通信。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于系统实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上对本发明所提供的在二维平面中动态布局界面元素的方法和系统，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (7)

1.一种动态布局界面元素的方法，其特征在于，包括：

针对一目标控件，预置该目标控件相对于其父控件的布局参数集合，所述布局参数集合中包括距离固定方式和/或等比缩放方式；所述距离固定方式用于表示该目标控件的各边或者中心点相对于其父控件相应边或者中心点的距离固定不变，所述等比缩放方式用于表示该目标控件的各边相对于其父控件相应边的距离依据实际情况进行等比缩放；

获取该目标控件的父控件分别在“设计时”和“运行时”的界面位置信息，以及获取该目标控件在“设计时”的界面位置信息；

依据所述布局参数集合及上述界面位置信息，计算得到该目标控件在“运行时”的实际界面位置信息。

2.如权利要求1所述的方法，其特征在于，当所述布局参数集合中包括等比缩放方式时，所述计算过程包括：

依据目标控件的父控件分别在“设计时”和“运行时”的界面位置信息，计算得到相应的缩放因子；

针对目标控件中设定为等比缩放方式的边，将在“设计时”该边相对于其父控件相应边的距离按照所述缩放因子进行等比缩放，确定目标控件中该边在“运行时”的界面位置。

3.如权利要求1所述的方法，其特征在于，当所述布局参数集合中包括距离固定方式时，所述计算过程包括：

针对目标控件中设定为距离固定方式的边，获取在“设计时”该边相对于其父控件相应边的距离；

依据所得到的距离以及目标控件的父控件在“运行时”的界面位置信息，确定目标控件中该边在“运行时”的界面位置。

4.一种动态布局界面元素的装置，其特征在于，包括：

参数获取模块，用于获取一目标控件相对于其父控件的布局参数集合，所述布局参数集合中包括距离固定方式和/或等比缩放方式；所述距离固定方式用于表示该目标控件的各边或者中心点相对于其父控件相应边或者中心点的距离固定不变，所述等比缩放方式用于表示该目标控件的各边相对于其父控件相应边的距离依据实际情况进行等比缩放；

界面信息获取模块，获取该目标控件的父控件分别在“设计时”和“运行时”的界面位置信息，以及获取该目标控件在“设计时”的界面位置信息；

实际界面位置信息计算模块，用于依据所述布局参数集合及上述界面位置信息，计算得到该目标控件在“运行时”的实际界面位置信息。

5.如权利要求4所述的装置，其特征在于，还包括：

参数设定接口组件，用于接收设计人员针对一目标控件的布局参数的设定操作，得到布局参数集合。

6.如权利要求4所述的装置，其特征在于，当所述布局参数集合中包括等比缩放方式时，所述实际界面位置信息计算模块进一步包括：

缩放因子计算子模块，用于依据目标控件的父控件分别在“设计时”和“运行时”的界面位置信息，计算得到相应的缩放因子；

第一确定子模块，用于针对目标控件中设定为等比缩放方式的边，将在“设计时”该边相对于其父控件相应边的距离按照所述缩放因子进行等比缩放，确定目标控件中该边在“运行时”的界面位置。

7.如权利要求4所述的装置，其特征在于，当所述布局参数集合中包括距离固定方式时，所述实际界面位置信息计算模块进一步包括：

距离获取子模块，用于针对目标控件中设定为距离固定方式的边，获取在“设计时”该边相对于其父控件相应边的距离；

第二确定子模块，用于依据所得到的距离以及目标控件的父控件在“运行时”的界面位置信息，确定目标控件中该边在“运行时”的界面位置。

Images