【虚幻5】虚幻UMG（UI界面）学习笔记（一）

一、创建界面蓝图

1.1基础知识

虚幻UMG即是类似Unity的UGUI的界面布局设计工具，其在虚幻引擎中也是属于蓝图，但创建入口并不在【蓝图】菜单中，而是在【用户界面】中。
创建的UI界面称之为“控件蓝图”。

1.2如何创建一个UI界面

创建流程

在虚幻内容浏览器中点击左上角的【+添加】，并在弹出的菜单中选择【用户界面】，然后在打开的二级菜单中选择【控件蓝图】。

图片.png

图片.png

然后在如上图所示的界面中，点击【用户控件】即可创建一个界面控件蓝图。然后根据你或者项目的需求，修改该控件蓝图的名字。

双击该控件蓝图会打开控件蓝图编辑器界面。具体编辑器布局说明不再赘述，请参考虚幻官方文档

二、层级（控件树）

控件蓝图编辑器左下角的层级，显示了这个界面所有控件的树状父子关系结构。有别于Unity和Cocos的UI的层级关系结构，虚幻的控件子控件数量，根据父控件的类型，做了严格的数量限制。

有些控件不允许有子控件，有些控件允许1个子控件，有些则允许多个子控件。

在此对所有的控件子对象数量进行了归纳和总结。

三、插槽Slot类型

插槽是UMG的最重要布局属性，其决定了该控件在父控件下的锚定参数。

当你在一个控件下添加了子控件时，该子控件的细节面板第一个类别就是【插槽】

插槽参数

插槽是父控件赋予给子控件的属性，因此在细节类别标题插槽文字后，会以括号的形式标注插槽类型。

基于父控件的不同，插槽所展示出的参数也不一样。画布面板下的子控件插槽参数最自由。其他一些面板的子控件则只能设置是否填充和对齐模式。

UMG的插槽Solt，类似Unity中GameObject的Transform

3.1画布面板槽（Canvas Panel Slot）-自由插槽

图片.png

3.1.1锚点

图片.png

锚点决定了子控件在父控件下的对齐规则。通常直接点击【锚点】的下拉菜单，在弹出的九宫格视图中，按需选择预置的锚定即可。

选择红框中的锚点类型时，为非填充模式。而绿色框中的为填充模式。不同的模式将影响3.2位置和尺寸中给出的参数类型。

九宫格下方的描述说明：

• 长按Shift更新对齐进行匹配：会根据所选择的锚点，改变子控件的对齐中心点位置，但不会把子控件和锚点的位置XY进行重置。
• 长按Ctrl更新位置进行匹配：此时会根据所选择的锚点，改变子控件的位置，将子控件和锚点的位置XY重置为0。

3.1.2锚点修饰字段

图片.png

图片.png

图片.png

基于用户在锚点部分选择的锚定方式，锚点下方的修饰字段展示的参数类型分为：
① 位置Position+尺寸Size
② 偏移值Offset
③ 位置+尺寸+偏移值

当用户锚点选择红框中的锚定模式时，修饰字段为位置和尺寸。当选择红框中的锚定模式，则根据填充模式显示偏移值参数。

3.1.3对齐

图片.png

对齐即是控件自身的中心点（Pivot），默认为{0,0}位置，控件会以该点作为自己的锚定中心点，去对齐锚点位置。

坐标系示意图

上图为中心点坐标设置示意图，在引擎的UMG中多尝试设置不同的值进行感受。

图片.png

3.1.4大小到内容

图片.png

勾选此选项，则控件的大小不再由“尺寸X”和“尺寸Y”决定。而是由子控件大小，或者自身图像原始尺寸，或者文本实际大小来控制。

未勾选效果

勾选效果

未勾选和勾选的对比如上图。

特别注意：如果控件自身设置为填充模式，则填充模式的尺寸设置优先级大于“大小到内容”的优先级。
如果选择的是X水平填充模式，则Y值会受“大小到内容”控制，X值不会。
不要尝试父控件设置为“大小到内容”，而子控件又设置为填充模式。这是错误的用法。

3.1.5 ZOrder

图片.png

兄弟控件间的层级关系，不是一个绝对值。当兄弟控件处于同一层级，上下关系会由控件树的顺序及渲染时的合批等其他因素决定。
建议不要修改该值来调整控件之间的层级关系，而是通过在层级结构树中调整他们的层级顺序。

3.2简约插槽

除画布面板槽以外，还有一种非常参数非常少的类型

图片.png

如图所示，此类简约插槽只提供了对齐模式选项以及边框填充间距参数设置。
填充值是内容和边距之间的间隔。
水平对齐/垂直对齐则设置相对于父控件的对齐模式。鼠标放到对应的图标上，则会出现提示文字，告知此图标对应的对齐模式。
按钮、边界、覆层、尺寸框的子控件都是简约插槽。

3.3布局插槽

用于让子项基于水平或垂直方向流式依次排列的一种插槽。在引擎中有垂直框、水平框、堆栈框采用此插槽

图片.png

垂直框是子控件在父控件空间中按控件树中的顺序垂直排列，水平框是子控件在父控件空间中按控件树中的顺序水平排列。
而堆栈框则是有属性可以选择，让子控件可以水平或垂直排列。

图片.png

3.3.1尺寸设置

插槽尺寸选择有两种：自动和填充

• 自动：使用子控件自己的大小，
• 填充：如果选择红框中的3个对齐模式，则还是子控件自己的大小，如果选择绿框中的，则会拉伸子控件以填满父控件的的空间。

以垂直框举例，无论子控件是自动大小还是填充大小，当父控件宽度≥子控件宽度时，会使用子控件的宽度。当父控件宽度＜子控件宽度时，会压扁子控件。

父控件宽度≥子控件宽度时

父控件宽度＜子控件宽度时

3.3.2布局规则

布局插槽的布局规则如下，以垂直框举例：
1、 水平方向上，子控件独占剩余空间。
2、 如果子控件设置填充值，程序会扣除填充值，剩余尺寸进行排版。
3、 之后再扣除自动大小的子控件，剩余尺寸进行填充。
4、 最后，所有设置为填充模式的子控件，根据填充值后的权重参数值统一进行归一化计算分配比例。

图片.png

子控件可分配高度=(垂直框总高度-所有子控件填充值-自动大小子控件高度)*(填充权重/(填充权重1+填充权重2+..+填充权重n))

布局效果示例

可见，使用填充模式的子控件，会根据权重值计算自身可占据的空间大小。当剩余空间大小不足以完全展示子控件时，子控件会被压缩尺寸。