Unity UGUI 原理篇(五):Auto Layout 自動佈局
阿新 • • 發佈:2019-02-14
Auto Layout System
Auto Layout System 是基於Rect TransformLayout System 之上的系統,自動調整一個或多個的元素大小、位置、間格,又分為 Layout Controllers(父物件) 與 Layout Elements(子物件) 兩部分,一個簡單的 Auto Layout 架構如下 (此處介紹理論,實作留到後面)
代表著每個元素的大小,擁有資訊如下:
Minimum Width |
最小寬度 |
Minimum Height |
|
Preferred Width |
優先寬度 |
Preferred Height |
|
Flexible Width |
彈性寬度 |
Flexible Height |
點選UI後,可以在 Inspector 最下方切換為 Layout Properties 看到資訊
Layout Controllers 透過不同的佈局方式,取得 Layout Element size 分配子物件,基本原則如下
-
首先分配 Minimum Size
-
如果還有足夠空間,分配 Preferred Size
-
如果還有額外空間,分配 Flexible Size
從以下圖片可以看出圖片寬度的增長方式 (此處介紹理論,實作留到後面)
-
首先分配 Minimum Size (300,紅色部分)
-
如果還有足夠空間,分配 Preferred Size (300~500,綠色部分)
-
如果還有額外空間,分配 Flexible Size:1 (500~700,藍色部分)
比較特別的是 Flexible,他是代表著整個大小的比例,如果 Layout 下有2個物體,分別給 Flexible 設定為 0.3 與 0.7,那比例就會變成下圖 (3:7)
另外要注意的是,Text、ImageComponent 會根據內容大小自動分配 Preferred Size
Layout Controllers (父物件)
Layout Group
不會控制 Layout Controllers (父物件)自身大小,而是控制子物件大小與位置,在大多數情況下,根據每個元素的 minimum、preferred、flexible 大小分配適當的空間,layout group 之間也可以巢狀,又分為 Horizontal(水平)、Vertical(垂直)、Grid(格狀)3種
水平方向(Width) 排列子物件
元件位置:Unity Menu Item → Component → Layout → Horizontal Layout Group
Padding:填充內部空間
Spacing:每個元素間格
Child Alignment:當沒有填滿全部空間時,子物件對齊位置
Child Force Expand:強制控制子物件填滿空間
透過例項理解各引數:
A.開新 Scene
Unity Menu Item → File → New Scene
B.新增一個 Canvas
Unity Menu Item → GameObject → UI → Canvas
C.Canvas 下新增空物件,做為 Layout Controllers (以下簡稱父物件)
D.父物件增加 Horizontal Layout Group Component
Unity Menu Item → Component → Layout → Horizontal Layout Group
E.父物件下建立5個 Button(子物件),完成後如下,當大小改變時會自動分配子物件大小
F.此時在 Button 的 Rect Transform Component 就不能進行調整,因為我們已經透過 Horizontal Layout Group 進行分配空間,在 Rect Transform 會顯示目前被哪個 Layout Group 控制
G.將 Padding 數值調整如圖,可以看出填充區域
H.將 Spacing 數值調整如圖,可以看出元素區間
I.接下來我們將5個 Button 增加 Layout Element Component 覆蓋預設大小,用於手動設定每個元素的大小
元件位置:Unity Menu Item → Component → Layout → Layout Element
J.此時將 Horizontal Layout Group 的 Child Force Expand Width 取消勾選,不強制子物件填滿額外空間,而是透過 Layout Element 手動設定
K.這裡使用幾種不同的設定,來理解 Horizontal Layout Group 是怎麼取得 Layout Element size 分配子物件
■ 複習一下子物件大小分配方式,如果不清楚請回去上面 Layout Elements 部分
-
首先分配 Minimum Size
-
如果還有足夠空間,分配 Preferred Size
-
如果還有額外空間,分配 Flexible Size