Unity3D中UGUI的RectTransform对齐方式详解

https://www.jianshu.com/p/831e2dd7c546

https://www.jianshu.com/p/4592bf809c8b

在Unity自带的UGUI中，RectTransform扮演了极其重要的角色，可以说基本上所有UI控件的对齐方式都是基于RectTransform的。

    通常情况下，我们可以很方便的使用Unity编辑器对各种UI控件进行可视化的编辑，调整位置、大小、层级等，但是在适配多分辨率，刘海屏的时候，我们并无法通过简单的拖拽移动来实现UI控件的自适应布局，这个时候我们就需要深入的理解RectTransform的对齐方式，以实现各种复杂的UI适配。

    RectTransform的对齐方式主要有两种：基于父节点的锚点(Anchors)对齐，基于自身中心点(Pivot)对齐

    首先我们从比较简单的自身中心点对齐来说明:

 

中心点示意图

    中心点比较好理解，就是指这个UI控件的矩形以Pivot的坐标值来确定其在父节点中的位置

 

中心点坐标示意图

以下的这图能够说明中心点对于RectTransform的影响

 

中心点不同，虽然是相同的（0，0）点，但是实际显示的位置截然不同

弄清楚了自身的对齐方式，现在来看看相对于父节点的对齐方式。

基于父节点的对齐，主要是依靠锚点（Anchors）和RectTransform的anchoredPosition（注意不是常用的localPosition）这两个变量来实现的(其实应该用锚框来定义，更为适合）。

 

Anchors变量示意图

    左上的图示和下方的变量值是等价的，只是可以通过左上的图来很方便查看而已。为什么Anchors会有Min和Max两个变量呢？首先要知道min和max分别代表什么含义：

 

锚点的min,max值示意图

    把锚框和一个矩形做类比，min值对应的左下角，max值对应的右上角，例如图上所示，min = （0.32,0.39),它以父节点的左下角为原点，总长度为1的百分比值，有点和纹理的uv坐标类似。

    min和max的主要作用是给子节点在父节点中找到一个可以作为基准对齐的标识，这个标识既可以是一个点，也可以是一条线段，甚至可以是一个矩形。可以说如此灵活的对齐方式，几乎可以满足所有变态的适配要求，但是也带来了理解的困扰。

1.锚框缩成一个锚点的情况

    表示UI控件是相对于父节点中的锚点对齐，无论父节点的宽高怎么变，该控件的大小和相对锚点的距离始终不会变化。

    在默认情况下，UI控件的锚框都会缩成一个点，即 max.x - min.x = 0 && max.y - min.y = 0 （例如默认情况下的max=(0.5,0.5) min=(0.5,0.5))，anchoredPosition可以在Editor的Inspector中直接调整：

 

锚框为一个点时的对齐

 

    2.锚框是一条线段的情况：

    当min.x == max.x 或者 min.y == max.y 这种情况下，表示UI控件的边界相对于线段端点的距离不变

锚框是一条线段的情况

需要注意到，PosY已经变成了Top，Height变成了Bottom，这是因为这个时候的对齐方式已经变成了相对于线段端点的距离不变，而这个不变的值就是距离上端点的Top以及下端点的Bottom，至于之前的PosY以及Height已经不关心，因为这两个值会随着父节点的变化而变化。

同理横线的情况下，PosX与Width值已经变得意义不大，变成了Left，Right，表示到左右两个端点的距离。

3.锚框是一个矩形的情况

       基于上面的基础，我们把线段拉伸开来，成为了一个矩形：

 

锚框是一个矩形的情况

    注意看到红框部分，已经和第一种情况截然不同，完全变成了四个变量，这四个变量分别表示距离锚框四个端点的距离。

    也就是说无论父节点的长宽如何变化，该控件的大小始终保持着这个比例不变，最简单的例子就是一张纯色背景图，无论下图中Image控件的父节点大小如何变化，Image总是会保持铺满整个父节点。

 

纯色背景图

    以上就是对齐方式的介绍，希望能有所帮助

作者：doufh
链接：https://www.jianshu.com/p/831e2dd7c546
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。