自绘控件的屏幕适配实现方法及实现装置

1.一种自绘控件的屏幕适配实现方法，其特征在于，包括：

根据初始屏幕的分辨率布局自绘控件，得到与该初始屏幕适配的第一视图，该第一视图包括第一界面以及布局于该第一界面上的自绘控件；

根据目标屏幕的分辨率确定该第一界面在该目标屏幕上的适配界面；

为每个第一界面上的自绘控件定义一个容器控件，并定义该第一界面为其中一个自绘控件的容器控件，获取每个自绘控件相对于其对应的容器控件的边距，并设定该边距的属性为固定边距或缩放边距，对应属性为固定边距的边距始终保持固定不变，对应属性为缩放边距的边距随着所对应的容器控件的缩放进行改变；

将该第一界面按照该适配界面的尺寸进行缩放，根据该第一界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第二视图；

在该目标屏幕上绘制该第二视图。

2.如权利要求1所述的方法，其特征在于，该适配界面的大小与该目标屏幕的大小相。

3.如权利要求1所述的方法，其特征在于，根据该第一界面上的每个自绘控件相对于其对应容器控件的边距的属性对该自绘控件进行调整，包括：

将该第一界面按照该适配界面的尺寸进行缩放；

判断该第一界面内的每个自绘控件相对于其对应容器控件的每个边距的属性是固定边距还是缩放边距，

如果该边距为固定边距，则该自绘控件相对于其容器控件的该边距保持不变，

如果该边距为缩放边距，则该自绘控件相对于其容器控件的该边距根据该容器控件在该边距方向上的伸缩比进行等比缩放。

4.一种自绘控件的屏幕适配实现方法，其特征在于，包括：

根据初始屏幕的分辨率布局自绘控件，得到与该初始屏幕适配的第一视图，该第一视图包括第一界面以及布局于该第一界面上的自绘控件；

根据目标屏幕的分辨率确定该第一界面在该目标屏幕上的适配界面；

根据该目标屏幕的分辨率以及该初始屏幕的分辨率计算界面预处理比例，根据该界面预处理比例对该第一视图的第一界面以及自绘控件进行等比缩放，得到第二视图，该第二视图包括第二界面以及布局于该第二界面上的自绘控件；

为每个该第二界面上的自绘控件定义一个容器控件，并定义该第二界面为其中一个自绘控件的容器控件，取每个自绘控件相对于其对应的容器控件的边距，设定该边距的属性为固定边距或缩放边距，对应属性为固定边距的边距始终保持固定不变，对应属性为缩放边距的边距随着所对应的容器控件的缩放进行改变；

将该第二界面按照该适配界面的尺寸进行缩放，根据该第二界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第三视图；

在该目标屏幕上绘制该第三视图。

5.如权利要求4所述的方法，其特征在于，该界面预处理比例为目标屏幕的横向分辨率与初始屏幕的横向分辨率之比以及目标屏幕的纵向分辨率与初始屏幕的纵向分辨率之比中的较小值。

6.如权利要求4所述的方法，其特征在于，该适配界面的大小与该目标屏幕的大小相同。

7.如权利要求6所述的方法，其特征在于，根据该第一界面内的每个自绘控件相对于其对应容器控件的边距的属性对该自绘控件进行调整，包括：

将该第二界面按照该适配界面的尺寸进行缩放；

判断该第一界面内的每个自绘控件相对于其对应容器控件的每个边距的属性是固定边距还是缩放边距，

如果该边距为固定边距，则该自绘控件相对于其容器控件的该边距保持不变，

如果该边距为缩放边距，则该自绘控件相对于其容器控件的该边距根据该容器控件在该边距方向上的伸缩比进行等比缩放。

8.一种自绘控件的屏幕适配实现装置，其特征在于，包括：

初始布局模块，用于根据初始屏幕的分辨率布局自绘控件，得到与该初始屏幕适配的第一视图，该第一视图包括第一界面以及布局于该第一界面上的自绘控件；

目标确定模块，用于根据目标屏幕的分辨率确定该第一界面在该目标屏幕上的适配界面；

缩放模块，用于为每个第一界面上的自绘控件定义一个容器控件，并定义该第一界面为其中一个自绘控件的容器控件，取每个自绘控件相对于其对应的容器控件的边距，并设定该边距的属性为固定边距或缩放边距，对应属性为固定边距的边距始终保持固定不变，对应属性为缩放边距的边距随着所对应的容器控件的缩放进行改变；

调整模块，用于将该第一界面按照该适配界面的尺寸进行缩放，根据该第一界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第二视图；

绘制模块，用于在该目标屏幕上绘制该第二视图。

9.如权利要求8所述的装置，其特征在于，当该适配界面的大小与该目标屏幕的大小相同时，该目标确定模块省略，该调整模块用于将该第一界面按照该目标屏幕的尺寸进行缩放。

10.如权利要求8所述的装置，其特征在于，该调整模块包括：

界面缩放子模块，用于将该第一界面按照该适配界面的尺寸进行缩放；

