UE4-UMG

1， 锚的概念

锚（Anchor）用来定义 UI 控件在 画布面板 上的预期位置，并在不同的屏幕尺寸下维持这一位置 。锚也可以理解为就是用来设置布局方式的，随着屏幕尺寸的改变，定义这个UI相对于父节点怎么停靠以及是否拉伸。

Detail面板也有预设的锚，大多数情况下预设锚就可以满足设计需求:

Position X 、Position Y 就是对其点(Alignment)相对于锚点的位置偏移

Size X、Size Y 就是这个空间的宽高

Size To Content 定义控件尺寸是否有由控件的内容指定，比如在一个勾选了Size To Content的Canvas Panel里边放一个Button, 这个Canvas Panel的Size会随着里边Button Size的变大而变大，减小而减小。

ZOrder 指定层级关系，值越大越后渲染，越在上层

2， 常用控件

•  Border 是一个只能包含一个子控件的容器，提供使用边框图像和可调节的填补将其包围起来的机会。

• Button 按钮~

• Check Box 复选框 可以显示“未选中”、“选中”和“不确定”三种切换状态，可以使用复选框（Check Box）控件来制作经典复选框、切换按钮或单选按钮

• Image  图片，可以在画刷选项里给他选一个图片，也可以在画刷选项里给他着色（Tint）就相当于在上面蒙一层颜色

• Name Slot 是一个可用任何其他控件来填充的外部槽，填充的控件的大小由这个槽来控制

• Progress Bar 进度条 ，Bar Fill Type 可以选择Left to Right、Right to Left、Fill from Center、Top to Bottom、Bottom to Top

• Rich Text Block 富文本官方文档https://docs.unrealengine.com/zh-CN/Engine/UMG/UserGuide/UMGRichTextBlock/index.html

• Slider 滑动条~

• Text 文本 可以设置锚点、大小、字体、颜色、描边、阴影、是否自动行

• ComboBox 包含列表的下拉菜单

• Spin Box 数字输入框，就像ue4里很多属性输入框一样，允许直接输入数字或点击并滚动数字，数字的大小字体什么的在Display-Font 里设置

• TextBox 单行文本输入框

• TextBox(Multi-Line) 多行文本输入框

• Editable Text 相当于简易版的Text Box但没有框背景

• Editable Text(Mutil-Line) 相当于简易版的Text Box(Multi-Line) 但没框背景

• Canvas Panel画布面板 可以在上面摆放任意控件
• Grid Panel 网格面板，在所有子控件之间平均分割可用空间的面板。Fill Rules可以设置每个单元格内控件的拉伸比重，这个是Grid Panel自身的属性，选中单元格内控件，该控件Grid Slot中：

   

   

  Padding：表示距离单元格内边距，也可以理解为留白 距离单元格留多大空隙，

  Horizontal Alignment：横向对齐、Vertical Alignment：垂直对齐

  Row：表示在Grid Panel中的行索引

  Row Span：跨行

  Column：在Grid Panel中的列索引

  Column Span：跨列

  Layer：相当于ZOrder，当两个控件在一个单元格中的时候通过设置Layer调整显示顺序

  Nudget.X、Nudget.Y，偏移，跟Render Transform中Transform作用相同。

  Grid Panel的单元格默认情况下是尽可能的小，如果手动把一个控件的列索引设置成原来的列索引+1，做出空出一列的效果，但是实际显示效果并没有空出一列，其实内部已经空出了一个空的单元格，只不过这个单元格中没有控件，又遵循尽可能小的原则所以看不出来，这时候可以通过Fill Rules设置一下单元格的拉伸比重，就可以显示出这个空的单元格了。

• Horizontal Box 水平框，是内部控件水平布局

• Overlay 允许控件上下堆叠的一个容器，其内部的控件叠加在一起，不能设置位置，也不能设置ZOrder(层级只能在编辑器里边手动调节)，压根就没有ZOrder属性，内部控件可以调整自己的布局方式（上、下、左、右停靠，水平方向、垂直方向拉伸）

• Safe Zone 拉取平台安全区信息并添加填充。例如刘海屏，如果UI按等比拉伸可能会被上边的刘海挡住，如果把Saft Zone作为根节点，Saft Zone内的子控件就不会被刘海挡住了

• Scale Box 缩放框，允许用户按所需大小放置内容并将其缩放为符合框内所分配区域的约束尺寸的控件。Stretching属性项来设置拉伸方式（Scale to Fill充满整个框、Scale to Fit X充满X轴向、Scale to Fit Y充满Y轴向还是Scale to Fit 保持原比例填充）

• Scroll Box 可以设置横向、纵向滚动的框

• Size Box  用于指定所需尺寸。用了再说吧

• Uniform Grid Panel 在所有子控件之间平均分割可用空间的面板。可以设置子控件内边间距和所在的行列索引值

• Vertical Box 和横向布局的框差不多，只是方向变成了纵向而已

• Widget Switcher 控件切换器类似于选项卡控件，但没有选项卡，你可以自行创建并与此控件组合以获得类似于选项卡的效果。一次最多只显示一个控件。通过设置Active Widget Index的值来控制显示那个子控件。

• Wrap Box 该控件会将子控件从左到右排列，超出其宽度时会将其余子控件放到下一行。

• Circular Throbber 循环展示图像的动态浏览图示控件。
• Menu Achor 菜单锚 本身不显示任何东西，只是用来指定一个位置，弹出菜单将从此处调出并被锚定在此处。
• Native Widget Host 容器控件，可包含一个子Slate控件。只需要在某个UMG控件中嵌套一个原生控件时，应使用该控件。用的很少…
• Spacer  隔离控件（Spacer）提供与其他控件之间的自定义填充。隔离控件并不进行视觉呈现，在游戏中不可见。
• Throbber  动画式的动态浏览图示（Throbber）控件，在一行中显示几个缩放的圆圈（例如，可以用来表示正在进行加载）。

•  Expandable Area 可扩展区域，它包含Header和Body两个部分。借助它，你可以折叠或展开容器中的子控件。

3， Sprite切图

可以在Brush.Image 中选则Sprite,选择保存的位置并命名（一般情况下把那个合图命名为Spritex_0）。然后双击打开编辑界面

a，选择源文件 b，点击编辑源文件按钮进入编辑状态

编辑源文件 可以选动全部导出，也可以按住Ctrl+双击某个图来导出单个图

UE4-UMG

原文：https://www.cnblogs.com/hansenya/p/12661691.html