UGUI（六）- RectTansform

 

前几章节当中，或多或少接触过 RectTransform ，这一章节我们来详细地学习一下 RectTransform 组件

什么是 RectTransform

RectTransform 是 UGUI 中用来标记 UI 元素位置和大小的组件，该控件继承自 Transform

[NativeClass("UI::RectTransform")]
[NativeHeader("Runtime/Transform/RectTransform.h")]
public sealed class RectTransform : Transform
{
  ......
}

 

RectTransform 的属性

英文输入法状态下按下 T 键，或点击左上角导航栏中的按钮，切换至 Rect Tool 模式下，可以在 Scene 视图中对 UI 元素进行快捷操作

 

1. Anchors

UGUI 的 Anchor 比 NGUI 的 Anchor 形式更多，使用更灵活

• Scene 中以四个小三角来标识， Inspector 视频中 Min 和 Max 两个 Vector2 来记录 Anchor 的位置

• Min 和 Max ∈ { [0, 1], [0, 1] }

• Anchor 描述当前 UI 元素与其父物体的位置关系，可以理解为相对父物体的一个基准，Anchor 的四个角总是位于父物体的包围盒之内

介绍两个概念

锚点：当 Anchor 四个点重合为一个点时，称之为“锚点”形态。处于锚点时的 UI 元素只受其父物体位置影响，不受其大小影响

• 下图中 Anchor 三角标识是美女图片的 Anchor，并非背景图的 Anchor（先选中美女图片，再点击 Inspector 视图的小锁子将其锁定，这样切换选中背景图后，Scene 视图中所标识的 Anchor 仍为美女图片的 Anchor， 这样做仅仅是为了方便观察）

• 锚点模式下，UI 大小位置编辑区以 xyz + wh 形式来标记。点 xyz 是锚点到 UI 自身基准点的向量（可理解为各轴的距离）， wh 是 UI 包围盒的大小。

 

当把光标放在 Inspector 视图的输入框时，Scene 会自动标记出该输入框所对应的位置长度

 

锚框：除锚点以外的情况都被称为锚框，表现在 Scene 视图上有 线和矩形 两种

如图锚框的各种形式

处于锚框时的 UI 元素位置和大小会受其父物体位置和大小的影响

• 同上，下图中 Anchor 三角标识是美女图片的 Anchor，并非背景图的 Anchor

• 锚框模式下，UI 大小位置编辑区以 上下左右边距 或者 某一轴+（宽或高）+边距 形式来标记。

需要注意的是，锚框下 Inspector 输入框内 Left、Right、Top、Bottom 值是指锚框的上下左右四个点到 UI 包围盒 上下左右 四条边的垂直距离，而并不是锚框各点到 Pivot 的值

2. Pivot

简单理解，Pivot 是 UI 元素自身相对于外部的基准点，也是旋转和缩放的中心点。

Pivot 以 Vector2 表示，其 x 单位长度为 UI 包围盒宽度， 其 y 单位长度为 UI 包围盒高度，x，y ∈ （-∞ ，+∞）

3. 九宫格

九宫格是一个表格，最上面的一行是横向四个表头，最左侧一列是竖向四个表头，横竖组合形成了右下角部分十六种常用组合模式。

九宫格的意义是方便开发者快速调整 UI 位置，默认情况下只改变 Anchor 值; 按下 Shift 键后，UI 的 Pivot 也会相应更改; 按下 Alt 键后 UI 相对父物体的位置也会改变。

4. 旋转缩放

需要注意旋转和缩放是以 Pivot 为基准点进行计算的。

5. 两个小模式

 

• 蓝图模式（Blueprint Mode）

  开启后，Scene 视图中 UI 编辑框（这种情况下蓝点框不是包围盒）会忽略旋转与缩放的影响，表现为原始UI大小。如果发生旋转后开启蓝图模式，拉框调整大小时会有所不同（沿水平或垂直方向调整，而并非 UI 真正的宽高方向调整）。

  这种模式比较适合调整旋转后的 UI 元素，比如商品左上角倾斜的打折或热卖标签

  

 

• 原始编辑模式（Raw Edit Mode）

  分两种情况使用，Inspector 中位置大小区值不会随 Anchor、Pivot 改变而改变

1. 锚点下修改 Pivot 值，不会改变 Pivot 与 锚点的相对位置。未开启原始编辑模式时，修改 Pivot 是 Pivot 在动，开启后则是 Pivot 静止 UI 移动。

2. 锚框下修改 Anchor 值，未被 Anchor 影响的另一边 Anchor 与 UI 包围盒边缘会保持位置相对不变。

---

欢迎关注公众号，定期分享Unity的实用技巧~~