判断调整子模块，用于判断该第一界面内的每个自绘控件相对于其对应容器控件的每个边距的属性是固定边距还是缩放边距，如果该边距为固定边距，则该自绘控件相对于其容器控件的该边距保持不变，如果该边距为缩放边距，则该自绘控件相对于其容器控件的该边距根据该容器控件在该边距方向上的伸缩比进行等比缩放。

11.一种自绘控件的屏幕适配实现装置，其特征在于，包括：

初始布局模块，用于根据初始屏幕的分辨率布局自绘控件，得到与该初始屏幕适配的第一视图，该第一视图包括第一界面以及布局于该第一界面上的自绘控件；

目标确定模块，用于根据目标屏幕的分辨率确定该第一界面在该目标屏幕上的适配界面；

预处理模块，用于根据该目标屏幕的分辨率以及该初始屏幕的分辨率计算界面预处理比例，根据该界面预处理比例对该第一视图的第一界面以及自绘控件进行等比缩放，得到第二视图，该第二视图包括第二界面以及布局于该第二界面上的自绘控件；

缩放模块，用于为每个该第二界面上的自绘控件定义一个容器控件，并定义该第二界面为其中一个自绘控件的容器控件，获取每个自绘控件相对于其对应的容器控件的边距，设定该边距的属性为固定边距或缩放边距，对应属性为固定边距的边距始终保持固定不变，对应属性为缩放边距的边距随着所对应的容器控件的缩放进行改变；

调整模块，用于将该第二界面按照该适配界面的尺寸进行缩放，根据该第二界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第三视图；

绘制模块，用于在该目标屏幕上绘制该第三视图。

12.如权利要求11所述的装置，其特征在于，当该适配界面的大小与该目标屏幕的大小相同时，该目标确定模块省略，该调整模块用于将该第二界面按照该目标屏幕的尺寸进行缩放。

13.如权利要求11所述的装置，其特征在于，该界面预处理比例为目标屏幕的横向分辨率与初始屏幕的横向分辨率之比以及目标屏幕的纵向分辨率与初始屏幕的纵向分辨率之比中的较小值。

14.如权利要求11所述的装置，其特征在于，该调整模块包括：

界面缩放子模块，用于将该第二界面按照该适配界面的尺寸进行缩放

判断调整子模块，用于判断该第一界面内的每个自绘控件相对于其对应容器控件的每个边距的属性是固定边距还是缩放边距，如果该边距为固定边距，则该自绘控件相对于其容器控件的该边距保持不变，如果该边距为缩放边距，则该自绘控件相对于其容器控件的该边距根据该容器控件在该边距方向上的伸缩比进行等比缩放。

说 明 书

自绘控件的屏幕适配实现方法及实现装置

[0001] 技术领域

[0002] 本发明涉及计算机技术领域，特别是涉及一种自绘控件的屏幕适配实现方法及实现装置。

[0003] 背景技术

[0004] 由于目前电信网、计算机网络和有线电视网络所能够提供的包括语音、数据、图像等综合多媒体的通信业务在技术上表现的越来越趋向一致，越来越多的应用产品开始需要可以跨网络、跨终端地实现应用，例如需要在PC、移送终端设备、电视以及机顶盒之间进行跨设备的应用，自然，应用产品也需要适应这些设备不同分辨率的显示屏幕，也就是说应用产品也需要适配不同的终端屏幕。

[0005] 通常，终端设备的应用开发者在开发应用产品时，面对各种终端的不同屏幕分辨率，需要消耗大量的时间甚至不惜为某种分辨率单独开发版本从而实现对某个平台所有屏幕分辨率的适配，重复工作量大导致开发效率低下。虽然某些设备操作系统官方提供的UI(User Interface，用户界面)控件支持在多分辨率下的自动布局，但是这些API(Application Programming Interface，应用程序编程接口)大多只适用于简单的应用开发，对于某些复杂的场景(比如游戏场景)，以及开发者自定义绘制的场景，就不适用了。

[0006] 对于这个问题，终端设备的应用开发者在开发终端应用时，除了使用官方提供的SDK开发包（Software DevelopmentKit,即软件开发工具包）中的UI控件之外，还可以依据终端设备的特点和语言类型，封装一套自绘控件方便终端应用的开发。这个自绘控件库在开发中完全取代了官方SDK提供的相关UI控件，因此其功能可以实现任意扩充，开发比较灵活并容易实现在不同平台中的移植，这种自绘控件库的典型框架结构如图1所示。

[0007] 在以IOS为操作系统的终端设备中，由于其屏幕分辨率固定都是3:2（如iphone3GS分辨率为320*480，iphone4分辨率为640*960），因此在这些设备上面使用自绘控件开发的应用程序，采用对于绘制区域的自绘控件大小按照比例拉伸或者压缩，坐标按照比例调整，就能实现比较完美的屏幕适配。但是，在以Android为操作系统的终端设备中，由于其屏幕分辨率比例不统一，自绘控件的屏幕适配则不能进行简单的比例运算，必须按照需求对不同位置、不同用途和不同属性的自绘控件分别在编码时进行计算处理，勉强实现在多种分辨率下面的自绘控件的屏幕适配工作。

[0008] 综上所述，现有技术存在以下的问题：

