CN111552530A - 用户界面的终端屏幕适配方法、装置及设备 - Google Patents

Abstract

本申请公开了一种用户界面的终端屏幕适配方法、装置及设备，涉及数据处理技术领域。其中方法包括：首先加载UI对应的配置文件，得到UI内容信息；然后根据终端屏幕的屏幕信息和屏幕安全尺寸，确定所述UI内容信息适配后的展示信息；最后按照所述展示信息，展示所述UI内容信息。可利用屏幕安全尺寸规划出尺寸比例标准的展示区域来展示缩放的完整UI内容，不会破坏UI元素，可保证UI在终端屏幕适配的展示效果。并且方法简单，可节省UI在终端屏幕适配的开发成本。本申请适用于用户界面的终端屏幕适配。

Description

用户界面的终端屏幕适配方法、装置及设备

技术领域

本申请涉及数据处理技术领域，尤其是涉及到一种用户界面的终端屏幕适配方法、装置及设备。

背景技术

随着科技的进步，手机终端的屏幕分辨率种类越来越多，并且还有多种异形屏幕(如水滴屏、刘海屏、打孔屏等)出现，因此3D游戏中用户界面(User Interface，UI)的适配十分重要。

目前，传统的适配方式，由于分辨率固定、异形屏样式多样等，所以适配效果往往不佳，也无法直接进行缩放，因为大多数都是不等比缩放，会破坏UI元素样式。如果再用屏幕边界为基准，为每个UI元素做偏移的方式进行适配开发，无论从美术上还是技术上做法都非常复杂，进而增加UI在终端屏幕适配的开发成本。

发明内容

有鉴于此，本申请提供了一种用户界面的终端屏幕适配方法、装置及设备，主要目的在于改善目前传统的适配方式会破坏UI元素样式，造成适配效果不佳，以及会增加UI在终端屏幕适配的开发成本的技术问题。

依据本申请的一个方面，提供了一种用户界面的终端屏幕适配方法，该方法包括：

加载UI对应的配置文件，得到UI内容信息；

根据终端屏幕的屏幕信息和屏幕安全尺寸，确定所述UI内容信息适配后的展示信息；

按照所述展示信息，展示所述UI内容信息。

依据本申请的另一方面，提供了一种用户界面的终端屏幕适配装置，该装置包括：

加载模块，用于加载UI对应的配置文件，得到UI内容信息；

确定模块，用于根据终端屏幕的屏幕信息和屏幕安全尺寸，确定所述UI内容信息适配后的展示信息；

展示模块，用于按照所述展示信息，展示所述UI内容信息。

依据本申请又一个方面，提供了一种存储介质，其上存储有计算机程序，所述程序被处理器执行时实现上述用户界面的终端屏幕适配方法。

依据本申请再一个方面，提供了一种用户界面的终端屏幕适配设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述用户界面的终端屏幕适配方法。

借由上述技术方案，本申请提供的一种用户界面的终端屏幕适配方法、装置及设备，与目前传统的适配方式相比，本申请可根据终端屏幕的屏幕信息和屏幕安全尺寸，对UI内容信息进行适配调整，确定适配后的展示信息。不但可参考终端屏幕的屏幕实际情况，做到对应适配调整，而且还可加入屏幕安全尺寸来辅助适配调整。这样在多种不同尺寸的终端屏幕(包括异形屏)中，都可利用该安全尺寸规划出尺寸比例标准的展示区域来展示缩放的完整UI内容，不会破坏UI元素，可保证UI在终端屏幕适配的展示效果。并且方法简单，可节省UI在终端屏幕适配的开发成本。

上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。

附图说明

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

图1示出了本申请实施例提供的一种用户界面的终端屏幕适配方法的流程示意图；

图2示出了本申请实施例提供的一种适配场景实例的效果示意图；

图3示出了本申请实施例提供的另一种适配场景实例的适配解析示意图；

图4示出了本申请实施例提供的另一种适配场景实例的效果示意图；

图5示出了本申请实施例提供的另一种用户界面的终端屏幕适配方法的流程示意图；

图6示出了本申请实施例提供的背景适配设计的实例示意图；

图7示出了本申请实施例提供的实例场景的流程示意图；

图8示出了本申请实施例提供的一种用户界面的终端屏幕适配装置的结构示意图。

具体实施方式

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

针对目前传统的适配方式会破坏UI元素样式，造成适配效果不佳，以及会增加UI在终端屏幕适配的开发成本的技术问题。本实施例提供了一种用户界面的终端屏幕适配方法，可保证UI在终端屏幕适配的展示效果，以及可节省UI在终端屏幕适配的开发成本，如图1所示，该方法包括：

101、加载UI对应的配置文件，得到UI内容信息。

其中，配置文件中可包含根据规范制作的背景图、布局和UI元素(素材)等。本实施例中的UI可为2D或3D的游戏UI，或者其他软件UI等。UI内容信息中可包含UI的背景图(如游戏界面背景等)、UI元素(如游戏角色、游戏物品、文字、图标等)、这些UI元素的布局信息(如UI元素之间的相对位置、UI元素在背景图中的相对位置等)。

对于本实施例的执行主体可为UI在终端屏幕适配处理的装置或设备，可配置在客户端侧，例如对智能手机、平板电脑、个人计算机、电视等终端上安装的特定应用(Application，APP)的UI界面进行适配，不会破坏UI元素样式，可保证适配效果。

102、根据终端屏幕的屏幕信息和屏幕安全尺寸，确定UI内容信息适配后的展示信息。

其中，屏幕信息可包含屏幕的尺寸信息(如高度、宽度、宽高比等)、异形部分的尺寸(如异形屏凸出、凹进部分的尺寸等)、屏幕分辨率等。屏幕安全尺寸可包含安全宽度和/或安全高度等，可根据屏幕尺寸进行预先设定。对于本实施例在多种不同尺寸的终端屏幕(包括异形屏)中，都可利用该安全尺寸规划出尺寸比例标准的展示区域来展示缩放的完整UI内容，不会破坏UI元素，可保证UI在终端屏幕适配的展示效果。

