CN103164197A - Ui布局自适应方法、移动设备以及布局生成设备 - Google Patents

Abstract

本发明公开了一种UI布局自适应方法、移动设备以及布局生成设备，其中，该方法包括：当移动设备的显示状态发生变化时，从移动设备内部存储的布局文件中获取与变化后的显示状态对应的布局文件；根据获取的布局文件对设备的UI布局进行调整。本发明解决了现有技术中由于通过容器进行UI的自适应过程在设备内部动态进行而造成的设备配置要求高，自适应时间过长的技术问题，达到了减少自适应耗费的时间以及降低系统资源损耗的技术效果。

Description

UI布局自适应方法、移动设备以及布局生成设备

技术领域

本发明涉及通信领域，具体而言，涉及一种UI布局自适应方法、移动设备以及布局生成设备。

背景技术

目前，嵌入式系统，特别是手机等手持设备的软件系统几乎都是采用复杂程度不一的图形用户界面(Graphical User Interface，简称为GUI)系统作为各种业务的操作接口或显示接口。例如，Google的android系统、Nokia的S60系统以及大唐的arena系统。常用的几种开源手机GUI系统有：GTK、QT、MINIGUI等。

所谓的GUI是指采用图形方式显示的计算机操作用户界面，与早期计算机使用的命令行界面相比，图形界面对于用户来说在视觉上更易于接受。窗口系统就是一种图形界面方式的系统，它以窗口的方式对屏幕区域进行划分管理，同时支持用户鼠标、按键等外部输入设备对窗口进行操作，例如，窗口最小化、销毁以及拖放等。GUI系统提供一套能与用户进行交互的控件，比如按钮、编辑框以及图片等，并形成了事件驱动机制，方便开发人员应用基于控件以及这种事件驱动机制进行开发。

随着手机技术的快速发展，很多手持设备都可以支持横屏和竖屏之间的切换，用户可以对用户界面(User Interface，简称为UI)进行操作，然而，该UI并不随着屏幕位置的颠倒而发生颠倒，而是自动调整界面布局，使其更适合当前的屏幕分辨率。这种自适应往往需借助于容器的功能，界面最外层往往是一种容器，当界面尺寸变化时，容器会根据这种尺寸的变化调整对应子控件的尺寸和位置，这种位置调整会蔓延到该界面的所有控件，从而适应横竖屏之间的切换。

控件是GUI系统提供给开发用户的一种交互接口，集显示和事件于一身，既能显示业务数据也能根据用户操作触发事件，是GUI系统重要组成部分。容器是一种特殊控件，用来组织管理其他控件。通过容器，能形成以树状形式描述的UI。容器的种类有若干种，对于不同的GUI系统，其种类划分不尽相同。但对于不同的GUI系统，容器都具有一种重要的功能：组织安排子控件的空间位置。当容器或子控件的尺寸发生变化时，容器会相应地调整子控件的位置和尺寸，我们称其为控件尺寸的自适应机制。目前，很多GUI解决UI尺寸自适应都采用这种手段。

目前，硬件配置较高的GUI系统一般具有容器控件，比如Android系统和GTK系统，而硬件配置较低的GUI系统一般不具容器控件，比如MINIGUI系统，这主要因为容器的管理需要额外开销，同时自适应过程的耗时比较长，而这种开销往往是定位低端配置的GUI系统难以接受的。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本发明提供了一种UI布局自适应方法、移动设备以及布局生成设备，以至少解决现有技术中由于通过容器进行UI的自适应过程在设备内部动态进行而造成的设备配置要求高，自适应时间过长的技术问题。

根据本发明的一个方面，提供了一种UI布局自适应方法，包括：当移动设备的显示状态发生变化时，从移动设备内部存储的布局文件中获取与变化后的显示状态对应的布局文件；根据获取的布局文件对设备的UI布局进行调整。

优选地，显示状态包括：屏幕的分辨率和/或横竖屏切换。

优选地，根据获取的布局文件对设备的UI布局进行调整的步骤包括：根据与变化后的显示状态对应的布局文件更新移动设备的UI中控件的尺寸和位置。