[0009] 1、对于自绘控件很多的复杂自绘界面，屏幕适配难度大并且适配复杂，需要分别计算每一个自绘组件在不同分辨率下面的位置和大小，开发效率低下，工作量巨大。

[0010] 2、开发者在开发过程中需要时刻关注每个自绘控件大小和位置，在某些控件屏幕适配过程中，很可能不是简单的按比例计算大小、位置，消耗在UI调试方面的时间较多，开发难度高。

[0011] 3、为了实现几个自绘控件对齐、居中等具有相互位置和大小有关联的界面，必须增加各个自绘控件之间的依赖，不方便界面改动和优化。

[0012] 发明内容

[0013] 本发明的目的在于，提供一种简单、高效的自绘控件的屏幕适配实现方法及实现装置。

[0014] 本发明的目的及解决其技术问题是采用以下技术方案来实现的。

[0015] 一种自绘控件的屏幕适配实现方法，包括：根据初始屏幕的分辨率布局自绘控件，得到与该初始屏幕适配的第一视图，该第一视图包括第一界面以及布局于该第一界面上的自绘控件；根据目标屏幕的分辨率确定该第一界面在该目标屏幕上的适配界面；为每个第一界面上的自绘控件定义一个容器控件，并定义该第一界面为其中一个自绘控件的容器控件，获取每个自绘控件相对于其对应的容器控件的边距，并设定该边距的属性为固定边距或缩放边距，对应属性为固定边距的边距始终保持固定不变，对应属性为缩放边距的边距随着所对应的容器控件的缩放进行改变；将该第一界面按照该适配界面的尺寸进行缩放，根据该第一界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第二视图；在该目标屏幕上绘制该第二视图。

[0016] 一种自绘控件的屏幕适配实现方法，包括：根据初始屏幕的分辨率布局自绘控件，得到与该初始屏幕适配的第一视图，该第一视图包括第一界面以及布局于该第一界面上的自绘控件；根据目标屏幕的分辨率确定该第一界面在该目标屏幕上的适配界面；根据该目标屏幕的分辨率以及该初始屏幕的分辨率计算界面预处理比例，根据该界面预处理比例对该第一视图的第一界面以及自绘控件进行等比缩放，得到第二视图，该第二视图包括第二界面以及布局于该第二界面上的自绘控件；为每个该第二界面上的自绘控件定义一个容器控件，并定义该第二界面为其中一个自绘控件的容器控件，获取每个自绘控件相对于其对应的容器控件的边距，设定该边距的属性为固定边距或缩放边距，对应属性为固定边距的边距始终保持固定不变，对应属性为缩放边距的边距随着所对应的容器控件的缩放进行改变；将该第二界面按照该适配界面的尺寸进行缩放，根据该第二界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第三视图；在该目标屏幕上绘制该第三视图。

[0017] 一种自绘控件的屏幕适配实现装置，包括：初始布局模块，用于根据初始屏幕的分辨率布局自绘控件，得到与该初始屏幕适配的第一视图，该第一视图包括第一界面以及布局于该第一界面上的自绘控件；目标确定模块，用于根据目标屏幕的分辨率确定该第一界面在该目标屏幕上的适配界面；缩放模块，用于为每个第一界面上的自绘控件定义一个容器控件，并定义该第一界面为其中一个自绘控件的容器控件，获取每个自绘控件相对于其对应的容器控件的边距，并设定该边距的属性为固定边距或缩放边距，对应属性为固定边距的边距始终保持固定不变，对应属性为缩放边距的边距随着所对应的容器控件的缩放进行改变；调整模块，用于将该第一界面按照该适配界面的尺寸进行缩放，根据该第一界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第二视图；绘制模块，用于在该目标屏幕上绘制该第二视图。

[0018] 一种自绘控件的屏幕适配实现装置，包括：初始布局模块，用于根据初始屏幕的分辨率布局自绘控件，得到与该初始屏幕适配的第一视图，该第一视图包括第一界面以及布局于该第一界面上的自绘控件；目标确定模块，用于根据目标屏幕的分辨率确定该第一界面在该目标屏幕上的适配界面；预处理模块，用于根据该目标屏幕的分辨率以及该初始屏幕的分辨率计算界面预处理比例，根据该界面预处理比例对该第一视图的第一界面以及自绘控件进行等比缩放，得到第二视图，该第二视图包括第二界面以及布局于该第二界面上的自绘控件；缩放模块，用于为每个该第二界面上的自绘控件定义一个容器控件，并定义该第二界面为其中一个自绘控件的容器控件，获取每个自绘控件相对于其对应的容器控件的边距，设定该边距的属性为固定边距或缩放边距，对应属性为固定边距的边距始终保持固定不变，对应属性为缩放边距的边距随着所对应的容器控件的缩放进行改变；调整模块，用于将该第二界面按照该适配界面的尺寸进行缩放，根据该第二界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第三视图；绘制模块，用于在该目标屏幕上绘制该第三视图。

