一种UI布局自适应方法及装置与流程

本发明涉及互联网技术领域，具体而言，涉及一种ui布局自适应方法及装置。

背景技术：

市面上，存在着许多的手机厂商。这些手机厂商每年都会推出多款手机产品。这些手机产品型号各异，造成市面上手机存在多种分辨率。横板游戏诸如棋牌游戏的客户端在设计ui(userinterface，用户界面)布局时，为了兼容各种手机，需要针对各分辨率做适配，以保证游戏在不同分辨率的手机上体验一致。为了实现这个目的，通常的做法有平铺法或中心法。

但是注意到，现有技术之一的平铺法存在的问题是图片的拉升和缩放将导致ui在比母版分辨率大或小的手机上显示，图片出现失真，严重影响用户的游戏体验。而现有技术之一的中心法存在的技术问题是在比母版分辨率小的手机上，会存在ui图标向两边扩散，而在比母版分辨率大的手机上，会存在ui图标向中间聚集的问题，同样会严重影响用户的游戏体验。

技术实现要素：

有鉴于此，本发明的目的在于提供一种ui布局自适应方法及装置，以改善上述问题。

本发明实施例提供一种ui布局自适应方法，应用于横板游戏客户端，方法包括：将分辨率为母版分辨率的第一显示屏幕的中心点确定为预设坐标系下的第一主坐标原点；根据预设坐标系下的第一主坐标原点，将第一显示屏幕划分为4个象限区域；将第一显示屏幕的4个顶点分别作为4个象限区域的第一次坐标原点，并且分别计算每个象限区域内的ui图标相对于其所在象限区域内的第一次坐标原点的位置坐标；当在分辨率不同于母版分辨率下的第二显示屏幕中显示横板游戏客户端的ui时，根据上述计算出的每个ui图标的位置坐标对ui进行布局。

进一步地，本发明实施例中，当在分辨率不同于母版分辨率下的第二显示屏幕中显示横板游戏客户端的ui时，根据上述计算出的每个ui图标的位置坐标对ui进行布局的步骤，可以包括：将第二显示屏幕的中心点确定为预设坐标系下的第二主坐标原点；根据预设坐标系下的第二主坐标原点，将第二显示屏幕划分为4个象限区域；将第二显示屏幕的4个顶点分别作为4个象限区域的第二次坐标原点；对所述横版游戏客户端的ui进行布局，其中，对于每一个ui图标，在所述第二显示屏幕的分辨率下该ui图标在其所属的象限区域内相对于该象限区域的第二次坐标原点的位置坐标为第一坐标，在第一显示屏幕的母版分辨率下该ui图标相对于其所属象限区域内的第一次坐标原点的位置坐标为第二坐标，其中，第一坐标与第二坐标相同。

进一步地，本发明实施例中，第一显示屏幕中的4个象限区域可以为4个等分区域；第二显示屏幕中的4个象限区域可以为4个等分区域。

进一步地，本发明实施例中，预设坐标系为平面直角坐标系。

进一步地，本发明实施例中，在横版游戏客户端的ui中，基本上每个ui图标都是位于邻近显示屏幕的4个顶点的其中之一的位置。

本发明实施例提供一种ui布局自适应装置，应用于横板游戏客户端，该装置包括：坐标原点确定模块，用于将分辨率为母版分辨率的第一显示屏幕的中心点确定为预设坐标系下的第一主坐标原点；象限区域划分模块，用于根据预设坐标系下的第一主坐标原点，将第一显示屏幕划分为4个象限区域；坐标原点确定模块，还用于将第一显示屏幕的4个顶点分别作为4个象限区域的第一次坐标原点，并且分别计算每个象限区域内的ui图标相对于其所在象限区域内的第一次坐标原点的位置坐标；ui布局模块，用于当在分辨率不同于母版分辨率下的第二显示屏幕中显示横板游戏客户端的ui时，根据上述计算出的每个ui图标的位置坐标对ui进行布局。

进一步地，ui布局模块当在分辨率不同于母版分辨率下的第二显示屏幕中显示横板游戏客户端的ui时，根据上述计算出的每个ui图标的位置坐标对ui进行布局的方式，包括：将第二显示屏幕的中心点确定为预设坐标系下的第二主坐标原点；根据预设坐标系下的第二主坐标原点，将第二显示屏幕划分为4个象限区域；将第二显示屏幕的4个顶点分别作为4个象限区域的第二次坐标原点；对所述横版游戏客户端的ui进行布局，其中，对于每一个ui图标，在所述第二显示屏幕的分辨率下该ui图标在其所属的象限区域内相对于该象限区域的第二次坐标原点的位置坐标为第一坐标，在第一显示屏幕的母版分辨率下该ui图标相对于其所属象限区域内的第一次坐标原点的位置坐标为第二坐标，其中，第一坐标与第二坐标相同。

