CN105511725A - 界面中控件的显示方法及装置 - Google Patents

Abstract

本发明公开了一种界面中控件的显示方法及装置。其中，该方法包括：获取界面中的控件，其中控件在界面中的布局以树状结构关联；根据树状结构确定控件在界面中的布局，并依据布局显示控件。本发明解决了相关技术中界面与屏幕分辨率实现较好适配时工作量较大、工作效率较低的技术问题。

Description

界面中控件的显示方法及装置

技术领域

本发明涉及计算机领域，具体而言，涉及一种界面中控件的显示方法及装置。

背景技术

在进行多媒体展示时，经常会出现待展示的界面和用户设备的屏幕不匹配的问题。下面以移动游戏为例进行说明。在移动游戏中，不同的游戏玩家通过各种不同的移动设备进行游戏，不同的移动设备的尺寸、分辨率不尽相同。在展示游戏界面时，正确、自然地向持有不同设备的玩家展示游戏的内容对于提升用户体验十分重要。

例如，游戏中的一个面板尺寸是800px*600px(即4：3的比例)，这在800px*600px的手机上可以刚好铺满全屏。但是，如果要显示在一个2048px*1536px(即3：2的比例)的设备上，则至少会出现以下的问题：

(1)覆盖屏幕面积大小不匹配的问题。

如果以游戏的原面板大小进行显示，会出现游戏内容只显示在某小块区域的问题。该问题一般可通过游戏面板的缩放来解决。但是，如果采用缩放的方法来适配屏幕面积，通常又会存在以下的问题：

如果将长和宽等比缩放，顶到屏幕边缘，可以保证界面显示在屏幕内，但该方法可能导致屏幕上留有黑边；

如果将长和宽等比缩放，顶到屏幕边缘，可以保证界面覆盖整个屏幕，该方法不会使屏幕留有黑边，但游戏的部分界面会被裁切；

如果将长和宽不等比缩放，分别顶到屏幕边缘，可以保证界面覆盖整个屏幕。该方法不会导致屏幕留有黑边，并且游戏界面也不会被裁切，但由于缩放不等比，会造成游戏界面中的图像变形。

(2)界面内部的坐标定位问题。

如果采用缩放的方式来适配面积，那么界面内部的控件位置需要重新调整排列，通常为了美观，需要对各控件的定位方式进行定制。

(3)图片尺寸问题。

如果游戏界面同时要适配小尺寸(比如320*240)和大尺寸(比如2048*1536)，那么采用图片的尺寸就需要考虑。如果使用适用于320*240的图片大小，那么在2048*1536的屏幕中显示时就会很模糊；反之，如果使用适用于2048*1536的图片大小，那么在320*240的屏幕中显示时，就会出现采样不连续导致的锯齿形状。

为解决上述问题，相关技术中提出了两种解决方案，一种是基于绝对坐标的定位、缩放适配的方式，另外一种是对不同屏幕使用多套界面配置适配的方式。

方式一、基于绝对坐标的定位、缩放适配的方式

该方法规定了一种设计分辨率(w,h)，编辑时控件位置的坐标是相对左上角或左下角的绝对坐标，每个控件的长宽也是像素的绝对大小。在将(w,h)适用到屏幕分辨率(W,H)时，先将界面居中，再采用两种缩放大小min(W/w,H/h)或max(W/w,H/h)来进行适配。

在按缩放大小min(W/w,H/h)进行适配时，将宽度为w、高度为h的矩形控件缩放到比例为max(W/w,H/h)，使得至少有两条边贴到宽度为W、高度为H的屏幕边缘，同时保证该控件面积完全位于屏幕内(如图1、图2所示)。

在按缩放大小max(W/w,H/h)进行适配时，将宽度为w、高度为h的矩形控件缩放到比例为max(W/w,H/h)，使得至少有两条边贴到宽度为W、高度为H的屏幕边缘，同时保证屏幕面积完全位于该控件之内(如图3、图4所示)。

该方法通过比较简单的方式将传统的绝对坐标定位的界面通过缩放适配到各种不同大小的屏幕中。但是，该方法存在以下的问题：