[0019] 相对于现有技术，本发明提出的自绘控件的屏幕适配实现方法，使用界面缩放与控件布局微调的界面处理方式，方法简单，效率高，并且可以使应用软件在UI上各种自绘控件的布局更加协调、更加美观。另外，该方法使用的原始UI资源少，安装包小，安装门槛降低，代码维护也比较简单，屏幕上各种自绘控件耦合小，更方便代码维护。

[0020] 上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其他目的、特征和优点能够更明显易懂，以下特举较佳实施例，并配合附图，详细说明如下。

[0021] 附图说明

[0022] 图1是现有技术中自绘控件库的典型框架结构。

[0023] 图2是本发明第一实施例中的自绘控件的屏幕适配实现方法的流程示意图。

[0024] 图3是本发明第一实施例中初始屏幕以及第一视图与目标屏幕的比较示意图。

[0025] 图4是自绘控件相对于容器控件的边距示意图。

[0026] 图5是容器控件B的大小发生改变前后，自绘控件A1与自绘控件A2相对于容器控件B的大小、位置的对比示意图。

[0027] 图6是图2中步骤S14的具体流程示意图。

[0028] 图7是本发明第一实施例在目标屏幕上完成第二视图绘制后的效果图。

[0029] 图8是本发明第二实施例中的自绘控件的屏幕适配实现方法的流程示意图。

[0030] 图9是本发明第二实施例中初始屏幕与目标屏幕的比较示意图。

[0031] 图10是本发明第二实施例在目标屏幕上完成第二视图绘制后的效果图。

[0032] 图11是本发明第三实施例中的自绘控件的屏幕适配实现方法的流程示意图。

[0033] 图12是本发明第三实施例中初始屏幕与目标屏幕的比较示意图。

[0034] 图13是本发明第三实施例经过界面预处理之后得到的第二视图与目标屏幕的比较效果图。

[0035] 图14是本发明第三实施例在目标屏幕上完成第三视图绘制后的效果图。

[0036] 图15是本发明第四实施例中的自绘控件的屏幕适配实现方法的流程示意图。

[0037] 图16是本发明第四实施例中初始屏幕与目标屏幕的比较示意图。

[0038] 图17是本发明第四实施例经过界面预处理之后得到的第二视图与目标屏幕的比较效果图。

[0039] 图18是本发明第四实施例在目标屏幕上完成第三视图绘制后的效果图。

[0040] 图19是本发明第五实施例中的自绘控件的屏幕适配实现装置的结构示意图。

[0041] 图20是本发明第六实施例中的自绘控件的屏幕适配实现装置的结构示意图。

[0042] 图21是本发明第七实施例中的自绘控件的屏幕适配实现装置的结构示意图。

[0043] 图22是本发明第八实施例中的自绘控件的屏幕适配实现装置的结构示意图。

[0044] 具体实施方式

[0045] 为更进一步阐述本发明为达成预定发明目的所采取的技术手段及功效,以下结合附图及较佳实施例，对依据本发明提出的自绘控件的屏幕适配实现方法及实现装置其具体实施方式、方法、步骤、结构、特征及其功效，详细说明如下。

[0046] 有关本发明的前述及其他技术内容、特点及功效，在以下配合参考图式的较佳实施例的详细说明中将可清楚呈现。通过具体实施方式的说明，当可对本发明为达成预定目的所采取的技术手段及功效得以更加深入且具体的了解，然而所附图式仅是提供参考与说明之用，并非用来对本发明加以限制。

[0047] 第一实施例

[0048] 图2为本发明第一实施例中的自绘控件的屏幕适配实现方法的流程示意图。请参照图2，本实施例中的自绘控件的屏幕适配实现方法包括：

[0049] 步骤S11：根据初始屏幕的分辨率布局自绘控件，得到与该初始屏幕适配的第一视图，该第一视图包括第一界面以及布局于该第一界面上的自绘控件。

[0050] 屏幕分辨率即显示器上面可以显示的像素个数，如屏幕分辨率为480*800的屏幕横向有480个像素点、纵向有800个像素点。请同时参照图3，于步骤S11中，按照初始屏幕11(或设计稿)的分辨率布局各个自绘控件得到与该初始屏幕11适配的第一视图12，第一视图12包括第一界面121以及布局于该第一界面121上的多个自绘控件122，图3中以自绘控件122为界面标题栏(title)、界面的三个按钮(button)以及显示区域123中的六个项目(item)为例，当然，本发明并不以自绘控件的具体布局为限。第一视图12中的所有自绘控件122没有经过任何坐标和大小的转换，在具有与初始屏幕11相同分辨率的终端屏幕上面可以完美适配。

[0051] 步骤S12：根据目标屏幕的分辨率确定该第一界面在该目标屏幕上的适配界面。

[0052] 请参照图3，图3中目标屏幕13由虚线表示，在目标屏幕13上面绘制界面之前，需要得到目标屏幕13的屏幕分辨率。于步骤S12中，根据目标屏幕13的分辨率确定该第一界面121在该目标屏幕13上的适配界面14的尺寸，也就是第一界面121在目标屏幕13上完美适配的适配界面14的尺寸，可以将第一界面121按照目标屏幕与初始屏幕的比例拉伸或者压缩得到适配界面14。

