Unity UGUI系列四 Pivot Anchor

参考
Unity进阶技巧 - RectTransform详解
Unity——RectTransform详解
屏幕适配实用技巧
揭秘！anchoredPosition的几何意义！
localPosition与anchoredPosition转化之瞎猫找死耗子

一、Pivot轴心

首先为了让大家更好的理解内容，我在Unity中创建了两个UI控件，一个Plane控件，作为父对象，一个Image控件，最为子对象，如下图：

image.png

Pivot我们可以暂且称它为中心轴（这个翻译不太准确，但为了便于理解，先这么叫着），它是一个X,Y值范围是0到1的点，这个点的会在Anchor（锚点）计算位置的时候会使用到，下面用一张图来解释Pivot点的位置

image.png

旋转、大小和缩放修改发生在主轴Pivot点周围，因此Pivot的位置会影响旋转、调整大小或缩放的结果。

二、Anchor

关于Anchor锚点可能接触过UI的朋友都了解一些，但是Unity中Anchor应该称它为锚框更为合理，因为它是由两个锚点(Min，Max)组成的一个矩形，当然也可以组成一个点（两个点重合）

image.png

当然上图是两个锚点重合的情况，所以看上去是一个点，下面我们利用两个锚点不重合的情况来说明一下：

image.png

三、Pivot和Anchor的结合

在了解了Pivot和Anchor分别是什么后，我们就来看看Unity是如何使用这个两个东西来控制UI的布局

1.第1种情况：两个锚点重合时

我们先来看看两个锚点重合时的情况，这种情况是我们最常用也是最容易理解的方式

image.png

我们将Anchor锚点放在黑框的正中间，然后将Pivot中心轴放在红框的正中间，然后我们改变黑框的大小和位置，看看红框会有什么变化，如下图：

84177-0dc7e3bd42ec5e84.gif

我们从上图可以看出，不管我们怎么拖动黑框，改变他大小和位置，红框的Pivot点到Anchor点的距离是始终不变的，也就是说红框物体会参照锚点来实时调整自己的位置，使自己的Pivot点到锚点的距离始终保持一致，而且值得一提的是，在这种情况下，红框物体的RectTransform组件中的属性是Width和Height，这个属性在后面的情况中会发生变化，大家需要注意下

image.png

总结下第1种情况的特点就是：子物体的大小不会随着父物体的大小变化而变化，但是位置会根据Pivot点到Anchor点的距离一致的原则发生对应的变化

2.第2种情况：两个锚点不重合时，即锚框的情况

当两个锚点（AnchorMin和AnchorMax）不重合时，两点就会确定一个矩形，这个矩形就是我们的锚框，如下图中的绿框就是我们的锚框区域

image.png

此时我们再观察一下红框物体的RectTransform属性，发现属性分别变成了Left、Top、Right、Bottom

image.png

那么这4个属性分别表示什么呢？我们看看下面的这个图

image.png

从上图我们看出，Unity以锚框的左下角为坐标系的原地(0, 0)，然后红框的Left和Bottom两个数确定红框左下角的点在坐标系中的位置，原点和红框左下角的点确定一段距离（即上图的绿色箭头），不管黑框如何变化，这段距离都保持不变

image.png

同理，如上图所示，Unity以锚框的右上角为原点(0,0)，然后红框的Right和Top两个数确定红框的右上角的在坐标系中的位置，原地和红框的右上角的点确定一段距离（即上图的绿色箭头），不管黑框如何边框，这段距离都保持不变

在黑框大小和位置变化的时候，Unity会保证红框的左下角到锚框的左下角距离不变，同时红框的右上角到锚框的右上角距离不变，来确定红框的相对位置和大小，看下图来感受一下变化：

84177-920f57d425ee4257.gif

注意上图中红框左下角到黑框左下角的距离，以及红框右上角到黑框右上角的距离，他们都是不变的

3.预置常见布局方式

快速设置Anchor，加快捷键能同时设置pivot或position

image.png

4.Unity中对UGUI锚点的理解

image.png

• 四个锚点，相对于四根钉子，钉在Image的父级元素上。
• 四个实心蓝点，相当于四个纽扣，缝在Image的四个边上。
• 锚点和纽扣之间被四根无形的钢丝链接，注意是钢丝，因为不会伸缩。
• 如果把Image调整好了大小，现在想让他随着屏幕的变化进行缩放，那么就把四个锚点，拖拽到四个纽扣上，相对于把Image的四个角钉在了父级元素上，父级元素缩放就会拽着Image进行缩放，比例是一致的。
• 锚点合并在一起，相当于把Image四个角往同一个方向拽，所以不会改变Image的大小。

5.Unity——RectTransform详解

unity中的ui元素是有严格的父子关系的，子物体的位置是根据父物体的变化而变化的，而子物体和父物体联系的桥梁就是Anchor。之所以anchorMax和anchorMin的值是小数，是因为其表征的是该点所在位置占父物体大小的比例。

a.绝对布局

所谓的绝对布局，就是出现锚点的情况，此时的recttransform面板中的属性变成PosX,PosY,PosZ,Width,Height，这五个属性，首先说说Width和Height，在绝对布局的情况下无论分辨率是多少，父物体多大，该UI元素的大小是恒定的，如下图所示

image.png

b.相对布局

所谓相对布局，就是出现锚框的情况。在这种情况下UI元素的四个角，距离四个对应的锚点的距离是不变的，在这种情况下RectTransform的属性又变为了Left,Top,Right,Bottom,PosZ，其中的PosZ表征的是该元素到父物体在Z轴上的偏移，利用这个值可以调整UI元素的显示顺序，不过我用的不多，这里不作太多讨论。剩下的四个值应该很好理解了，就是UI元素的每一条边距离父物体的每一条边的距离。

image.png

四、anchoredPosition属性详解

anchoredPosition根据名字的含义，我们大概可以猜出他是根据anchor锚点得出来个一个位置属性，他本身是一个点，如果在AnchorMin和AnchorMax是重合的情况下，anchoredPosition就是表示锚点到Pivot的位置，如下图所示：

image.png

但是如果AnchorMin和AnchorMax不重合的时候，anchoredPosition就比较复杂了，在这种情况下，Unity会根据Pivot、AnchorMin和AnchorMax计算出一个锚点，然后在通过Pivot和锚点来得出anchoredPosition的位置

五、offsetMin和offsetMax详解

offsetMin和offsetMax这两个属性比较好理解，其中offsetMin表示物体（本文中的红框）左下角相对AnchorMin的偏移，offsetMax表示物体右上角相对AnchorMax的偏移

anchor(0,0)

anchorMin(0,0) anchorMax(1,1)

六、sizeDelta详解

sizeDelta就是offsetMax - offsetMin的值，即物体左下角到右上角的变量，如下图所示：

image.png