Unity UI 相关知识（锚点自适应详解）

Anchor：锚点

应用在父子上，子物体的位置是根据父物体的变化而变化的，而子物体和父物体联系的桥梁就是Anchor。

---

 Pivot ：自身轴点

 Pivot中心点，就是该UI元素旋转缩放的中心点，左下角为(0,0)右上角为(1,1)

---

 AnchoredPosition3D：

public Vector3 anchoredPosition3D { get; set; }
作用是：改变RectTransform的PosX,Y,Z

（是以设置的 anchors 为中心的，默认如果不设置 anchors 中心点是在屏幕中间）

---

 绝对布局（有锚点时）

所有锚框同在一个点时

  PosX,PosY,PosZ 分别表示UI自身的中心点所距离锚点的X、Y和Z轴的距离

  Width,Height   分别表示UI自身的宽度和高度数值
  ——>无论父物体怎么变化，子物体宽度和高度是恒定不变的。如下图所示

设置UI位置的X和Y值

 rectTransform.anchoredPosition = new Vector3(200, 400);
 rectTransform.anchoredPosition3D = new Vector3(200, 400);

 

---

 相对布局（有锚框时）

当四个锚框分散开 

  Left,Top,Right,Bottom分别表示UI自身相对于自身锚框的距离，Left为UI自身距离左侧锚框的距离，其他同理（Top距离上侧，right距离右侧，bottom距离下侧）

  （ 相当于设置的offsetMin和offsetMax的值 ）

  ——>无论父物体怎么变化，子物体相对于父对象所占的比例不变，也就说子物体会跟随父对象变化。如下图所示

---

AnchorMin、AnchorMax：

 

AnchorMin：表示锚点的X和Y的最小值      

rectTransform.anchorMin = new Vector2(0.3f, 0.3f);   范围（0-1）

AnchorMax：表示锚点的X和Y的最大值      

rectTransform.anchorMax = new Vector2(0.7f, 0.7f);   范围（0-1）
                     

表示的是该点所在位置占父物体大小的比例，无论父物体怎么变大缩小，子物体所占的比例不变。    （相当于有锚框）

 效果如下图所示

 

---

 offsetMin、offsetMax：

1、offsetMin：表示UI距离左边和底边的距离

可以这样记：如果向锚点范围里移动就是正值，相反向锚点范围外移动就是负值   

rectTransform.offsetMin = new Vector2(40f, 40f);

2、offsetMax:  表示UI距离右边和上边的距离    

使用代码改变时与在Inspector手动修改相反

可以这样记：如果向锚点范围里移动就是负值，相反向锚点范围外移动就是正值(与上相反)

rectTransform.offsetMax = new Vector2(-40f, -40f);

---

 sizeDelta 

sizeDelta = offfsetMax - offsetMin;

rectTransform.sizeDelta = new Vector2(400,300);

1、有锚框时，表示UI四边相对于父对象四边的距离。

2、没锚框时，表示UI的Width和Height。

---

RectTransform

    private RectTransform rectTransform;

transform.position : UI的屏幕坐标

transform.LocalPosition : UI相对于父级位置的坐标

rectTransform.position : UI的屏幕坐标

rectTransform.rect.width : UI的总长度

rectTransform.rect.height : UI的总宽度

rectTransform.piovt.x/y : UI中心点的x或y

---

限制子UI_A 在父级UI_B 里的活动的范围

​​​​​​​

UI_A在UI_B中移动，并且不能超出UI_B的范围，我们需要求出UI_A可以移动到的边界值（最大最小值），包括X的边界值和Y的边界值。根据图中所示，UI_A可以移动到的最大边界位置，图中粉色范围就是UI_A可以任意移动的位置，而绿色边界就是边界值。可根据以下方法求出边界值然后进行移动限制

最小x坐标 = B当前x坐标 - B轴心距离B左边界的距离 + A轴心距离A左边界的距离
        minx  =  B.rectTransform.position.x  
                     -  B.rectTransform.pivot.x * B.rectTransform.rect.width * canvas.scaleFactor
                     + A.rectTransform.pivot.x * A.rectTransform.rect.width * canvas.scaleFactor
最大x坐标 = B当前x坐标 + B轴心距离B右边界的距离  - A轴心距离A右边界的距离
        minx  =  B.rectTransform.position.x  
                   +  (1-B.rectTransform.pivot.x) * B.rectTransform.rect.width * canvas.scaleFactor
                   - (1-A.rectTransform.pivot.x) * A.rectTransform.rect.width * canvas.scaleFactor
最小y坐标 = B当前y坐标 -  B轴心距离B下边界的距离 + A轴心距离A下边界的距离
最大y坐标 = B当前y坐标 + B轴心距离B上边界的距离  - A轴心距离A上边界的距离

---