[0053] 步骤S13：为每个第一界面上的自绘控件定义一个容器控件，并定义该第一界面为其中一个自绘控件的容器控件，获取每个自绘控件相对于其对应的容器控件的边距，并设定该边距的属性为固定边距或缩放边距，对应属性为固定边距的边距始终保持固定不变，对应属性为缩放边距的边距随着所对应的容器控件的缩放进行改变。

[0054] 步骤S14：将该第一界面按照该适配界面的尺寸进行缩放，根据该第一界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第二视图。

[0055] 步骤S13以及步骤S14是对第一界面进行缩放并对其上的自绘控件的布局进行微调的过程。

[0056] 对于任意一个自绘控件(component)都可以定义一个容器控件（container），例如，可以定义第一视图12中的标题栏的容器控件为第一界面121，可以定义第一视图12中的按钮的容器控件为标题栏。这样，自绘控件的大小、位置就可以抽象为相对于其容器控件的上、下、左、右四个边距，如图4所示。因此，当对应的容器控件的大小发生变化时，可以通过控制自绘控件的四个边距，来定位变化之后的自绘控件的位置和大小。

[0057] 具体的，可以定义自绘控件相对于其容器控件的四个边距分别为：左边距(margin_lift)、右边距(margin_right)、上边距(margin_top)、下边距(margin_bottom)，则自绘控件(component)在容器控件(container)中的位置(x,y)为(margin_lift,margin_top)，宽度为：container.width-margin_lift-margin_right，高度为：container.height-margin_top-margin_bottom。同时，自绘控件的大小、位置可以表示为（横坐标、纵坐标、宽度、高度）。

[0058] 对这四个边距的属性分别进行设定，边距的属性可以设定为固定边距(margin_fix)或者缩放边距(margin_zoom)，以下将分别介绍这两种属性。

[0059] （1）固定边距（margin_fix）：即自绘控件相对于其容器控件的某个边距固定大小不变，例如自绘控件的左边距和右边距设置为margin_fix，则无论容器控件大小如何变化，自绘控件相对于其容器控件的左、右边距始终保持不变，自绘控件的宽度为container.width＇(容器控件的目标宽度)-margin_lift-margin_right，自绘控件的高度为container.height＇(容器控件的目标高度)-margin_lift-margin_right。，请参照图5，图5左边表示的是在容器控件B的大小发生改变前，自绘控件A1与自绘控件A2相对于容器控件B的大小、位置；图5右边表示的是在容器控件B的大小发生改变后，自绘控件A1与自绘控件A2相对于容器控件B的大小、位置。以图5中的自绘控件A1为例，在其容器控件B的大小发生改变前自绘控件A1的左、右边距分别为：margin_lift=40，margin_right=290；设置margin_lift、margin_right的属性为margin_fix，则当容器控件B的宽度由480变大为700时，保持自绘控件A1相对于容器控件B的左、右边距不变，自绘控件A1的宽度变为：width=700-margin_lift-margin_right=370，自绘控件A1的坐标、大小变为（40,40,370,80）。

[0060] （2）缩放边距（margin_zoom）：即自绘控件的边距随着所对应的容器控件的缩放进行改变。具体的，容器控件大小改变后，自绘控件中被设定为缩放边距的某个边距=改变前的该边距*容器控件目标大小/容器控件原始大小。以图5中的自绘控件A2为例，其左边距、右边距设置为margin_zoom，则：容器控件B的大小改变前，自绘控件A2的左、右边距分别为：margin_lift=240，margin_right=480-240-150=90，当容器控件B的大小变化之后，自绘控件A2相对于容器控件B的左、右边距分别为：margin_lift=240*700/480=350，margin_right=90*700/480=132，因此，自绘控件A2的宽度变为：700-350-132=218，自绘控件A2的坐标、大小变为（380,220,218,80）。

[0061] 同理，对上、下边距也可以设置其属性为固定边距或者缩放边距，从而实现当容器控件的大小发生变化时，根据自绘控件的边距的属性可以灵活地对自绘控件进行布局调整，使得自绘控件在第二视图中的布局更加协调，更加美观。

[0062] 于步骤S13至步骤S14中，通过设定自绘控件相对于其对应的容器控件的四个边距的属性，按照其属性对对应边距进行处理，可以实现自绘控件在其容器控件中的布局的调整，同时，自绘控件自身也可以为其他自绘控件的容器控件。于本实施例中，第一界面被定义为其中一个自绘控件的容器控件，当然，第一界面也可以为其他自绘控件的容器控件，被定义以第一界面为容器控件的该自绘控件也可以作为其他自绘控件的容器控件。也就是说，可以将第一界面定义为其他所有自绘控件的容器控件，也可以将第一界面定义为一个自绘控件(例如标题栏)的容器控件，而该自绘控件(标题栏)又作为其他自绘控件(例如按钮)的容器控件，也就是将第一界面定义为第一层容器控件，该自绘控件(标题栏)定义为第二层容器控件，如果有需要，还可以继续第三层容器控件、第四层容器控件等。这样，当第一层容器控件，也就是第一界面的大小发生变化时，每个自绘控件的布局都可以按照自己边距的属性被调整，通过遍历每个UI控件，最终可以实现所有自绘控件的屏幕适配处理。

