UE UMG补充_ue4控件切换器

Widget Switcher（UI选择）

 通过该组件可以在同一个地方显示不同UI

 

可以通过蓝图改变显示的UI

 在UI界面直接设置

ProgressBar(进度条)

可以用动画实现增长，更加自然

Animation

有绑定功能

Addto Viewport

当向已显示的UI中添加子项时，可以不用在Add to Viewport

控件 

SafeZone（安全区域）

        避免在技术上能够使用但玩家看不到的地方显示UI，例如电视显示屏的边缘或iPhoneX上的黑色凹槽和主页栏下方的区域。

        当您将 安全区 控件添加到 设计器 时，该控件将缩放 层级（Hierarchy） 面板中作为其子代的任何其他控件。这些子控件将在出现"不安全"区域时缩放和调整。

不使用Safe Zone控件

将Safe Zone作为根节点　

Invalidation Box （无效化方框）

        围绕的控件的子控件的几何体会被缓存，以便加快Slate的渲染速度。任何被无效化方框缓存的控件都不会进行预处理（pre-passed）、更新或绘制。

        但是如果控件发生变动，它会失效，你需要手动将缓存失效（本质上是将其丢弃），以此强制控件在下一个绘制通道中重新绘制。任何导致控件外观改动的操作都会要求它被无效化。唯一例外是，改动的外观没有存储在控件的顶点缓冲区中（例如材质，更改材质参数不需要将控件无效化）。

使用 无效化方框（Invalidation Box） 时，用户可以通过 C++ 或 InvalidLayout And Volatility 节点（下图所示）在子控件上调用 Invalidate 以强制进行无效化。

 Retainer Box

        把子元素的内容渲染到一个Render Target上去，然后放把它放置到到屏幕上去。

Retainer Box的作用：

　　1、控制UI更新频率

　　2、把渲染后的UI当成Texture，放入材质中，加工后，再显示

• Phase Count，多少帧更新一次子元素。没到更新时间时，子元素处于完全静止状态，包括子元素的tick事件也不会被调用
• Phase，在Phase Count中的第几帧开始更新。例如：Phase=2，Phase Count=60：每60帧更新一次子元素，每次更新周期的第2帧才开始更新。

Window Title Bar Area （窗口拖拽控件 ）

        鼠标在这个地方按下并进行拖拽，可以控制整个程序窗口进行移动。注意：并不是控制UI移动，而是控制运行起来的程序窗口移动。

Window Button Enabled：在控件的右上角显示：最小化、最大化，关闭按钮。（选择此选项后，需要编译才能看到效果）

Toggle Fullscreen：双击Window Title Bar Area的区域可以最大化窗口。

勾选了window Buttons Enabled选项。

InputKeySelector （按键输入） 

        点击这个控件是没有任何反应的，所以想要输入按键需要点击一下此控件，可用于用户自己设定快捷键

On key Selected：当按键输入后抬起时调用。（录制完成的时候调用）

On Is Selectiong Key Changed：当鼠标点击该控件确认要输入时调用一次，输入完成调用一次。

　　

　　

点击On Key Selected控件后，会显示“...”，表示可以接受键盘输入。

　　

Background Blur （背景模糊 ）

Blur Strength

背景的模糊强度。数值越大，模糊越强，GPU 的运行时开销越大。

Throbber （横向动态图标）

Throbber是横向动态图标，与Circular Throbber 环形动态图标相似。

主要设置参数：

• Number Of Pieces：显示图像块的数量
• Animate Horizontally：图像块是否做水平运动，（水平方向上的缩放，如果为true，单个图像会在水平方向上由小到大后到小）
• Animate Vertically：图像块是否做垂直运动，（垂直方向上的缩放，如果为true，单个图像会在垂直方向上由小到大后到小）
• Animate Opacity：图像块的透明度（勾选后，单个图像由有无到有后到无）
• 具体的效果可以将控件放大挨个选中在取消进行查看。
• Image 设置单个图像上的显示图片。

 

 Menu Anchor （菜单锚点）

        可以添加到UI布局中，用来调整弹出菜单在屏幕中的位置。     

        要弹出某个菜单时，Menu Anchor可以做为菜单弹出的位置，Menu Anchor本身不显示任何东西  

