用户界面图的适配显示方法、装置、电子设备及存储介质与流程

本技术涉及用户界面u i适配技术，尤其涉及一种用户界面图的适配显示方法、装置、电子设备及存储介质。

背景技术：

1、用户界面(简称u i，亦称使用者界面)是操作系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。电子设备的显示屏幕上展示的用户界面，一般是先由设计师设计得到设计效果图，再由开发工程师将设计效果图适配到任意尺寸和分辨率的显示屏幕上。

2、目前，由于操作系统(例如，ios操作系统、andro i d安卓操作系统)的开放性，以及电子设备的屏幕尺寸及分辨率繁杂，例如，屏幕尺寸从4.3寸到6.5寸不相等，分辨率从320*240px到2560*1440px不相等,因此，对于采用设计基准尺寸进行设计的用户界面的设计效果图，运行在低于该分辨率的电子设备上，会出现显示不全的问题，运行在高于该分辨率的电子设备上，会在显示屏幕的右侧和下侧出现空白区域的问题。

3、可见，现有技术中存在针对不同屏幕尺寸和不同分辨率的显示屏幕，同一设计效果图无法显示出相同的用户界面显示效果，即用户界面图和显示屏幕之间不适配的问题。

技术实现思路

1、本技术提供一种用户界面图的适配显示方法、装置、电子设备及存储介质，用以解决现有技术中存在针对不同屏幕尺寸和不同分辨率的显示屏幕，同一设计效果图无法显示出相同的用户界面显示效果的问题。

2、一方面，本技术提供一种用户界面图的适配显示方法，包括：

3、获取用户界面图，以及所述用户界面图的第一尺寸比例信息，其中，所述用户界面图是基于基准设计数据设计得到的，用于在任意显示屏幕上适配显示的设计效果图；

4、若所述第一尺寸比例信息与任意所述显示屏幕的第二尺寸比例信息不适配，则确定任意所述显示屏幕上当前用户界面的界面类型；

5、根据所述当前用户界面的界面类型确定对应的适配处理方式，以采用所述适配处理方式将所述第一尺寸比例信息处理为与所述第二尺寸比例信息适配；

6、若所述第一尺寸比例信息与所述第二尺寸比例信息适配，在任意所述显示屏幕上的所述当前用户界面上，适配显示所述用户界面图。

7、进一步地，所述第一尺寸比例信息包括：所述用户界面图的宽度与高度的第一比值，所述第二尺寸比例信息包括：任意所述显示屏幕的宽度与高度的第二比值，所述方法还包括：

8、若所述第一比值与所述第二比值相等，则确定所述第一尺寸比例信息与所述第二尺寸比例信息适配；

9、若所述第一比值与所述第二比值不相等，则确定所述第一尺寸比例信息与所述第二尺寸比例信息不适配。

10、进一步地，所述根据所述当前用户界面的界面类型确定对应的适配处理方式，包括：

11、若所述界面类型指示所述当前用户界面为可滚动界面，则根据所述当前用户界面的宽度缩放因子，将所述用户界面图适配显示到所述当前用户界面上；

12、若所述界面类型指示所述当前用户界面为不可滚动界面，则获取所述当前用户界面的纵向外边距与所述当前用户界面的第三比值，以基于所述第三比值确定所述适配处理方式。

13、进一步地，根据所述当前用户界面的宽度缩放因子，将所述用户界面图适配显示到所述当前用户界面上，包括：

14、根据所述当前用户界面的宽度缩放因子，分别对所述用户界面图的宽度和高度进行缩放处理，得到缩放处理后的用户界面图，其中，所述缩放处理后的用户界面图的第三尺寸比例信息与所述第二尺寸比例信息适配；

15、将所述缩放处理后的用户界面图，适配显示到所述当前用户界面上。

16、进一步地，基于所述第三比值确定所述适配处理方式，包括：

17、若所述第三比值大于预设比值，则确定所述当前用户界面的横向外边距和内边距；

18、根据所述纵向外边距对应的权重值，将所述当前用户界面上的剩余界面分配给所述纵向外边距，以使得缩放所述纵向外边距；以及根据所述当前用户界面的宽度缩放因子，分别对所述用户界面图的横向外边距和内边距进行缩放处理，得到缩放处理后的用户界面图；

19、将所述缩放处理后的用户界面图，适配显示到所述当前用户界面上。

20、进一步地，基于所述第三比值确定所述适配处理方式，包括：

21、若所述第三比值小于或等于预设比值，则根据所述当前用户界面的宽度缩放因子对所述用户界面图的宽度进行缩放处理，以及根据所述当前用户界面的高度缩放因子对所述用户界面图的高度进行缩放处理，得到缩放处理后的用户界面图；

22、将所述缩放处理后的用户界面图，适配显示到所述当前用户界面上。

23、另一方面，本技术提供一种用户界面图的适配显示装置，所述装置包括：

24、获取模块，用于获取用户界面图，以及所述用户界面图的第一尺寸比例信息，其中，所述用户界面图是基于基准设计数据设计得到的，用于在任意显示屏幕上适配显示的设计效果图；

25、第一确定模块，用于若所述第一尺寸比例信息与任意所述显示屏幕的第二尺寸比例信息不适配，则确定任意所述显示屏幕上当前用户界面的界面类型；

26、第二确定模块，用于根据所述当前用户界面的界面类型确定对应的适配处理方式，以采用所述适配处理方式将所述第一尺寸比例信息处理为与所述第二尺寸比例信息适配；

27、适配显示模块，用于若所述第一尺寸比例信息与所述第二尺寸比例信息适配，在任意所述显示屏幕上的所述当前用户界面上，适配显示所述用户界面图。

28、另一方面，本技术提供一种电子设备，包括：处理器，以及与上述处理器连接的存储器；上述存储器存储计算机执行指令；上述处理器执行上述存储器存储的计算机执行指令，以实现如任一项上述的方法。

29、另一方面，本技术提供一种计算机可读存储介质，上述计算机可读存储介质中存储有计算机执行指令，上述计算机执行指令被处理器执行时用于实现如任一项上述的方法。

30、另一方面，本技术提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现任一项上述的方法。

31、本技术提供的用户界面图的适配显示方法，通过获取用户界面图，以及用户界面图的第一尺寸比例信息，该用户界面图是基于基准设计数据设计得到的，用于在任意显示屏幕上适配显示的设计效果图；若第一尺寸比例信息与任意显示屏幕的第二尺寸比例信息不适配，则确定任意显示屏幕上当前用户界面的界面类型；根据当前用户界面的界面类型确定对应的适配处理方式，以采用适配处理方式将第一尺寸比例信息处理为与第二尺寸比例信息适配；若第一尺寸比例信息与第二尺寸比例信息适配，在任意显示屏幕上的当前用户界面上，适配显示用户界面图。

32、本技术实施例，在任意显示屏幕上无法适配显示用户界面图时，先确定任意显示屏幕上当前用户界面的界面类型，针对不同的界面类型给出对应的适配处理方案，实现简单，无需定义新的尺寸单位，无需任何冗余尺寸文件，即可以达到任意电子设备的任意显示屏幕上适配显示同一设计效果图的目的。可以实现针对不同屏幕尺寸和不同分辨率的显示屏幕，同一设计效果图显示出相同的用户界面显示效果，即在不同屏幕尺寸、不同分辨率的显示屏幕上，均可以适配显示同一设计效果图的技术效果。