一、創(chuàng)建界面藍(lán)圖
1.1基礎(chǔ)知識(shí)
虛幻UMG即是類似Unity的UGUI的界面布局設(shè)計(jì)工具，其在虛幻引擎中也是屬于藍(lán)圖，但創(chuàng)建入口并不在【藍(lán)圖】菜單中，而是在【用戶界面】中。
創(chuàng)建的UI界面稱之為“控件藍(lán)圖”。
1.2如何創(chuàng)建一個(gè)UI界面
在虛幻內(nèi)容瀏覽器中點(diǎn)擊左上角的【+添加】，并在彈出的菜單中選擇【用戶界面】，然后在打開的二級(jí)菜單中選擇【控件藍(lán)圖】。
然后在如上圖所示的界面中，點(diǎn)擊【用戶控件】即可創(chuàng)建一個(gè)界面控件藍(lán)圖。然后根據(jù)你或者項(xiàng)目的需求，修改該控件藍(lán)圖的名字。
雙擊該控件藍(lán)圖會(huì)打開控件藍(lán)圖編輯器界面。具體編輯器布局說(shuō)明不再贅述，請(qǐng)參考虛幻官方文檔
二、層級(jí)（控件樹）
控件藍(lán)圖編輯器左下角的層級(jí)，顯示了這個(gè)界面所有控件的樹狀父子關(guān)系結(jié)構(gòu)。有別于Unity和Cocos的UI的層級(jí)關(guān)系結(jié)構(gòu)，虛幻的控件子控件數(shù)量，根據(jù)父控件的類型，做了嚴(yán)格的數(shù)量限制。
有些控件不允許有子控件，有些控件允許1個(gè)子控件，有些則允許多個(gè)子控件。
在此對(duì)所有的控件子對(duì)象數(shù)量進(jìn)行了歸納和總結(jié)。
| 控件名稱 | 類別 | 子項(xiàng)數(shù)量 |
|---|---|---|
| 列出試圖 | 列表 | 只接受繼承了IUserObjectListEntry接口的控件藍(lán)圖 |
| 樹視圖 | 列表 | 只接受繼承了IUserObjectListEntry接口的控件藍(lán)圖 |
| 瓦片視圖 | 列表 | 只接受繼承了IUserObjectListEntry接口的控件藍(lán)圖 |
| 安全區(qū) | 面板 | 1個(gè) |
| 包裹框 | 面板 | 很多 |
| 尺寸框 | 面板 | 1個(gè) |
| 垂直框 | 面板 | 很多 |
| 堆棧框 | 面板 | 很多 |
| 覆層 | 面板 | 很多 |
| 滾動(dòng)框 | 面板 | 很多 |
| 畫布面板 | 面板 | 很多 |
| 控件切換器 | 面板 | 很多 |
| 水平框 | 面板 | 很多 |
| 縮放框 | 面板 | 1個(gè) |
| 統(tǒng)一網(wǎng)格面板 | 面板 | 很多 |
| 網(wǎng)格面板 | 面板 | 很多 |
| 可編輯文本 | 輸入 | 零 |
| 可編輯文本（多行） | 輸入 | 零 |
| 文本框 | 輸入 | 零 |
| 文本框（多行） | 輸入 | 零 |
| 旋轉(zhuǎn)框 | 輸入 | 零 |
| 組合框（鍵） | 輸入 | 零 |
| 組合框（字符串） | 輸入 | 零 |
| 背景模糊 | 特殊效果 | 1個(gè) |
| 按鈕 | 通用 | 1個(gè) |
| 邊界 | 通用 | 1個(gè) |
| 多格式文本塊 | 通用 | 零 |
| 勾選框 | 通用 | 1個(gè) |
| 滑條 | 通用 | 零 |
| 進(jìn)度條 | 通用 | 零 |
| 徑向滑條 | 通用 | 零 |
| 命名的插槽 | 通用 | 零 |
| 圖像 | 通用 | 零 |
| 文本 | 通用 | 零 |
三、插槽Slot類型
插槽是UMG的最重要布局屬性，其決定了該控件在父控件下的錨定參數(shù)。
當(dāng)你在一個(gè)控件下添加了子控件時(shí)，該子控件的細(xì)節(jié)面板第一個(gè)類別就是【插槽】
插槽是父控件賦予給子控件的屬性，因此在細(xì)節(jié)類別標(biāo)題插槽文字后，會(huì)以括號(hào)的形式標(biāo)注插槽類型。
基于父控件的不同，插槽所展示出的參數(shù)也不一樣。畫布面板下的子控件插槽參數(shù)最自由。其他一些面板的子控件則只能設(shè)置是否填充和對(duì)齊模式。
UMG的插槽Solt，類似Unity中GameObject的Transform
3.1畫布面板槽（Canvas Panel Slot）-自由插槽
3.1.1錨點(diǎn)
錨點(diǎn)決定了子控件在父控件下的對(duì)齊規(guī)則。通常直接點(diǎn)擊【錨點(diǎn)】的下拉菜單，在彈出的九宮格視圖中，按需選擇預(yù)置的錨定即可。
選擇紅框中的錨點(diǎn)類型時(shí)，為非填充模式。而綠色框中的為填充模式。不同的模式將影響3.2位置和尺寸中給出的參數(shù)類型。
九宮格下方的描述說(shuō)明：
- 長(zhǎng)按Shift更新對(duì)齊進(jìn)行匹配：會(huì)根據(jù)所選擇的錨點(diǎn)，改變子控件的對(duì)齊中心點(diǎn)位置，但不會(huì)把子控件和錨點(diǎn)的位置XY進(jìn)行重置。
- 長(zhǎng)按Ctrl更新位置進(jìn)行匹配：此時(shí)會(huì)根據(jù)所選擇的錨點(diǎn)，改變子控件的位置，將子控件和錨點(diǎn)的位置XY重置為0。
3.1.2錨點(diǎn)修飾字段
基于用戶在錨點(diǎn)部分選擇的錨定方式，錨點(diǎn)下方的修飾字段展示的參數(shù)類型分為：
① 位置Position+尺寸Size
② 偏移值Offset
③ 位置+尺寸+偏移值
當(dāng)用戶錨點(diǎn)選擇紅框中的錨定模式時(shí)，修飾字段為位置和尺寸。當(dāng)選擇紅框中的錨定模式，則根據(jù)填充模式顯示偏移值參數(shù)。
3.1.3對(duì)齊
對(duì)齊即是控件自身的中心點(diǎn)（Pivot），默認(rèn)為{0,0}位置，控件會(huì)以該點(diǎn)作為自己的錨定中心點(diǎn)，去對(duì)齊錨點(diǎn)位置。
上圖為中心點(diǎn)坐標(biāo)設(shè)置示意圖，在引擎的UMG中多嘗試設(shè)置不同的值進(jìn)行感受。
在UMG的界面中，如上圖所示，紅框圈出的就是控件的錨點(diǎn)位置了。
3.1.4大小到內(nèi)容
勾選此選項(xiàng)，則控件的大小不再由“尺寸X”和“尺寸Y”決定。而是由子控件大小，或者自身圖像原始尺寸，或者文本實(shí)際大小來(lái)控制。
未勾選和勾選的對(duì)比如上圖。
特別注意：如果控件自身設(shè)置為填充模式，則填充模式的尺寸設(shè)置優(yōu)先級(jí)大于“大小到內(nèi)容”的優(yōu)先級(jí)。
如果選擇的是X水平填充模式，則Y值會(huì)受“大小到內(nèi)容”控制，X值不會(huì)。
不要嘗試父控件設(shè)置為“大小到內(nèi)容”，而子控件又設(shè)置為填充模式。這是錯(cuò)誤的用法。
3.1.5 ZOrder
兄弟控件間的層級(jí)關(guān)系，不是一個(gè)絕對(duì)值。當(dāng)兄弟控件處于同一層級(jí)，上下關(guān)系會(huì)由控件樹的順序及渲染時(shí)的合批等其他因素決定。
建議不要修改該值來(lái)調(diào)整控件之間的層級(jí)關(guān)系，而是通過(guò)在層級(jí)結(jié)構(gòu)樹中調(diào)整他們的層級(jí)順序。
3.2簡(jiǎn)約插槽
除畫布面板槽以外，還有一種非常參數(shù)非常少的類型
如圖所示，此類簡(jiǎn)約插槽只提供了對(duì)齊模式選項(xiàng)以及邊框填充間距參數(shù)設(shè)置。
填充值是內(nèi)容和邊距之間的間隔。
水平對(duì)齊/垂直對(duì)齊則設(shè)置相對(duì)于父控件的對(duì)齊模式。鼠標(biāo)放到對(duì)應(yīng)的圖標(biāo)上，則會(huì)出現(xiàn)提示文字，告知此圖標(biāo)對(duì)應(yīng)的對(duì)齊模式。
按鈕、邊界、覆層、尺寸框的子控件都是簡(jiǎn)約插槽。
3.3布局插槽
用于讓子項(xiàng)基于水平或垂直方向流式依次排列的一種插槽。在引擎中有垂直框、水平框、堆棧框采用此插槽
垂直框是子控件在父控件空間中按控件樹中的順序垂直排列，水平框是子控件在父控件空間中按控件樹中的順序水平排列。
而堆?？騽t是有屬性可以選擇，讓子控件可以水平或垂直排列。
3.3.1尺寸設(shè)置
插槽尺寸選擇有兩種：自動(dòng)和填充
- 自動(dòng)：使用子控件自己的大小，
- 填充：如果選擇紅框中的3個(gè)對(duì)齊模式，則還是子控件自己的大小，如果選擇綠框中的，則會(huì)拉伸子控件以填滿父控件的的空間。
以垂直框舉例，無(wú)論子控件是自動(dòng)大小還是填充大小，當(dāng)父控件寬度≥子控件寬度時(shí)，會(huì)使用子控件的寬度。當(dāng)父控件寬度＜子控件寬度時(shí)，會(huì)壓扁子控件。
3.3.2布局規(guī)則
布局插槽的布局規(guī)則如下，以垂直框舉例：
1、 水平方向上，子控件獨(dú)占剩余空間。
2、 如果子控件設(shè)置填充值，程序會(huì)扣除填充值，剩余尺寸進(jìn)行排版。
3、 之后再扣除自動(dòng)大小的子控件，剩余尺寸進(jìn)行填充。
4、 最后，所有設(shè)置為填充模式的子控件，根據(jù)填充值后的權(quán)重參數(shù)值統(tǒng)一進(jìn)行歸一化計(jì)算分配比例。
子控件可分配高度=(垂直框總高度-所有子控件填充值-自動(dòng)大小子控件高度)*(填充權(quán)重/(填充權(quán)重1+填充權(quán)重2+..+填充權(quán)重n))
可見，使用填充模式的子控件，會(huì)根據(jù)權(quán)重值計(jì)算自身可占據(jù)的空間大小。當(dāng)剩余空間大小不足以完全展示子控件時(shí)，子控件會(huì)被壓縮尺寸。