(1)由于设计分辨率与实际屏幕分辨率的长宽比并不一致，但长宽缩放比又必须保持等比缩放，因此会导致屏幕留有黑边，进而降低了屏幕空间的利用率；或者会出现部分界面超出屏幕而被裁切的现象。

(2)该方法在界面元素的坐标定位上也存在问题。比如，我们要把4个按钮分别固定在左下角、左上角、右下角、右上角，如果按该方法中所述的适配方式，如果设计分辨率与屏幕分辨率不一致，则无法将上述按钮固定在上述的位置。

(3)由于设计分辨率与实际分辨率的大小差别可能很大，因此，该方法为设计分辨率所采用的界面图片的精度可能与实际分辨率所要求的图片精度差别太大。如果实际分辨率达到设计分辨率的数倍的话，那么在屏幕上显示的图像就会很模糊；如果设计分辨率达到实际分辨率的数倍的话，由于图片精度太高，则在屏幕上显示的图片就可能会跳过采样点而导致出现锯齿，同时图片也会占用过多的内存空间。

方式二、对不同屏幕使用多套界面配置适配的方式

在该方法中，对不同的屏幕大小采用不同的参数进行分类。比如，按长宽比的比率先分类一次，再按屏幕的像素大小再次分类。长宽比类似的屏幕，可以使用类似的界面配置；屏幕像素大小分类不同的屏幕，可以使用不同的图片。

例如，有5种屏幕：(480,320)，(960,640)，(1024,768),(2048,1536)以及(1334,750)。按长宽比可以将屏幕分为3类，如表1所示：

表1

分类	长宽比	分辨率
			1	1.5	(480,320)，(960,640)
2	1.33	(1024,768),(2048,1536)
			3	1.78	(1334,750)

按屏幕像素大小可以将屏幕分为3类，如表2所示：

表2

分类	精度	分辨率
			1	1	(480,320)
2	2	(960,640),(1024,768),(1334,750)
			3	4	(2048,1536)

对于不同的分类，需要设计不同的界面配置或不同精度的图片。该方法对不同的分辨率能实现较好的适配，但这是建立在大量重复工作的基础之上的，效率极低。由于配置的总量是各种不同方式分类数量的乘积，因此，如果要适配更多分辨率的话，总量就会爆炸。另外，如果需要修改界面，设计人员的工作量将非常大。

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

发明内容

本发明实施例提供了一种界面中控件的显示方法及装置，以至少解决相关技术中界面与屏幕分辨率实现较好适配时工作量较大、工作效率较低的技术问题。

根据本发明实施例的一个方面，提供了一种界面中控件的显示方法，包括：获取界面中的控件，其中控件在界面中的布局以树状结构关联；根据树状结构确定控件在界面中的布局，并依据布局显示控件。

进一步地，控件在界面中的布局以树状结构关联包括：多个控件在界面中的布局存在父子关系，其中，子控件的布局根据子控件所属的父控件确定。

进一步地，根据树状结构确定控件在界面中的布局包括：获取子控件的表示方式；根据表示方式在子控件所属的父控件中确定子控件的布局。

进一步地，表示方式包括以下参数至少之一：坐标，用于指示子控件中一指定点相对于父控件的坐标；尺寸，用于指示子控件的形状及大小；缩放比例，用于指示子控件对应的图片资源在显示时的缩放比例；锚点，用于指示子控件在发生变化时的不动点的坐标。

进一步地，坐标通过以下方式之一表示：通过数字表示坐标；通过相对于父控件相应尺寸的比例值表示坐标；通过数字与资源比例的乘积表示坐标，其中，资源比例为屏幕分辨率与设计分辨率的精度比例；通过父控件相应尺寸与上述表示方式表示出的坐标的差值来表示坐标。

进一步地，尺寸通过以下方式之一表示：通过数字表示尺寸；通过相对于父控件相应尺寸的比例值表示尺寸；通过数字与资源比例的乘积表示尺寸，其中，资源比例为屏幕分辨率与设计分辨率的精度比例；通过父控件相应尺寸与上述表示方式表示出的尺寸的差值来表示尺寸。

