Slate中图标的使用

在Slate控件中,图标的使用除了直接引用图片外,还是有一些其他便利的方法的。

当前UE4版本4.8.3。

目前官方的版本已经到4.9.0了,但是由于FMod并没有更新对应版本的插件,项目无法迁移,故而依然使用4.8.3版本。

自带图标

UE4自带的图标在对SWidget进行封装时比较容易遇到。UWidget在编辑器中的显示图标使用的就是自带的图标系统。通常为对如下的函数进行覆盖实现:

这些图标都是在引擎内部预定义的,通过搜索就能看到这些图标的定义。

其中IMAGE_BRUSH是同一个文件中定义的宏

ICON16x16也同样是宏定义,再次就不赘述了。

自带图标也可以直接在控件中进行使用

Icon Font

Icon Font添加图标确实非常的方便,UE4编辑器中也有使用到Font Awesome作为图标显示。

由于Font Awesome比较有名,项目中使用的也是它。

C++中的使用

要在C++中使用Font Awesome,首先要对UFont对象进行生成。

其中Font部分为直接对导入的字体进行引用复制所得。接下来只要使用STextBlock来使用相应的图标就可以了

上面的代码是实现的列表的元素显示,最终的结果如下:

image

如果要在蓝图中进行使用的话,需要首先将字体的使用制定为对应的Icon Font。

通常Icon Font在提供的时候都会有每一个图标对应的Unicode编码,Font Awesome的编码集在[这里]。

Font Awesome的编码集页面是可以直接复制对应的字符的,但是也有只提供了编码集的情况出现。

只要有编码集就可以对Icon进行使用了,要输入对应的Unicode码有很多种方式,这里提供两种。

Win+R输入并运行charmap,在其中选择对应的图标并复制其Unicode码。

在Word中输入对应的Unicode码,选中这些值按Alt+X就可以实现转换。

由于UE4编辑器中使用的字体并非对应的Icon Font,所以会以乱码显示,不过并不影响实际使用。

排版

使用到图标的时候有时需要对布局进行控制,布局的具体操作可以参看官方的Slate控件文档

其中需要注意的是,Padding布局使用的是数据结构FMargin。作用参看FMargin本身的构造函数定义即可,只是Padding参数本身对FMargin进行了封装,光看官方的例子会有一定的迷惑性。

对于FMargin,当参数为4个时分别对应Left, Top, Right, Bottom;为2个时对应Horizontal和Vertical;为1个时则对应所有方向。

另外要注意的是在列表中AutoWidth必须手动指定,并不像文档中所描述的一样是默认启动的。

| |
本博客所有内容遵循CC BY-NC-SA 4.0协议, 如有转载,请注明出处。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">