菜单类（Menu Class） 调用菜单时要生成的控件蓝图（弹窗）。每次都创建新的控件。 放置位置（Placement） 几个放置选项来决定创建的控件的位置。 适应到窗口（Fit in Window） 如果设为true，那么窗口锚点会试图将菜单全部放入窗口中。 应在窗口后推迟绘图（Should Defer Painting After Window） 可以在窗口内容之后调整是否推迟绘图。 使用应用菜单堆栈（Use Aplication Menu Stack） 如果设为false，你自己可以控制菜单的寿命。 OnGetMenuContent 通过将功能或属性绑定到 OnGetMenuContent 事件（调出弹出窗口时会调用该事件），实现对弹出窗口的自定义（请参阅下文）。 OnGetUserMenuContent 通过将功能或属性绑定到 OnGetUserMenuContent 事件（请求菜单内容时会调用该事件），实现对弹出窗口的自定义（请参阅下文）。 OnMenuOpenChanged 通过将功能或属性绑定到 OnMenuOpenChanged 事件（菜单的打开状态发生变化时调用该事件），实现对弹出窗口的自定义。

菜单锚控件拥有一些控件特有的函数，这些函数可以通过脚本进行调用，下文进行介绍。

选项

描述

关闭（Close）

如果菜单当前打开的话，关闭菜单。

窗口内适应（Fit in Window）

设置锚点菜单在窗口中的适应大小。

获取菜单位置（Get Menu Position）

返回菜单在世界空间中的位置。

有打开的子菜单（Has Open Sub Menus）

检查菜单是否有打开的子菜单。

是否打开（Is Open）

检查目标菜单锚点当前是否打开并返回一个布尔值。

打开（Open）

如果菜单当前关闭的话，打开菜单。

设置位置（Set Placement）

设置放置选项来决定创建的控件的位置。

应在点击时打开（Should Open Due to Click）

返回是否能够通过点击来打开菜单。

切换打开（Toggle Open）

切换菜单的打开状态，可以代替打开/关闭选项来使用。

CircularThrobber （环形动态图标 ）

由圆形小点构成的环

Circular Throbber控件一般在发出网络请求，需要等待一段时间的时候显示出来，告诉玩家游戏正在处于请求阶段，相当于loading。

Circular Throbber.Appearance.Number Of Pieces：可以通知显示的小圆点个数。

Circular Throbber.Appearance.Period，可以控制小圆点转动的速度　

Circular Throbber.Appearance.Radius，可以控制小圆点转动的半径大小。如果Circular Throbber的父级容器是Canvas Panel，则先必须勾选Size To Content，才可以调整Radius值。 

Circular Throbber.Appearnace.Image，可以修改小圆点的图片为自定义的图片 

SpinBox （数字输入框）

        可以手动输入，也可以鼠标控制右侧的选值框箭头进行拖拽更改值

在Content下，可以设置输入的最小值及最大值（包括手动输入和使用选值箭头进行调整）

value：用来设置初始时显示的数值

• On Value Changed：值改变时触发
• On Value Committed：直接输入状态下按回车时触发
• On Begin Slider Movement：开始拖动时触发
• On End Slider Movement：结束拖动时触发

 ComboBox （下拉菜单）

注意：Selected Option：代表的是数组中的内容，而不是代表数组的角标，一定要注意

• On Selection Changed：当选定组合框内容更改时（已选的内容所对应数组角标，与现在要选的内容对应角标不一致时调用）
• On Opening：当打开下拉菜单时调用。（是打开下拉菜单要进行选择时，而不是显示下拉菜单这个控件的时候）

 ExpandableArea （可展开区域）

        分为头部和身体两部分，头部是用来显示标题的区域，调整ExpandableArea控件大小，头部和主体都是一个Named Slot，可以放置任何控件进去，默认情况下Body是收缩的

 

修改Is Expanded，让Body展开或者收缩

