[{"data":1,"prerenderedAt":180},["ShallowReactive",2],{"\u002F2015-08-18-slate-icons":3},{"id":4,"title":5,"body":6,"date":155,"description":12,"extension":156,"meta":157,"navigation":160,"path":172,"seo":173,"stem":174,"tags":175,"__hash__":179},"blogs\u002F_legacy\u002F2015\u002F2015-08-18-slate-icons.md","Slate中图标的使用",{"type":7,"value":8,"toc":148},"minimark",[9,13,16,19,23,26,37,40,46,49,55,58,61,67,71,74,77,80,83,89,92,98,101,112,115,118,121,124,127,130,139,142,145],[10,11,12],"p",{},"在Slate控件中，图标的使用除了直接引用图片外，还是有一些其他便利的方法的。",[10,14,15],{},"当前UE4版本4.8.3。",[10,17,18],{},"目前官方的版本已经到4.9.0了，但是由于FMod并没有更新对应版本的插件，项目无法迁移，故而依然使用4.8.3版本。",[20,21,22],"h2",{"id":22},"自带图标",[10,24,25],{},"UE4自带的图标在对SWidget进行封装时比较容易遇到。UWidget在编辑器中的显示图标使用的就是自带的图标系统。通常为对如下的函数进行覆盖实现：",[27,28,33],"pre",{"className":29,"code":31,"language":32},[30],"language-text","const FSlateBrush* UCListViewWidget::GetEditorIcon() \n{     \n  return FUMGStyle::Get().GetBrush(\"Widget.TextBlock\"); \n}\n","text",[34,35,31],"code",{"__ignoreMap":36},"",[10,38,39],{},"这些图标都是在引擎内部预定义的，通过搜索就能看到这些图标的定义。",[27,41,44],{"className":42,"code":43,"language":32},[30],"\u002F\u002F UMGStyle.cpp  \n\nStyle->Set(\"Widget.NativeWidgetHost\", new IMAGE_BRUSH(TEXT(\"NativeWidgetHost\"), Icon16x16));\n",[34,45,43],{"__ignoreMap":36},[10,47,48],{},"其中IMAGE_BRUSH是同一个文件中定义的宏",[27,50,53],{"className":51,"code":52,"language":32},[30],"#define IMAGE_BRUSH( RelativePath, ... ) FSlateImageBrush( Style->RootToContentDir( RelativePath, TEXT(\".png\") ), __VA_ARGS__ )\n",[34,54,52],{"__ignoreMap":36},[10,56,57],{},"ICON16x16也同样是宏定义，再次就不赘述了。",[10,59,60],{},"自带图标也可以直接在控件中进行使用",[27,62,65],{"className":63,"code":64,"language":32},[30],"const FSlateBrush *m_Icon = FUMGStyle::Get().GetBrush(\"Palette.Icon\");\n \nreturn SNew(STableRow\u003C FFileListItemPtr >, OwnerTable)\n[\nSNew(SHorizontalBox)\n    + SHorizontalBox::Slot()\n    .HAlign(HAlign_Left)\n    .AutoWidth()\n    [\n        SNew(SImage)\n        .Image(m_Icon)\n    ]\n    + SHorizontalBox::Slot()\n    .HAlign(HAlign_Left)\n    [\n        SNew(STextBlock)\n        .Text(FText::FromString(Item->GetDisplayName()))\n        .Font(FSlateFontInfo(FPaths::EngineContentDir() \u002F TEXT(\"Slate\u002FFonts\u002FRoboto-Bold.ttf\"), 12))\n    ]\n];\n",[34,66,64],{"__ignoreMap":36},[20,68,70],{"id":69},"icon-font","Icon Font",[10,72,73],{},"Icon Font添加图标确实非常的方便，UE4编辑器中也有使用到Font Awesome作为图标显示。",[10,75,76],{},"由于Font Awesome比较有名，项目中使用的也是它。",[10,78,79],{},"C++中的使用",[10,81,82],{},"要在C++中使用Font Awesome，首先要对UFont对象进行生成。",[27,84,87],{"className":85,"code":86,"language":32},[30],"FontAwesome = Cast\u003CUFont>(StaticLoadObject(UFont::StaticClass(), NULL, TEXT(\"Font'\u002FGame\u002FResource\u002FFont\u002Ffontawesome-webfont.fontawesome-webfont'\")));\n",[34,88,86],{"__ignoreMap":36},[10,90,91],{},"其中Font部分为直接对导入的字体进行引用复制所得。接下来只要使用STextBlock来使用相应的图标就可以了",[27,93,96],{"className":94,"code":95,"language":32},[30],"return SNew(STableRow\u003C FFileListItemPtr >, OwnerTable)\n    [\n        SNew(SHorizontalBox)\n        + SHorizontalBox::Slot()\n        .HAlign(HAlign_Left)\n        .AutoWidth()\n        .Padding(FMargin(0.0f, 3.0f, 1.0f, 0.0f))\n        [\n            SNew(STextBlock)\n            .Font(FSlateFontInfo(FontAwesome, 12))\n            .Text(FText::FromString(FString(Item->IsDirectory ? TEXT(\"\\xf07b\" \u002F*fa-folder*\u002F) : TEXT(\"\\xf15b\" \u002F*fa-file*\u002F))))\n        ]\n        + SHorizontalBox::Slot()\n        .HAlign(HAlign_Left)\n        .Padding(FMargin(3.0f, 3.0f, 0.0f, 0.0f))\n        [\n            SNew(STextBlock)\n            .Text(FText::FromString(Item->GetDisplayName()))\n            .Font(FSlateFontInfo(FPaths::EngineContentDir() \u002F TEXT(\"Slate\u002FFonts\u002FRoboto-Bold.ttf\"), 12))\n        ]\n \n    ];\n",[34,97,95],{"__ignoreMap":36},[10,99,100],{},"如果要在蓝图中进行使用的话，需要首先将字体的使用制定为对应的Icon Font。",[10,102,103,104,111],{},"通常Icon Font在提供的时候都会有每一个图标对应的Unicode编码，Font Awesome的编码集在[",[105,106,110],"a",{"href":107,"rel":108},"https:\u002F\u002Ffortawesome.github.io\u002FFont-Awesome\u002Fcheatsheet\u002F",[109],"nofollow","这里","]。",[10,113,114],{},"Font Awesome的编码集页面是可以直接复制对应的字符的，但是也有只提供了编码集的情况出现。",[10,116,117],{},"只要有编码集就可以对Icon进行使用了，要输入对应的Unicode码有很多种方式，这里提供两种。",[10,119,120],{},"Win+R输入并运行charmap，在其中选择对应的图标并复制其Unicode码。",[10,122,123],{},"在Word中输入对应的Unicode码，选中这些值按Alt+X就可以实现转换。",[10,125,126],{},"由于UE4编辑器中使用的字体并非对应的Icon Font，所以会以乱码显示，不过并不影响实际使用。",[20,128,129],{"id":129},"排版",[10,131,132,133,138],{},"使用到图标的时候有时需要对布局进行控制，布局的具体操作可以参看官方的",[105,134,137],{"href":135,"rel":136},"https:\u002F\u002Fdocs.unrealengine.com\u002Flatest\u002FCHN\u002FProgramming\u002FSlate\u002FWidgets\u002Findex.html",[109],"Slate控件文档","。",[10,140,141],{},"其中需要注意的是，Padding布局使用的是数据结构FMargin。作用参看FMargin本身的构造函数定义即可，只是Padding参数本身对FMargin进行了封装，光看官方的例子会有一定的迷惑性。",[10,143,144],{},"对于FMargin，当参数为4个时分别对应Left, Top, Right, Bottom；为2个时对应Horizontal和Vertical；为1个时则对应所有方向。",[10,146,147],{},"另外要注意的是在列表中AutoWidth必须手动指定，并不像文档中所描述的一样是默认启动的。",{"title":36,"searchDepth":149,"depth":150,"links":151},2,3,[152,153,154],{"id":22,"depth":149,"text":22},{"id":69,"depth":149,"text":70},{"id":129,"depth":149,"text":129},"2015-08-18","md",{"layout":158,"status":159,"published":160,"author":161,"author_login":162,"author_email":163,"author_url":164,"wordpress_id":165,"wordpress_url":166,"date_gmt":167,"excerpt":168},"post","publish",true,{"display_name":162,"login":162,"email":163,"url":164},"chaoshikari","chaoshikari@gmail.com","\u002F",1524,"\u002F\u002F?p=1524","2015-08-18 04:53:15 +0000",{"type":7,"value":169},[170],[10,171,12],{},"\u002F2015-08-18-slate-icons",{"title":5,"description":12},"_legacy\u002F2015\u002F2015-08-18-slate-icons",[176,177,178],"UE4","Slate","Icon","A8mfQicx3BCg5ItNQMw-s9Z2yH3w34f1SwIYUghvJeE",1788763180466]