在本实施例中，可根据终端屏幕的宽度、高度及宽高比例、分辨率等，获取UI内容信息中相应资源和缩放调整各UI元素的相对位置，然后结合屏幕安全宽度做最终调整，进而实现以屏幕中心为原点，根据相应的比例对UI元素进行偏移并对背景图进行调整，得到UI元素、背景图等适配后的展示位置和展示尺寸等展示信息。

103、按照UI内容信息适配后的展示信息，展示UI内容信息。

示例性的，如果终端屏幕为宽高比大于一定阈值的超宽屏，而通过缩放UI设计内容只能适用于宽高比小于该阈值的终端屏幕，此时为了保证适配效果，可两边增加屏幕安全宽度。例如，在智能手机加载某游戏的UI界面时，该智能手机为宽高比大于一定阈值的超宽屏，如果不设置屏幕安全宽度进行辅助调整，将会出现如图2所示的适配效果。由图2可知，一些UI元素经过缩放调整的适配后已经超出了终端屏幕所展示的范围，造成UI内容展示不完整，适配效果较差。因此为了实现良好的适配展示效果，可利用屏幕安全宽度进行辅助适配调整。如图3所示，图中的两侧各有一个方框，大小是由屏幕安全宽度这个参数决定的，即两侧方框中的单个方框的宽度。而UI将在里面的方框(两侧方框中间的大方框)中显示，即UI展示宽度仍可使用标准宽度，进而可得到如图4所示的适配展示效果，通过这种方式在宽高比大于一定阈值的超宽屏进行UI适配时，也可很好的展示出UI界面，保证UI布局比例标准，UI元素不被破坏(如被拉伸、变形等)，可完整展示所有的UI内容。

本实施例提供的用户界面的终端屏幕适配方法，与目前传统的适配方式相比，本实施例可根据终端屏幕的屏幕信息和屏幕安全尺寸，对UI内容信息进行适配调整，确定适配后的展示信息。不但可参考终端屏幕的屏幕实际情况，做到对应适配调整，而且还可加入屏幕安全尺寸来辅助适配调整。这样在多种不同尺寸的终端屏幕(包括异形屏)中，都可利用该安全尺寸规划出尺寸比例标准的展示区域来展示缩放的完整UI内容，不会破坏UI元素，可保证UI在终端屏幕适配的展示效果。并且方法简单，可节省UI在终端屏幕适配的开发成本。

进一步的，作为上述实施例具体实施方式的细化和扩展，为了完整说明本实施例的实施方式，本实施例还提供了另一种用户界面的终端屏幕适配方法，如图5所示，该方法包括：

201、创建UI符合预设规范标准条件的背景图、UI元素和布局。

其中，预设规范标准条件可根据实际业务需求预先设置。可选的，步骤201具体可包括：按照第一预设标准分辨率，创建UI元素和布局；按照第二预设标准分辨率，创建背景图，其中第二预设标准分辨率大于第一预设标准分辨率，第二预设标准分辨率是根据普屏(如宽高比为4:3、5:4等的屏幕)和超宽屏的分辨率(如宽高比为16:9、16:10、21:9等的屏幕)综合确定得到的，以便适用于绝大部分的终端屏幕适配。

例如，首先定义一个基础分辨率(第一预设标准分辨率)，本实施例可使用1280*720(16:9)，以此分辨率来制作各种UI局部，图标设计等。这个分辨率，是基础的“1K”分辨率的1.25倍，是根据经验确定的，在缩放时可以保证一定清晰度的比例。所谓的1K是从2K的标准倒推而来，就是1024像素长度，准备美术素材时，通常都会准备1K的基础UI素材，2X、3X、4X的为高清适配的高清素材。技术上的基础适配，就可直接使用屏幕的缩放技术，来根据屏幕的实际分辨率做默认的等比例缩放调整。此过程相当于UI基础适配。

在美术的设计上可实现背景的适配，如图6所示，虚线框对应的是高宽比为4：3屏幕的分辨率(1280*960)，实线框对应的是超宽屏的分辨率(1600*720)。因此在背景的设计上，可使用1600*960的分辨率做为基础，而为了兼容一些特殊操作，真正的制作大小可以在这个基础上增加10％左右，来做为最终的开发分辨率，即1760*1056。通过UI基础适配和背景适配这两种适配过程可对除了特殊屏(如宽高比大于一定阈值的超宽屏、异形屏等)以外绝大部分的终端屏幕做到精准适配。

202、根据创建得到的符合预设规范标准条件的背景图、UI元素和布局，生成UI对应的配置文件。

在本实施例中可由服务端侧创建符合预设规范标准条件的背景图、UI元素和布局，进而生成UI对应的配置文件，然后下发到客户端侧(如由客户端请求下载得到，或者服务端推送给客户端等)，在客户端需要加载该UI界面时，加载该UI对应的配置文件。除此之外，还可由客户端侧创建这些UI数据然后生成UI对应的配置文件，后续可上传该配置文件至服务端，以供其他客户端下载使用，或者客户端加载该配置文件以实现开发测试等的业务需求。

203、加载UI对应的配置文件，得到UI内容信息。

例如，如图7所示，在根据规范制作背景图，布局和UI素材(UI元素)之后，当需要根据创建得到的这些数据进行UI的屏幕适配时，即进入到一个终端屏幕的UI界面，可从配置文件中加载UI背景图、UI布局文件等。然后根据当前的屏幕分辨率，读取相应资源以及缩放调整各UI素材相对位置，并结合屏幕安全宽度做最终调整。具体可执行如下步骤204a至205所示的过程。

由于实际操作过程，为了满足用户更多的操作需求，用户也可不开启安全尺寸调整的适配功能，因此下面按照是否开启安全尺寸调整，分别进行不同的适配调整说明：

204a、若开启安全尺寸调整，则根据终端屏幕的屏幕信息和屏幕安全尺寸，确定UI内容信息适配后的展示信息。

