[UGUI]适配不同分辨率和机型

1.原理

一个UI界面可能被放大或者缩小,如果缩放的比例,即长宽比例和原分辨率一样,那么直接乘以缩放系数即可。更为复杂和普遍的情况,长宽的缩放比例不同,比如宽高比2:1,放大到3:1或者缩小到1:1

(1)对于缩放到3:1,由于高的比例相同,实际上就是把2:1的画布放到3:1的画布正中间,而两边各多出0.5则是扩展背景图片

(2)对于缩放到1:1,先把2:1长宽均乘以0.5,变为1:0.5的画布,然后放到1:1的screen中,上下扩充背景图片

核心在于把长和宽其中之一缩放到新的尺寸,那么是长还是宽呢,可以看出为了保证新的仍然可以被画布完全包住,我们要选择比例小的那个方向进行对齐,2:1到3:1,高比例变小了,所以向高对齐,即宽度自适应,而2:1到1:1,宽的比例变小了,向宽对齐变为1:0.5,高度留白。

2.Canvas Scaler (画布定标器)

the Canvas Scaler component is used for controlling the overall scale and

pixel density of UI elements in the Canvas. This scaling affects

everything under the Canvas, including font sizes and image borders

Scale With Screen Size模式可以实现上述原理的屏幕分辨率自适应

3.刘海屏

正常的刘海屏,水滴屏,穿孔屏,最上面的区域都是状态栏拿刘海屏来说,刘海在正中间,左右两边显示状态栏信息,下面方方正正无需进行操作,对于游戏或者开发app来说,拿很多app来说进入到应用也是会显示状态栏的,所以无需进行适配,屏幕大小相当于去除了刘海区域的新的分辨率的屏幕,按照正常的屏幕分辨率来进行适配就好,然而对于游戏来说,进入游戏以后一般是不会显示状态栏信息的,所以这个时候如果我们的最上方区域正中间有元素,那么就需要对元素进行下移,避免关键的按键或者UI在刘海区域而无法正常显示。

还有一点刘海屏手机虽然是只有一端有刘海,但是为了保持对称性(旋转手机后仍然是合理的UI),还有保持用户旋转屏幕后UI的位置不会发生变化,保证用户体验,所以,要保持手机上下的留白区域相同,拿iphone来说分辨率是1125 x 2436。

4.UGUI中的锚点和轴点

轴点pivot:旋转和坐标都是根据轴点计算的范围[0,1],轴点是相对于自身的,也就是我和别人计算位置,坐标时从哪里算,比如(0, 0)用我的左下角来算,(1,1)用我的右上角来算

锚点:用于计算和父物体的位置,当四个锚点在一起的时候,UI的实际位置是锚点位置到轴点位置的坐标显示在position的地方。

当四个锚点不在一块,而是一个矩形区域的时候,锚框,这时候的位置是轴点相对于锚框四边的距离

你可能感兴趣的:([UGUI]适配不同分辨率和机型)