CN102890632A - 一种屏幕自适应方法、系统和终端设备 - Google Patents

Abstract

本发明公开了一种屏幕自适应的方法、系统和终端设备。本发明通过百分比参数可以在不同分辨率的屏幕上显示出相同的组件布局，组件之间的相对关系不会改变，解决了基于移动中间件平台下的多屏幕适配问题，减少了适配工作量，提高了版本发布效率，同时还通过后台推送界面达到了横竖屏快速切换的效果。本发明中的屏幕自适应原则为：子随父变，父随屏变。即子组件随着父组件的变化而变化，父组件随屏幕变化而变化。屏幕大小决定屏幕组件大小，屏幕组件大小决定其子组件大小。当组件布局发生变化时，分析出可能受到影响的组件，并根据组件的原始百分比数据重新计算组件的坐标和宽高度，生成新布局。

Description

一种屏幕自适应方法、系统和终端设备

技术领域

本发明涉及终端适配领域，尤其涉及一种屏幕自适应方法、系统和终端设备。

背景技术

目前市场上移动终端众多，移动终端的操作系统和屏幕分辨率更是五花八门。目前主流的操作系统有：Symbian S40、symbian S60 2nd、symbian S603rd、symbian^3、symbian anna、windows mobile 5.x-7、iPhone OS 3.x-5.x、OMS、android1.5-4.x、Blackberry OS等；目前智能机型的主要分辨率有：240X320、320X240、320X480、320X640、480X800；480X854、640X960、960*540、1024X720、1024X800等等；

为了解决移动应用开发门槛高，适配工作量大的问题有人提出了移动中间件技术。移动中间件屏蔽了操作系统的底层差异，实现了跨操作系统快速开发，开发者只需要开发一套业务界面即可在不同的操作系统运行。但移动终端屏幕大小不统一，仍需要根据不同大小的屏幕制作不同的界面，需要经过高保真效果图重设，切片处理，编码，测试等步骤才能新增一款分辨率适配。

为此，谷歌把Android1.6以上系统设计为一个可以在多种不同分辨率的设备上运行的操作系统。对于应用程序来说，Android系统向它们提供的是一个跨分辨率的运行环境，其中关于如何将程序以正确的方式显示到它所运行的终端屏幕上所需要的大部分技术细节，都由系统本身进行了处理，无需程序的干预。但是该技术有其局限性，它只限android1.6以上系统，且必须使用android系统UI组件，而对于期望开发一个跨平台、完整、个性、可控的UI界面的中间件，系统组件是不可取的，Android系统自带的跨分辨力技术也只能止步于此。

发明内容

本发明实施例的目的在于提出一种屏幕自适应方法，旨在解决现有技术中适配工作量大、开发门槛高的技术问题，还解决了在现有中间件技术中适配效率低下的技术问题，同时还解决了android提供的系统组件无法实现跨平台、完整、个性、可控的UI界面的技术问题。

本发明实施例是这样实现的，一种屏幕自适应的方法，所述方法包括步骤：

获取UI数据包；

解析所述UI数据包获取组件的组件参数、组件属性和嵌套关系；

根据所述组件属性、组件参数和嵌套关系绘制所述组件。

本发明实施例的另一目的在于提出一种屏幕自适应的系统，所述系统包括第一获取模块、解析模块、第二获取模块和绘制模块；

所述第一获取模块，与所述解析模块相连，用于获取UI数据包；

所述解析模块，与所述第一获取模块和第二获取模块相连，用于解析所述UI数据包；

所述第二获取模块，与所述解析模块和绘制模块相连，用于获取组件的组件参数、组件属性和嵌套关系；

所述绘制模块，与所述第二获取模块相连，用于根据所述组件属性、组件参数和嵌套关系绘制所述组件。

本发明实施例的另一目的在于提出一种屏幕自适应的终端设备，所述设备包括了所述屏幕自适应系统。

本发明通过百分比参数可以在不同分辨率的屏幕上显示出相同的组件布局，组件之间的相对关系不会改变，解决了基于移动中间件平台下的多屏幕适配问题，减少了适配工作量，提高了版本发布效率，同时还通过后台推送界面达到了横竖屏快速切换的效果。本发明中的屏幕自适应原则为：子随父变，父随屏变。即子组件随着父组件的变化而变化，父组件随屏幕变化而变化。屏幕大小决定屏幕组件大小，屏幕组件大小决定其子组件大小。当有任何引起组件布局变化的因素(横竖屏切换、网络数据更新、组件移动等)发生时，分析出可能受到影响的组件，并根据新的屏幕宽高度或父组件宽高度重新计算各组件的坐标、宽高、长度、距离、间隔等信息，生成新布局。

附图说明

图1是本发明一种屏幕自适应方法的第一优选实施例流程图；

图2是本发明一种屏幕自适应方法的第二优选实施例流程图；

图3是本发明com1在320x480屏幕上的宽高度示意图；

图4是本发明com2在320x480屏幕上的宽高度示意图；

图5是本发明com1和com2在320x480屏幕上的绘制效果图；

图6是本发明com3在320x480屏幕上的宽高度示意图；

图7是本发明com1、com2和com3在320x480屏幕上的绘制效果图；

图8是本发明com1、com2和com3在480x800屏幕上的绘制效果图；

图9是本发明com1、com2和com3在240x320屏幕上的绘制效果图；

图10是本发明com1、com2和com3在320x480横屏状态下的绘制效果图；

图11是本发明一种屏幕自适应系统的第一优选实施例结构示意图；

图12是本发明一种屏幕自适应系统的第二优选实施例结构示意图；