对于本实施例，为了得到更加适合的屏幕安全尺寸，可选的，本实施例方法还可包括：根据终端屏幕的屏幕信息，设置屏幕安全尺寸。例如，预先根据屏幕的宽度、高度、宽高比以及异形部分尺寸(如对于异形屏)等，设定各自对应适合的屏幕安全尺寸，在该屏幕安全尺寸下，能够保证UI内容的完整准确展示，不破坏UI元素和布局，并且能够尽可能的在终端屏幕中最大化的展示这些UI内容。后续可根据预先创建的这些映射关系，准确快速找到与当前终端屏幕的屏幕信息对应的屏幕安全尺寸。

在具体的应用场景中，除了宽高比大于一定阈值的超宽屏以外，绝大部分的终端屏幕适配过程中的安全尺寸设置，主要参考的是异形部分尺寸。因此为了得到更加符合适配要求的安全尺寸，可选的，根据终端屏幕的屏幕信息，设置屏幕安全尺寸，具体可包括：根据屏幕信息判断终端屏幕是否为异形屏；若根据屏幕信息判定终端屏幕为异形屏，则根据异形屏凸出和/或凹进部分的尺寸，设置屏幕安全尺寸。例如，对于水滴屏、刘海屏、打孔屏等屏幕，根据其凸出和/或凹进部分的尺寸，设置屏幕安全尺寸，进而在UI适配展示时，将UI元素不在屏幕中凸出、凹进部分的进行展示，保证UI内容显示完整，实现准确完整的展示出所有UI内容。

为了说明步骤204a的具体实现过程，可选的，根据终端屏幕的屏幕信息和屏幕安全尺寸，确定UI内容信息适配后的展示信息，具体可包括：首先根据终端屏幕的屏幕信息，获取UI内容信息的缩放调整信息；然后依据该缩放调整信息和屏幕安全尺寸，确定UI内容信息适配后的展示信息。通过这种综合调整方式，同时考虑缩放调整信息与屏幕安全尺寸对终端屏幕UI的综合适配调整，可适用于不同尺寸的终端屏幕(可包括异形屏等)的UI适配过程，进而可准确确定UI内容信息适配后的展示信息，进而可保证UI内容的适配效果。

示例性，根据终端屏幕的屏幕信息，获取UI元素和背景各自对应的缩放调整信息，具体可包括：参照终端屏幕的宽高尺寸和屏幕分辨率，确定UI元素和背景进行等比例缩放调整的信息。例如，预先根据不同的宽高尺寸和屏幕分辨率，创建UI元素和背景等比例缩放调整的调整参数，并建立相应的映射关系，然后根据该映射关系，准确找到与当前终端屏幕的宽高尺寸和屏幕分辨率对应的UI元素和背景进行等比例缩放调整的调整参数信息。通过这种方式可快速准确地确定得到适合当前屏幕条件的UI内容等比例缩放调整的信息。

在本实施例中，根据安全宽度做最终调整需要包括几个参数：UI设计参数、UI界面参数、安全宽度等。例如，UI设计参数可为预设常量，如1280*720。UI界面参数可以是游戏引擎根据真实屏幕宽高及比例，对UI布局做缩放和调整后的宽高及位置数值，游戏中需要调整的界面元素，都可以根据UI布局的层次关系，通过接口(Application ProgrammingInterface，API)得到这些数值。安全宽度，可以是一个设定好的固定值，可等于一个异形屏凸出或凹进的那部份的宽度或高度等。

在启动开启安全尺寸调整时，还可根据实际需求实现单边或至少两边的安全尺寸调整。例如，对于宽高比大于一定阈值的超宽屏或异形屏，在屏幕的左侧或右侧(如智能手机的横屏模式)，通过单边安全尺寸调整保证UI布局比例标准，UI元素不被破坏，UI内容显示完整等。而对于一些特殊尺寸的屏幕(如菱形屏、圆形屏等)，可设置至少两边的安全尺寸调整，以保证正常展示这些UI内容。

基于图2至图4所示的双边安全尺寸调整实例，为了说明双边安全尺寸调整的具体实现过程，可选的，上述依据缩放调整信息和屏幕安全尺寸，确定UI内容信息适配后的展示信息，具体可包括：首先利用UI设计尺寸和屏幕安全尺寸，计算安全宽高比；若启用双边调整、且安全宽高比小于UI界面宽高比(如UI界面的宽度与高度的比值，若终端全屏展示UI则可认为是终端屏幕宽度与高度的比值)，则利用UI设计尺寸和屏幕安全尺寸，计算UI界面X轴的第一相对位置，其中，第一相对位置可以是对应界面锚点与其父级对象在坐标轴的相对位置；然后按照缩放调整信息和第一相对位置，对UI元素进行偏移，并对背景图进行调整，得到UI元素和背景图各自对应适配后的展示信息。通过这种调整方式，可在双边安全尺寸调整时，准确进行UI适配调整，以保证UI内容的准确适配展示。

其中，利用UI设计尺寸和屏幕安全尺寸，计算安全宽高比，具体可包括：按照第一预设公式计算得到安全宽高比，其中第一预设公式可包括：安全宽高比＝(UI设计宽度+屏幕安全宽度*2)/UI设计高度。该UI设计宽度可为UI设计参数中的宽度值，该UI设计高度可为UI设计参数中的高度值，例如UI设计参数为1280*720，则UI设计宽度为1280，而UI设计高度为720。

上述利用UI设计尺寸和屏幕安全尺寸，计算UI界面X轴的第一相对位置，具体可包括：按照第二预设公式计算得到第一相对位置，其中第二预设公式包括：第一相对位置＝UI设计宽度-屏幕安全宽度*2。例如，UI界面x轴相对位置，是对应该界面的锚点与其的父级对象在轴的相对位置，如Unity中的sizeDelta。在不启用单边安全尺寸调整(可默认使用双边安全尺寸调整)时，如果UI界面宽高比大于安全宽高比，UI的位置调整为：UI界面x轴相对位置＝UI设计宽度-安全宽度*2。

