彻底学会Unity中UGUI中UI元素自适应问题

彻底学会Unity中UGUI中UI元素自适应问题

包会的简单版教程
狂飙模式：

经过自我进化学习，终于参悟。看完这个教程，你也可以！

1.扫盲UGUI的理解：

Unity3d 中的UI都是画在画布上的。就像画一幅画，首先我们需要一张什么也没有的白纸贴在画板上（这个画板就是：Canvas）,有了画板以后，我们就可以一层层的铺上画面元素了，这些画面元素就是具体的UI元素（包括：一个图、按钮、滚动条、勾选框、文本框等等）而且，在层级面板的UI名称列表中（大纲列表）排在上面的就会被放在图层下方，后面创建的UI会遮住早先创建的，就像一层层的画画一样，后面刷的颜色肯定是在最前方。

​

​​

关于画布的介绍，包含三种模式我就不介绍了，可以看这里画布 - Unity 手册

2.单个UI元素的结构、组成扫盲

每个UI被创造在画布上以后，都有两个重要的东西：锚点（或者叫锚框）Anchors、UI元素视觉内容。

​

​

​

锚点（Anchors）主要负责把物体固定在画布上，并且根据锚点合并和分开来决定UI内容是跟随画布固定到画布定点位置，还是位置和缩放都跟随画布。这也就是自适应。默认情况下，锚点是合并的。

A:锚点合并模式

UI内容是跟随画布固定到画布定点位置，不跟随画布缩放

B:锚点分开并且形成锚框模式

此时UI元素内容的位置和缩放都跟随画布Canvas

3.UI元素内容和UI锚点（Anchors）的关系

其实人家两个只不过是简单的一家人，没有什么复杂的关系。

锚点在汉语中是轮船靠岸的时候抛在海底的铁钩，用来固定住轮船不被海水卷走。锚点就是固定的意思。这里每一个UI元素都有自己的Anchors 这个东西就是用来把UI元素内容像钉子一样订在Canvas。

UI元素内容（就是绿色部分）就像是锚点Anchors的子物体一样，它可以自己随便在画布上移动，他的坐标数值全部是相对于自己的锚点的数值。

这只是为了方便设计师看着元素进行调节相对位置，完全不影响自适应。自适应本质上还是和锚点位置+锚点模式还是锚框模式有关系。

还有一种情况，当锚点变成锚框的时候，UI元素内容就不再是显示坐标，而是显示上下左右到锚框边界的距离。

这都无所谓。

4.开始自适应的设置

有了前面的学习我们基本知道了，UI元素创建出来默认都会自适应画布(Canvas)的，只不过需要我们确认两个问题：

1. 固定放在画布的那个位置
2. 哪一种适应模式（仅位置、还是位置+缩放）

接下来按照我的步骤设置：

A首先我们需要设置该UI元素锚点的固定在画布的那个位置，很简单直接点击即可！

B然后，设置锚点/锚框模式（合并还是分开）

锚点模式：UI内容将会固定到一个位置不变，尽管画布的尺寸发生变化

锚框模式：UI内容将会跟队画布一起缩放大小，同时保持相对画布位置不变

但是锚框四个点的距离会影响到UI内容元素的缩放“效率”。间距越大缩放的比例程度就越大，间距越小，跟随缩放的比程度就越小。

小伙伴们，Do you understand?

撰稿不易全靠信仰！由你剃！