图13是本发明一种屏幕自适应系统的第三优选实施例结构示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图和实施例，对本发明进行进一步详细说明，为了便于说明，仅示出了与本发明实施例相关的部分。应当理解，此处所描写的具体实施例，仅仅用于解释本发明，并不用以限制本发明。

本发明通过百分比参数可以在不同分辨率的屏幕上显示出相同的组件布局，组件之间的相对关系不会改变，解决了基于移动中间件平台下的多屏幕适配问题，减少了适配工作量，提高了版本发布效率，同时还通过后台推送界面达到了横竖屏快速切换的效果。本发明中的屏幕自适应原则为：子随父变，父随屏变。即子组件随着父组件的变化而变化，父组件随屏幕变化而变化。屏幕大小决定屏幕组件大小，屏幕组件大小决定其子组件大小。当有任何引起组件布局变化的因素(横竖屏切换、网络数据更新、组件移动等)发生时，分析出可能受到影响的组件，并根据新的屏幕宽高度或父组件宽高度重新计算各组件的坐标、宽高、长度、距离、间隔等信息，生成新布局。

实施例一

图1是本发明一种屏幕自适应方法的第一优选实施例流程图。所述方法包括步骤：

S101，获取UI数据包；

在此之前，首先由服务器端根据UI设计需求定义组件的组件绘制信息，并根据所述组件绘制信息创建UI数据包；

然后由中间件获取所述UI数据包；

所述UI数据包封装了中间件所需组件的组件参数、组件属性和组件的嵌套关系，并由服务器端提供；

所述组件(Component)为中间件UI层最基础的显示单元，可显示文字、图片、动画、网页、视频等等；

每个组件作为ui界面的显示单元，都有一个独一无二的组件名称，所述组件名称用来区分每个组件；

S102，解析所述UI数据包获取组件的组件绘制信息；

所述组件绘制信息包括组件的组件参数、组件属性和嵌套关系；

所述组件参数包括组件的坐标(x坐标、y坐标)和组件的宽高度(宽度、高度)，所述组件参数可以是像素值参数，也可以是百分比参数，分别以x、y、width、height来表示x坐标、y坐标、宽度和高度，其中百分比参数中的x坐标、y坐标称为相对坐标，百分比参数中的宽度和高度称为相对宽高度；

所述百分比参数中的相对坐标指所述组件相对于父组件或者屏幕左上角的坐标位置，是以父组件或者屏幕的宽高作为计算基数；无父组件的组件的相对坐标计算以屏幕宽高为计算基数；

也就是，当所述组件有父组件时，所述相对坐标为所述组件左上角的绝对坐标与父组件左上角的绝对坐标的差占父组件宽高度的百分比；当所述组件无父组件时，所述相对坐标为所述组件左上角的绝对坐标占屏幕宽高度的百分比；

有父组件的组件的相对坐标是相对父组件的坐标体系中的，以父组件的左上角为坐标原点，向左x增大，向下y增大；

在本发明中，用到的基准坐标体系为：以屏幕左上角为原点，原点向左作为x坐标的增大方向，原点向下作为y坐标的增大方向，则屏幕所在坐标区域为[0，屏幕宽度]x[0，屏幕高度]；

所述百分比参数中的相对宽高度指所述组件绝对宽高度相对于父组件或者屏幕绝对宽高度的百分比；

所述像素值参数包括所述组件的绝对坐标和绝对宽高度；

所述绝对坐标指绘制所述组件时，所述组件相对于屏幕左上角的坐标位置；

所述组件相对于屏幕左上角的坐标位置也称起始坐标；

所述组件属性包括父组件名称和子组件序列；所述父组件名称记录了所述组件的父组件；所述父组件是指包含有子组件的组件；所述子组件序列记录了所述组件的所有子组件；所述子组件是指被父组件包含的组件，可以迭代包含再下一级子组件；每个组件都可以作为其他组件的父组件，也可以有一组子组件序列，组件的父组件只能有一个，子组件序列可以有多个；例如分别以parent和subList表示组件的父组件名称和组件的子组件序列；

所述组件可以为若干个组件，每个组件之间通过所述组件属性中的父组件名称和子组件序列建立嵌套关系，所述嵌套关系包括包含关系或者被包含关系；

S103，根据所述组件绘制信息绘制所述组件。

实施例二

图2是本发明一种屏幕自适应方法的第二优选实施例流程图。所述方法包括步骤：

S201，根据UI设计需求定义组件的百分比参数和组件属性，并根据所述百分比参数和组件属性创建UI数据包；

服务器端根据产品UI设计需求，确定界面布局，定义所需组件的组件类型、百分比参数和组件间的相互关系，并根据所述百分比参数和组件属性创建UI数据包；

在定义百分比参数时，可以根据UI设计需求，选取任一分辨率屏幕为参照物来定义组件的百分比参数；

为了确定组件的显示位置，在服务器端创建UI数据包时必须定义所述组件的组件参数，所述百分比参数包括组件的坐标(x坐标、y坐标)和组件的宽高度(宽度、高度)，分别用x、y、width、height来表示x坐标、y坐标、宽度和高度，以百分比参数表示的坐标称为相对坐标，以百分比参数表示的宽度和高度称为相对宽高度；

此外，在创建UI数据包时还必须定义所述组件的组件属性，所述组件属性包括父组件名称和子组件序列；所述父组件名称记录了所述组件的父组件所述父组件是指包含有子组件的组件；所述子组件序列记录了所述组件的所有子组件；所述子组件是指被父组件包含的组件，可以迭代包含再下一级子组件；每个组件都可以作为其他组件的父组件，也可以有一组子组件序列，组件的父组件只能有一个，子组件序列可以有多个；例如分别以parent和subList表示组件的父组件名称和组件的子组件序列；

