UDN
Search public documentation:

CLIKIconScrollListCH
English Translation
日本語訳
한국어
Interested in the Unreal Engine?
Visit the Unreal Technology site.

Looking for jobs and company info?
Check out the Epic games site.

Questions about support via UDN?
Contact the UDN Staff

UE3 主页 > 用户界面 & HUD > Scaleform GFx > 如何在滚动列表中显示图标

如何在滚动列表中显示图标

概述

想要在您的CLIK滚动列表和下拉菜单中显示文字和一个图标吗? 这个教程假设您已经拥有一个工作菜单类，菜单类里有CLIK滚动列表。

第一件要做的事情就是创建您自己的ListItemRender(列表项渲染)。 这个ListItemRenderer(gfx.controls.ListItemRenderer)源自CLIK按钮类并对其进行扩展，使它包含对其容器组件有用的列表相关属性。 换句话说，ListItemRender本质上来说是滚动列表和下拉菜单用来显示列表/下拉菜单中每一个选项的按钮。 修改这些组件意味着修改每个选项所显示的内容。

创建一个自定义ListItemRenderer(列表项渲染线程)动作脚本类

比起修改源ListItemRenderer(列表项渲染线程),通过创建一个带有调试好的代码的新版本来“扩展”类通常是一个较好的方法。 下面就是针对我们的新ListItemRenderer(列表项渲染线程)的全部ActionScript。

MyListItemRenderer.as 
import gfx.controls.ListItemRenderer;
import gfx.controls.UILoader;

class gfx.controls.MyListItemRenderer extends ListItemRenderer
{
  public var textField:TextField;
  public var imageLoader:UILoader;

  public function MyListItemRenderer()
  {
    super();
  }

  public function setData(data:Object):Void
  {
    this.data = data;

    textField.text = data ? data.label : "";
    imageLoader.source = data ? data.iconimage : "";
  }

  private function updateAfterStateChange():Void
  {
    textField.text = data ? data.label : "";
    imageLoader.source = data ? data.iconimage : "";
  }
}

将这个类另存为： C:\UDK\UDK-2011-09\Development\Flash\CLIK\gfx\controls\MyListItemRenderer.as

创建一个自定义ListItemRenderer(列表项渲染线程)FLA文件

既然我们已经创建了新ListItemRender(列表项渲染线程)的后端，现在我们需要前端，或前端的可视化图像。 最简单的方法是修改先前存在的ListItemRender(列表项渲染线程)Flash文件，将它另存为新的文件。

  • 打开 C:\UDK\UDK-2011-09\Development\Flash\CLIK\components\ListItemRenderer.FLA
  • 现在取一个新的名字保存该文件(另存为) - 将它命名为ListItemRenderer。
  • 打开C:\UDK\UDK-2011-09\Development\Flash\CLIK\components\UILoader.FLA
  • 进入库面板，然后右击UILoader(用户界面加载器)。
  • 选中Copy(复制)
  • 回到MyListItemRenderer.FLA。
  • 进入库面板，然后在空的地方右击。
  • 选中Paste(粘帖)将UILoader(用户界面加载器)粘帖进库中。
  • 在库面板中右击ListItemRenderer(列表项渲染线程)并选中属性。
  • 将名字改成： MyListItemRenderer
  • 将标识符改成： MyListItemRenderer
  • 将类改成： gfx.controls.MyListItemRenderer
  • 点击OK。
  • 再次右击MyListItemRenderer(我的列表项渲染线程)并选择Component Definition(组件定义)。
  • 将类改成： gfx.controls.MyListItemRenderer
  • 点击OK。
  • 在页面上双击MyListItemRenderer(我的列表项渲染线程)输入它的时间轴。
  • 将一个新的层添加到项的层上方并将其命名为"icon"。
  • 选中icon层
  • 从库面板中将一个UILoader(界面加载器)拖曳并放置到页面中，并定位/缩放它，直到您得到满意的效果。
  • 赋予该UILoader(用户界面加载器)组件一个'imageLoader'的实例名。
  • 保存并发布这个文件(MyListItemRenderer)。
  • 现在打开包含一个滚动列表或下拉菜单的菜单文件。
  • 从MyListItemRenderer(我的列表项渲染线程)中将MyListItemRenderer(我的列表项渲染线程)复制到您的菜单文件库中。
  • 选中您的滚动列表或下拉菜单CLIK组件(在页面中)。
  • 打开组件参数并将itemRenderer(项的渲染线程)域设置为： MyListItemRenderer
  • 保存并发布这个文件
  • 将这个文件重新导入UDK。