优选地，从移动设备内部已有的布局文件中获取与变化后的显示状态对应的布局文件之前，该UI布局自适应方法还包括：布局文件生成设备根据预定的显示状态变化场景生成存储的布局文件；布局文件生成设备将存储的布局文件下载到移动设备中。

优选地，布局文件生成设备根据预定的显示状态变化场景生成存储的布局文件的步骤包括：布局文件生成设备在预定的显示状态变化场景中根据显示状态变化参数生成格式为XML的文件；布局文件生成设备对格式为XML的文件进行解析获取显示状态变化场景中各个控件的尺寸和位置；布局文件生成设备将所获取到的各个控件的尺寸和位置转换成代码；布局文件生成设备对代码进行编译生成存储的布局文件。

优选地，布局文件包括：用于描述屏幕、界面、容器、控件之间的关系的关系描述文件。

根据本发明的另一方面，提供了一种移动设备，包括：获取单元，用于在显示状态发生变化时，从移动设备内部存储的布局文件中获取与变化后的显示状态对应的布局文件；调整单元，用于根据获取的布局文件对UI布局进行调整。

优选地，该移动设备还包括：存储设备，用于存储布局文件生成设备下载到移动设备中的存储的布局文件。

根据本发明的又一方面，提供了一种布局生成设备，包括：生成单元，用于根据预定的显示状态变化场景生成存储在移动设备上的存储的布局文件；下载单元，用于将存储的布局文件下载到移动设备中。

优选地，生成单元包括：生成模块，用于在预定的显示状态变化场景中根据显示状态变化参数生成格式为XML的文件；解析模块，用于对格式为XML的文件进行解析获取显示状态变化场景中各个控件的尺寸和位置；转化模块，用于将所获取到的各个控件的尺寸和位置转换成代码；编译模块，用于对代码进行编译生成存储的布局文件。

在本发明中，移动设备内部存储有对应于显示状态发生变化的布局文件，因此在显示状态发生变化的时候可以直接调用布局文件实现布局的调整，从而解决了现有技术中由于通过容器进行UI的自适应过程在设备内部动态进行而造成的设备配置要求高，自适应时间过长的技术问题，达到了减少自适应耗费的时间以及降低系统资源损耗的技术效果。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的UI布局自适应系统的一种优选结构框图；

图2是根据本发明实施例的UI布局自适应系统的另一种优选结构框图；

图3根据本发明实施例的UI布局自适应方法的一种优选流程图；

图4根据本发明实施例的UI布局自适应方法的另一种优选流程图。

具体实施方式

下文中将参考附图并结合实施例来详细说明本发明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

实施例1

如图1所示，本发明提供了一种优选的UI布局自适应系统100，该系统包括：移动设备102以及布局生成设备104。其中，布局生成设备104包括：生成单元1042，用于根据预定的显示状态变化场景生成存储在移动设备上的存储的布局文件；下载单元1044，用于将存储的布局文件下载到移动设备中。移动设备102包括：获取单元1022，用于在显示状态发生变化时，从移动设备内部存储的布局文件中获取与变化后的显示状态对应的布局文件；调整单元1024，用于根据获取的布局文件对UI布局进行调整；优选的，移动设备102还包括：存储设备1026，用于存储布局文件生成设备下载到移动设备中的存储的布局文件。

在上述优选实施方式中，移动设备内部存储有对应于显示状态发生变化的布局文件，因此在显示状态发生变化的时候可以直接调用布局文件实现布局的调整，从而解决了现有技术中由于通过容器进行UI的自适应过程在移动设备内部动态进行而造成的设备配置要求高，自适应时间过长的技术问题，达到了减少自适应耗费的时间以及降低系统资源损耗的技术效果。