所述组件可以为若干个组件，每个组件之间通过所述组件属性中的父组件名称和子组件序列建立嵌套关系，所述嵌套关系包括包含关系或者被包含关系；

根据UI设计需求选取任一分辨率屏幕为参照物来定义组件的百分比参数，具体为：

根据UI设计需求选取任一分辨率屏幕为参照物估算组件的估算坐标和估算宽高度；

根据所述估算坐标和估算宽高度获取所述组件的相对坐标和相对宽高度；

其中，所述组件的相对坐标等于所述组件的估算坐标减去父组件的估算坐标的差再除以父组件的估算宽高度；

所述组件的相对宽高度等于所述组件的估算宽高度除以父组件的估算宽高度；

为便于理解，举例说明，例如根据产品UI设计需求需要用到2个组件com1和com2，其中com1包含com2，com1组件从屏幕左上角开始绘制，撑满整个屏幕，com2绘制在com1组件的内部，com1和com2之间的布局如图5所示；

这时，先以分辨率屏幕为320x480为参照物，设计组件com1和com2，com1组件从屏幕左上角开始绘制，撑满整个屏幕，其中com1的估算坐标为屏幕左上角坐标(0，0)，估算宽高度为屏幕宽高度(320，480)；

估算到com2组件的估算坐标为(0，120)，估算宽高度为(320，96)，并绘制在com1组件的内部，com1和com2的估算坐标和估算宽高度如图5所示；

进一步，定义com2为com1的子组件，除com2组件外，无其他关联组件，所以可以定义com1为屏幕组件，即parent属性为空，子组件列表subLi st中只包含com2一个组件；

进一步，确定com2的组件属性，其中父组件名称为com1，即parent属性为com1，无子组件，所以子组件序列subList列表为空；

进一步，将估算坐标和估算宽高度转换为相对坐标和相对宽高度，即转换为百分比参数，从屏幕组件开始换算，具体为：

com1组件为屏幕组件，com1的百分比参数换算都以屏幕宽高为参照值，com1的相对坐标和相对宽高度都是相对于屏幕的；

com1组件的估算坐标(0，0)减去屏幕左上角坐标(0，0)，得(0，0)，换算相对坐标为(0/屏幕宽度，0/屏幕高度)＝(0/320，0/480)＝(0，0)，所以com1组件的相对坐标还是(0，0)；

屏幕组件com1的相对宽高度为屏幕组件的估算宽高度除以屏幕宽高度的比例值，所以com1的估算宽高(320，480)除以屏幕宽高(320，480)＝＞(320/320，480/480)＝＞相对坐标(100％，100％)，即com1的相对宽高度为(100％，100％)；

这时，有了相对坐标和相对宽高度就能保证com1组件在任何屏幕上绘制时都是撑满整个屏幕的；

同理，com2组件的父组件名称为com1组件，即com2的父组件为com1，com2的百分比参数换算过程都是以com2的父组件com1的宽高度为参照值，com2的相对坐标和相对宽高度都是相对于com1的；

com2的估算坐标(0，120)减去com1的估算坐标(0，0)，得com2相对于com1的坐标(0-0，120-0)＝(0，120)，再除以com1的估算宽高度(0/320，120/480)即可得出com2的相对坐标(0，25％)；

com2组件的相对宽高度为com2组件的估算宽高度除以父组件com1的估算宽高度的比例值，也就是com2的估算宽高度(320，96)除以com1的估算宽高度(320，480)＝＞(320/320，96/480)，得相对宽高度(100％，20％)；

综上可知，com1组件的相对坐标为(0，0)，相对宽高度为(100％，100％)；

com2组件的相对坐标为(0，25％)，相对宽高度为(100％，20％)；

最后将所述组件的百分比参数和组件属性封装为UI数据包；

S202，获取UI数据包；

这里是中间件在进行屏幕适配时，无论中间件需要对哪种分辨率的屏幕进行适配，这时都需要获取UI数据包中的百分比参数，并可以根据所述百分比参数进行各种分辨率屏幕的自适应；

S203，解析所述UI数据包获取所述组件的百分比参数和组件属性；

为便于理解，举例说明，例如解析所述UI数据包获取到组件为com1和com2，com1和com2通过各自对应的父组件名称parent和子组件序列subList建立起彼此间包含与被包含的嵌套关系，其中com1包含com2；

获取com1的组件属性，其中com1的父组件名称parent为空，子组件序列subList为com2，这说明com1是没有父组件的，其有的子组件是com2，com1为屏幕组件；

获取com2的组件属性，其中父组件名称parent为com1，这说明com2的父组件是com1；

获取到com1的百分比参数，x、y、width、height分别为0、0、100％、100％；

获取到com2的百分比参数x、y、width、height分别为0、25％、100％、20％；

S204，将所述组件的百分比参数转换为像素值参数；

所述像素值参数中的绝对坐标等于所述组件的相对坐标*所述组件父组件的绝对宽高度+父组件的绝对坐标；

所述像素值参数中的绝对宽高度等于所述组件的相对宽高度*所述组件父组件的绝对宽高度；

其中，屏幕组件的绝对坐标等于屏幕组件的相对坐标*屏幕宽高度；屏幕组件的绝对宽高度等于屏幕组件的相对宽高度*屏幕宽高度；

举例说明：com1的绝对坐标与屏幕左上角坐标重合，所以com1从屏幕左上角的位置开始绘制；

