本文講解順序
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面板中可以調整錨點的值
二者的值為：anchorMax(0.5,0.5),anchorMin(0,0) (默認左下角為0，0點，右上角為1，1點)

image.png

我把Anchor分為兩種情況
當anchorMax與anchorMin相等時，Anchor呈現為一個點，我稱之為錨點

image.png

當anchorMax與anchorMin不相等時，Anchor呈現為一個框，我稱之為錨框

image.png

2、絕對與相對布局

想要清晰的理解Recttransform的各個屬性，個人認為首先需要建立的第一個概念就是絕對布局以及相對布局這兩個概念。

2.1絕對布局

所謂的絕對布局，就是出現錨點的情況，此時的recttransform面板中的屬性變成了

image.png

image.png

所以如果使用了絕對布局，在采用不同分辨率的時候，該元素的大小恒定，可能就會出現在高分辨率情況下元素太小或者低分辨率情況下元素比屏幕大的情況

2.2相對布局

所謂相對布局，就是出現錨框的情況。在這種情況下UI元素的四個角，距離四個對應的錨點的距離是不變的，在這種情況下RectTransform的屬性又變為了Left,Top,Right,Bottom,PosZ，其中的PosZ表征的是該元素到父物體在Z軸上的偏移，利用這個值可以調整UI元素的顯示順序，不過我用的不多，這里不作太多討論。剩下的四個值應該很好理解了，就是UI元素的每一條邊距離父物體的每一條邊的距離。

image.png

image.png

3、中心點Pivot

image.png

4.OffsetMax，OffsetMin

這個值就是UI元素的右上角的坐標，減去AnchorMax的值，得到一個從AnchorMax指向元素右上角的向量(vector2類型)，

image.png

那么這個值有什么用呢，因為這個值是一個可讀可寫的屬性，所以在錨框的情況下我們可以在代碼里面動態的去調整UI元素相對邊界的距離，其次更重要的是，利用這這兩個值就可以計算出sizeDelta的值了！

5、sizeDelta

錨點情況下的sizeDelta

image.png

在錨點情況下，offsetMax和Min的起點相同，根據向量相減的三角形法則，可以得到一個新的向量，這個新的向量的X和Y的大小正好UI元素的寬和高相等，所以在這個時候去設置sizeDelta的值，可以直接調整UI元素的大小

錨框情況下的sizeDelta

image.png

在錨框的情況下，offstMax減去Min，得到的將不再是UI元素的大小，而是一個新的奇怪的向量，這個向量代表的物理意義是，sizeDelta.x值就是錨框的寬度與UI元素的寬度的差值，sizeDelta.y的值就是錨框的的高度與UI元素的高度的差值
所以這個屬性之所以叫做sizeDelta，是因為在錨點情況下其表征的是size（大小），在錨框的情況下其表征的是Delta（差值）

3、rect

rect中的屬性，不與UI元素所在的位置有關，只和其自身屬性相關，所以其中的width和height屬性就可以讓我們在任何情況下取得元素的大小，而x和y屬性根據我的初步測試，如圖所示，表示的是Pivot的在UI元素中的坐標，以左下角為(0,0)點，右邊和上邊為坐標軸負向（這有一點奇怪，所以一般極少用到x和y這兩個值）

image.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);
    }

image

在使用錨框的情況下，anchoredPosition表征的是元素Pivot到錨框中心點的距離

image

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);
        //這種情況下我選定父物體的右邊界為基準，結果如下圖
    }

image

然后以下邊界為基準

 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);
    }

image

在使用這個方法的時候要注意錨點也會改變，改變的規則為

• 以左邊界為基準時，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);
    }

image

參考：http://www.lxweimin.com/p/4592bf809c8b