进一步的，在上述优选实施方式中，通过在布局生成设备中生成对应于移动设备的UI布局文件，再将该布局文件下载到终端设备中，从而可以将容器的自适应环节放在PC侧进行，减少容器自适应对移动设备带来的耗时和资源浪费的代价，更适合资源受限的嵌入式设备。同时，编程语言广泛，由于容器以及其自适应机制可以放在PC侧进行，而PC侧开发语言多种(比如java、C++、C)，不局限于嵌入式所需的编程语言，提高了适应性。

优选的，在本发明各个优选实施方式中，显示状态可以包括但不限于：屏幕的分辨率和/或横竖屏切换。在上述优选实施方式中，当移动设备的屏幕分辨率发生变化，或者是屏幕由横屏切换为竖屏，或者是由竖屏切换为横屏的时候都可以触发移动设备获取自身存储的布局文件对UI的布局进行调整，从而实现UI布局的自适应。

本发明还对调整单元1024进行了改进，在本发明一个优选实施方式中，调整单元1024根据与变化后的显示状态对应的布局文件更新移动设备的UI中控件的尺寸和位置。在上述优选实施方式中，当显示状态发生变化时，根据移动终端中存储的布局文件对移动终端UI中的控件的尺寸和位置进行更新，移动设备自身并不需要进行容器的自适应环节就可以达到对UI的自适应过程，减少了容器自适应带来的移动设备的资源损耗，也减少了自适应过程的耗时。

本发明还对生成单元1042进行了改进，以便达到生成移动设备每种状态下都适应且可以随时调用的布局文件。为了实现上述目的，具体的，在本发明各个优选的实施例的基础上，如图2所示，生成单元1042包括：生成模块202，用于在预定的显示状态变化场景中根据显示状态变化参数生成格式为可扩展标记语言(Extensible Markup Language，简称为XML)的文件；解析模块204，用于对格式为XML的文件进行解析获取显示状态变化场景中各个控件的尺寸和位置；转化模块206，用于将所获取到的各个控件的尺寸和位置转换成代码；编译模块208，用于对代码进行编译生成存储的布局文件。

在上述优选实施方式中，通过在布局文件中预先指定好移动设备的显示状态，从而生成每种状态下对应的XML格式的文件，再对XML格式的文件中各个控件的位置大小进行测量，从而生成可以直接下载到移动设备中并能为移动设备直接应用的布局文件，给不支持自适应机制的GUI提供了一套解决方案，不需修改现有GUI机制以满足自适应，这样减少了大量代码变更而导致的系统稳定收到影响的问题；同时也避免了因为容器种类演化而对现有的GUI系统带来的稳定风险的问题，提高了系统稳定性。

在本发明各个优选实施方式中，布局文件包括但不限于：用于描述屏幕、界面、容器、控件之间的关系的关系描述文件。在上述优选实施方式中，通过移动设备中存储的布局文件包括，用于描述屏幕、界面、容器、控件之间的关系的关系描述文件，从而使得在显示状态发生变化的时候可以根据该布局文件对UI的布局进行调整，满足界面自适应的要求。

值得注意的是，本发明不仅保护UI布局自适应系统100，还单独保护上述的移动设备102以及布局生成设备104，其各自的组成结构以及工作步骤均如上，在此不再赘述。

实施例2

基于图1-2所示的优选的UI布局自适应系统，本发明还提供了一种优选的UI布局自适应方法，如图3所示，该方法具体步骤包括：

S302：当移动设备的显示状态发生变化时，从移动设备内部存储的布局文件中获取与变化后的显示状态对应的布局文件；

S304：根据获取的布局文件对设备的UI布局进行调整。

在上述优选实施方式中，移动设备内部存储有对应于显示状态发生变化的布局文件，因此在显示状态发生变化的时候可以直接调用布局文件实现布局的调整，从而解决了现有技术中由于通过容器进行UI的自适应过程在设备内部动态进行而造成的设备配置要求高，自适应时间过长的技术问题，达到了减少自适应耗费的时间以及降低系统资源损耗的技术效果。

优选的，在本发明各个优选实施方式中，显示状态可以包括但不限于：屏幕的分辨率和/或横竖屏切换。在上述优选实施方式中，当移动设备的屏幕分辨率发生变化，或者是屏幕由横屏切换为竖屏，或者是由竖屏切换为横屏的时候都可以触发移动设备获取自身存储的布局文件对UI的布局进行调整，从而实现UI布局的自适应。