[0063] 具体的，请参照图6，步骤S14中可以包括以下步骤：

[0064] 步骤S141：将该第一界面按照该适配界面的尺寸进行缩放；

[0065] 步骤S142：判断该第一界面内的每个自绘控件相对于其对应容器控件的每个边距的属性是固定边距还是缩放边距，如果该边距为固定边距，则进行步骤S143，如果该边距为缩放边距，则进行步骤S144，

[0066] 步骤S143：该自绘控件相对于其容器控件的该边距保持不变(可参照图5中的自绘控件A1)，

[0067] 步骤S144：该自绘控件相对于其容器控件的该边距根据该容器控件在该边距方向上的伸缩比进行等比缩放(可参照图5中的自绘控件A2)。

[0068] “边距方向”指的是与该边距的测量方向相同的方向，例如左、右边距的方向为横向，上、下边距的方向为纵向。假设容器控件在横向的伸缩比为a，那么自绘控件的左、右边距也根据伸缩比a进行缩放，假设容器控件在纵向的伸缩比为b，那么自绘控件的上、下边距也根据伸缩比b进行缩放。

[0069] 最后进行步骤S15：在该目标屏幕上绘制该第二视图。

[0070] 在目标屏幕上对第二视图进行全屏绘制，最终实现在具有目标屏幕分辨率的目标终端屏幕上面的完美适配，请参照图7，图7为在目标屏幕13上完成第二视图15绘制后的效果图。

[0071] 相对于现有技术，本实施例提出的自绘控件的屏幕适配实现方法，使用界面缩放与控件布局调整的界面处理方式，方法简单，效率高，并且可以使应用软件在UI上各种自绘控件的布局更加协调、更加美观。另外，该方法使用的原始UI资源少，安装包小，安装门槛降低，代码维护也比较简单，屏幕上各种自绘控件耦合小，更方便代码维护。

[0072] 第二实施例

[0073] 图8为本发明第二实施例中的自绘控件的屏幕适配实现方法的流程示意图。请参照图8，本实施例中的自绘控件的屏幕适配实现方法包括：

[0074] 步骤S21：根据初始屏幕的分辨率布局自绘控件，得到与该初始屏幕适配的第一视图，该第一视图包括第一界面以及布局于该第一界面上的自绘控件；

[0075] 步骤S22：为每个第一界面上的自绘控件定义一个容器控件，并定义该第一界面为其中一个自绘控件的容器控件，获取每个自绘控件相对于其对应的容器控件的边距，并设定该边距的属性为固定边距或缩放边距，对应属性为固定边距的边距始终保持固定不变，对应属性为缩放边距的边距随着所对应的容器控件的缩放进行改变；

[0076] 步骤S23：将该第一界面按照目标屏幕的尺寸进行缩放，根据该第一界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第二视图；

[0077] 步骤S24：在该目标屏幕上绘制该第二视图。

[0078] 请同时参照图9、图10，与第一实施例不同的是，于本实施例中，第一界面221的大小与初始屏幕21的大小相同，或者说第一界面221布满整个初始屏幕21，因此，第一界面221的适配界面的大小与目标屏幕23的大小相同，因此第一实施例中的步骤S12在本实施例中可以省略，于步骤S23中，直接将该第一界面221按照目标屏幕23的尺寸进行缩放，然后根据该第一界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第二视图。其他步骤与第一实施例中的相关步骤相同，因此这里不再赘述。请参照图10，最后，在目标屏幕23上完成对第二视图的绘制。

[0079] 第三实施例

[0080] 图11为本发明第三实施例中的自绘控件的屏幕适配实现方法的流程示意图。请参照图11，本实施例中的自绘控件的屏幕适配实现方法包括：

[0081] 步骤S31：根据初始屏幕的分辨率布局自绘控件，得到与该初始屏幕适配的第一视图，该第一视图包括第一界面以及布局于该第一界面上的自绘控件。

[0082] 步骤S32：根据目标屏幕的分辨率确定该第一界面在该目标屏幕上的适配界面。

[0083] 步骤S33：根据该目标屏幕的分辨率以及该初始屏幕的分辨率计算界面预处理比例，根据该界面预处理比例对该第一视图的第一界面以及自绘控件进行等比缩放，得到第二视图，该第二视图包括第二界面以及布局于该第二界面上的自绘控件。

[0084] 于该步骤中，需要确定一个界面预处理比例，该界面预处理比例为目标屏幕的横向分辨率与初始屏幕的横向分辨率之比以及目标屏幕的纵向分辨率与初始屏幕的纵向分辨率之比中的较小值。

