UGUI-屏幕自适应

UGUI的屏幕自适应问题，其实是就是画布的设置，要根据游戏是横屏还是竖屏来进行相应的设置。

我们先来看一下Canvas的官方描述,这里只看前几句:

class in UnityEngine.UI

Inherits from:EventSystems.UIBehaviour

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.

翻译一下，大概的意思就是Canvas这个类实在UnityEngine.UI这个命名空间里的，继承自EventSystems下的UIBehaviour这个类，Canvas Scaler组件用于控制画布中UI元素的整体比例和像素密度。这种缩放会影响画布下的所有内容，包括字体大小和图像边框。到这里，我想博主也不用说了，要想做好屏幕自适应，画布游戏物体上的Canvas Scaler这个组件是关键。下面通过一个例子来说明。

1.打开Unity，新建一个空工程，在场景中，新建一些“Image”，绿色的“Image”放置在Canvas画布右上角且锚点也位于Canvas画布右上角，其他图片如图放置，且锚点在Canvas画布中心。

2.设置Canvas的“Canvas Scaler”的“UI Scale Mode”为“Constant Pixel Size”，切到Game视图，视图比例设置为“4:3”，此时UI正常显示，但是当Game视图屏幕变小，由于UI Scale Mode”为“Constant Pixel Size”，所以，最后UI超出了屏幕。

3.把Canvas的“Canvas Scaler”的“UI Scale Mode”设置为“Scale With Screen Size”，其他默认设置，调整屏幕大小，我们发现，当宽度大于高度时，UI会被完美的缩放，但是，如果当高度大于宽度时，我们就会发现一些Image已经超出屏幕外了。

4.把Canvas的“Canvas Scaler”的“UI Scale Mode”设置为“Scale With Screen Size”，Match的值设为1，我们又发现与上面的情况刚好相反，当高度大于宽度时，UI会被完美的缩放，但是，如果当宽度大于高度时，Image又超出屏幕外了。

其实，通过上面的实验，读者应该能够想到如何解决了，在画布上挂载一个组件专门用来控制画布的Match，在Awake中判断一下Screen.Width和Screen.Height,如果前者大，就把Match设为，否则就设为1.这样自适应问题大概就解决了，剩下的就是调整UI的锚点来进一步完善细节了。总结一下:
1.当开发应用在移动端时，“Canvas Scaler”的“UI Scale Mode”为“Scale With Screen Size”，以便自适应移动端屏幕

2.最好事先知道应用到移动端屏幕的分辨率，或屏幕比例，以对应合适设置“Canvas Scaler”的“Reference Resolution”

3.当应用是横屏游戏时，把“Canvas Scaler”的“Match”改为“0”，以“Width”为基准缩放UI适应屏幕；当应用是竖屏游戏时，把“Canvas Scaler”的“Match”改为“1”，以“Height”为基准缩放UI适应屏幕