本发明还提供了一种优选的根据获取的布局文件对设备的UI布局进行调整的步骤包括：根据与变化后的显示状态对应的布局文件更新移动设备的UI中控件的尺寸和位置。在上述优选实施方式中，当显示状态发生变化时，根据移动终端中存储的布局文件对移动终端UI中的控件的尺寸和位置进行更新，移动设备自身并不需要进行容器的自适应环节就可以达到对UI的自适应过程，减少了容器自适应带来的移动设备的资源损耗，也减少了自适应过程的耗时。

本发明还对移动设备内部存储的布局文件的生成方法进行了改进，以便达到在独立于移动设备的布局文件生成设备生成对应的布局文件技术效果。为了实现上述目的，具体地，在本发明各个优选的实施例的基础上，从移动设备内部已有的布局文件中获取与变化后的显示状态对应的布局文件之前，UI布局自适应方法还包括：布局文件生成设备根据预定的显示状态变化场景生成存储的布局文件；布局文件生成设备将存储的布局文件下载到移动设备中。在上述优选实施方式中，通过在布局生成设备中生成对应于移动设备的UI布局文件，再将该布局文件下载到终端设备中，从而可以将容器的自适应环节放在PC侧进行，减少容器自适应对移动设备带来的耗时和资源浪费的代价，更适合资源受限的嵌入式设备。同时，编程语言广泛，由于容器以及其自适应机制可以放在PC侧进行，而PC侧开发语言可以有多种(比如java、C++、C)，不局限于嵌入式所需的编程语言，提高了适应性。

本发明还对布局文件生成设备根据预定的显示状态变化场景生成存储的布局文件的步骤进行了改进，以便达到生成移动设备每种状态下都适应且可以随时调用的布局文件。为了实现上述目的，具体的，布局文件生成设备根据预定的显示状态变化场景生成存储的布局文件的步骤包括：布局文件生成设备在预定的显示状态变化场景中根据显示状态变化参数生成格式为XML的文件；布局文件生成设备对格式为可扩展标记语言(Extensible Markup Language，简称为XML)的文件进行解析获取显示状态变化场景中各个控件的尺寸和位置；布局文件生成设备将所获取到的各个控件的尺寸和位置转换成代码；布局文件生成设备对代码进行编译生成存储的布局文件。

在上述优选实施方式中，通过在布局文件中预先指定好移动设备的显示状态，从而生成每种状态下对应的XML格式的文件，再对XML格式的文件中各个控件的位置大小进行测量，从而生成可以直接下载到移动设备中并能为移动设备直接应用的布局文件，给不支持自适应机制的GUI提供了一套解决方案，不需修改现有GUI机制以满足自适应，这样减少了大量代码变更而导致的系统稳定收到影响的问题；同时也避免了因为容器种类演化而对现有的GUI系统带来的稳定风险的问题，提高了系统稳定性。

在本发明各个优选实施方式中，布局文件包括但不限于：用于描述屏幕、界面、容器、控件之间的关系的关系描述文件。在上述优选实施方式中，通过移动设备中存储的布局文件包括，用于描述屏幕、界面、容器、控件之间的关系的关系描述文件，从而使得，在显示状态发生变化的时候可以根据该布局文件对UI的布局进行调整，满足界面自适应的要求。

实施例3

本发明提供了一种优选的实施例来进一步对本发明进行解释，但是值得注意的是，该优选实施例只是为了更好的描述本发明，并不构成对本发明不当的限定。

在本优选实施例中，以个人电脑(Personal Computer，简称为PC)代替布局文件生成设备进行说明，该PC具有一个GUI系统，一套控件库，优选的，还可以包括：UI设计工具。

生成布局文件的过程如图4所示，包括(S402-S412)：

S402：PC中的UI设计工具设计UI。