[0085] 请同时参照图12，图12中包括按照初始屏幕31(或设计稿)的分辨率布局的各个自绘控件得到与该初始屏幕31适配的第一视图32，第一视图32包括第一界面321以及布局于该第一界面321上的多个自绘控件322，图7中以自绘控件为标题栏(title)、三个按钮(button)以及六个项目(item)为例。第一视图32中的所有自绘控件322没有经过任何坐标和大小的转换，在具有初始屏幕分辨率的终端屏幕上面可以完美适配。其中，初始屏幕31的横向分辨率(宽度)为w个像素点，初始屏幕31的纵向分辨率（高度）为h个像素点。图12中还包括目标屏幕33，由虚线表示，在目标屏幕33上面绘制界面之前，需要得到目标屏幕33的屏幕分辨率。例如，图12中的目标屏幕33的横向分辨率(宽度)为W个像素点，纵向分辨率（高度）为H个像素点。于步骤S32中，根据目标屏幕33的分辨率确定该第一界面321在该目标屏幕33上的适配界面34的尺寸，也就是第一界面121在目标屏幕13上完美适配的适配界面34的尺寸。界面预处理比例f为min(目标屏幕的横向分辨率W/初始屏幕的横向分辨率w，目标屏幕的纵向分辨率H/初始屏幕的纵向分辨率h)，即取目标屏幕与初始屏幕宽、高比例中的较小值，这样在进行预处理时，尽可能满足处理之后的视图在横向或纵向已经实现屏幕适配。例如目标屏幕分辨率为480*854，初始屏幕的分辨率为320*480，则界面预处理比例f=min(480/320,854/480)=1.5。请参照图13，图13为经过界面预处理之后得到的第二视图35与目标屏幕33的比较效果图。

[0086] 步骤S34：为每个该第二界面上的自绘控件定义一个容器控件，并定义该第二界面为其中一个自绘控件的容器控件，获取每个自绘控件相对于其对应的容器控件的边距，设定该边距的属性为固定边距或缩放边距，对应属性为固定边距的边距始终保持固定不变，对应属性为缩放边距的边距随着所对应的容器控件的缩放进行改变。

[0087] 步骤S35：将该第二界面按照该适配界面的尺寸进行缩放，根据该第二界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第三视图。

[0088] 步骤S36：在该目标屏幕上绘制该第三视图。

[0089] 请参照图14，图14所示为在目标屏幕33上完成第三视图36后的效果图。

[0090] 相对于现有技术，本实施例提出的自绘控件的屏幕适配实现方法，在对控件进行布局调整前，还增加了对第一视图进行预处理的步骤，这样在进行预处理时，尽可能满足处理之后的视图在横向或纵向已经实现屏幕适配，一方面可以使适配效果更好，另一方面可以加快适配的速度，特别适用于初始屏幕与目标屏幕的分辨率相差较大的情况。

[0091] 第四实施例

[0092] 图15为本发明第四实施例中的自绘控件的屏幕适配实现方法的流程示意图。请参照图15，本实施例中的自绘控件的屏幕适配实现方法包括：

[0093] 步骤S41：根据初始屏幕的分辨率布局自绘控件，得到与该初始屏幕适配的第一视图，该第一视图包括第一界面以及布局于该第一界面上的自绘控件。

[0094] 步骤S42：根据该目标屏幕的分辨率以及该初始屏幕的分辨率计算界面预处理比例，根据该界面预处理比例对该第一视图的第一界面以及自绘控件进行等比缩放，得到第二视图，该第二视图包括第二界面以及布局于该第二界面上的自绘控件。

[0095] 步骤S43：为每个该第二界面上的自绘控件定义一个容器控件，并定义该第二界面为其中一个自绘控件的容器控件，获取每个自绘控件相对于其对应的容器控件的边距，设定该边距的属性为固定边距或缩放边距，对应属性为固定边距的边距始终保持固定不变，对应属性为缩放边距的边距随着所对应的容器控件的缩放进行改变。

[0096] 步骤S44：将该第二界面按照该目标屏幕的尺寸进行缩放，根据该第二界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第三视图。

[0097] 步骤S45：在该目标屏幕上绘制该第三视图。

[0098] 请同时参照图16至图18，与第三实施例不同的是，于本实施例中，第一界面421的大小与初始屏幕41的大小相同，或者说第一界面421布满整个初始屏幕41(请参照图16)，因此，第一界面421的适配界面的大小与目标屏幕43的大小相同，因此第三实施例中的步骤S32在本实施例中可以省略。图17为本实施例经过界面预处理之后得到的第二视图45与目标屏幕43的比较效果图。于步骤S44中，直接将该第二界面按照该目标屏幕的尺寸进行缩放，根据该第二界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第三视图。其他步骤与第三实施例中的相关步骤相同，因此这里不再赘述。请参照图18，最后，在目标屏幕43上完成对第三视图的绘制。

[0099] 第五实施例

[0100] 图19为本发明第五实施例中的自绘控件的屏幕适配实现装置的结构示意图。请参照图19，本实施例提出的自绘控件的屏幕适配实现装置用于实现第一实施例提出的自绘控件的屏幕适配实现方法，包括：初始布局模块51、目标确定模块52、缩放模块53、调整模块54、绘制模块55。