进一步地，第一显示屏幕中的4个象限区域为4个等分区域；第二显示屏幕中的4个象限区域为4个等分区域。

进一步地，预设坐标系为平面直角坐标系。

进一步地，在横版游戏客户端的ui中，基本上每个ui图标都是位于邻近显示屏幕的4个顶点的其中之一的位置。

本发明实施例提供的ui布局自适应方法及装置，预先在母板分辨率下的第一显示屏幕中计算各个ui图标相对其所在象限区域内的屏幕顶点(次坐标原点)的坐标位置，然后当需要在分辨率不同于母版分辨率下的第二显示屏幕中显示横板游戏客户端的ui时，便可以根据上述计算出的每个ui图标的位置坐标对ui进行布局。这种ui布局方法基本不会造成ui图标的拉升或缩放，也基本不会造成ui图标的聚集或扩散，在分辨率不同于模板分辨率下的显示屏幕中显示客户端的ui时，可以保证这种情况下的ui图标与在母版分辨率下的显示效果基本相同，进而可以很好的改善用户的游戏体验。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本发明实施例提供的一种显示设备的方框示意图；

图2为本发明实施例提供的一种ui布局自适应方法的流程图；

图3为本发明实施例提供的示例中第一显示屏幕的象限区域划分示意图；

图4为本发明实施例提供的示例中第二显示屏幕的象限区域划分示意图；

图5为本发明实施例提供的一种ui布局自适应装置的功能模块示意图。

图标：100-显示设备；110-存储器；120-处理器；130-显示单元；140-ui布局自适应装置；142-坐标原点确定模块；144-象限区域划分模块；146-ui布局模块。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1，是本发明实施例提供的一种显示设备100的方框示意图。显示设备100包括存储器110、处理器120、显示单元130以及ui布局自适应装置140。本实施例中，显示设备100可以是手机、平板电脑等设备，但不限于此。

其中，ui布局自适应装置140包括至少一个可以软件或固件的形式存储于存储器110中或固化在显示设备的操作系统中的软件功能模块。处理器120用于执行存储器110中存储的可执行模块，例如ui布局自适应装置140包括的软件功能模块或计算机程序。

显示单元130在显示设备100与用户之间提供一个交互界面，例如用户界面。在本实施例中，显示单元130可以是液晶显示器或触控显示器。若为触控显示器，其可为支持单点和多点触控操作的电容式触控屏或电阻式触控屏等。

另外，本实施例中，显示设备100可以与远程服务器进行通信，以获取客户端诸如横板游戏客户端的安装包，并进行安装。例如，显示设备100可以下载并安装棋牌游戏客户端以供用户体验。

另外，要注意到，在横版游戏客户端诸如棋牌游戏客户端的ui中，基本上每个ui图标都是位于邻近显示屏幕的4个顶点的其中之一的位置。这在一定意义上是本发明实施例所提供的方法可以实现相应其有益效果的基础背景。

请参阅图2，是本发明实施例提供的一种ui布局自适应方法的流程图。所应说明的是，本实施例提供的方法不以图2及以下所述的具体顺序为限制。下面将对图2中所示的各步骤进行阐述。

步骤s101，将分辨率为母版分辨率的第一显示屏幕的中心点确定为预设坐标系下的第一主坐标原点。

本实施例中，要理解，母版分辨率可以在设计客户端ui时预先选定。

本实施例中，作为一种实施方式，预设坐标系优选为平面直角坐标系。

请参阅图3，以图3中所描绘的方形区域作为第一显示屏幕的示意性表示，其中，标记“0”标注的点为所述第一主坐标原点。

步骤s103，根据所述预设坐标系下的所述第一主坐标原点，将所述第一显示屏幕划分为4个象限区域。

作为一种实施方式，在预设坐标系为平面直角坐标系的情况下，将第一显示屏幕划分为如图3中所示的4个象限区域，分别为第一象限区域、第二象限区域、第三象限区域和第四象限区域。特别地，本实施例中4个象限区域为4个等分的区域。

步骤s105，将所述第一显示屏幕的4个顶点分别作为4个象限区域的第一次坐标原点，并且分别计算每个象限区域内的ui图标相对于其所在象限区域内的第一次坐标原点的位置坐标。

本实施例中，将第一显示屏幕的4个顶点分别作为4个象限区域的第一次坐标原点，并依次标记为01、02、03和04。

然后，分别计算每个象限区域内的ui图标相对于其所在象限区域内的第一次坐标原点的位置坐标。例如，图3中的位于第三象限区域的ui图标经计算相对于第三象限区域的坐标原点03的坐标为(10，20)。

