UDN
Search public documentation:

CLIKMultiColListJP
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」 > マルチカラム リストを作成する方法

マルチカラム リストを作成する方法

概要

ScrollingList コンポーネントは、デフォルトで ListItemRenderer を使用して行コンテンツを表示します。ただし、ListItemRenderer は、単一の textField しかサポートしていません。リストアイテムが2 個以上の textField を表示しなければならない場合や、さらには非 textField リソース (例 : アイコン) を表示しなければならない場合が多数あります。この例では、2 個の textField をリストアイテムに追加する方法について説明します。

ActionScript

まず、要件を明確化します。目的は、2 個の textFiled をサポートするカスタムの ListItemRenderer を作成することです。このカスタムの ListItemRenderer は、ScrollingList と互換性があることも必要です。また、リストアイテム 1 個につき 2 個の textField を作るという計画であるため、データは、単一の文字列のリストよりも多くする必要があります。この例のために、次の dataProvider を使用することにします。

ActionScript 
list.dataProvider = [{fname: "Michael", lname: "Jordan"},
{fname: "Roger", lname: "Federer"},
{fname: "Michael", lname: "Schumacher"},
{fname: "Tiger", lname: "Woods"},
{fname: "Babe", lname: "Ruth"},
{fname: "Wayne", lname: "Gretzky"},
{fname: "Usain", lname: "Bolt"}];

このデータプロバイダには、 fname および lname という 2 個のプロパティをもつオブジェクトが含まれています。これらの 2 個のプロパティは、2 個のリストアイテム textField に表示されることになります。

デフォルトの ListItemRenderer は 1 個の textField しかサポートしていないため、2 個の textField をサポートするためには機能を追加する必要があります。これを最も簡単に実現するには、ListItemRenderer クラスをサブクラス化します。以下は、MyItemRenderer というクラスのソースコードです。このクラスは、ListItemRenderer をサブクラス化したもので、2 個の textFiled をサポートする基本的な機能が組み込まれています。

(このコードを、C:\UDK\UDK-2010-12\Development\Flash\CLIK\gfx\controls ディレクトリにある MyItemRenderer.as というファイルの中に置きます)。

ActionScript 
import gfx.controls.ListItemRenderer;

class gfx.controls.MyItemRenderer extends ListItemRenderer
{
  public var textField1:TextField;
  public var textField2:TextField;

  public function MyItemRenderer()
  {
    super();
  }

  public function setData(data:Object):Void
  {
    this.data = data;
    textField1.text = data ? data.fname : "";
    textField2.text = data ? data.lname : "";
  }

  private function updateAfterStateChange():Void
  {
    textField1.text = data ? data.fname : "";
    textField2.text = data ? data.lname : "";
  }
}

setData() および updateAfterStateChange() メソッドが、この子クラスでオーバーライドされています。リストアイテムがコンテナリストコンポーネント (ScrollingList、TileList など) からアイテムデータを受け取ると必ず、setData() メソッドが呼び出されます。ListItemRenderer では、このメソッドが、1 つの textField の値をセットします。MyItemRenderer は、両方の textField の値をセットします。また、アイテムオブジェクトへの参照を内部で保持します。このアイテムオブジェクトは updateAfterStateChange で再利用されます。updateAfterStateChange は、ListItemRenderer のステート (状態) が変化した場合に必ず呼び出されます。このステートの変更によって、textField が値をリフレッシュする必要が生じる場合があります。

Flash の変更

ここまでで、複雑なリストアイテムをもつ dataProvider、および、それらのリストアイテムのレンダリングをサポートする ListItemRenderer クラスが定義されました。あらゆるものをリストコンポーネントにフックアップさせるためには、シンボルを作成することによって、この新たな ListItemRenderer クラスをサポートするようにする必要があります。この例において、これを最も速く実現するには、プレビルドされている ListItemRenderer シンボル (C:\UDK\UDK-2010-12\Development\Flash\CLIK\components\ListItemRende rer.fla) を変更して、textField1 と textField2 というインスタンス名をもつ 2 つの textField をもつようにします。次に、このシンボルの識別子とクラスをライブラリにおいて MyItemRenderer に変更する必要があります。

  • ライブラリで ListItemRenderer を右クリックして、プロパティを選択します。
  • Name を MyItemRenderer に変更します。
  • Identifier (識別子) を MyItemRenderer に変更します。
  • Class を gfx.controls.MyItemRendere に変更します。
  • [OK] をクリックします。
  • ListItemRenderer を再度右クリックして、Component Definition (コンポーネントの定義) を選択します。
  • Class を gfx.controls.MyItemRendere に変更します。
  • リストを含んでいる Flash ファイルのライブラリにシンボルをコピーします。

新たなマルチコラムリストを使用する

リストとともに MyItemRenderer コンポーネントを使用するには、当然のことながらライブラリにそのコピーが存在している必要があります。リストのインスタンスがもつインスペクタブル (inspectable) なプロパティである itemRenderer を、MyItemRenderer に変更します。( [Component Inspector] ウィンドウ (CS4) または [Component Parameters] ロールアウト (CS5) のいずれかから)。

FLA を実行します。リストが表示されます。これには、2 つのラベルを表示するリスト要素が含まれています。(dataProvider でセットされた fname と lname プロパティ)。