S404：PC使用容器和控件堆积产生设计出的UI，优选的，可以通过PC中的UI设计工具进行。

S406：根据堆积出的UI模拟分辨率发生变化的情景，对每种情景都生成一份对应的初步布局文件。

例如，存在两种分辨率，则生成两种分辨率下的初步布局文件，优选的，该初步布局文件可以是XML格式的文件。基于UI设计工具，改变屏幕分辨率或改变界面尺寸，界面会根据新的尺寸调整出新的布局，优选的，当这种自动调整不满足用户需求时，用户可以手动调整UI布局，保存新的布局为一份新的XML格式的文件。这样在不同分辨率下，都对应一个XML格式的文件，即一个分辨率或者一种显示状态对应一个界面布局；

在实际应用中，常用的由三种类型的布局容器，分别是：绝对布局容器、线性布局容器以及相对布局容器。各个容器的主要差异在于确定子控件位置的方式，这三种类型的容器确定子控件位置的方式如下：

1)绝对布局容器中子控件的位置需明确指定，是相对于界面左上角的绝对坐标位置。

2)线性布局容器中子控件的位置是由子控件在容器中的顺序、对齐方式以及边缘值确定的。

3)相对布局容器中子控件的位置由相对于父控件和其他子控件的布局参数确定的。

每种容器具有自己特定的组织规则，当容器尺寸发生变化时，容器根据组织规则调整子控件位置尺寸。由于该容器的组织规则代码不需运行在手机上，开发者可以根据自己特长、基础库的情况选择开发所用的语言。其中，布局文件中定义了屏幕、界面、容器、控件元素以及控件属性。UI设计工具在设计UI后，按照定义的格式生成对应的XML格式的文件。

S408：容器根据分辨率对XML格式的初步布局文件进行自适应的调整。

优选的，可以通过以下步骤完成对初步布局文件进行自适应的调整：

S1：容器向子控件发出测量请求，优选的，在本优选实施例中，将除了容器这种特殊的控件以外的其它控件称为子控件；

S2：自上而下遍历控件布局树，通过测量确定每个子布局、子控件的宽度和高度，优选的，测量过程是基于GUI系统进行的，在子控件测量自身尺寸时，如果子控件中包含文本显示信息，还需要根据文本的信息确定子布局、子控件的宽度和高度，然后再计算子控件在容器中的位置。

优选的，在测量过程中，子控件需要尊重计算的规则，如果子控件的尺寸是用户指定的，则需要遵守这种尺寸；如果子控件的尺寸是为了填充容器的，则子控件需要遵守这种预定的规则。

S3：容器根据测量得到的子布局、子控件的宽度和高度分配子控件实际大小和以及在父窗口中的位置。

S410：解析XML格式的初步布局文件，生成代码形式的布局文件，优选的，该代码形式的布局文件可以是C代码形式的布局文件，但是本发明不限于此，还可以为jvva格式、C++格式等，在此不做限定。代码形式的布局文件是绝对布局，不包含任何容器的信息。

优选的，可以通过如下步骤生成代码形式的布局文件：

S1：寻找一个XML解析器或者是开发一个XML解析器，通过该XML解析器解析上述的XML格式的初步布局文件；

S2：调用测量算法测量出每个控件的尺寸和位置(绝对坐标位置)；

S3：输出控件的位置和尺寸成C代码形式的布局文件(绝对布局文件)。

S412：解析完成之后，将C代码形式的布局文件进行交叉编译，然后将其连接烧制到移动设备中。

优选的，在本发明各个优选实施方式中，UI布局管理提供界面的创建、销毁以及界面尺寸位置更新等功能。

移动设备在实际应用中，创建了界面以后，当当前的屏幕由横屏变为竖屏、或者由竖屏切换到横屏、或者是屏幕的分辨率发生变化的时候，移动设备根据变化后的显示状态调用烧制到移动设备中的代码形式的布局文件，并根据该文件对移动设备的UI布局进行调整，从而创建新的界面。例如，当移动设备从竖屏切换到横屏的时候，获取横屏对应的UI布局的C代码形式的布局文件，通过该文件更新竖屏界面中各个控件的位置和尺寸，从而完成UI布局界面的调整，使得此时的UI布局适应当前显示的需求。

