詳解Unity 4.6新UI的佈局

（原帖：http://www.cnblogs.com/CodeCabin/p/4161424.html?utm_source=tuicool&utm_medium=referral）

本文所講的是Unity 4.6中新加入的uGUI，官方稱Unity UI，而不是過去的OnGUI式的舊UI（官方稱Legacy GUI）。

我曾經在8月份對照4.6 Beta的文檔寫過一篇筆記學習Unity 4.6新GUI系統，但對Anchors不夠深入，而且有了一些API上的變化。下面就是我對新UI佈局的理解，以及最後Canvas Scaler組件的介紹。

放置任意一個UI元素到場景中，首先可以看到自動創建了一個Canvas對象；另外這個元素一定會擁有一個Rect Transform組件。

Rect Transform是專爲UI元素準備的，它的一個重要屬性就是錨點Anchors，用於指定自身相對父級的佈局。對於這個UI元素，它的父級就是Canvas。錨點一共有四個，分別對應自身矩形的四個頂點。在父級元素形狀發生變化時，四個錨點到四個頂點的偏移offset不變。

我們可以直接在場景中拖動錨點來設置，拖動時有數值顯示，非常直觀。但有時候我們希望更精確一點。注意到四個錨點可以聚集在一點，也可以在一條線，也可以分散成矩形。這樣，它們的位置總能由兩個點來確定，就是圖中Anchors下面Min和Max兩個屬性。Min代表更左邊、更下邊的點，Max代表更右邊、更上邊的點。數值範圍是0~1，以左下爲(0,0)，右上爲(1,1)。圖中的錨點可以看出就是矩形的中心。

其實通過左上角你已經可以直觀看出錨點的位置了。點擊左上角可以彈出一個菜單，這裏是Unity預置的幾種佈局。有固定在一點的，也有在一條邊上的，還有更加自由的佈局。確定一種模式後，右邊的屬性也會隨之變化，方便你調整元素的大小或偏移。

在固定在一點的模式下，元素的形狀不變，位置隨這一點變化。所以可以指定它的兩個座標軸的偏移Pos X和Pos Y。Pos X和Pos Y均爲0時，元素的支點和錨點重合。因爲大小不變，可以指定寬和高。效果如下圖：

固定在一條邊的情況下，元素的形狀和位置均可能發生變化。以下圖的固定在下邊爲例，受偏移量影響，它的寬會變而高不變。所以它可以設置的屬性是Left、Right、Pos Y、Height，分別代表元素左（右）邊距離父元素左（右）邊的距離，支點距父元素下邊的偏移、元素的高度。

注意不管是Left、Right還是Top、Bottom都是以元素的邊爲準，而Pos X和Pos Y則是以支點爲準。

這種固定在邊的兩個頂點上的模式，這條邊會顯示爲stretch。如果把錨點從頂點移開，則會變爲custom。對於custom，當父元素形狀變化時，元素自身會按比例變化。效果如圖所示：

如果在兩個座標軸上都用custom，那麼元素就能在不同的屏幕上顯示類似的大小。以下圖爲例，如果想讓Logo（Image對象）顯示在屏幕中上部分，並且在不同分辨率下佔據的比例都相同，就可以設置爲custom，將錨點框住想顯示的位置，並將上下左右邊距都設爲0，就能達到這種效果。

最後介紹一下Canvas Scaler這個組件。可以在Canvas上通過Add Component找到這個組件。

這個組件有三種模式：

• Constant Pixel Size
• Scale With Screen Size
• Constant Physical Size

選擇Scale With Screen Size並設定默認分辨率，其他分辨率下的UI就會通過設定的分辨率拉伸得到。而且Canvas也會調整到默認分辨率大小，方便UI設計。應該算是一個偷懶的方法吧。在4.6 Beta中，曾經有個Reference Resolution組件，現在已經被它替代了。