进一步地，缩放比例通过以下方式之一表示：通过数字表示缩放比例；通过数字与预定义的比例的乘积表示缩放比例；使用资源比例作为缩放比例，其中，资源比例为屏幕分辨率与设计分辨率的精度比例。

进一步地，预定义的比例包括以下至少之一：s，q，k，g，其中， 其中，W表示设备屏幕分辨率宽度，w表示设计分辨率的宽度，H表示设备屏幕分辨率高度，h表示设计分辨率的高度。

进一步地，锚点的坐标为相对于子控件中一指定点的坐标。

进一步地，资源比例x通过以下方式计算： $x=f(H,h)=\left\{\begin{array}{cc}1& (0\&le;\frac{H}{h}<1.5)\\ n& (1.5\&times;2^{n-1}\&le;\frac{H}{h}<1.5\&times;2^n)\end{array}\right.,$ 其中，H表示设备屏幕分辨率高度，h表示设计分辨率的高度，n为正整数。

根据本发明实施例的另一方面，还提供了一种界面中控件的显示装置，包括：获取模块，用于获取界面中的控件，其中控件在界面中的布局以树状结构关联；确定模块，用于根据树状结构确定控件在界面中的布局；显示模块，用于依据布局显示控件。

在本发明实施例中，首先通过获取界面中的控件，其中控件在界面中的布局以树状结构关联，然后根据树状结构确定控件在界面中的布局，并依据布局显示控件，解决了相关技术中界面与屏幕分辨率实现较好适配时工作量较大、工作效率较低的技术问题，进而根据树状结构确定控件在界面中的布局，并依此进行控件的显示，有效避免了针对不同分辨率需要对同一界面进行多次设计而导致的效率低下的问题，进而极大地提高了界面与屏幕的分辨率适配的效率。

附图说明

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

图1是相关技术中控件面积完全位于屏幕之内的第一示意图；

图2是相关技术中控件面积完全位于屏幕之内的第二示意图；

图3是相关技术中屏幕面积完全位于控件之内的第一示意图；

图4是相关技术中屏幕面积完全位于控件之内的第二示意图；

图5是根据本发明第一实施例的界面中控件的显示方法的流程图；

图6是根据本发明第二实施例的界面中控件的布局示意图；

图7是根据本发明第二实施例的界面中控件的布局对应的树状结构的示意图；以及

图8是根据本发明实施例的界面中控件的显示装置的示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

下面，首先对本申请中涉及的相关技术术语进行简要地解释：

屏幕分辨率：屏幕上显示的像素个数。

全屏界面：必须铺满整个屏幕大小的界面。

窗口界面：只在屏幕内某个区域显示的界面，一般不铺满整个屏幕。

DPI：DotsPerInch，每英寸所打印的点数，是设备分辨率的单位。

UI：UserInterface，用户界面，本申请中与GUI(用户图像界面)同义。

根据本发明实施例，提供了一种界面中控件的显示方法的实施例，针对多种屏幕适配中的不便，至少解决了以下技术问题：设计人员需要针对不同分辨率对同一个界面进行多次设计的工作量重复问题；图片在不同显示设备(例如可以是手机)相对精度不一而导致的不美观问题；图片在不同手机相对精度不一而导致的内存占用过高问题。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图5是根据本发明第一实施例的界面中控件的显示方法的流程图，如图5所示，该方法包括如下步骤：

步骤S102，获取界面中的控件，其中控件在界面中的布局以树状结构关联。

具体地，该步骤中采用的界面控件组织方式为控件树的方式。一个控件树结构中可包括多个节点，每个节点又可以包括多个子节点。

为了简化控件树的组织方式，控件在界面中的布局以树状结构关联可以包括：多个控件在界面中的布局存在父子关系，其中，子控件的布局根据子控件所属的父控件确定。

其中，一个控件对应的树状结构至少具有以下特征之一：可以带有多个子控件；一个子控件只对应一个父控件。其中，每个子控件即对应树状结构中的一个子节点，每个父控件即对应树状结构中的一个父节点。

由于在实际当中，同一个界面在不同屏幕上显示的内容是有很强的关联性的，如果都分开设计，就浪费了这种关联性信息。该实施例设计多个控件在界面中的布局存在父子关系，进而当同一界面在不同的屏幕进行显示时，由于这种关联关系是保持不变的，因此，只需要简单地修改相关参数(与子控件布局相关的参数)即可实现对界面分辨率的适配，而无需修改界面，进而大大减小了适配的工作量，提高了分辨率适配的执行效率。

步骤S104，根据树状结构确定控件在界面中的布局，并依据布局显示控件。

在该步骤中，根据树状结构可以确定其中包含的每个节点(子节点或者父节点)的布局，或者，每个子节点在其所属父节点中的布局。也即根据树状结构可实现对控件的定位，进而根据对界面中控件的定位实现对控件的显示。

在该实施例中，通过获取界面中以树状结构关联的控件，根据树状结构确定控件在界面中的布局，进而依据控件的布局进行控件的展示，基于此，解决了相关技术中界面与屏幕分辨率实现较好适配时工作量较大、工作效率较低的技术问题，进而可以实现对不同屏幕的分辨率的灵活适配，有效避免了针对不同分辨率需要对同一界面进行多次设计而导致的效率低下的问题，进而极大地提高了界面与屏幕的分辨率适配的效率。

可选地，根据树状结构确定控件在界面中的布局包括：获取子控件的表示方式；根据表示方式在子控件所属的父控件中确定子控件的布局。

其中，在上述实施例中，表示方式可包括以下参数中的至少之一：坐标，用于指示子控件中一指定点相对于父节点的坐标；尺寸，用于指示子控件的形状及大小；缩放比例，用于指示子控件对应的图片资源在显示时的缩放比例；锚点，用于指示子控件在发生变化时的不动点的坐标。

在本申请中，子控件的坐标可以通过以下任意一种方式表示：通过数字表示坐标；通过相对于父控件相应尺寸的比例值表示坐标；通过数字与资源比例的乘积表示坐标，其中，资源比例为屏幕分辨率与设计分辨率的精度比例；通过父控件相应尺寸与上述表示方式表示出的坐标的差值来表示坐标。

通过数字表示坐标，例如960.0，-100等。

通过相对于父控件相应尺寸的比例值表示坐标，例如用数字加上百分号做后缀表示，如100％，1％等。需要说明的是，该比例值是相对父控件的尺寸计算得到的。例如，父控件的尺寸为(480,320)，子控件的坐标为(30,60％)，则子控件的实际坐标为(30,320*60％)＝(30,192)。

通过数字与资源比例的乘积表示坐标，可以通过数字加上x后缀表示，例如480x，320x等。例如，根据设计分辨率和屏幕分辨率得到资源比例为2，同时子控件的坐标为(30x,120x)，那么子控件的在屏幕中的实际坐标为(60,240)。

通过父控件相应尺寸与上述表示方式表示出的坐标的差值来表示坐标。可以采用前缀(如i)加上述几种坐标的形式进行表示。例如，i120，i70％，i40x等。再例如，如果根据设计分辨率和屏幕分辨率得到资源比例为2，父控件的尺寸是(960,480)，子控件的坐标为(i40x,i70％)，则子控件的在屏幕中的实际坐标为(960-40*2,480*(100％-70％))＝(880,160)。

需要说明的是，上述子控件的坐标的确定方式只是本申请的优选实施方式，本申请确定子控件的坐标不仅限于上述方式。本领域的技术人员应当理解的是，任何与本申请功能相同的控件坐标确定方法均在本发明的保护范围之内。

可选地，上述的尺寸通过以下任意一种方式表示：通过数字表示尺寸；通过相对于父节点相应尺寸的比例值表示尺寸；通过数字与资源比例的乘积表示尺寸，其中，资源比例为屏幕分辨率与设计分辨率的精度比例；通过父控件相应尺寸与上述表示方式表示出的尺寸的差值来表示尺寸。

与上述的坐标的表示方式相类似的，尺寸可以通过数字坐标、百分比(相对于父节点相应尺寸的比例值，用数字加上百分号做后缀表示)、数字乘以资源比例的尺寸(用数字加上x后缀表示)或者通过父控件相应尺寸与上述表示方式表示出的尺寸的差值等方式来表示(前缀i加上述几种尺寸的形式)。这里不再赘述。

可选地，缩放比例通过以下方式之一表示：通过数字表示缩放比例；通过数字与预定义的比例的乘积表示缩放比例；使用资源比例作为缩放比例，其中，资源比例为屏幕分辨率与设计分辨率的精度比例。

可选地，上述预定义的比例包括以下至少之一：s，q，k，g，其中，

$s=min(\frac{W}{w},\frac{H}{h})$ (式1)

$q=max(\frac{W}{w},\frac{H}{h})$ (式2)

$k=\frac{W}{w}$ (式3)

$g=\frac{H}{h}$ (式4)

其中，W表示设备屏幕分辨率宽度，单位可默认为px(像素)；w表示设计分辨率的宽度，；H表示设备屏幕分辨率高度，单位可默认为px(像素)；h表示设计分辨率的高度，单位可默认为px(像素)。需要说明的是，本申请不对W、H、w、h的大小关系作具体的限定。但是为了方便起见，可以认为W≥H，反之可将手机旋转90度。

具体地，式1，将位置为屏幕中心、宽度为w、高度为h的矩形长宽等比缩放到比例s，使得至少有两条边贴到宽度为W、高度为H的屏幕边缘，同时保证该控件面积完全位于屏幕之内。

式2，将位置为屏幕中心、宽度为w、高度为h的矩形长宽等比缩放到比例q，使得至少有两条边贴到宽度为W、高度为H的屏幕边缘，同时保证屏幕面积完全位于该控件之内。

式3，将位置为屏幕中心、宽度为w、高度为h的矩形长宽等比缩放到比例k，使得矩形左右两条边贴到宽度为W、高度为H的屏幕边缘。

式4，将位置为屏幕中心、宽度为w、高度为h的矩形长宽等比缩放到比例g，使得矩形上下两条边贴到宽度为W、高度为H的屏幕边缘。

可选地，上述锚点的坐标为相对于所述子控件中一指定点的坐标。

具体地，锚点即子控件中缩放时的缩放不动点(以该点为中心，可向各方向进行缩放)，同时也是旋转时的旋转不动点(即旋转时围绕的点)。在该实施例中，锚点采用(a，b)表示，其中，0≤a≤1，0≤b≤1，也即表示在整个子控件尺寸中，该锚点相对于该子控件左下角的比例。比如，(0,0)表示整个子控件尺寸的左下角，(1,1)表示整个子控件尺寸的右上角。

可选地，上述的资源比例x可通过以下公式计算：

$x=f(H,h)=\left\{\begin{array}{cc}1& (0\&le;\frac{H}{h}<1.5)\\ n& (1.5\&times;2^{n-1}\&le;\frac{H}{h}<1.5\&times;2^n)\end{array}\right.$ (式5)

其中，H表示设备屏幕分辨率高度，h表示设计分辨率的高度，n为正整数。根据设计分辨率和屏幕分辨率按(按照式5)可以计算得到x的值(资源比例)，该值表征了展示的图片的精度。

对于图片精度的控制来说，由于资源(缩放)比例x和图片资源缩放的比例x是相同的，因此，可以根据不同的x来读取不同的资源。比如，可建立诸如1x、2x、4x、8x的目录，假设有一个在设计分辨率下尺寸为(30,20)的图片，那么其图片尺寸在1x目录下为(30,20)，在2x目录下为(60,40)，在4x目录下为(120,80)，以此类推。在游戏中创建界面读取图片时，可根据当前缩放比例x去读对应的资源目录，这样就可实现在不同分辨率的屏幕中保持较为接近的图片精度。程序运行时，如果判断到某个控件由于显示区域较小，同时该控件使用的图片精度又较高，而且存在更适合该显示区域的精度时，可以在程序中动态将该图片转换成精度较小的图片，同时修改该图片的缩放比例，这样可以达到节省内存的效果。

在上述的实施例中，通过获取界面中的控件，其中，多个控件在界面中的布局存在父子关系；获取子控件的表示方式，其中，表示方式包括坐标、尺寸、缩放比例、锚点等至少之一；根据表示方式在子控件所属的父控件中确定子控件的布局；依据该布局显示所述控件，可非常灵活地适配不同屏幕的分辨率。通过对上述的坐标、尺寸、缩放比例、锚点等参数进行配置，即可即时预览到各个屏幕下的显示效果，无需界面设计人员设计多套界面或者利用代码动态调整界面，从而提高了界面分辨率适配的效率。同时，可以在图片资源使用多套精度的资源，并依据资源比例动态替换匹配精度图片。通过上述方式，可以在显示上更美观，同时也节省了内存。

例如，对于窗口界面，可以添加一个在屏幕中居中的根节点(即坐标为(50％,50％)，默认根节点的父节点大小为屏幕分辨率)，然后对该节点设置缩放比例为(1s，1s)，即可达到分辨率缩放适配的效果，执行效果明显提高。

例如，对于全屏界面，可以采用线性布局或定不动点的方式来进行适配。在常见的全屏界面中，通常会存在一个覆盖全屏的背景图。因此，可将背景图放置到屏幕中，将其坐标设置为(50％,50％)，锚点设置为(0.5，0.5)，缩放比例设置为(1q，1q)，即可实现覆盖全屏(可能顶出屏幕)。或者，也可将缩放比例设置为(1k，1g)，可不等比缩放地无缝覆盖全屏。

需要说明的是，在具体的适配过程中，为了方便控件定位，可将屏幕按上述的尺寸定义方式进行分割。比如，可以竖向线性将屏幕划分为多个子区域，然后对各个子区域再继续划分，按照各个小的区域进行适配。

使用本实施例给出的上述方案，能够至少实现以下功能：提供了一种新的坐标计算方式，解决了多种屏幕分辨率中窗口界面和全屏界面的显示适配问题；提供了一种多分辨率通用的界面配置方案，界面设计人员只需一次编辑，即可将界面适用于不同分辨率；提供了一种图片精度和纹理内存控制的方式，可根据分辨率选择合适的图片精度，同时还能够节省内存。

图6是根据本发明第二实施例的界面中控件的布局示意图。图7是根据本发明第二实施例的界面中控件的布局对应的树状结构的示意图。其中，各个矩形框内的4个连续括号表示的含义分别是坐标、尺寸、缩放比例以及锚点。从图6和图7可以看出，在本申请中，界面布局以树状结构关联，多个控件在界面中的布局存在父子关系，例如父控件的参数为(0.0)，(100％，100％)，(1,1)，(0,0)，其对应的子控件包括参数为(0，i50x)，(100％，50x)，(1,1)，(0,0)的子控件、参数为(0，20％)，(100％，80％)，(1,1)，(0,0)的子控件，以及参数为(0.0)，(100％，20％)，(1,1)，(0,0)的子控件。另外，子控件还对应了其他的子控件，如图6、7所示，这里不再赘述。

下面，根据本发明实施例，还提供了一种界面中控件的显示装置。需要说明的是，根据本发明实施例的界面中控件的显示装置可以用于执行根据本发明实施例的界面中控件的显示方法。下面对根据本发明实施例的界面中控件的显示装置进行说明。

图8是根据本发明实施例的界面中控件的显示装置的示意图。如图8所示，该装置包括：获取模块80、确定模块82和显示模块84。

获取模块80，用于获取界面中的控件，其中控件在界面中的布局以树状结构关联。

确定模块82，用于根据树状结构确定控件在界面中的布局。

显示模块84，用于依据布局显示控件。

在该实施例中，通过获取模块80获取界面中的控件，其中控件在界面中的布局以树状结构关联，确定模块82根据树状结构确定控件在界面中的布局，进而显示模块84依据布局显示控件，解决了相关技术中界面与屏幕分辨率实现较好适配时工作量较大、工作效率较低的技术问题，有效避免了针对不同分辨率需要对同一界面进行多次设计而导致的效率低下的问题，进而极大地提高了界面与屏幕的分辨率适配的效率。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，RandomAccessMemory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (11)

1.一种界面中控件的显示方法，其特征在于，包括：

获取界面中的控件，其中所述控件在所述界面中的布局以树状结构关联；

根据所述树状结构确定所述控件在所述界面中的布局，并依据所述布局显示所述控件。

2.根据权利要求1所述的方法，其特征在于，所述控件在所述界面中的布局以树状结构关联包括：

多个所述控件在所述界面中的布局存在父子关系，其中，子控件的布局根据所述子控件所属的父控件确定。

3.根据权利要求2所述的方法，其特征在于，根据所述树状结构确定所述控件在所述界面中的布局包括：

获取所述子控件的表示方式；

根据所述表示方式在所述子控件所属的父控件中确定所述子控件的布局。

4.根据权利要求3所述的方法，其特征在于，所述表示方式包括以下参数至少之一：

坐标，用于指示所述子控件中一指定点相对于所述父控件的坐标；

尺寸，用于指示所述子控件的形状及大小；

缩放比例，用于指示所述子控件对应的图片资源在显示时的缩放比例；

锚点，用于指示所述子控件在发生变化时的不动点的坐标。

5.根据权利要求4所述的方法，其特征在于，所述坐标通过以下方式之一表示：

通过数字表示坐标；

通过相对于所述父控件相应尺寸的比例值表示坐标；

通过数字与资源比例的乘积表示坐标，其中，所述资源比例为屏幕分辨率与设计分辨率的精度比例；

通过所述父控件相应尺寸与上述表示方式表示出的坐标的差值来表示坐标。

6.根据权利要求4所述的方法，其特征在于，所述尺寸通过以下方式之一表示：

通过数字表示尺寸；

通过相对于所述父控件相应尺寸的比例值表示尺寸；

通过数字与资源比例的乘积表示尺寸，其中，所述资源比例为屏幕分辨率与设计分辨率的精度比例；

通过所述父控件相应尺寸与上述表示方式表示出的尺寸的差值来表示尺寸。

7.根据权利要求4所述的方法，其特征在于，所述缩放比例通过以下方式之一表示：

通过数字表示所述缩放比例；

通过数字与预定义的比例的乘积表示所述缩放比例；

使用资源比例作为所述缩放比例，其中，所述资源比例为屏幕分辨率与设计分辨率的精度比例。

8.根据权利要求7所述的方法，其特征在于，所述预定义的比例包括以下至少之一：s，q，k，g，其中，

$s=min(\frac{W}{w},\frac{H}{h}),$

$q=max(\frac{W}{w},\frac{H}{h}),$

$k=\frac{W}{w},$

$g=\frac{H}{h},$

其中，W表示设备屏幕分辨率宽度，w表示设计分辨率的宽度，H表示设备屏幕分辨率高度，h表示设计分辨率的高度。

9.根据权利要求4所述的方法，其特征在于，所述锚点的坐标为相对于所述子控件中一指定点的坐标。

10.根据权利要求5至8中任一项所述的方法，其特征在于，所述资源比例x通过以下方式计算：

$x=f(H,h)=\left\{\begin{array}{cc}1& (0\&le;\frac{H}{h}<1.5)\\ n& (1.5\&times;2^{n-1}\&le;\frac{H}{h}<1.5\&times;2^n)\end{array}\right.$

其中，H表示设备屏幕分辨率高度，h表示设计分辨率的高度，n为正整数。

11.一种界面中控件的显示装置，其特征在于，包括：

获取模块，用于获取界面中的控件，其中所述控件在所述界面中的布局以树状结构关联；

确定模块，用于根据所述树状结构确定所述控件在所述界面中的布局；

显示模块，用于依据所述布局显示所述控件。