UGUI锚点设置

UGUI锚点

UGUI锚点

锚点图

设置锚点时，可以看到这个界面。这就是我们可以设置的锚点拉
锚点可选的类型

锚点类型

锚点可以分为3类；

锚点类型一：相对于父节点的某一点的位置

如下图，绿色框框出来的这9个锚点属于这种类型；
相对于父节点的某一点的位置
这种类型的4个锚点会汇聚到一起（每个小三角形是一个锚点），如下图；
坐标有4个参数，PosX和PosY代表中心点Privot相对于此聚合锚点的位置。
在这里插入图片描述

锚点类型二：与父节点的两边保持固定距离

如下图,绿色框框出来的这6个锚点属于这种类型；
看图可以知道，这种类型可以细分为与父节点左右两边保持固定距离和与父节点上下两边保持固定距离两种。
在这里插入图片描述

与父节点的左右两边保持固定距离

这种类型的锚点分布在父节点左右两侧，左右各两个。如下图
Left/Right代表与父节点上下两边的距离；
PosY代表与锚点的Y距离（这4个锚点的Y坐标是一致的）；
Height代表高度；
在这里插入图片描述

与父节点的上下两边保持固定距离

这种类型的锚点分布在父节点上下两侧，上下各两个。如下图。
Top/Bottom代表与父节点上下两边的距离；
PoX代表与锚点的X距离（这4个锚点的X坐标是一样的）；
Width代表宽度；
在这里插入图片描述

锚点类型三：与父节点的4边保持固定距离

如下图，绿色框框出来的这1种锚点属于该类型
在这里插入图片描述
这种类型的锚点在上下左右各有1个,如下图
Left,Top,Right,Bottom分别代表与父节点4边的距离

Anchors锚点数值

如下图红框处，可以看到有Anchors属性，里面有Min和Max两个子属性。这代表什么意思呢，其实这是锚点的数值，前面分析的各种各样的锚点其实最终都是对应到了这里的值，相当于这里才是真正起作用的地方。
在这里插入图片描述
可以设想一下，我们在编辑器上可以打开锚点图，如下图，然后在里面选上我们想要的锚点。

但是如果在代码里怎么设置呢，代码里又没法选择。其实通过设置Anchor的值就可以达到我们想要的效果了。

		RectTransform rect = null;
        rect.anchorMin = Vector2.zero;
        rect.anchorMax = Vector2.one;

这里的anchorMin和anchorMax怎么理解呢，这里对应到下图里的红框处。
锚点基于父节点，父节点最左是0，最右是1；父节点最下是0，最上是1。

这anchorMin和anchorMax相当于长方形对角线的左下点和右上点。确定了anchorMin和anchorMax，就能确定一个长方形。而这长方形的4个点就是4个锚点。相当于anchorMin和anchorMax就是在描述锚点的值。确定了anchorMin和anchorMax就确定了4个锚点
在这里插入图片描述

可以直接修改这两个值来达到上面锚点图的各种效果。除此之外，还能达到锚点图达不到的效果，例如我们想保持子物体的最左边在父物体的20%处，就可以把anchorMin的x设置0.2，然后把Left改成0。这样就可以让子物体的左边出现在父物体的20%处。
而锚点图因为只是选了最代表性的锚点种类，是没有这种类型的锚点可选的

Pivot轴心点

Pivot轴心点不属于锚点，不过还是顺带讲一下。轴心点是挺重要的一个点，我们选中物体后按下W，显示坐标轴的位置点就是这个轴心点。默认是（0.5,0.5）正中间，这里我们改成（0.5,1）显示在上方。
在这里插入图片描述

轴心点与坐标

轴心点很关键，我们算坐标的PosX和PosY都是基于自己的轴心点与父节点的距离来计算的

轴心点与缩放

轴心点可以决定缩放的方向
当轴心点在正中间时，调整scale是向两边缩放的请添加图片描述
当轴心点在最左边，调整scale，可以看到只向右边缩放

Alt与Shift快捷键

如下图红框处，可以看到
按住Alt可以在设置锚点时也设置位置；
按住Shift可以在设置锚点时也设置Pivot轴心点；
在这里插入图片描述

按住Alt

如下图，按住Alt后，按下与父节点4边对其的锚点，可以看到图片的宽高也会自动充满父物体。这是一种不错的快捷方式
请添加图片描述

按住Shift

如下图，按住Shift后，按下与父节点上边对其的锚点。可以看到Pivot由（0,0）变成（0.5,1）
请添加图片描述

代码控制

前面说了代码动态设置AnchorMin和AnchorMax，我们知道了如何把Anchor设置到我们想要的位置。
如果这时我们还想设置子物体到父物体各个锚点的距离怎么办呢。哈，你可能会想到设置Left，Right，Bottom，Top 不就好了吗。确实是的，不过代码里并没有这些值可以直接用，API里用offsetMin 表示 Left，Bottom；用offsetMax表示Right,Bottom

offsetMin,offsetMax

在这里插入图片描述
上面方形图片在父物体的中间，现在我们用代码来把它移到距离父物体左边100像素

            imgChild.rectTransform.anchorMin = new Vector2(0, 0.5f);
            imgChild.rectTransform.anchorMax = new Vector2(0, 0.5f);
            
            var width = imgChild.rectTransform.rect.width;
            var height = imgChild.rectTransform.rect.height;
            
            imgChild.rectTransform.offsetMin = new Vector2(100, -height / 2 );
            imgChild.rectTransform.offsetMax = new Vector2(100 + width, height / 2);

可以看到，图片的锚点和位置成功的设置了。
在这里插入图片描述
接下来我们尝试让子物体充满父物体

            imgChild.rectTransform.anchorMin = new Vector2(0, 0);
            imgChild.rectTransform.anchorMax = new Vector2(1, 1f);
            
            imgChild.rectTransform.offsetMin = Vector2.zero;
            imgChild.rectTransform.offsetMax = Vector2.zero;

效果图
在这里插入图片描述

SetInsetAndSizeFromParentEdge

可以看到 offsetMin 和 offsetMax，在设置子物体充满父物体时十分方便；但是在与父物体一条边保持指定距离时有点麻烦，虽然也可以。这时我们可以用SetInsetAndSizeFromParentEdge来方便的跟父物体一条边保持距离

SetInsetAndSizeFromParentEdge(RectTransform.Edge edge, float inset, float size)

这个API的第1个参数是选基准边，有4个值
RectTransform.Edge.Left，左
RectTransform.Edge.Right，右
RectTransform.Edge.Top，上
RectTransform.Edge.Bottom，下
要跟父物体哪条边保持距离，就选哪一个
第2个参数是距离
第3个参数是自己的宽度或高度，当以上下为基准边时，代表高度。当以左右边为基准边时，代表宽度。

接下来我们用这个方法，来实现跟父物体左边保持100距离。

//用imgChild.rectTransform.rect.width保持原来的宽度
imgChild.rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left,100,imgChild.rectTransform.rect.width);

在这里插入图片描述
可以看到，直接一行代码就实现了效果，锚点和位置都设置好了。还是挺方便的

UGUI锚点适配