Unity——RectTransform详解

我不是女神ヾ 2022-11-16 01:00 341阅读 0赞

## 本文讲解顺序 ##

*  1.Anchor(Min,Max)
 *  2.绝对与相对布局
 *  3.Pivot
 *  4.Offset(Min,Max)
 *  5.SizeDelta
 *  6.rect
 *  7.anchoredPosition
 *  8.Recttransform类中一些方法的介绍  
    **赶时间的看官可以直接跳到感兴趣的部分**

## 1.Anchor ##

unity中的ui元素是有严格的父子关系的，子物体的位置是根据父物体的变化而变化的，而子物体和父物体联系的桥梁就是Anchor。在recttransform面板中可以调整锚点的值

![20210402165559294.png][]  
为什么一个点会由四个值来确定呢，其实Anchors准确来说是由两个点确定的。他们就是AnchorMin以及AnchorMax

![6080c4e571113dd36091f11f8db873e2.png][]

之所以anchorMax和anchorMin的值是小数，是因为其表征的是该点所在位置占父物体大小的比例，也就是图中**黑色画线部分占灰色物体总长度和总宽度的比例**，所以在示意图的情况下  
二者的值为：anchorMax(0.5,0.5),anchorMin(0,0) *(默认左下角为0，0点，右上角为1，1点)*

> 为了方便后续描述，我把Anchor分为两种情况
> 
>  *  当anchorMax与anchorMin相等时，Anchor呈现为一个点，我称之为`锚点`
>  *  当anchorMax与anchorMin不相等时，Anchor呈现为一个框，我称之为`锚框`*(即示意图中的情况)*

## 2.绝对与相对布局 ##

想要清晰的理解Recttransform的各个属性，个人认为首先需要建立的第一个概念就是`绝对布局`以及`相对布局`这两个概念。

2.1绝对布局

所谓的绝对布局，就是出现`锚点`的情况，此时的recttransform面板中的属性变成了

![4a42fdd3b6b2ac8f938eba6accc51d05.png][]

PosX,PosY,PosZ,Width,Height，这五个属性，首先说说`Width`和`Height`，在绝对布局的情况下无论分辨率是多少，父物体多大，该UI元素的大小是恒定的，如下图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 1][]

而剩下的`PosX`,`PosY`,`PosZ`表征的就是Pivot *(第三部分有关于Pivot的讲解)* 到锚点的距离

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 2][]

![2021040216571716.png][]

所以如果使用了绝对布局，在采用不同分辨率的时候，该元素的大小恒定，可能就会出现在高分辨率情况下元素太小或者低分辨率情况下元素比屏幕大的情况。

2.2相对布局

所谓相对布局，就是出现锚框的情况。在这种情况下UI元素的四个角，距离四个对应的锚点的距离是不变的，在这种情况下RectTransform的属性又变为了`Left`,`Top`,`Right`,`Bottom`,`PosZ`，其中的`PosZ`表征的是该元素到父物体在Z轴上的偏移，利用这个值可以调整UI元素的显示顺序，不过我用的不多，这里不作太多讨论。剩下的四个值应该很好理解了，就是UI元素的每一条边距离父物体的每一条边的距离。  
在示意图的情况下，我设定了红色图片（子物体）距离灰色图片（父物体）的每一条边的距离都是200个单位。

![20210402165731421.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 3][]

接下来我们将灰色的图片（父物体）缩小，看看红色图片的变化

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 4][]

我们会发现红色的图片缩小了，但是其每个边距离父物体的距离是不变的，这个就是所谓的相对布局。

![20210402165802331.png][]

如果有同学出现这种情况，那就是因为`Top`和`Bottom`的值加起来比父物体的高还要高，所以计算子物体高的时候出现负数的情况，就会出现这种叉叉的情况，只要还原父物体的大小就ok（横向同理）。

## 3.Pivot ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 7][]

所以之前在`绝对布局`的情况下，`PosX`和`PosY`的值就是Pivot到锚点的值，Pivot这个属性应该是RectTransform那么多属性中最好理解的一项了吧！

## 4.Offset ##

首先说说OffsetMax，其实OffsetMin也是同理。接下来会主要解释两个问题

> OffsetMax的值是怎么计算得出来的呢？OffsetMax又有什么用呢？