[0101] 初始布局模块51用于根据初始屏幕的分辨率布局自绘控件，得到与该初始屏幕适配的第一视图，该第一视图包括第一界面以及布局于该第一界面上的自绘控件。目标确定模块52用于根据目标屏幕的分辨率确定该第一界面在该目标屏幕上的适配界面。缩放模块53用于为每个第一界面上的自绘控件定义一个容器控件，并定义该第一界面为其中一个自绘控件的容器控件，获取每个自绘控件相对于其对应的容器控件的边距，并设定该边距的属性为固定边距或缩放边距，对应属性为固定边距的边距始终保持固定不变，对应属性为缩放边距的边距随着所对应的容器控件的缩放进行改变。调整模块54用于将该第一界面按照该适配界面的尺寸进行缩放，根据该第一界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第二视图。绘制模块55用于在该目标屏幕上绘制该第二视图。

[0102] 调整模块54包括界面缩放子模块541、判断调整子模块542。界面缩放子模块541用于将该第一界面按照该适配界面的尺寸进行缩放。判断调整子模块542用于判断该第一界面内的每个自绘控件相对于其对应容器控件的每个边距的属性是固定边距还是缩放边距，如果该边距为固定边距，则该自绘控件相对于其容器控件的该边距保持不变，如果该边距为缩放边距，则该自绘控件相对于其容器控件的该边距根据该容器控件在该边距方向上的伸缩比进行等比缩放。

[0103] 第六实施例

[0104] 图20为本发明第六实施例中的自绘控件的屏幕适配实现装置的结构示意图。请参照图20，本实施例提出的自绘控件的屏幕适配实现装置用于实现第二实施例提出的自绘控件的屏幕适配实现方法，包括：初始布局模块61、缩放模块62、调整模块63、绘制模块64。于本实施例中，第一界面的适配界面的大小与目标屏幕的大小相同，因此第五实施例中的目标确定模块52在本实施例中可以省略，调整模块63用于将该第一界面按照该目标屏幕的尺寸进行缩放。其他模块与第五实施例中的相关模块相同，因此这里不再赘述。

[0105] 第七实施例

[0106] 图21为本发明第七实施例中的自绘控件的屏幕适配实现装置的结构示意图。请参照图21，本实施例提出的自绘控件的屏幕适配实现装置用于实现第三实施例提出的自绘控件的屏幕适配实现方法，包括：初始布局模块71、目标确定模块72、预处理模块73、缩放模块74、调整模块75、绘制模块76。

[0107] 初始布局模块71用于根据初始屏幕的分辨率布局自绘控件，得到与该初始屏幕适配的第一视图，该第一视图包括第一界面以及布局于该第一界面上的自绘控件。目标确定模块72用于根据目标屏幕的分辨率确定该第一界面在该目标屏幕上的适配界面。预处理模块73用于根据该目标屏幕的分辨率以及该初始屏幕的分辨率计算界面预处理比例，根据该界面预处理比例对该第一视图的第一界面以及自绘控件进行等比缩放，得到第二视图，该第二视图包括第二界面以及布局于该第二界面上的自绘控件。该界面预处理比例为目标屏幕的横向分辨率与初始屏幕的横向分辨率之比以及目标屏幕的纵向分辨率与初始屏幕的纵向分辨率之比中的较小值。缩放模块74用于为每个该第二界面上的自绘控件定义一个容器控件，并定义该第二界面为其中一个自绘控件的容器控件，获取每个自绘控件相对于其对应的容器控件的边距，设定该边距的属性为固定边距或缩放边距，对应属性为固定边距的边距始终保持固定不变，对应属性为缩放边距的边距随着所对应的容器控件的缩放进行改变。调整模块75用于将该第二界面按照该适配界面的尺寸进行缩放，根据该第二界面内的每个自绘控件相对于其对应容器控件的边距的属性对每个自绘控件进行调整，得到第三视图。绘制模块76用于在该目标屏幕上绘制该第三视图。

[0108] 第八实施例

[0109] 图22为本发明第八实施例中的自绘控件的屏幕适配实现装置的结构示意图。请参照图22，本实施例提出的自绘控件的屏幕适配实现装置用于实现第四实施例提出的自绘控件的屏幕适配实现方法，包括：初始布局模块81、预处理模块82、缩放模块83、调整模块84、绘制模块85。于本实施例中，第一界面的适配界面的大小与目标屏幕的大小相同，因此第七实施例中的目标确定模块72在本实施例中可以省略，调整模块84用于将该第二界面按照该目标屏幕的尺寸进行缩放。其他模块与第七实施例中的相关模块相同，因此这里不再赘述。

[0110] 综上所述，相对于现有技术，本发明提出的自绘控件的屏幕适配实现方法，使用界面缩放与控件布局微调的界面处理方式，方法简单，效率高，并且可以使应用软件在UI上各种自绘控件的布局更加协调、更加美观。另外，该方法使用的原始UI资源少，安装包小，安装门槛降低，代码维护也比较简单，屏幕上各种自绘控件耦合小，更方便代码维护。

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

[0112] 需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

[0113] 本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，该的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

[0114] 以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，虽然本发明已以较佳实施例揭露如上，然而并非用以限定本发明，任何熟悉本专业的技术人员，在不脱离本发明技术方案范围内，当可利用上述揭示的技术内容做出些许更动或修饰为等同变化的等效实施例，但凡是未脱离本发明技术方案内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与修饰，均仍属于本发明技术方案的范围内。