[发明专利]一种动态布局界面元素的方法和系统

说明书

技术领域

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

背景技术

在人和机器的互动过程(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的程序员在拖拽和放置控件时不够自由(需要构造具有一定行列的网格，并需要精确放置对应控件到对应格子)。此外，行、列、单元格的众多权值在界面复杂的情况下由人工进行揣摩和设置是一个枯燥和繁杂的工作，并且非常容易出错。

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

发明内容

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

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

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