com1的绝对宽度＝100％*屏幕宽度＝屏幕宽度，com1的绝对高度＝100％*屏幕高度＝屏幕高度；

com2的相对坐标为(0，25％)，则com2的绝对坐标为；(0，25％*com1的绝对高度)，累加上com1的绝对坐标(0，0)，得com2的绝对坐标(0，25％*com1绝对高度)；

com2的相对宽高度(100％，20％)都是以父组件com1的绝对宽高度为参照值，可计算得出com2的绝对宽高度为(100％*com1绝对宽度，20％*com1绝对高度)；

以320x480屏幕为例：

com1组件的绝对坐标和绝对宽高度分别为：(0，0)、(320，480)，如图3所示为com1在320x480屏幕上的宽高度示意图；

com2组件的绝对坐标为(0，25％*com1的绝对高度)＝(0，25％*480)＝(0，120)，com2的绝对宽高度为(100％*com1的绝对宽度，20％*com1的绝对高度)＝＞(320，96)，如图4所示为com2在320x480屏幕上的宽高度示意图；

S205，根据所述组件的像素值参数和组件属性按照由前到后的顺序绘制所述组件；

也就是根据所述组件的绝对坐标、绝对宽高度、组件属性和嵌套关系绘制所述组件；

在本例中，com1包含com2，com1为屏幕组件，则首先绘制com1，再绘制com2，com1和com2在320x480屏幕上绘制完成后的效果如图5所示；

为便于理解，再次以3个组件举例说明：

例如根据UI设计需求估算出com1的相对坐标为(0，0)，相对宽高度为(100％，100％)；估算出com2的相对坐标为(0，25％)，相对宽高度为(100％，20％)；估算出com3的相对坐标(0，0)，组件宽高度(20％，100％)；此外，com1包含com2(说明：直接包含关系才能说是子组件，子组件的子组件不能说成是子组件)，com2包含com3，com1、com2和com3的布局如图7所示；

获取UI数据包后，解析所述UI数据包，并获取到com1的组件属性，其中com1的父组件名称parent为空，子组件序列subList包含com2，这说明com1是没有父组件的，其子组件只有com2，com1为屏幕组件；

获取到com2的组件属性，其中com2的父组件名称parent为com1，其子组件序列subList包含com3，这说明com2的父组件是com1，子组件只有com3；

获取到com3的组件属性，其中com3的父组件名称parent为com2，这说明com3的父组件是com2；

同时，还获取到com1的相对坐标为(0，0)，相对宽高度为(100％，100％)；

获取到com2的相对坐标为(0，25％)，相对宽高度为(100％，20％)；

获取到com3的相对坐标(0，0)，组件宽高度(20％，100％)；

进一步得知，com1为屏幕组件，其绝对坐标与屏幕左上角坐标重合，所以com1从屏幕左上角的位置开始绘制；

com1的绝对宽度＝100％*屏幕宽度＝屏幕宽度，com1的绝对高度＝100％*屏幕高度＝屏幕高度＝(320，480)，如图3所示；

com2组件的绝对坐标为：com2的相对坐标为(0，25％)＝(0，25％*com1的绝对高度)，累加上com1的绝对坐标(0，0)，得com2的绝对坐标(0，25％*com1绝对高度)，即(0，25％*com1绝对高度)＝(0，25％*480)＝(0，120)；

com2的绝对宽高度为(100％*com1的绝对宽度，20％*com1的绝对高度)＝＞(320，96)，如图4所示；

同理，com3的绝对坐标为(0，25％*com2的绝对高度)＝(0，120)；

com3的绝对宽高度为(20％*com2的绝对宽度，100％*com2的绝对高度)＝(64，96)，如图6所示；

进一步确定com1、com2和com3之间的嵌套关系为：com1包含com2，com2包含com3；

进一步，根据嵌套关系确定由前到后的绘制顺序；

首先，绘制com1；

其次，绘制com2；

最后，绘制com3；

com1、com2和com3绘制完成后的最终效果如图7所示；

同理，com1、com2、com3三个组件在480x800屏幕中的绘制效果，如图8所示，所有组件的绝对坐标和绝对宽高度都在图中做了标示；

同理，com1、com2、com3三个组件在240x320屏幕中的绘制效果，如图9所示，所有组件的绝对坐标和绝对宽高度都在图中做了标示；

同理，对同一分辨率屏幕上的横竖屏效果比较，以320x480屏幕为例，继续引用与上面相同的com1、com2、com3三个组件；

横屏后，屏幕的宽高分别为480、320；

com1组件的绝对坐标为(0，0)，com1的绝对宽高度为(100％，100％)＝＞(480，320)；

com2组件的相对坐标为(0，25％)＝＞(0，25％*320)＝＞(0，80)，com2的父组件com1的绝对坐标为(0，0)，累加上父组件com1的绝对坐标可得com2的绝对坐标坐标(0，80)；

com2的绝对宽高度(100％，20％)＝＞(100％*480，20％*320)＝＞(480，64)；

同理可得，com3组件的绝对坐标为(0，80)，com3的绝对宽高度为(96，64)；

com1、com2和com3在320x480的横屏状态下的绘制完成后的效果如图10所示；

同理，可以绘制com1、com2和com3在其他分辨率屏幕状态下的绘制效果图，此处不再赘述；

通过以上三个尺寸的屏幕效果图比较，可以看出com1、com2、com3这个三个组件通过简单的百分比参数可以在不同分辨率的手机屏幕上显示出相同的布局，组件之间的相对关系也完全一致。

