詳解Unity 4.6新UI的布局

本文所講的是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組件，現在已經被它替代了。