Named Slot 

        用户创建的UI成为其他UI的子控件的时候，默认情况下是不能拥有子控件的，给UI添加一个Named Slot，这个UI就可以拥有子控件

详细：UE4-（UI）第八十三课 Named Slot_ue4 name slot default value_懒猫睡大觉的博客-CSDN博客

Border（边框）

        Border是一个容器只能包含一个子元素，可以用来做元素背景

RichTextBlock（富文本）

        可以实现文本混排，可以指定多种样式包括颜色字体大小样式都可以更改。

详细：UE4-（UI）第七十七课RichTextBlock（富文本）_ue4 富文本_懒猫睡大觉的博客-CSDN博客

Text Box

        输入文本（单行输入）

• On Text Changed：当输入框内输入有变化时触发
• On Text Committed：当输入框内确认输入时触发

 TextBox（Multi-Line）

        多行输入

• OnTextChange：当内容改变时调用
• 注意第二个OnTextCommitted方法：按下回车时是换行，只有在文本框是去焦点时才是提交，失去焦点的方法就是点击一下输入框之外的区域
• 另外一个方法就是提供一个Button键确认输入完成，通过点击按钮获取到输入框内的Text内容
   

 Editable Text （可编辑文本）

Editable Text 也有两种，一个是单行可编辑文本，另外一个是多行可编辑文本于TextBox 相似。

DynamicEntryBox （条目创建容器）

• 一个特殊的容器，能够自动创建条目，Dynamic Entry Box没有做性能优化，不适合像ListView和Tile View一样一次可以填充数千条以上的条目。
• Dynamic Entry Box与HorizontalBox、Vertical Box的区别：HorizontalBox、Vertical Box容器中的元素不能在程序运行时进行添加删除，而Dynamic Entry Box可以（Uniform Grid Panel也可以）
• 使用Dynamic Entry Box，需要设置Entry Widget Class，设置后，在视图中出现的只是预览样式，运行后不会出现在屏幕上，注意：该控件与List View 不同，ListView 设置Entry Widget Class需要对应的空间蓝图中应用User Object List Entry接口
• 在Dynamic Entry Box中，只要是用户创建的控件蓝图，都可以被选择作为Dynamic Entry Box的Entry Widget Class。

Num Designer Preview Entries：预览中元素数量

Entry Box Type：容器类型

1、Horizontal（横向排列子控件，跟Horizontal Box一样）

2、Vertical（垂直排列子控件，跟Vertical Box一样）

3、Wrap（自动换行子控件）

4、Overlay（叠加显示子控件，跟Overlay容器一样，所有子控件都叠加在一起）
 

　

　　1、Create Entry：创建一个条目

　　2、Create Entry of Class

　　3、Get All Entries

　　4、Get Num Entries

　　5、Remove Entry：删除一个条目

　　6、Reset

　　7、Set Entry Spacing

Tree View (树形结构)

        Tile View需要提供树形结构数据，TreeView 和Tile View 都是继承自List View。 

详细：UE4-（UI）第七十三课Tree View树形结构_ue treeview_懒猫睡大觉的博客-CSDN博客

Tile View

        TileView也属于ListView，TileView是以小方格的形式展示子控件 

详细：UE4-（UI）第七十二课Tile View_ue4 tileview_懒猫睡大觉的博客-CSDN博客

ListView

        列表使用方法比较复杂，适合显示数以千条的列表。（如果使用水平盒显示数据太多会造成卡顿甚至系统崩溃）

详细：UE4-（UI）第七十一课ListView_ue4 listview_懒猫睡大觉的博客-CSDN博客

WidgetSwitcher（控件切换器 ）

        可以有很多子控件，但一次只会显示一个子控件。所有的子控件默认情况下都是充满整个Widget Switcher容器

Widget Switcher.Active Widget Index：设置要显示的子控件索引

 三、使用Widget Switcher接按钮控件，就可以做出页签，一次只显示一个页面。点击标签可以切换。

Size Box 

        用来指定一个特定的尺寸，只能放一个子控件

• Width Override：无视内容的大小，SizeBox宽度为此值（相当于覆盖图片的size）
• Height Override：无视内容的大小，SizeBox高度为此值（相当于覆盖图片的size）