本发明通过百分比参数可以在不同分辨率的屏幕上显示出相同的组件布局，组件之间的相对关系不会改变，解决了基于移动中间件平台下的多屏幕适配问题，减少了适配工作量，提高了版本发布效率，同时还通过后台推送界面达到了横竖屏快速切换的效果。本发明中的屏幕自适应原则为：子随父变，父随屏变。即子组件随着父组件的变化而变化，父组件随屏幕变化而变化。屏幕大小决定屏幕组件大小，屏幕组件大小决定其子组件大小。当有任何引起组件布局变化的因素(横竖屏切换、网络数据更新、组件移动等)发生时，分析出可能受到影响的组件，并根据新的屏幕宽高度或父组件宽高度重新计算各组件的坐标、宽高、长度、距离、间隔等信息，生成新布局。

实施例三

图11是本发明一种屏幕自适应系统的第一优选实施例结构示意图。

所述系统包括第一获取模块、解析模块、第二获取模块和绘制模块；

所述第一获取模块，与所述解析模块相连，用于获取UI数据包；

在此之前，首先由服务器端根据UI设计需求定义组件的组件参数和组件属性，并根据所述组件参数和组件属性创建UI数据包；

然后由中间件获取所述UI数据包；

所述UI数据包封装了中间件所需组件的组件参数、组件属性和组件的嵌套关系，并由服务器端提供；

所述组件(Component)为中间件UI层最基础的显示单元，可显示文字、图片、动画、网页、视频等等；

每个组件作为ui界面的显示单元，都有一个独一无二的组件名称，所述组件名称用来区分每个组件；

所述解析模块，与所述第一获取模块和第二获取模块相连，用于解析所述UI数据包；

所述第二获取模块，与所述解析模块和绘制模块相连，用于获取组件的组件绘制信息；

所述组件绘制信息包括组件参数、组件属性和嵌套关系；

所述组件参数包括组件的坐标(x坐标、y坐标)和组件的宽高度(宽度、高度)，所述组件参数可以是像素值参数，也可以是百分比参数，分别以x、y、width、height来表示x坐标、y坐标、宽度和高度，其中百分比参数中的x坐标、y坐标称为相对坐标，百分比参数中的宽度和高度称为相对宽高度；

所述百分比参数中的相对坐标指所述组件相对于父组件或者屏幕左上角的坐标位置，是以父组件或者屏幕的宽高作为计算基数；无父组件的组件的相对坐标计算以屏幕宽高为计算基数；

也就是，当所述组件有父组件时，所述相对坐标为所述组件左上角的绝对坐标与父组件左上角的绝对坐标的差占父组件宽高度的百分比；当所述组件无父组件时，所述相对坐标为所述组件左上角的绝对坐标占屏幕宽高度的百分比；

有父组件的组件的相对坐标是相对父组件的坐标体系中的，以父组件的左上角为坐标原点，向左x增大，向下y增大；

在本发明中，用到的基准坐标体系为：以屏幕左上角为原点，原点向左作为x坐标的增大方向，原点向下作为y坐标的增大方向，则屏幕所在坐标区域为[0，屏幕宽度]x[0，屏幕高度]；

所述百分比参数中的相对宽高度指所述组件绝对宽高度相对于父组件或者屏幕绝对宽高度的百分比；

所述像素值参数包括所述组件的绝对坐标和绝对宽高度；

所述绝对坐标指绘制所述组件时，所述组件相对于屏幕左上角的坐标位置；

所述组件相对于屏幕左上角的坐标位置也称起始坐标；

所述组件属性包括父组件名称和子组件序列；所述父组件名称记录了所述组件的父组件；所述父组件是指包含有子组件的组件；所述子组件序列记录了所述组件的所有子组件；所述子组件是指被父组件包含的组件，可以迭代包含再下一级子组件；每个组件都可以作为其他组件的父组件，也可以有一组子组件序列，组件的父组件只能有一个，子组件序列可以有多个；例如分别以parent和subList表示组件的父组件名称和组件的子组件序列；

所述组件可以为若干个组件，每个组件之间通过所述组件属性中的父组件名称和子组件序列建立嵌套关系，所述嵌套关系包括包含关系或者被包含关系；

所述绘制模块，与所述第二获取模块相连，用于根据所述组件绘制信息绘制所述组件。

对上述方案进一步优化在于，所述系统还包括定义模块和创建模块，如图12所示是本发明一种屏幕自适应系统的第二优选实施例结构示意图。

所述定义模块，与所述创建模块相连，用于根据UI设计需求定义组件的组件绘制信息；

所述创建模块，与所述定义模块和第一获取模块相连，用于根据所述组件绘制信息创建UI数据包。

服务器端根据产品UI设计需求，确定界面布局，定义所需组件的组件类型、组件参数和组件间的相互关系，并根据所述组件参数和组件属性创建UI数据包。

对上述方案进一步优化在于，所述系统还包括转换模块，如图13所示为本发明一种屏幕自适应系统的第三优选实施例结构示意图。

所述定义模块还用于根据UI设计需求定义组件的百分比参数和组件属性；

服务器端根据产品UI设计需求，确定界面布局，定义所需组件的组件类型、百分比参数和组件间的相互关系，并根据所述百分比参数和组件属性创建UI数据包；

在定义百分比参数时，可以根据UI设计需求，选取任一分辨率屏幕为参照物来定义组件的百分比参数；

为了确定组件的显示位置，在服务器端创建UI数据包时必须定义所述组件的组件参数，所述百分比参数包括组件的坐标(x坐标、y坐标)和组件的宽高度(宽度、高度)，分别用x、y、width、height来表示x坐标、y坐标、宽度和高度，以百分比参数表示的坐标称为相对坐标，以百分比参数表示的宽度和高度称为相对宽高度；