其实没有那么神秘，这个值就是UI元素的右上角的坐标，减去AnchorMax的值，得到一个从AnchorMax指向元素右上角的向量(vector2类型)，各位看官可以自行测试一下。

![3bceeb25d9845f253649a5db1a5be8b5.png][]

image.png

![3bceeb25d9845f253649a5db1a5be8b5.png][]

*  那么这个值有什么用呢，因为这个值是一个可读可写的属性，所以在`锚框`的情况下我们可以在代码里面动态的去调整UI元素相对边界的距离，其次更重要的是，利用这这两个值就可以计算出sizeDelta的值了！

## 5.sizeDelta ##

以前对这个属性是真的一脸懵逼，网上很多教程说这个值可以设置UI元素的大小，但是真的有时候好用，有时候有不好用，真的一头雾水，官方文档说的也是很笼统，但是现在搞清楚了其中的联系以后，就觉得清晰了不少了。

> **其实sizeDelta的值就是OffsetMax-OffsetMin的值**

所以就会出现有时候sizeDelta得到的是UI元素的大小，有时候又不是的情况，下面就复现一下这两种情况

5.1锚点情况下的sizeDelta

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 8][]

在锚点情况下，offsetMax和Min的起点相同，根据向量相减的三角形法则（不记得是不是这样说得了哈哈哈），可以得到一个新的向量，这个新的向量的X和Y的大小正好UI元素的宽和高相等，**所以在这个时候去设置sizeDelta的值，可以直接调整UI元素的大小**

5.2锚框情况下的sizeDelta

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 9][]

在锚框的情况下，offstMax减去Min，得到的将不再是UI元素的大小，而是一个新的奇怪的向量，这个向量代表的物理意义是，**sizeDelta.x值就是锚框的宽度与UI元素的宽度的差值，sizeDelta.y的值就是锚框的的高度与UI元素的高度的差值**

> **所以这个属性之所以叫做sizeDelta，是因为在锚点情况下其表征的是size（大小），在锚框的情况下其表征的是Delta（差值）**

那么我们在锚框的情况下要怎么样才能获得元素的大小呢？这个时候就可以用到rect属性了。

## 6.rect ##

rect中的属性，不与UI元素所在的位置有关，只和其自身属性相关，所以其中的`rect.width`和`rect.height`属性就可以让我们在任何情况下取得元素的大小，而`rect.x`和`rect.y`如图所示，表示的是以Pivot为原点，UI元素左下角的坐标，可以看到图中Pivot是在UI元素的正中间，所以左下角的坐标就刚好是`(-100,-100)`

![cfb337652ac6b0291a9814194308afca.png][]

但是有一个问题，rect属性是一个只读的属性，如果我们想要设置UI元素的大小的话，这好像又不适用了，所以RectTransform还提供了几个非常有用的方法。

## 7.anchoredPosition ##

通过直接设置anchoredPosition的值可以改变UI元素的位置，但也是要分`锚点`和`锚框`的情况

> 在使用`锚点`的情况下，anchoredPosition表征的是元素Pivot到Anchor的距离

private RectTransform rectTransform;
        // Use this for initialization
        void Start()
        {
            rectTransform = GetComponent<RectTransform>();
            rectTransform.anchoredPosition = new Vector2(0, -100);
        }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 10][]

> 在使用`锚框`的情况下，anchoredPosition表征的是元素Pivot到锚框中心点的距离

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 11][]

## 8.Recttransform类中一些方法的介绍 ##

8.1 SetSizeWithCurrentAnchors(Animations.Axis axis, float size)

这个方法无论在`绝对布局`还是`相对布局`的情况下，都可以通过直接设置rect中的`width`和`height`值来改变UI元素的大小。

private RectTransform rectTransform;
        // Use this for initialization
        void Start()
        {
            rectTransform = GetComponent<RectTransform>();
            rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 100);
            rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, 100);    
        }

8.2 SetInsetAndSizeFromParentEdge([RectTransform.Edge][] edge, float inset, float size)

这个方法就比较冷门了可能，不过还是挺强大的。调用这个方法，可以根据父物体的Edge（某一边）去布局。其中第一个参数就是用于确定基准的边，第二个参数是UI元素的该边界与父物体该边界的距离，第三个元素是设定选定轴上UI元素的大小，可能说起来有点复杂，但是我上两张图相信各位就可以秒懂了。

