锚点Anchors

UGUI为屏幕自适应提供了锚点机制，方便在不同分辨率下的UI元素保持相同的布局格式，本篇将锚点分为聚点型和锚框型，锚点实现的核心原理为子UI元素四边距离四个锚钉的距离是一致的，所以锚框型的锚点和聚点型锚点各有其作用，以下会以 16 : 9 与 4 : 3 的屏幕比例进行测试 

锚框

锚框型锚点

锚框型锚点设置的意义在于保证子物体的尺寸根据锚点设置可以在不同分辨率下跟随父物体尺寸变化，即尺寸自适应，适用于无需考虑拉伸UI元素（例如纯色的背景图），蓝色框内为设置锚框型锚点

锚框型锚点设置

设置后，16 : 9 以及4 : 3尺寸下UI元素的四个边角点距离锚点位置相同，并根据不同分辨率进行不同的填充

16 : 9 4 : 3

聚点型锚点

聚点型锚点设置的意义在于保持子物体在不同分辨率下在父物体下的位置都一致，即位置自适应，适用于需要考虑拉伸并且需要位置固定的元素(例如头像框）， 图中红色框选部分的选取为设置聚点型锚点

聚点型锚点设置

我们先查看一下锚点设置不当的反面教材

反面教材16:9尺寸下的正方形 反面教材4:3比例下正方形已变形

以下是自适应下针对拉伸位置设置的聚合性锚点效果

聚合性锚点16:9 聚合性锚点4:3

轴点Pivot

轴点为UI元素的参照坐标系原点，尝试拖动轴点会发现UI元素的坐标在做不停修改，可以在编辑器下进行拖动和，也可以通过设置RectTransform组件Pivot属性进行调整(默认（0.5,0.5）)，轴点对于自适应和滚动视图排列意义巨大，后面介绍RectTransform组件时还会提到

轴点

RectTransform组件

RectTransform组件是Transform组件的UI再封装类，常见的我就不介绍了，介绍几个比较特殊的用于自适应的成员

RectTransform.anchoredPosition：锚点位置

anchoredPosition根据锚点类型分为两种情况，聚合性锚点时anchoredPosition是物体轴点与锚点之间的位置，在锚框型锚点时，需要参照物体轴心位置计算锚框内的参照点，此时anchoredPosition代表的时轴点与参照点的位置，下面时图形参照图

聚合型锚点AnchoredPosition：

聚合型锚点anchoredPosition 输出结果

锚框型锚点AnchoredPosition：

锚框型锚点anchoredPosition 输出结果

AnchoredPosition坐标是基于锚点的自适应坐标，适用于UI列表的嵌套布局设置和使用，具体的原理计算在上面图片中已经写的非常清楚

RectTransform.localPosition：局部坐标

相对于父物体的局部坐标，不受锚点影响，结果为子物体轴点到父物体轴点的距离

局部坐标localposition 输出结果

localposition坐标就不详细说了大家感兴趣可以自己去测试一下

RectTransform.anchorMax/anchorMin：锚框范围

归一化数值，代表的是四个锚钉在父物体的归一化比例位置，二者x，y分别影响不同锚钉，通过设置不同参数，得到不同的锚框范围

anchorMax/anchorMin

RectTransform.offsetMax/offsetMin：最大最小锚钉位置

通过offsetMax/offsetMin获取锚钉到边角位置

max/min锚钉位置

RectTransform.sizeDelta：聚合性锚点获取物体尺寸

在锚点类型为聚点型锚点时可以通过sizeDelta来获取物体尺寸，结果相当于offsetMax - offsetMin

RectTransform.rect.(xMin,xMax,yMin,yMax)：完美获取物体尺寸方式

通过xMin,xMax,yMin,yMax获取物体尺寸,该点替换了原来的left，top，bottom，right变量，用来计算物体尺寸，在获得UI尺寸上建议使用下面图内计算方法来计算尺寸，好处是不受锚点类型的影响

xMin,xMax,yMin,yMax计算物体尺寸