所述创建模块还用于根据所述百分比参数和组件属性创建UI数据包；

在创建UI数据包时还必须定义所述组件的组件属性，所述组件属性包括父组件名称和子组件序列；所述父组件名称记录了所述组件的父组件；所述父组件是指包含有子组件的组件；所述子组件序列记录了所述组件的所有子组件；所述子组件是指被父组件包含的组件，可以迭代包含再下一级子组件；每个组件都可以作为其他组件的父组件，也可以有一组子组件序列，组件的父组件只能有一个，子组件序列可以有多个；例如分别以parent和subList表示组件的父组件名称和组件的子组件序列；

所述组件可以为若干个组件，每个组件之间通过所述组件属性中的父组件名称和子组件序列建立嵌套关系，所述嵌套关系包括包含关系或者被包含关系；

根据UI设计需求选取任一分辨率屏幕为参照物来定义组件的百分比参数，具体为：

根据UI设计需求选取任一分辨率屏幕为参照物估算组件的估算坐标和估算宽高度；

根据所述估算坐标和估算宽高度获取所述组件的相对坐标和相对宽高度；

其中，所述组件的相对坐标等于所述组件的估算坐标减去父组件的估算坐标的差再除以父组件的估算宽高度；

所述组件的相对宽高度等于所述组件的估算宽高度除以父组件的估算宽高度；

为便于理解，举例说明，例如根据产品UI设计需求需要用到2个组件com1和com2，其中com1包含com2，com1组件从屏幕左上角开始绘制，撑满整个屏幕，com2绘制在com1组件的内部，com1和com2之间的布局如图5所示；

这时，先以分辨率屏幕为320x480为参照物，设计组件com1和com2，com1组件从屏幕左上角开始绘制，撑满整个屏幕，其中com1的估算坐标为屏幕左上角坐标(0，0)，估算宽高度为屏幕宽高度(320，480)；

估算到com2组件的估算坐标为(0，120)，估算宽高度为(320，96)，并绘制在com1组件的内部，com1和com2的估算坐标和估算宽高度如图5所示；

进一步，定义com2为com1的子组件，除com2组件外，无其他关联组件，所以可以定义com1为屏幕组件，即parent属性为空，子组件列表subList中只包含com2一个组件；

进一步，确定com2的组件属性，其中父组件名称为com1，即parent属性为com1，无子组件，所以子组件序列subList列表为空；

进一步，将估算坐标和估算宽高度转换为相对坐标和相对宽高度，即转换为百分比参数，从屏幕组件开始换算，具体为：

com1组件为屏幕组件，com1的百分比参数换算都以屏幕宽高为参照值，com1的相对坐标和相对宽高度都是相对于屏幕的；

com1组件的估算坐标(0，0)减去屏幕左上角坐标(0，0)，得(0，0)，换算相对坐标为(0/屏幕宽度，0/屏幕高度)＝(0/320，0/480)＝(0，0)，所以com1组件的相对坐标还是(0，0)；

屏幕组件com1的相对宽高度为屏幕组件的估算宽高度除以屏幕宽高度的比例值，所以com1的估算宽高(320，480)除以屏幕宽高(320，480)＝＞(320/320，480/480)＝＞相对坐标(100％，100％)，即com1的相对宽高度为(100％，100％)；

这时，有了相对坐标和相对宽高度就能保证com1组件在任何屏幕上绘制时都是撑满整个屏幕的；

同理，com2组件的父组件名称为com1组件，即com2的父组件为com1，com2的百分比参数换算过程都是以com2的父组件com1的宽高度为参照值，com2的相对坐标和相对宽高度都是相对于com1的；

com2的估算坐标(0，120)减去com1的估算坐标(0，0)，得com2相对于com1的坐标(0-0，120-0)＝(0，120)，再除以com1的估算宽高度(0/320，120/480)即可得出com2的相对坐标(0，25％)；

com2组件的相对宽高度为com2组件的估算宽高度除以父组件com1的估算宽高度的比例值，也就是com2的估算宽高度(320，96)除以com1的估算宽高度(320，480)＝＞(320/320，96/480)，得相对宽高度(100％，20％)；

综上可知，com1组件的相对坐标为(0，0)，相对宽高度为(100％，100％)；

com2组件的相对坐标为(0，25％)，相对宽高度为(100％，20％)；

最后将所述组件的百分比参数和组件属性封装为UI数据包；

通过所述第一获取模块获取所述UI数据包；

所述解析模块解析所述UI数据包；

所述第二获取模块，与所述解析模块、转换模块和绘制模块相连，还用于获取所述组件的百分比参数和组件属性；

为便于理解，举例说明，例如解析所述UI数据包获取到组件为com1和com2，com1和com2通过各自对应的父组件名称parent和子组件序列subList建立起彼此间包含与被包含的嵌套关系，其中com1包含com2；

获取com1的组件属性，其中com1的父组件名称parent为空，子组件序列subList为com2，这说明com1是没有父组件的，其有的子组件是com2，com1为屏幕组件；

获取com2的组件属性，其中父组件名称parent为com1，这说明com2的父组件是com1；

获取到com1的百分比参数，x、y、width、height分别为0、0、100％、100％；

获取到com2的百分比参数x、y、width、height分别为0、25％、100％、20％；

所述转换模块，与所述第二获取模块和绘制模块相连，用于将所述组件的百分比参数转换为像素值参数；

所述像素值参数中的绝对坐标等于所述组件的相对坐标*所述组件父组件的绝对宽高度+父组件的绝对坐标；

