引入

虚幻引擎里的UMG和其他程序的UI设计不同，多用于游戏。复杂的菜单层级实现起来，十分繁琐。

比如确认弹窗，信息提示。

使用ListView时，如果展示的是玩家成绩，不需要支持成绩的详细信息。而列表项的配置，在UI设计里，非常频繁。

Common UI的出现，解决了上述的痛点，以及，在支持多控制器的情形，可以显示当前所使用控制器按键的图标。

其他还有一些便于开发的特性，将在使用中介绍。

使能

1. 勾选插件
   

   

   
   

   注意：该插件为测试版本
   

   

   
   

2. 设置视口基类
   

   

   
   

新增

1. UserWidget派生类
   

   

   
   

2. 控件
   

   

   
   

   

   
   

3. 蓝图类
   

   

   
   

4. 资产
   

   

   
   

控件和样式

在之前的UMG设计中，如果某一类控件具有相同的UI设计，我们需要为每个控件重复应用配置。如按钮悬浮和点击样式，字体颜色和大小，相当繁琐且无意义。

Common UI提供4类样式自定义：

类	应用给
CommonBorderStyle	CommonBorder
CommonButtonStyle	CommonButtonBase
CommonTextScrollStyle	CommonText
CommonTextStyle	CommonText

• 应用给控件
  

  

  
  

• CommonButtonBase的事件支持双击
  

  

  
  

栈容器控件

Palette > UNCATEGORIZED > Common Activatable Widget Stack

在验证过程中，发现Stack可以在普通的User Widget中使用，也可以在Common User Widget和Common Activatable Widget中使用。而栈内的元素，必须为Common Activatable Widget。

栈容器控件在层级菜单中尤为重要，在上级菜单存在时，不允许操作位于之下的菜单；逐级返回时，哪层菜单有效，由容器控件负责处理。

栈容器控件的出栈操作有多种实现方法，而入栈操作无论如何得通过Stack完成。在设计时，需保证任一层级的菜单都可以访问到Stack。一个解决方案，即把Stack所在Widget保存在PC。

另外，与常规流程 Create Widget > Add to Viewport 不同，当我们对Stack执行入栈操作时，由Stack将指定类型控件添加到视口。也就是说，控件的初始化会受到相应限制。

容器控件还有Common Activatable Widget Queue。

非必要不建议使用Common Activatable Widget。

栈操作

Common Activatable Widget操作

实现

1. PC中创建Stack所在UserWidget
   

   

   
   

2. 获取Stack
   

   

   
   

3. 入栈
   

   

   
   

4. 出栈：使用Remove Widget
   

   

   
   

5. 出栈：使用Deactivate Widget
   

   

   
   

6. 清空栈
   

   

   
   

效果

Focus

还记得《VR中的UMG》中，设置控件Keyboard Focus吧？

一则使用键鼠和Gamepad操作时，按钮无Hover/Focus态，再者，对默认Focus的按钮需要额外设置。

Common UI中，键鼠控制下，按钮的Focus态仍和之前一样，使用Gamepad时，按钮具有Hover和Pressed态。

设置Common Activatable Widget默认Focus

效果

Common UI Input

资产

类型	说明
CommonUIInputData	定义全局的确认和返回输入
DataTable > CommonInputActionDataBase	给出行和语义的对应关系，含键鼠和一个Gamepad的键位设置
Common UI InputActionDataTable	同DataTable > CommonInputActionDataBase

Common UI DataTable

在设置键位时，可以分两类。一类是用于导航的确认与后退，另一类是含具体语义的操作，如打开菜单，返回顶层等。

我将确认与后退命名为Confirm和Back，后两者命名为Menu和ReturnToTop。

	键盘键位	Gamepad键位
Confirm	SPC	Face Button Bottom
Back	B	Face Button Right
Menu	M	Face Button Left
ReturnToTop	Q	Face Button Top

需要注意的是，关于导航，确认语义无关设置键位，只有键盘 SPC 和Gamepad Face Button Bottom 生效，后退语义由设置键位决定。

1. 添加行
   

   

   
   

2. 设置行
   

   

   
   

CommonUIInputData

1. 设置全局导航的确认与后退
   

   

   
   

2. 在项目设置中应用CommonUIInputData
   

   

   
   

为Common Activatable Widget使能后退

效果

应用非导航语义的Common UI DataTable行

注意：CommonButtonBase在Common Activatable Widget中

效果

多控制器键位图标

为CommonButtonBase添加Common Action Widget

使用CommonButtonBase的Triggering Input Action

或者

为CommonButtonBase设置的Triggering Input Action对应到此处

下载图标

Icon Archive

Free for non-commercial use

CommonInputBaseControllerData资产

分别为键鼠和Gamepad键位设置图标

	资产	ReturnToTop	Menu
键鼠	BP_CUControllerData_PC	Q	M
Gamepad	BP_CUControllerData_Gamepad	X	Y

说明：Gamepad右边键位的通用名称为Face Button Bottom/Right/Left/Top。A/B/X/Y的位置与Gamepad厂家有关。

1. BP_CUControllerData_PC
   
   通过Set Button Image Height To统一设置图片高度
   

   

   
   

2. BP_CUControllerData_Gamepad
   
   Gamepad Display Name之后会用到
   

   

   
   

应用ControllerData

• Windows平台
  
• 默认键鼠输入
  
• 支持键鼠和Gamepad
  
• Default Gamepad Name与上面的Gamepad Display Name一致
  
• 分别使能键鼠和Gamepad
  

使用键鼠时

使用Gamepad时

Common UI与Enhanced Input

设置Common UI DataTable时，单行的常规设置支持键鼠和一个Gamepad。因为现在没有复杂的使用场景，需求不明确。

将Common UI与Enhanced Input结合使用，需为CommonButtonBase设置Triggering Enhanced Input Action，在InputData中也是如此。同时仍需指定Trigger Input Action，用于控制器键位图标。

1. 为Common UI使能Enhanced Input支持
   

   

   
   

2. 创建Input Action和Input Mapping Context，并在PC使能
   

   

   
   

   

   
   

   

   
   

3. Data Asset > CommonMappingContextMetadata
   
   可以理解为，为Common UI指示使能的Enhance Input > Input Action
   

   

   
   

4. 设置Enhance Input > Input Action
   
   可以理解为，为Enhance Input > Input Action设置支持Common UI
   

   

   
   

为InputData设置Enhanced Input > Input Action

为Commn UI使能Enhanced Input支持后，InputData出现Enhanced Input Click/Back Action。其中，若不设置Click Action，也能使用默认键位；想要使用后退功能，则需设置Back Action。

为CommonButtonBase设置Triggering Enhanced Input Action

为Common Activatable Widget添加InputMappingContext

如果没有在PC中使能InputMappingContext，Common Activatable Widget支持IMC使能。