UI屏幕自适应（以UGUI为例）

1. UI屏幕自适应

1.1 UI屏幕自适应的目的

• 设备的屏幕分辨率多种多样，我们不可能为每一种设备都制作一份UI
• UI屏幕自适应，可以让我们只需要制作一份UI，就可以在不同分辨率的设备上实现同一效果
• 不使用UI屏幕自适应，同一份UI将在不同分辨率的屏幕上出现各种问题

1.1.1 问题1：UI的大小不一致

• 在不使用屏幕自适应的情况下，边长为200px的正方形，在不同分辨率设备下的显示效果不同，在高分辨率设备下看起来小，在低分辨率设备下看起来大

分辨率：1920*1080

分辨率：1280*720

1.1.2 问题2：UI的位置不一致

• UI残缺与UI偏移是因UI位置发生变化所造成的问题的两种表现

1.1.2.1 表现1：UI残缺

• 在不使用屏幕自适应的情况下，边长为500px的正方形，在低分辨率屏幕下发生残缺

分辨率：1920*1080

分辨率：1280*720

1.1.2.2 表现2：UI偏移

• 在不使用屏幕自适应的情况下，边长为500px的正方形，在低分辨率屏幕下位于左下角，而在高分辨屏幕下发生偏移

分辨率：1920*1080

分辨率：1280*720

1.2 UI屏幕自适应的原理

• 通过对不同分辨率下UI所产生问题的分析，我们不难得出，使UI的大小和位置在不同分辨率下保持一致是UI屏幕自适应的关键

1.2.1 UI大小一致的原理

• 保持UI的大小一致，本质是根据分辨率大小对UI进行缩放，达到UI相对大小一致的效果
• 一个边长为10px的黑色正方形内部有一个边长为6px的红色正方形，现在，黑色正方形的边长扩大到20px，如何才能使红色正方形的大小不变？
• 红色正方形应与黑色正方形扩大相同的倍数，由 可知，黑色正方形边长扩大了2倍，由 可知，红色正方形边长应为12px

大小一致

1.2.2 UI位置一致的原理

• 保持UI的位置一致，本质是保持UI轴点(Pivot)相对于锚点(Anchor)的距离不变
• 一个边长为10px的黑色正方形左下角有一个边长为6px的红色正方形，现在，黑色正方形的边长扩大到20px，如何才能使红色正方形仍处于左下角？
• 以左上角为原点，向右向下为正方向，绿点代表锚点，黄点代表轴点，当默认以黑色正方形中心为锚点时，轴心与锚点的距离为(2,-2)，当扩大黑色正方形时，保持轴心与锚点的距离不变，结果与预期不符

以中心为锚点（默认）

• 当以黑色正方形左下角为锚点时，轴心与锚点的距离为(-3,3)，当扩大黑色正方形时，保持轴心与锚点的距离不变，结果符合预期

以左下角为锚点

• 通过对以上两种情况的分析可以得出，通过正确设置锚点，可以达到UI相对位置一致的效果

1.2.3 UI大小位置均一致的原理

• 使UI大小和UI位置均一致，本质是二者原理的叠加
• 一个边长为10px的黑色正方形左下角有一个边长为6px的红色正方形，现在，黑色正方形的边长扩大到20px，如何才能使红色正方形仍处于左下角且大小不变？
• 结合上述内容，我们不难得出，将边长和距离均扩大2倍，结果符合预期

大小和位置均一致

2. 使用UGUI实现屏幕自适应

2.1 UI大小一致的实现

• 在Canvas Scaler组件中，将UI Scale Mode设置为Scale With Screen Size，可以保持UI的大小一致
• Reference Resolution是UI缩放时的参考分辨率，通常为UI背景图的大小

Canvas Scaler组件

• 在使用屏幕自适应的情况下，边长为200px的正方形，在不同分辨率屏幕下的显示效果一致

分辨率：1920*1080

分辨率：1280*720

2.2 UI位置一致的实现

• 在Rect Transform组件中，设置Anchor的位置，可以保持UI的位置一致

Rect Transform组件

锚点预设

• 在使用屏幕自适应的情况下，边长为200px的正方形，将锚点设置为画布左下角，在不同分辨率屏幕下的显示效果一致

分辨率：1920*1080

分辨率：1280*720

3. UI屏幕自适应的解决方案

3.1 常见设备的屏幕分辨率

3.1 PC端

• 16:9- 19201080- 25601440- 3840*2160
• 16:10- 19201200- 25601600- 3840*2400

3.2 移动端

• iPad 2022- 2360*1640- 4:3
• iPhone 8 Plus- 1920*1080- 16:9
• iPhone X- 2436*1125- 19.5:9

3.2 PC端解决方案

• 假设以分辨率19201080为参考分辨率，背景图片大小为19201080，创建4个白色正方形分别放置在4个角位置，锚点也设置在4个角位置，创建1个文本放置在中心位置，锚点也设置在中心位置

分辨率：1920*1080

• PC端的屏幕比例高度不同，通过设置Match，有适配宽度和适配高度两种解决方案

适配方式

3.2.1 方案一：适配高度

• 当屏幕比例从16:9切换到16:10时，宽度不变，高度变大，为了填充高度，导致UI被放大

分辨率：1920*1200

3.2.2 方案二：适配宽度

• 当屏幕比例从16:9切换到16:10时，宽度不变，高度变大，但因为背景图片高度不够，导致上下出现黑边

分辨率：1920*1200

3.2.3 总结

• 如果适配高度，则应承受UI放大所造成的影响
• 如果适配宽度，则应使用更大高度的背景图片，避免上下黑边的产生

3.3 移动端解决方案

• 假设以iPhone 8 Plus的分辨率为参考分辨率，背景图片大小为1920*1080，创建4个白色正方形分别放置在4个角位置，锚点也设置在4个角位置，创建1个文本放置在中心位置，锚点也设置在中心位置

iPhone 8 Plus：1920*1080

• 移动端的屏幕比例宽度不同，通过设置Match，有适配宽度和适配高度两种解决方案

3.3.1 方案一：适配高度

• 当屏幕比例从16:9切换到19.5:9时，高度不变，宽度变大，但因为背景图片宽度不够，导致左右出现黑边

iPhone X：2436*1125

3.3.2 方案二：适配宽度

• 当屏幕比例从16:9切换到19.5:9时，高度不变，宽度变大，为了填充宽度，UI被放大

iPhone X：2436*1125

3.3.3 总结

• 如果适配高度，则应使用宽度更大的背景图片，避免上下黑边的产生
• 如果适配宽度，则应承受UI放大所造成的影响

3.4 总结

• 无论是PC端、移动端还是其他，除了开启屏幕分辨率缩放和正确设置锚点外，还要根据项目的具体情况，选择最优的适配方式