詳解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組件，如今已經被它替代了。