从以上的描述中，可以看出，本发明实现了如下技术效果：

1)性能高，将容器的自适应环节放在异于移动设备侧进行，例如在PC侧进行，减少了容器自适应带来的耗时的代价，更适合资源受限的嵌入式设备。

2)稳定性高，给不支持自适应机制的GUI提供了一套解决方案，不需修改现有GUI机制就可以满足自适应的需求，减少了大量代码变更导致的系统稳定受到的影响，同时也避免了因为容器种类演化而对现有的GUI系统造成的风险。

3)因为布局文件生成设备对各种分辨率情况下或横竖屏情况下都生成一份UI描述文件，因此用户可以干预或调整每种情况下的布局文件，从而能达到不同分辨率或横竖屏情况下，UI的灵活变化，而不局限于容器自身的调整规则。

4)编程语言广泛，由于将容器以及其自适应机制都放在PC侧进行，而且PC侧开发语言种类比较多(比如java、C++、C)，而不局限嵌入式所需的编程语言，从而提高了开发的适应性。

显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种用户界面UI布局自适应方法，其特征在于，包括：

当移动设备的显示状态发生变化时，从所述移动设备内部存储的布局文件中获取与变化后的显示状态对应的布局文件；

根据获取的所述布局文件对所述设备的UI布局进行调整。

2.根据权利要求1所述的方法，其特征在于，所述显示状态包括：屏幕的分辨率和/或横竖屏切换。

3.根据权利要求1所述的方法，其特征在于，根据获取的所述布局文件对所述设备的UI布局进行调整的步骤包括：

根据所述与变化后的显示状态对应的布局文件更新所述移动设备的UI中控件的尺寸和位置。

4.根据权利要求1所述的方法，其特征在于，从所述移动设备内部已有的布局文件中获取与变化后的显示状态对应的布局文件之前，还包括：

布局文件生成设备根据预定的显示状态变化场景生成所述存储的布局文件；

所述布局文件生成设备将所述存储的布局文件下载到所述移动设备中。

5.根据权利要求4所述的方法，其特征在于，布局文件生成设备根据预定的显示状态变化场景生成所述存储的布局文件的步骤包括：

所述布局文件生成设备在预定的显示状态变化场景中根据显示状态变化参数生成格式为XML的文件；

所述布局文件生成设备对所述格式为XML的文件进行解析获取显示状态变化场景中各个控件的尺寸和位置；

所述布局文件生成设备将所获取到的各个控件的尺寸和位置转换成代码；

所述布局文件生成设备对所述代码进行编译生成所述存储的布局文件。

6.根据权利要求1-5中任一项所述的方法，其特征在于，所述布局文件包括：用于描述屏幕、界面、容器、控件之间的关系的关系描述文件。

7.一种移动设备，其特征在于，包括：

获取单元，用于在显示状态发生变化时，从所述移动设备内部存储的布局文件中获取与变化后的显示状态对应的布局文件；

调整单元，用于根据获取的所述布局文件对UI布局进行调整。

8.根据权利要求7所述的移动设备，其特征在于，还包括：

存储设备，用于存储布局文件生成设备下载到所述移动设备中的所述存储的布局文件。

9.一种布局生成设备，其特征在于，包括：

生成单元，用于根据预定的显示状态变化场景生成存储在移动设备上的存储的布局文件；

下载单元，用于将所述存储的布局文件下载到所述移动设备中。

10.根据权利要求9所述的布局生成设备，其特征在于，所述生成单元包括：

生成模块，用于在预定的显示状态变化场景中根据显示状态变化参数生成格式为XML的文件；

解析模块，用于对所述格式为XML的文件进行解析获取显示状态变化场景中各个控件的尺寸和位置；

转化模块，用于将所获取到的各个控件的尺寸和位置转换成代码；

编译模块，用于对所述代码进行编译生成所述存储的布局文件。

Images