所述像素值参数中的绝对宽高度等于所述组件的相对宽高度*所述组件父组件的绝对宽高度；

其中，屏幕组件的绝对坐标等于屏幕组件的相对坐标*屏幕宽高度；屏幕组件的绝对宽高度等于屏幕组件的相对宽高度*屏幕宽高度；

举例说明：com1的绝对坐标与屏幕左上角坐标重合，所以com1从屏幕左上角的位置开始绘制；

com1的绝对宽度＝100％*屏幕宽度＝屏幕宽度，com1的绝对高度＝100％*屏幕高度＝屏幕高度；

com2的相对坐标为(0，25％)，则com2的绝对坐标为：(0，25％*com1的绝对高度)，累加上com1的绝对坐标(0，0)，得com2的绝对坐标(0，25％*com1绝对高度)；

com2的相对宽高度(100％，20％)都是以父组件com1的绝对宽高度为参照值，可计算得出com2的绝对宽高度为(100％*com1绝对宽度，20％*com1绝对高度)；

以320x480屏幕为例：

com1组件的绝对坐标和绝对宽高度分别为：(0，0)、(320，480)，如图3所示为com1在320x480屏幕上的宽高度示意图；

com2组件的绝对坐标为(0，25％*com1的绝对高度)＝(0，25％*480)＝(0，120)，com2的绝对宽高度为(100％*com1的绝对宽度，20％*com1的绝对高度)＝＞(320，96)，如图4所示为com2在320x480屏幕上的宽高度示意图；

所述绘制模块，与所述第二获取模块和转换模块相连，还用于根据所述组件属性和像素值参数按照由前到后的顺序绘制所述组件。

也就是根据所述组件的绝对坐标、绝对宽高度、组件属性和嵌套关系绘制所述组件；

在本例中，com1包含com2，com1为屏幕组件，则首先绘制com1，再绘制com2，com1和com2在320x480屏幕上绘制完成后的效果如图5所示；

为便于理解，再次以3个组件举例说明：

例如根据UI设计需求估算出com1的相对坐标为(0，0)，相对宽高度为(100％，100％)；估算出com2的相对坐标为(0，25％)，相对宽高度为(100％，20％)；估算出com3的相对坐标(0，0)，组件宽高度(20％，100％)；此外，com1包含com2，com2包含com3，com1、com2和com3的布局如图7所示；

获取UI数据包后，解析所述UI数据包，并获取到com1的组件属性，其中com1的父组件名称parent为空，子组件序列subList包含com2，这说明com1是没有父组件的，其子组件只有com2，com1为屏幕组件；

获取到com2的组件属性，其中com2的父组件名称parent为com1，其子组件序列subList包含com3，这说明com2的父组件是com1，子组件只有com3；

获取到com3的组件属性，其中com3的父组件名称parent为com2，这说明com3的父组件是com2；

同时，还获取到com1的相对坐标为(0，0)，相对宽高度为(100％，100％)；

获取到com2的相对坐标为(0，25％)，相对宽高度为(100％，20％)；

获取到com3的相对坐标(0，0)，组件宽高度(20％，100％)；

进一步得知，com1为屏幕组件，其绝对坐标与屏幕左上角坐标重合，所以com1从屏幕左上角的位置开始绘制；

com1的绝对宽度＝100％*屏幕宽度＝屏幕宽度，com1的绝对高度＝100％*屏幕高度＝屏幕高度＝(320，480)，如图3所示；

com2组件的绝对坐标为：com2的相对坐标为(0，25％)＝(0，25％*com1的绝对高度)，累加上com1的绝对坐标(0，0)，得com2的绝对坐标(0，25％*com1绝对高度)，即(0，25％*com1绝对高度)＝(0，25％*480)＝(0，120)；

com2的绝对宽高度为(100％*com1的绝对宽度，20％*com1的绝对高度)＝＞(320，96)，如图4所示；

同理，com3的绝对坐标为(0，25％*com2的绝对高度)＝(0，120)；

com3的绝对宽高度为(20％*com2的绝对宽度，100％*com2的绝对高度)＝(64，96)，如图6所示；

进一步确定com1、com2和com3之间的嵌套关系为：com1包含com2，com2包含com3；

进一步，根据嵌套关系确定由前到后的绘制顺序；

首先，绘制com1；

其次，绘制com2；

最后，绘制com3；

com1、com2和com3绘制完成后的最终效果如图7所示；

同理，com1、com2、com3三个组件在480x800屏幕中的绘制效果，如图8所示，所有组件的绝对坐标和绝对宽高度都在图中做了标示；

同理，com1、com2、com3三个组件在240x320屏幕中的绘制效果，如图9所示，所有组件的绝对坐标和绝对宽高度都在图中做了标示；

同理，对同一分辨率屏幕上的横竖屏效果比较，以320x480屏幕为例，继续引用与上面相同的com1、com2、com3三个组件；

横屏后，屏幕的宽高分别为480、320；

com1组件的绝对坐标为(0，0)，com1的绝对宽高度为(100％，100％)

＝＞(480，320)；

com2组件的相对坐标为(0，25％)＝＞

(0，25％*320)＝＞

(0，80)，com2的父组件com1的绝对坐标为(0，0)，累加上父组件com1的绝对坐标可得com2的绝对坐标坐标(0，80)；

com2的绝对宽高度(100％，20％)＝＞

(100％*480，20％*320)

(480，64)；

同理可得，com3组件的绝对坐标为(0，80)，com3的绝对宽高度为(96，64)；

com1、com2和com3在320x480的横屏状态下的绘制完成后的效果如图10所示；