进一步的，为了说明单边安全尺寸调整的具体实现过程，依据缩放调整信息和屏幕安全尺寸，确定UI内容信息适配后的展示信息，具体还可包括：若启用单边调整、且安全宽高比小于UI界面宽高比(如UI界面的宽度与高度的比值，若终端全屏展示UI则可认为是终端屏幕宽度与高度的比值)，则首先利用UI界面尺寸和屏幕安全尺寸，计算UI界面X轴的第二相对位置；及，利用屏幕安全尺寸，计算UI界面X轴的第一原点位置；然后按照缩放调整信息和第二相对位置、第一原点位置，对UI元素进行偏移，并对背景图进行调整，得到UI元素和背景图各自对应适配后的展示信息。通过这种调整方式，可在单边安全尺寸调整时，准确进行UI适配调整。

以单边(左)调整为例，即只在屏幕左侧(智能手机横屏模式)采用安全尺寸调整，以减少此时屏幕左侧的水滴屏、打孔屏、刘海屏等的凸出和/或凹进部分对UI适配所带来的影响，保证UI布局比例标准，UI元素不被破坏(如被拉伸、变形等)，可完整展示所有的UI内容。

可选的，上述利用UI界面尺寸和屏幕安全尺寸，计算UI界面X轴的第二相对位置，具体可包括：按照第三预设公式计算得到第二相对位置，第三预设公式可包括：第二相对位置＝UI界面宽度-屏幕安全宽度，如在终端全屏展示UI时，可认为是终端屏幕宽度即为UI界面宽度。上述利用屏幕安全尺寸，计算UI界面X轴的第一原点位置，具体可包括：按照第四预设公式计算得到第一原点位置，其中第四预设公式可包括：第一原点位置＝屏幕安全宽度/2。例如，如果UI启用的安全宽度，则还要根据是否要做单边(左)调整，计算UI的位置。在启用单边(左)时，首先判断屏幕的比例，如果UI界面宽高比大于安全宽高比，UI的位置调整为：UI界面x轴相对位置＝UI界面宽度-安全宽度；UI界面x轴的原点＝安全宽度/2。

进一步可选的，依据缩放调整信息和所述屏幕安全尺寸，确定所述UI内容信息适配后的展示信息，具体还可包括：若启用单边调整、且安全宽高比大于UI界面宽高比(如UI界面的宽度与高度的比值，若终端全屏展示UI则可认为是终端屏幕宽度与高度的比值)，则利用UI界面尺寸和UI设计尺寸，计算偏移位置；及，利用UI设计尺寸和该偏移位置，计算UI界面X轴的第三相对位置；及，利用该偏移位置，计算UI界面X轴的第二原点位置；然后按照缩放调整信息和第三相对位置、第二原点位置，对UI元素进行偏移，并对背景图进行调整，得到UI元素和背景图各自对应适配后的展示信息。

其中，上述利用UI界面尺寸和UI设计尺寸，计算偏移位置，具体可包括：按照第五预设公式计算偏移位置，该第五预设公式具体可包括：偏移位置＝(UI界面宽度-UI设计界面宽度)/2。例如，UI设计参数为1280*720，则UI设计界面宽度可为1280。上述利用UI设计尺寸和该偏移位置，计算UI界面X轴的第三相对位置，具体可包括：按照第六预设公式计算第三相对位置，该第六预设公式可包括：UI设计宽度+偏移位置。上述利用该偏移位置，计算UI界面X轴的第二原点位置，具体可包括：按照第七预设公式计算第二原点位置，该第七预设公式可包括：第二原点位置＝偏移位置/2。

例如，如果UI启用的安全宽度，则还要根据是否要做单边(左)调整，计算UI的位置。在启用单边(左)时，首先判断屏幕的比例，如果UI界面宽高比小于安全宽高比，则UI的位置调整为：偏移位置＝(UI界面宽度-UI设计界面宽度)/2；UI界面x轴相对位置＝UI设计宽+偏移位置；UI界面x轴的原点＝偏移位置/2。

基于上述调整内容，对于目前宽高比大于一定阈值的超宽屏或一些新的异形屏，比如刘海屏、水滴屏、打孔屏等屏幕需要做适配，本实施例可加入一系列的安全宽度参数，该安全宽度参数具体包括三部分：安全宽度(px像素)，是否在UI中启用(是否开启安全宽度调整)，是否启用单边调整。进而可满足不同尺寸屏幕的UI适配需求，从而可基于以屏幕中心为原点的方式，用比较简单的方式和算法，根据比例对UI进行偏移，对背景进行调整，并对各种异形屏做不同的适配，兼容各种手机、电视等显示终端设备。

与步骤204a并列的步骤204b、若未开启安全尺寸调整，则根据终端屏幕的屏幕信息，获取UI元素和背景图各自对应的缩放调整信息，并依据缩放调整信息，确定UI元素和背景各自对应适配后的展示信息。

例如，在实际的适配调整过程中，用户还可选择不使用安全宽度这一辅助参数进行适配调整，如终端屏幕尺寸为标准比例的尺寸，对UI元素和背景图进行对应比例缩放调整即可实现完整的UI内容展示，且不破坏UI元素等。又或者，用户想查看未启动安全宽度的适配效果时，也可根据终端屏幕的屏幕尺寸和分辨率，对UI元素和背景图进行对应比例缩放调整等。从而满足用户更多的操控需求。如不启动安全宽度适配时，可进一步放大UI中间部分的细节等。

205、按照确定得到的展示信息，展示UI内容信息。

本实施例提供的用户界面的终端屏幕适配方案，可以为游戏、视频等解决不同尺寸的屏幕适配。使得美术人员做UI时，只需要按一个模版和简单的规范来制作，就可以适配几乎市面上的所有终端型号中不同分辨率的显示，并达到很好的效果。与目前传统的适配方式相比，可保证UI在终端屏幕适配的展示效果，并且方法简单，可节省UI在终端屏幕适配的开发成本。