步骤s107，当在分辨率不同于所述母版分辨率下的第二显示屏幕中显示所述横板游戏客户端的ui时，根据上述计算出的每个ui图标的所述位置坐标对ui进行布局。

本实施例中，当在分辨率不同于母版分辨率下的第二显示屏幕中显示横板游戏客户端的ui时，根据步骤s105中计算出的坐标位置对ui进行在第二显示屏幕中的自适应布局的实现方式可以参照如下的描述。

请参阅图4，以图4中描绘的方形区域作为第二显示屏幕的示意性表示，其中，标记“0'”标注的点为第二显示屏幕的中心点，即所述第二主坐标原点。

然后，根据平面直角坐标系下的第二主坐标原点0'，将该第二显示屏幕划分为4个象限区域，同样地依次为第一象限区域、第二象限区域、第三象限区域和第四象限区域。特别地，本实施例中4个象限区域为4个等分的区域。同样地，将第二显示屏幕的4个顶点分别作为4个象限区域的第二次坐标原点，这4个第二次坐标原点在图4中依次标识为0'1、0'2、0'3和0'4。

最后，根据在第二显示屏幕中ui图标在其所在的象限区域内距离该象限区域的第二次坐标原点的位置坐标等于所述ui图标在第一显示屏幕中相对于其所在象限区域内的第一次坐标原点的位置坐标，对所述横版游戏客户端的ui进行自适应布局。换言之，虽然第二显示屏幕的分辨率不同于第一显示屏幕的分辨率(即，母版分辨率)，但是，客户端的每个ui图标在第一显示屏幕下相对于其所在象限区域的次坐标原点的位置坐标与在第二显示屏幕下的相同或基本相同。这样，就可以根据在第一显示屏幕的分辨率下计算出的ui图标的位置坐标对在第二显示屏幕的分辨率下的客户端ui显示进行自适应布局。

例如，在图3的第一显示屏幕下的ui图标相对于第三象限区域中的次坐标原点的位置坐标为(10，20)，则在图4的第二显示屏幕下的同一ui图标相对于第三象限区域中的次坐标原点的位置坐标仍然为(10，20)或十分接近于(10，20)。

作为示例，在一实施方式中，母版分辨率(960*640)屏幕下的第三象限有个ui图标，其相对第三象限的原点的坐标位置是(10，20)。在新的分辨率(1280*720)下，这个图标依然位于第三象限，同时它相对第三象限的坐标原点的位置仍是(10，20)。

本发明实施例提供的ui布局自适应方法，预先在母板分辨率下的第一显示屏幕中计算各个ui图标相对其所在象限区域内的屏幕顶点(次坐标原点)的坐标位置，然后当需要在分辨率不同于母版分辨率下的第二显示屏幕中显示横板游戏客户端的ui时，便可以根据上述计算出的每个ui图标的位置坐标对ui进行布局。因为，在横版游戏客户端诸如棋牌游戏客户端的ui中，基本上每个ui图标都是位于邻近显示屏幕的4个顶点的其中之一的位置，并且在不同分辨率的屏幕中ui图小相对于屏幕4个顶点的距离始终一致或始终基本一致。这种ui布局方法基本不会造成ui图标的拉升或缩放，也基本不会造成ui图标的聚集或扩散，在分辨率不同于模板分辨率下的显示屏幕中显示客户端的ui时，可以保证这种情况下的ui图标与在母版分辨率下的显示效果始终相同或基本相同，进而可以很好的改善用户的游戏体验。

请参阅图5，是本发明实施例提供的一种ui布局自适应装置140的功能模块示意图。如图5所描绘的，ui布局自适应装置140包括坐标原点确定模块142、象限区域划分模块144和ui布局模块146。

所述坐标原点确定模块142，用于将分辨率为母版分辨率的第一显示屏幕的中心点确定为预设坐标系下的第一主坐标原点，还用于将所述第一显示屏幕的4个顶点分别作为4个象限区域的第一次坐标原点，并且分别计算每个象限区域内的ui图标相对于其所在象限区域内的第一次坐标原点的位置坐标。

所述象限区域划分模块144，用于根据所述预设坐标系下的所述第一主坐标原点，将所述第一显示屏幕划分为4个象限区域。

所述ui布局模块146，用于当在分辨率不同于所述母版分辨率下的第二显示屏幕中显示所述横板游戏客户端的ui时，根据上述计算出的每个ui图标的所述位置坐标对ui进行布局。

本发明实施例所提供的ui布局自适应装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器、随机存取存储器、磁碟或者光盘等各种可以存储程序代码的介质。需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。