首先以右边界为基准

private RectTransform rectTransform;
        // Use this for initialization
        void Start()
        {
            rectTransform = GetComponent<RectTransform>();
            rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 200, 400);
            //这种情况下我选定父物体的右边界为基准，结果如下图
        }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 12][]

然后以下边界为基准

private RectTransform rectTransform;
        // Use this for initialization
        void Start()
        {
            rectTransform = GetComponent<RectTransform>();
            //rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 200, 400);
            rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Bottom, 200, 400);
        }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 13][]

在使用这个方法的时候要注意锚点也会改变，改变的规则为

*  以左边界为基准时，`anchorMin`和`anchorMax` 的`y`不变`x`变为0.
 *  以右边界为基准时，`anchorMin`和`anchorMax` 的`y`不变`x`变为1.
 *  以上边界为基准时，`anchorMin`和`anchorMax` 的`x`不变`y`变为1.
 *  以下边界为基准时，`anchorMin`和`anchorMax` 的`x`不变`y`变为0.

8.3 GetWorldCorners(Vector3\[\] fourCornersArray)

使用这个方法，可以取得UI元素四个角的世界坐标，具体使用方法，先建立一个长度为4的vector3数组，然后传进这个方法，调用一次后，数组被赋值，里面的四个元素分别是UI的`左下角` ，`左上角`，`右上角`，`右下角`。

private RectTransform rectTransform;
        // Use this for initialization
        void Start()
        {
            rectTransform = GetComponent<RectTransform>();
            Vector3[] corners = new Vector3[4];
            rectTransform.GetWorldCorners(corners);
            foreach (Vector3 corner in corners)
                Debug.LogWarning(corner);
        }

![6d85a31ee123166c6d5f6cba3c8d4454.png][]

作者：巨龙饿了  
链接：https://www.jianshu.com/p/4592bf809c8b

[20210402165559294.png]: /images/20221022/7b0c5a55558a4384915b37631426ef15.png
[6080c4e571113dd36091f11f8db873e2.png]: /images/20221022/e6535b5f97704cb793a51e2948ea9db4.png
[4a42fdd3b6b2ac8f938eba6accc51d05.png]: /images/20221022/19f866dc82cd4436ab2362be179413de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70]: /images/20221022/59f23aaf014a41e5bc5e4b10512817b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 1]: /images/20221022/dbe028b687994ae6878001425fde4a65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 2]: /images/20221022/febb8cda30a545289570481d3d75db60.png
[2021040216571716.png]: /images/20221022/92df17d681304d639c66cd24119dba9d.png
[20210402165731421.png]: /images/20221022/d19d2b0ab6bb4ba89d6cac939cb62d12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 3]: /images/20221022/3d9d4f2ce95d4c5ea1b1e3875eebad62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 4]: /images/20221022/e2c9e13ddd124bbd91ad3bf3f0cd45a7.png
[20210402165802331.png]: /images/20221022/ac98c76754534c10a0e41c90b180b072.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 5]: /images/20221022/ffc7c47de11249de839cfb9c1b89ffc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 6]: /images/20221022/dc122c5003254c1ca8035e83a869cab2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 7]: /images/20221022/70f79c1882b649998a29edf088bb840c.png
[3bceeb25d9845f253649a5db1a5be8b5.png]: /images/20221022/5685460328f94b658caaadabd6be37d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 8]: /images/20221022/9596ae6a7d514176aac973479c7da399.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 9]: /images/20221022/fa66d71a78f9498f92df0132ca465779.png
[cfb337652ac6b0291a9814194308afca.png]: /images/20221022/ab7c75d7c8e549619410c37d06de982c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 10]: /images/20221022/b04f921d0a2d463fa86136610c07912c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 11]: /images/20221022/1190beab4f374be8aa873c85051c315e.png
[RectTransform.Edge]: https://links.jianshu.com/go?to=https%3A%2F%2Fdocs.unity3d.com%2FScriptReference%2FRectTransform.Edge.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 12]: /images/20221022/dc84feb6012d4485bd5a94bb679a3816.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 13]: /images/20221022/90a72252a7b04c0cb62d8237ab82603c.png
[6d85a31ee123166c6d5f6cba3c8d4454.png]: /images/20221022/0f281829267748fdb7a1b43dada6e017.png