进一步的，作为图1和图2所示方法的具体实现，本实施例提供了一种用户界面的终端屏幕适配装置，如图8所示，该装置包括：加载模块31、确定模块32、展示模块33。

加载模块31，可用于加载用户界面UI对应的配置文件，得到UI内容信息；

确定模块32，可用于根据终端屏幕的屏幕信息和屏幕安全尺寸，确定所述UI内容信息适配后的展示信息；

展示模块33，可用于按照所述展示信息，展示所述UI内容信息。

在具体的应用场景中，所述确定模块32，具体可用于根据终端屏幕的屏幕信息，获取所述UI内容信息的缩放调整信息；依据所述缩放调整信息和所述屏幕安全尺寸，确定所述UI内容信息适配后的展示信息。

在具体的应用场景中，所述确定模块32，具体还可用于利用UI设计尺寸和所述屏幕安全尺寸，计算安全宽高比；若启用双边调整、且所述安全宽高比小于UI界面宽高比，则利用UI设计尺寸和所述屏幕安全尺寸，计算UI界面X轴的第一相对位置，所述第一相对位置是对应界面锚点与其父级对象在坐标轴的相对位置；按照所述缩放调整信息和所述第一相对位置，对UI元素进行偏移，并对背景图进行调整，得到UI元素和背景图各自对应适配后的展示信息。

在具体的应用场景中，所述确定模块32，具体还可用于按照第一预设公式计算得到安全宽高比，所述第一预设公式包括：安全宽高比＝(UI设计宽度+屏幕安全宽度*2)/UI设计高度。

在具体的应用场景中，所述确定模块32，具体还可用于按照第二预设公式计算得到所述第一相对位置，所述第二预设公式包括：所述第一相对位置＝UI设计宽度-屏幕安全宽度*2。

在具体的应用场景中，所述确定模块32，具体还可用于若启用单边调整、且所述安全宽高比小于UI界面宽高比，则利用UI界面尺寸和所述屏幕安全尺寸，计算UI界面X轴的第二相对位置；及，利用所述屏幕安全尺寸，计算UI界面X轴的第一原点位置；按照所述缩放调整信息和所述第二相对位置、所述第一原点位置，对UI元素进行偏移，并对背景图进行调整，得到UI元素和背景图各自对应适配后的展示信息。

在具体的应用场景中，所述确定模块32，具体还可用于按照第三预设公式计算得到所述第二相对位置，所述第三预设公式包括：第二相对位置＝UI界面宽度-屏幕安全宽度。

在具体的应用场景中，所述确定模块32，具体还可用于按照第四预设公式计算得到所述第一原点位置，所述第四预设公式包括：第一原点位置＝屏幕安全宽度/2。

在具体的应用场景中，所述确定模块32，具体还可用于若启用单边调整、且所述安全宽高比大于UI界面宽高比，则利用UI界面尺寸和UI设计尺寸，计算偏移位置；及，利用UI设计尺寸和所述偏移位置，计算UI界面X轴的第三相对位置；及，利用所述偏移位置，计算UI界面X轴的第二原点位置；按照所述缩放调整信息和所述第三相对位置、所述第二原点位置，对UI元素进行偏移，并对背景图进行调整，得到UI元素和背景图各自对应适配后的展示信息。

在具体的应用场景中，所述确定模块32，具体还可用于按照第五预设公式计算所述偏移位置，所述第五预设公式包括：偏移位置＝(UI界面宽度-UI设计界面宽度)/2。

在具体的应用场景中，所述确定模块32，具体还可用于按照第六预设公式计算所述第三相对位置，所述第六预设公式包括：UI设计宽度+偏移位置。

在具体的应用场景中，所述确定模块32，具体还可用于按照第七预设公式计算所述第二原点位置，所述第七预设公式包括：第二原点位置＝偏移位置/2。

在具体的应用场景中，所述确定模块32，具体还可用于参照终端屏幕的宽高尺寸和屏幕分辨率，确定所述UI元素和背景进行等比例缩放调整的信息。

在具体的应用场景中，本装置还包括：设置模块；

设置模块，可用于根据所述屏幕信息，设置所述屏幕安全尺寸。

在具体的应用场景中，所述设置模块，具体可用于若根据所述屏幕信息判定所述终端屏幕为异形屏，则根据所述异形屏凸出和/或凹进部分的尺寸，设置所述屏幕安全尺寸。

在具体的应用场景中，所述确定模块32，具体可用于若开启安全尺寸调整，则根据终端屏幕的屏幕信息和屏幕安全尺寸，确定所述UI内容信息适配后的展示信息；若未开启安全尺寸调整，则根据终端屏幕的屏幕信息，获取UI元素和背景图各自对应的缩放调整信息，并依据所述缩放调整信息，确定UI元素和背景各自对应适配后的展示信息。

在具体的应用场景中，本装置还包括：创建模块和生成模块；

创建模块，可用于创建UI符合预设规范标准条件的背景图、UI元素和布局；

生成模块，可用于根据所述符合预设规范标准条件的背景图、UI元素和布局，生成UI对应的配置文件。

在具体的应用场景中，所述创建模块，具体可用于按照第一预设标准分辨率，创建UI元素和布局；按照第二预设标准分辨率，创建背景图，其中所述第二预设标准分辨率大于所述第一预设标准分辨率，所述第二预设标准分辨率是根据普屏和超宽屏的分辨率确定得到的。

需要说明的是，本实施例提供的一种用户界面的终端屏幕适配装置所涉及各功能单元的其它相应描述，可以参考图1和图5中的对应描述，在此不再赘述。

基于上述如图1和图5所示方法，相应的，本实施例还提供了一种存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述如图1和图5所示的用户界面的终端屏幕适配方法。

基于这样的理解，本申请的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施场景的方法。