创建一个包含用来弹出滚动列表数据的配置文件

我们能用很多方法弹出带有选项的滚动列表。 其中一个方法是使用定义每个选项的配置文件。

创建一个配置文件，将它命名为DefaultScaleformMenu.ini(保存在C:\UDK\UDK-2011-09\UDKGame\Config\中)。 

[Configuration]
BasedOn=..\Engine\Config\BaseUI.ini

[SFTutorial.SFMenu]
+ListOptions=(OptionName="Option 1",OptionLabel="Tame",OptionDesc="Easy",OptionImage="img://MyIconPackage.icon1")
+ListOptions=(OptionName="Option 2",OptionLabel="Wild",OptionDesc="Medium",OptionImage="img://MyIconPackage.icon2")
+ListOptions=(OptionName="Option 3",OptionLabel="Crazy",OptionDesc="Hard",OptionImage="img://MyIconPackage.icon3")
+ListOptions=(OptionName="Option 4",OptionLabel="Insane",OptionDesc="Very hard",OptionImage="img://MyIconPackage.icon4")

现在，请确认您在UDK包中有图标的图片。 这些图片的路径必须同您在以上每个ListOption(列表选项)的OptionImage(选项图片)部分里所放的内容相匹配。

ALERT! Note: 这些图片必须为PNG格式。

在虚幻脚本中设置滚动列表

最后，我们需要添加一个虚幻脚本，该脚本在滚动菜单位于屏幕上时负责弹出该菜单。 首先，请确保您的菜单类是从以上您创建的配置文件中提取的。

SFMenu.uc 
class SFMenu extends GFxMoviePlayer
  config(ScaleformMenu);

然后创建滚动菜单所使用的选项数据结构。 请注意在配置文件中每个变量匹配选项属性的方法(选项名称、选项标签等)：

SFMenu.uc 
struct Option
{
    var string OptionName;
    var string OptionLabel;
    var string OptionDesc;
    var string OptionImage;
};

接下来，创建一个滚动菜单选项组件。 这个组件名应同在配置文件中每行的项所用的名称匹配(ListOptions-列表选项)。 通过添加关键字配置，配置文件将弹出这个组件。

SFMenu.uc 
var config array<Option> ListOptions;

声明滚动菜单CLIK控件：

SFMenu.uc 
var GFxClikWidget ScrollingList;

告知这个滚动菜单在WidgetInitialized()函数中跳出：

SFMenu.uc 
event bool WidgetInitialized(name WidgetName, name WidgetPath, GFxObject Widget)
{
  switch(WidgetName)
  {
    case ('sl'): // this assumes your Scrolling List has an instance name of 'sl' in Flash.
      ScrollingList = GFxClikWidget(Widget);
      SetUpDataProvider(ScrollingList);
      break;

   default:
      break;
  }

  return true;
}

现在，这个就是实际弹出列表的函数：

SFMenu.uc 
function SetUpDataProvider(GFxClikWidget Widget)
{
  local byte i;
  local GFxObject DataProvider;
  local GFxObject TempObj;

  DataProvider = CreateArray();
  switch(Widget)
  {
  case (ScrollingList):
    for (i = 0; i < ListOptions.Length; i++)
    {
      TempObj = CreateObject("Object");
      TempObj.SetString("name", ListOptions[i].OptionName);
      TempObj.SetString("label", ListOptions[i].OptionLabel); // this will be displayed in the list
      TempObj.SetString("desc", ListOptions[i].OptionDesc);
      TempObj.SetString("iconimage", ListOptions[i].OptionImage);
      DataProvider.SetElementObject(i, TempObj);
    }

    Widget.SetFloat("rowCount", ListOptions.Length);   // you must specify the row count of scrolling lists manually
    break;

  default:
    break;
  }

  Widget.SetObject("dataProvider", DataProvider);
}

最后，绑定控件：

SFMenu.uc 
defaultproperties
{
  WidgetBindings.Add((WidgetName="sl",WidgetClass=class'GFxClikWidget'))  // this assumes your Scrolling List has an instance name of 'sl' in Flash.
}

保存/编译并测试您的菜单。