umg控件属性分类及常用控件介绍

ui控件属性分类

1. common通用属性

   控件名

   是否是变量

   搜索框

2. slot

锚点，校准点，尺寸适应内容，z order

3. 外观

style， tint， draw as

4. font：

Size 尺寸

UMG制作时默认dpi为96像素/英寸，psd默认dpi是72像素/英寸。

在GUI设计时将dpi设为96，或者将72dpi下字体的字号乘以0.75，都能还原效果图中的效果。

Font Material 字体材质

UE4中可以对UI附加材质来实现贴图效果

Justification 对齐方式

自动换行

5. 交互性

is Focusable勾选后，这个控件在接收到点击事件后会打断其他所有正在进行的操作。此处勾选应视情况而定。强打断界面入口可通过勾选来打断移动、攻击等操作。而技能、吃药、切换武器等需要同时配合其他操作的入口则不能勾选。

点击下拉能进行更细节的控制。例如当button的点击事件阻挡了scrollbox接收滑动事件时，则可以将touch method设为precise tap。

6. 行为

tool tip text悬停提示：鼠标悬停时显示的提示文字内容

visibility：visible可见并接收交互事件

collapsed：不可见但不占用空间

hidden：不可见但占用空间，要计算他和它的子孙的空间，不接受交互事件

hit test invisible：可见，且他和它的子节点不接收点击事件

set hit test visible：可见且自身不接收点击事件，不影响子控件

Tool tip widget：tip弹框

render opaque：渲染透明度

7. 裁剪

clip to bound

8. 变形

偏移量，缩放，倾斜，角度，中心点

9. 事件

常用控件介绍

4种：common，input，panel，user created

1. Image：图片的属性包括 Slot、Appearance、Behavior、Render Transform、Clipping，具体内容可以查询前面的介绍。

   由于image的原始资源就是一个白色块，因此任何纯色块资源都不需要额外出资源，只需对image进行染色即可。

   这里需要特别注意的是：image不仅仅可以引用图片资源，可以添加材质资源，可以通过材质来制作粒子、模型、特效等等丰富的效果。

2. Text 文本：文本的属性包括Slot、Font、Behavior、Warpping、Render Transform、Clipping，具体内容可以查询前面的介绍。

   在Content内输入内容，可以通过shift+enter进行换行

3. 富文本：富文本格式可以在一个文本框内显示出不同的字体格式甚至图片文字，为了实现这一效果，我们首先要创建一个字体格式表格。然后就可以在UMG中引用这个表格资源来设置文本。

4. Button 按钮：按钮的属性包括Slot 、Appearance、Interaction、Behavior、Render Transform、Clipping，具体内容可以查询前面的介绍。

   值得注意的是按钮有Normal/Hovered/Pressed/Disabled四种状态，在开发时至少需要为前三种设置资源。

   5 CheckBox 复选框

   复选框控件可以添加一个子节点。按钮的属性包括Slot、style、Appearance、Interaction、Behavior、Render Transform、Clipping，具体内容可以查询前面的介绍。

6 Progress Bar 进度条

7 Slider 滑块

8 Text Box 文本输入框

输入框不能添加子节点

文本输入有单行输入(Common>Text Box)和多行输入(Input>Text Box Multi-Line)两种。

9 Combobox 下拉框

下拉菜单不能添加子节点。

10 Canvas Panel 画布面板

画布面板是一种基础的面板，其允许在任意位置布局、固定控件，并将这些控件与画布的其它子项按Z轴顺序排序。画布面板是非常适用于手动布局的控件。

如上图，只有Canvas Panel可以这么随意的摆放控件位置，但也更难对齐。因此一般有较强的栅格系统的设计排版不建议采用Canvs Panel。

11 Horizental/Vertical Box 水平/竖直框

水平框和竖直框的内容基本一致，因此在这一并介绍了。

有两个需要重点关注的地方：

• 通过padding设置子控件之间的间距

如果是数量确定，内容确定的列表，可以手动设置padding。

如果数量不确定或内容不确定需要程序动态添加的列表，则需要把间距提前设计好放在node中。

• 子控件的尺寸不再能自由定义

这里提供了两种调节尺寸的方式

Auto代表自动调节尺寸，与之前Slot中的Size to Content一致

Fill代表自动填满剩余空间

12 Grid Box 网格面板

网格面板可以为你创建一套网格系统，并让子控件在该网格内进行布局。

上图的网格系统将区域划分为了一个3x6的网格，其中第二行的高度是其余两行的两倍，那么我们就可以设置GridBox。

划分好网格后，只需设置子节点的参数即可占用网格。

13 Scroll Box 滚动框

滚动框容器使得内容过多时可以在限定范围内进行滚动。

14 SafeZone 安全区

安全区控件的子节点会自动避开全面屏的安全区来进行适配。

15 Warp Box 自动换行容器

该控件会将子控件从左到右排列，超出其宽度时会将其余子控件放到下一行。常见于背包或仓库的设计中。

16 Widget Switcher 选项卡切换器

控件切换器常见于Tab切换页面，切换器的子控件中每次一次最多只会显示一个

17 Background Blur 背景模糊

这是一个能够自动模糊下层的效果。

18 User Created

所有创建好的UMG都可以在User Created里面被检索到

 

也就是我们常说的node，而Named Slot就是为这些node的引用提供坐标和尺寸的，和ccs中的节点有点类似。