基于上述如图1和图5所示的方法，以及图8所示的虚拟装置实施例，为了实现上述目的，本申请实施例还提供了一种用户界面的终端屏幕适配设备，具体可以为个人计算机、服务器、平板电脑、智能手机、智能手表、智能手环、或其他网络设备等，该设备包括存储介质和处理器；存储介质，用于存储计算机程序；处理器，用于执行计算机程序以实现上述如图1和图5所示的用户界面的终端屏幕适配方法。

可选的，上述实体设备还可以包括用户接口、网络接口、摄像头、射频(RadioFrequency，RF)电路，传感器、音频电路、WI-FI模块等等。用户接口可以包括显示屏(Display)、输入单元比如键盘(Keyboard)等，可选用户接口还可以包括USB接口、读卡器接口等。网络接口可选的可以包括标准的有线接口、无线接口(如WI-FI接口)等。

本领域技术人员可以理解，本实施例提供的上述实体设备结构并不构成对该实体设备的限定，可以包括更多或更少的部件，或者组合某些部件，或者不同的部件布置。

存储介质中还可以包括操作***、网络通信模块。操作***是管理上述实体设备硬件和软件资源的程序，支持信息处理程序以及其它软件和/或程序的运行。网络通信模块用于实现存储介质内部各组件之间的通信，以及与信息处理实体设备中其它硬件和软件之间通信。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本申请可以借助软件加必要的通用硬件平台的方式来实现，也可以通过硬件实现。通过应用本实施例的用户界面的终端屏幕适配方案，可以为游戏、视频等解决不同尺寸的屏幕适配。使得美术人员做UI时，只需要按一个模版和简单的规范来制作，就可以适配几乎市面上的所有终端型号中不同分辨率的显示，并达到很好的效果。与目前传统的适配方式相比，可保证UI在终端屏幕适配的展示效果，并且方法简单，可节省UI在终端屏幕适配的开发成本。

本领域技术人员可以理解附图只是一个优选实施场景的示意图，附图中的模块或流程并不一定是实施本申请所必须的。本领域技术人员可以理解实施场景中的装置中的模块可以按照实施场景描述进行分布于实施场景的装置中，也可以进行相应变化位于不同于本实施场景的一个或多个装置中。上述实施场景的模块可以合并为一个模块，也可以进一步拆分成多个子模块。

上述本申请序号仅仅为了描述，不代表实施场景的优劣。以上公开的仅为本申请的几个具体实施场景，但是，本申请并非局限于此，任何本领域的技术人员能思之的变化都应落入本申请的保护范围。

本实施例还包括在下列编号条款中规定的这些和其他方面：

1、一种用户界面的终端屏幕适配方法，包括：

加载用户界面UI对应的配置文件，得到UI内容信息；

根据终端屏幕的屏幕信息和屏幕安全尺寸，确定所述UI内容信息适配后的展示信息；

按照所述展示信息，展示所述UI内容信息。

2、根据条款1所述的方法，所述根据终端屏幕的屏幕信息和屏幕安全尺寸，确定所述UI内容信息适配后的展示信息，具体包括：

根据终端屏幕的屏幕信息，获取所述UI内容信息的缩放调整信息；

依据所述缩放调整信息和所述屏幕安全尺寸，确定所述UI内容信息适配后的展示信息。

3、根据条款2所述的方法，依据所述缩放调整信息和所述屏幕安全尺寸，确定所述UI内容信息适配后的展示信息，具体包括：

利用UI设计尺寸和所述屏幕安全尺寸，计算安全宽高比；

若启用双边调整、且所述安全宽高比小于UI界面宽高比，则利用UI设计尺寸和所述屏幕安全尺寸，计算UI界面X轴的第一相对位置，所述第一相对位置是对应界面锚点与其父级对象在坐标轴的相对位置；

按照所述缩放调整信息和所述第一相对位置，对UI元素进行偏移，并对背景图进行调整，得到UI元素和背景图各自对应适配后的展示信息。

4、根据条款3所述的方法，所述利用UI设计尺寸和所述屏幕安全尺寸，计算安全宽高比，具体包括：

按照第一预设公式计算得到安全宽高比，所述第一预设公式包括：安全宽高比＝(UI设计宽度+屏幕安全宽度*2)/UI设计高度。

5、根据条款3所述的方法，所述利用UI设计尺寸和所述屏幕安全尺寸，计算UI界面X轴的第一相对位置，具体包括：

按照第二预设公式计算得到所述第一相对位置，所述第二预设公式包括：所述第一相对位置＝UI设计宽度-屏幕安全宽度*2。

6、根据条款3所述的方法，依据所述缩放调整信息和所述屏幕安全尺寸，确定所述UI内容信息适配后的展示信息，具体还包括：

若启用单边调整、且所述安全宽高比小于UI界面宽高比，则利用UI界面尺寸和所述屏幕安全尺寸，计算UI界面X轴的第二相对位置；及，

利用所述屏幕安全尺寸，计算UI界面X轴的第一原点位置；

按照所述缩放调整信息和所述第二相对位置、所述第一原点位置，对UI元素进行偏移，并对背景图进行调整，得到UI元素和背景图各自对应适配后的展示信息。

7、根据条款6所述的方法，所述利用UI界面尺寸和所述屏幕安全尺寸，计算UI界面X轴的第二相对位置，具体包括：

按照第三预设公式计算得到所述第二相对位置，所述第三预设公式包括：第二相对位置＝UI界面宽度-屏幕安全宽度。

8、根据条款6所述的方法，利用所述屏幕安全尺寸，计算UI界面X轴的第一原点位置，具体包括：

按照第四预设公式计算得到所述第一原点位置，所述第四预设公式包括：第一原点位置＝屏幕安全宽度/2。

9、根据条款3所述的方法，依据所述缩放调整信息和所述屏幕安全尺寸，确定所述UI内容信息适配后的展示信息，具体还包括：

若启用单边调整、且所述安全宽高比大于UI界面宽高比，则利用UI界面尺寸和UI设计尺寸，计算偏移位置；及，

利用UI设计尺寸和所述偏移位置，计算UI界面X轴的第三相对位置；及，