同理，可以绘制com1、com2和com3在其他分辨率屏幕状态下的绘制效果图，此处不再赘述；

通过以上三个尺寸的屏幕效果图比较，可以看出com1、com2、com3这个三个组件通过简单的百分比参数可以在不同分辨率的手机屏幕上显示出相同的布局，组件之间的相对关系也完全一致。

本实施例中，第一获取模块用于获取UI数据包；解析模块用于解析所述UI数据包；第二获取模块用于获取组件的组件参数、组件属性和嵌套关系；绘制模块用于根据所述组件属性、组件参数和嵌套关系绘制所述组件。本实施例实现了屏幕自适应的效果。特别地，通过百分比参数可以在不同分辨率的屏幕上显示出相同的组件布局，组件之间的相对关系不会改变，解决了基于移动中间件平台下的多屏幕适配问题，减少了适配工作量，提高了版本发布效率，同时还通过后台推送界面达到了横竖屏快速切换的效果。本实施例中的屏幕自适应原则为：子随父变，父随屏变。即子组件随着父组件的变化而变化，父组件随屏幕变化而变化。屏幕大小决定屏幕组件大小，屏幕组件大小决定其子组件大小。当有任何引起组件布局变化的因素(横竖屏切换、网络数据更新、组件移动等)发生时，分析出可能受到影响的组件，并根据新的屏幕宽高度或父组件宽高度重新计算各组件的坐标、宽高、长度、距离、间隔等信息，生成新布局。

本发明提供的屏幕自适应系统可以应用于需要屏幕自适应的终端设备上，例如PC、PDA、手机、服务器等。

本领域的普通技术人员可以理解，实现上述实施例方法中的全部或部分步骤是可以通过程序指令相关硬件来完成的，所述的程序可以存储于一计算机可读取存储介质中，所述的存储介质可以为ROM、RAM、磁盘、光盘等。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (11)

1.一种屏幕自适应的方法，其特征在于，所述方法包括步骤：

获取UI数据包；

解析所述UI数据包获取组件的组件绘制信息；

根据所述组件绘制信息绘制所述组件。

2.根据权利要求1所述的屏幕自适应方法，其特征在于，所述步骤“获取UI数据包”之前还包括步骤：

根据UI设计需求定义组件的组件绘制信息，并根据所述组件绘制信息创建UI数据包。

3.根据权利要求2所述的屏幕自适应方法，其特征在于，所述组件绘制信息包括组件参数和组件属性；

所述组件参数为百分比参数；

所述步骤“解析所述UI数据包获取组件的组件绘制信息”之后还包括步骤：

将所述组件的百分比参数转换为像素值参数。

4.根据权利要求3所述的屏幕自适应方法，其特征在于，所述像素值参数包括绝对坐标和绝对宽高度；

所述绝对坐标等于所述组件的相对坐标乘以所述组件父组件的绝对宽高度再加父组件的绝对坐标；

所述绝对宽高度等于所述组件的相对宽高度乘以所述组件父组件的绝对宽高度。

5.根据权利要求4所述的屏幕自适应方法，其特征在于，所述百分比参数是根据UI设计需求和组件布局选取任一分辨率屏幕为参照物估算出的百分比参数。

6.根据权利要求5所述的屏幕自适应方法，其特征在于，所述百分比参数包括相对坐标和相对宽高度；

根据UI设计需求和组件布局选取任一分辨率屏幕为参照物估算百分比参数，具体为：

根据UI设计需求和组件布局选取任一分辨率屏幕为参照物估算组件的估算坐标和估算宽高度；

根据所述估算坐标和估算宽高度获取所述组件的相对坐标和相对宽高度。

7.根据权利要求6所述的屏幕自适应方法，其特征在于，所述相对坐标等于所述组件的估算坐标减去父组件的估算坐标的差再除以父组件的估算宽高度；

所述相对宽高度等于所述组件的估算宽高度除以父组件的估算宽高度。

8.一种屏幕自适应的系统，其特征在于，所述系统包括第一获取模块、解析模块、第二获取模块和绘制模块；

所述第一获取模块，与所述解析模块相连，用于获取UI数据包；

所述解析模块，与所述第一获取模块和第二获取模块相连，用于解析所述UI数据包；

所述第二获取模块，与所述解析模块和绘制模块相连，用于获取组件的组件绘制信息；

所述绘制模块，与所述第二获取模块相连，用于根据所述组件绘制信息绘制所述组件。

9.根据权利要求8所述屏幕自适应系统，其特征在于，所述系统还包括定义模块和创建模块；

所述定义模块，与所述创建模块相连，用于根据UI设计需求定义组件的组件绘制信息；

所述创建模块，与所述定义模块和第一获取模块相连，用于根据所述组件绘制信息创建UI数据包。

10.根据权利要求9所述屏幕自适应系统，其特征在于，所述系统还包括转换模块；

所述定义模块还用于根据UI设计需求定义组件的百分比参数和组件属性；

所述创建模块还用于根据所述百分比参数和组件属性创建UI数据包；

所述第二获取模块，与所述解析模块、转换模块和绘制模块相连，还用于获取所述组件的百分比参数和组件属性；

所述转换模块，与所述第二获取模块和绘制模块相连，用于将所述组件的百分比参数转换为像素值参数；

所述绘制模块，与所述第二获取模块和转换模块相连，还用于根据所述组件属性和像素值参数按照由前到后的顺序绘制所述组件。

11.一种屏幕自适应的终端设备，其特征在于，所述设备包括如权利要求8-10所述的任一种屏幕自适应系统。

Images