前言

最近一段時間的實習都是苦逼的在做ui，做移動端的，適配是永恒的話題，慶幸的是unity提供了一套強大的接口讓開發者來很好的實現自己想要適配的效果，曾經的我認為 用代碼做適配是不可能的，這輩子都不可能的，最多拖一拖錨點這個樣子 ,現在熟悉了之后只有兩個字 真香。希望各位看官看完這篇文章后也能不再害怕unity的布局系統。

本文講解順序

• 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面板中可以調整錨點的值

image.png

image.png

為了方便后續描述，我把Anchor分為兩種情況

• 當anchorMax與anchorMin相等時，Anchor呈現為一個點，我稱之為錨點
• 當anchorMax與anchorMin不相等時，Anchor呈現為一個框，我稱之為錨框(即示意圖中的情況)

2.絕對與相對布局

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

2.1絕對布局

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

image.png

image.png

image.png

image.png

image.png

2.2相對布局

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

image.png

image.png

image.png

image.png

3.Pivot

Pivot中心點，就是該UI元素旋轉縮放的中心點，左下角為(0,0)右上角為(1,1)

image.png

image.png

image.png

4.Offset

首先說說OffsetMax，其實OffsetMin也是同理。接下來會主要解釋兩個問題

OffsetMax的值是怎么計算得出來的呢？OffsetMax又有什么用呢？

• 其實沒有那么神秘，這個值就是UI元素的右上角的坐標，減去AnchorMax的值，得到一個從AnchorMax指向元素右上角的向量(vector2類型)，各位看官可以自行測試一下。
  image.png

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

5.sizeDelta

以前對這個屬性是真的一臉懵逼，網上很多教程說這個值可以設置UI元素的大小，但是真的有時候好用，有時候有不好用，真的一頭霧水，官方文檔說的也是很籠統，但是現在搞清楚了其中的聯系以后，就覺得清晰了不少了。

其實sizeDelta的值就是OffsetMax-OffsetMin的值

所以就會出現有時候sizeDelta得到的是UI元素的大小，有時候又不是的情況，下面就復現一下這兩種情況

5.1錨點情況下的sizeDelta

image.png

5.2錨框情況下的sizeDelta

image.png

所以這個屬性之所以叫做sizeDelta，是因為在錨點情況下其表征的是size（大小），在錨框的情況下其表征的是Delta（差值）

那么我們在錨框的情況下要怎么樣才能獲得元素的大小呢？這個時候就可以用到rect屬性了。

6.rect

rect中的屬性，不與UI元素所在的位置有關，只和其自身屬性相關，所以其中的rect.width和rect.height屬性就可以讓我們在任何情況下取得元素的大小，而rect.x和rect.y如圖所示，表示的是以Pivot為原點，UI元素左下角的坐標，可以看到圖中Pivot是在UI元素的正中間，所以左下角的坐標就剛好是(-100,-100)

image.jpg

但是有一個問題，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.png

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

image.png

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.png

然后以下邊界為基準

 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.png

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

• 以左邊界為基準時，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.png

最后

寫到這里rectTransform中比較重要的屬性和方法都大概介紹完了，這畢竟是我第一次那么正正經經的寫博客，有紕漏之處還請各位大神指正，有什么不清楚的地方可以私信我，最后祝大家學習愉快哈哈哈！