利用所述偏移位置，计算UI界面X轴的第二原点位置；

按照所述缩放调整信息和所述第三相对位置、所述第二原点位置，对UI元素进行偏移，并对背景图进行调整，得到UI元素和背景图各自对应适配后的展示信息。

10、根据条款9所述的方法，所述利用UI界面尺寸和UI设计尺寸，计算偏移位置，具体包括：

按照第五预设公式计算所述偏移位置，所述第五预设公式包括：偏移位置＝(UI界面宽度-UI设计界面宽度)/2。

11、根据条款9所述的方法，所述利用UI设计尺寸和所述偏移位置，计算UI界面X轴的第三相对位置，具体包括：

按照第六预设公式计算所述第三相对位置，所述第六预设公式包括：UI设计宽度+偏移位置。

12、根据条款9所述的方法，利用所述偏移位置，计算UI界面X轴的第二原点位置，具体包括：

按照第七预设公式计算所述第二原点位置，所述第七预设公式包括：第二原点位置＝偏移位置/2。

13、根据条款2所述的方法，所述根据终端屏幕的屏幕信息，获取所述UI元素和背景各自对应的缩放调整信息，具体包括：

参照终端屏幕的宽高尺寸和屏幕分辨率，确定所述UI元素和背景进行等比例缩放调整的信息。

14、根据条款1所述的方法，所述方法还包括：

根据所述屏幕信息，设置所述屏幕安全尺寸。

15、根据条款14所述的方法，根据所述屏幕信息，设置所述屏幕安全尺寸，具体包括：

若根据所述屏幕信息判定所述终端屏幕为异形屏，则根据所述异形屏凸出和/或凹进部分的尺寸，设置所述屏幕安全尺寸。

16、根据条款1所述的方法，所述根据终端屏幕的屏幕信息和屏幕安全尺寸，确定所述UI内容信息适配后的展示信息，具体包括：

若开启安全尺寸调整，则根据终端屏幕的屏幕信息和屏幕安全尺寸，确定所述UI内容信息适配后的展示信息；

若未开启安全尺寸调整，则根据终端屏幕的屏幕信息，获取UI元素和背景图各自对应的缩放调整信息，并依据所述缩放调整信息，确定UI元素和背景各自对应适配后的展示信息。

17、根据条款1所述的方法，在加载UI对应的配置文件之前，所述方法还包括：

创建UI符合预设规范标准条件的背景图、UI元素和布局；

根据所述符合预设规范标准条件的背景图、UI元素和布局，生成UI对应的配置文件。

18、根据条款17所述的方法，所述创建UI符合预设规范标准条件的背景图、UI元素和布局，具体包括：

按照第一预设标准分辨率，创建UI元素和布局；

按照第二预设标准分辨率，创建背景图，其中所述第二预设标准分辨率大于所述第一预设标准分辨率，所述第二预设标准分辨率是根据普屏和超宽屏的分辨率确定得到的。

19、一种用户界面的终端屏幕适配装置，包括：

加载模块，用于加载用户界面UI对应的配置文件，得到UI内容信息；

确定模块，用于根据终端屏幕的屏幕信息和屏幕安全尺寸，确定所述UI内容信息适配后的展示信息；

展示模块，用于按照所述展示信息，展示所述UI内容信息。

20、根据条款19所述的装置，所述确定模块，具体用于根据终端屏幕的屏幕信息，获取所述UI内容信息的缩放调整信息；

依据所述缩放调整信息和所述屏幕安全尺寸，确定所述UI内容信息适配后的展示信息。

21、根据条款20所述的装置，所述确定模块，具体还用于利用UI设计尺寸和所述屏幕安全尺寸，计算安全宽高比；

若启用双边调整、且所述安全宽高比小于UI界面宽高比，则利用UI设计尺寸和所述屏幕安全尺寸，计算UI界面X轴的第一相对位置，所述第一相对位置是对应界面锚点与其父级对象在坐标轴的相对位置；

按照所述缩放调整信息和所述第一相对位置，对UI元素进行偏移，并对背景图进行调整，得到UI元素和背景图各自对应适配后的展示信息。

22、根据条款21所述的装置，所述确定模块，具体还用于按照第一预设公式计算得到安全宽高比，所述第一预设公式包括：安全宽高比＝(UI设计宽度+屏幕安全宽度*2)/UI设计高度。

23、根据条款21所述的装置，所述确定模块，具体还用于按照第二预设公式计算得到所述第一相对位置，所述第二预设公式包括：所述第一相对位置＝UI设计宽度-屏幕安全宽度*2。

24、根据条款21所述的装置，所述确定模块，具体还用于若启用单边调整、且所述安全宽高比小于UI界面宽高比，则利用UI界面尺寸和所述屏幕安全尺寸，计算UI界面X轴的第二相对位置；及，

利用所述屏幕安全尺寸，计算UI界面X轴的第一原点位置；

按照所述缩放调整信息和所述第二相对位置、所述第一原点位置，对UI元素进行偏移，并对背景图进行调整，得到UI元素和背景图各自对应适配后的展示信息。

25、根据条款24所述的装置，所述确定模块，具体还用于按照第三预设公式计算得到所述第二相对位置，所述第三预设公式包括：第二相对位置＝UI界面宽度-屏幕安全宽度。

26、根据条款24所述的装置，所述确定模块，具体还用于按照第四预设公式计算得到所述第一原点位置，所述第四预设公式包括：第一原点位置＝屏幕安全宽度/2。

27、根据条款21所述的装置，所述确定模块，具体还用于若启用单边调整、且所述安全宽高比大于UI界面宽高比，则利用UI界面尺寸和UI设计尺寸，计算偏移位置；及，

利用UI设计尺寸和所述偏移位置，计算UI界面X轴的第三相对位置；及，

利用所述偏移位置，计算UI界面X轴的第二原点位置；

按照所述缩放调整信息和所述第三相对位置、所述第二原点位置，对UI元素进行偏移，并对背景图进行调整，得到UI元素和背景图各自对应适配后的展示信息。