• Min Desired Width：最小宽度

• Min Desired Height：最小高度

• Max Desired Width：最大宽度。

• Max Desired Height：最大高度。

• Max Aspect Rato：Size Box的X/Y比例(长宽比)

 ScaleBox

        只能有一个子控件，保持一定比例进行缩放

• Fill：填充满整个Scale Box，并且始终保持比例缩放，不会被裁减
• Scale to Fill：填充满整个Scale Box，并且始终保持比例缩放。会被裁减
• Scale to Fit X：只充满横向（X轴），保持比例，Y轴可以被裁减
• Scale to Fit Y：只充满纵向（Y轴），保持比例，X轴可以被裁减
• User Specified Scale：自定义缩放比例，而不是根据Scale Box的尺寸缩放，Scale Box大小缩放在此模式下不影响图片。

Wrap Box（流布局） 

        Wrap Box流布局作用：子控件可以根据Wrap Box的大小自动换行

• Inner Slot Padding：设置子控件横向纵向的留白，可以实现每个子控件之间的间距都是相同的。注意的是在最左侧的子控件是靠边的。
• Wrap Box.Wrap Width：设置强制换行的宽度，而不是根据Wrap Box的实际宽度。需要勾选Wrap Box.Explicit Wrap Width属性。

• Wrap Width：设置每行长度超过一定范围时，元素就显示在下一行，此选项与Explicit Wrap Width 配合使用

• Explicit Wrap Width 选项的勾选，就可以设置每行的宽度值，超过宽度值后才会换行，不超过宽度值无论WrapBox的大小是多少都不会换行（系统默认是子控件的排列长度到达Wrap Box边界才会进行换行）

• Wrap Box子控件.Fill Empty Space：如果当前子控件是所在行最后一个控件，并且后面有剩余的控件，则自动充满
• Fill Span When Less Than：当Wrap Box子控件排列中，无论排列在第几行是不是最后一个，只要一行中总可用空间（是可用空间）小于此值，则自动填充满整行，注意是整行。

Grid Panel （网格布局）

        使用Grid Panel可以做出类似暗黑3一样的物品栏：不同的物品栏占据的物品栏格子不一样。

• Padding：留白
• Horizontal Alignment：横向对齐、Vertical Alignment：垂直对齐
• Row：在Grid Panel中占据的行索引
• Row Span：跨行
• Column：在Grid Panel中占据的列索引
• Column Span：跨列
• Layer：2个控件在相同的单元格就可以设置Layer来调整前后显示顺序
• Nudget.X、Nudget.Y，偏移量，跟Render Transform中Transform作用相同。
• Row Span及Column Span 设置的是单个控件的自身的大小，不影响其他的格子内控件

详细：UE4-（UI）第六十四课Grid Panel_ue4 grid panel_懒猫睡大觉的博客-CSDN博客 

 Uniform Grid Panel（统一大小网格）

        可以设置子控件的所在行和列，元素大小完全相同。可设置子控件的填充格式，并设置所在行列，格子会自动增加，并且格子大小完全一致。

可以在Grid Panel 细节面板设置每个格子四周留白，这里是统一设置，更改后，所有格子都会改变。

功能 

 Is volatile

        Is Volatile：如果UI的某个控件每帧都会更新，位置或者布局每帧都会更改，就不需要缓存信息功能（缓存的是位置或者布局信息），该选项勾选就会提高性能。

        Is Volatile勾上，告诉引擎不要缓存这个控件

 Clipping

• Inherit：不裁剪 
• Clip to Bounds：裁剪到边界（裁剪掉超出范围区域，多个容器同时存在时，并且裁剪模式为该选项，默认显示容器裁剪后的交集区域）
• Clip To Bounds-Without Intersecting（Advanced）：自身容器下面的元素只受自己影响，不受容器父级容器的影响。
• Clip To Bounds- Always（Advanced）：一定裁剪，Clip To Bounds- Always的权限要大于Clip To Bounds-Without Intersecting
• 与Clip To Bounds 功能一样，只是对Text 做了一些性能上的优化