28、根据条款27所述的装置，所述确定模块，具体还用于按照第五预设公式计算所述偏移位置，所述第五预设公式包括：偏移位置＝(UI界面宽度-UI设计界面宽度)/2。

29、根据条款27所述的装置，所述确定模块，具体还用于按照第六预设公式计算所述第三相对位置，所述第六预设公式包括：UI设计宽度+偏移位置。

30、根据条款27所述的装置，所述确定模块，具体还用于按照第七预设公式计算所述第二原点位置，所述第七预设公式包括：第二原点位置＝偏移位置/2。

31、根据条款20所述的装置，所述确定模块，具体还用于参照终端屏幕的宽高尺寸和屏幕分辨率，确定所述UI元素和背景进行等比例缩放调整的信息。

32、根据条款19所述的装置，所述装置还包括：

设置模块，用于根据所述屏幕信息，设置所述屏幕安全尺寸。

33、根据条款32所述的装置，所述设置模块，具体用于若根据所述屏幕信息判定所述终端屏幕为异形屏，则根据所述异形屏凸出和/或凹进部分的尺寸，设置所述屏幕安全尺寸。

34、根据条款19所述的装置，所述确定模块，具体用于若开启安全尺寸调整，则根据终端屏幕的屏幕信息和屏幕安全尺寸，确定所述UI内容信息适配后的展示信息；

若未开启安全尺寸调整，则根据终端屏幕的屏幕信息，获取UI元素和背景图各自对应的缩放调整信息，并依据所述缩放调整信息，确定UI元素和背景各自对应适配后的展示信息。

35、根据条款19所述的装置，所述装置还包括：

创建模块，用于创建UI符合预设规范标准条件的背景图、UI元素和布局；

生成模块，用于根据所述符合预设规范标准条件的背景图、UI元素和布局，生成UI对应的配置文件。

36、根据条款35所述的装置，所述创建模块，具体用于按照第一预设标准分辨率，创建UI元素和布局；

按照第二预设标准分辨率，创建背景图，其中所述第二预设标准分辨率大于所述第一预设标准分辨率，所述第二预设标准分辨率是根据普屏和超宽屏的分辨率确定得到的。

37、一种存储介质，其上存储有计算机程序，所述程序被处理器执行时实现条款1至18中任一项所述的方法。

38、一种用户界面的终端屏幕适配设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现条款1至18中任一项所述的方法。

Claims (10)

1.一种用户界面的终端屏幕适配方法，其特征在于，包括：

加载用户界面UI对应的配置文件，得到UI内容信息；

根据终端屏幕的屏幕信息和屏幕安全尺寸，确定所述UI内容信息适配后的展示信息；

按照所述展示信息，展示所述UI内容信息。

2.根据权利要求1所述的方法，其特征在于，所述根据终端屏幕的屏幕信息和屏幕安全尺寸，确定所述UI内容信息适配后的展示信息，具体包括：

根据终端屏幕的屏幕信息，获取所述UI内容信息的缩放调整信息；

依据所述缩放调整信息和所述屏幕安全尺寸，确定所述UI内容信息适配后的展示信息。

3.根据权利要求2所述的方法，其特征在于，依据所述缩放调整信息和所述屏幕安全尺寸，确定所述UI内容信息适配后的展示信息，具体包括：

利用UI设计尺寸和所述屏幕安全尺寸，计算安全宽高比；

若启用双边调整、且所述安全宽高比小于UI界面宽高比，则利用UI设计尺寸和所述屏幕安全尺寸，计算UI界面X轴的第一相对位置，所述第一相对位置是对应界面锚点与其父级对象在坐标轴的相对位置；

按照所述缩放调整信息和所述第一相对位置，对UI元素进行偏移，并对背景图进行调整，得到UI元素和背景图各自对应适配后的展示信息。

4.根据权利要求3所述的方法，其特征在于，所述利用UI设计尺寸和所述屏幕安全尺寸，计算安全宽高比，具体包括：

按照第一预设公式计算得到安全宽高比，所述第一预设公式包括：安全宽高比＝(UI设计宽度+屏幕安全宽度*2)/UI设计高度。

5.根据权利要求3所述的方法，其特征在于，所述利用UI设计尺寸和所述屏幕安全尺寸，计算UI界面X轴的第一相对位置，具体包括：

按照第二预设公式计算得到所述第一相对位置，所述第二预设公式包括：所述第一相对位置＝UI设计宽度-屏幕安全宽度*2。

6.根据权利要求3所述的方法，其特征在于，依据所述缩放调整信息和所述屏幕安全尺寸，确定所述UI内容信息适配后的展示信息，具体还包括：

若启用单边调整、且所述安全宽高比小于UI界面宽高比，则利用UI界面尺寸和所述屏幕安全尺寸，计算UI界面X轴的第二相对位置；及，

利用所述屏幕安全尺寸，计算UI界面X轴的第一原点位置；

按照所述缩放调整信息和所述第二相对位置、所述第一原点位置，对UI元素进行偏移，并对背景图进行调整，得到UI元素和背景图各自对应适配后的展示信息。

7.根据权利要求6所述的方法，其特征在于，所述利用UI界面尺寸和所述屏幕安全尺寸，计算UI界面X轴的第二相对位置，具体包括：

按照第三预设公式计算得到所述第二相对位置，所述第三预设公式包括：第二相对位置＝UI界面宽度-屏幕安全宽度。

8.一种用户界面的终端屏幕适配装置，其特征在于，包括：

加载模块，用于加载用户界面UI对应的配置文件，得到UI内容信息；

确定模块，用于根据终端屏幕的屏幕信息和屏幕安全尺寸，确定所述UI内容信息适配后的展示信息；

展示模块，用于按照所述展示信息，展示所述UI内容信息。

9.一种存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现权利要求1至7中任一项所述的方法。

10.一种用户界面的终端屏幕适配设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至7中任一项所述的方法。

Images