TileList コントロールでは、アイテムをタイル状に並べて表示します。アイテムは垂直列または水平行の向きで順に配置されます。TileList コントロールは、カスタムアイテムレンダラーと組み合わせて、イメージなどのデータのリストを表示する場合に特に有効です。TileList コントロールのデフォルトのアイテムレンダラーは TileListItemRenderer であり、データプロバイダーのラベルフィールドのテキストおよびすべてのアイコンがデフォルトで表示されます。カスタムアイテムレンダラーについて詳しくは、アイテムレンダラーとアイテムエディタの使用を参照してください。

詳細については、『Adobe Flex リファレンスガイド』を参照してください。

TileList コントロールについて

TileList コントロールの表示は、Repeater オブジェクトによって Tile コンテナ内にコンポーネントを繰り返し表示する場合と非常によく似ていることがあります。ただし、パフォーマンスの面では、TileList コントロールのほうが Tile コンテナと Repeater オブジェクトの組み合わせよりも優れています。これは、TileList コントロールでは表示領域内のオブジェクトだけをインスタンス化するためです。TileList のスクロールは、Repeater オブジェクトを使用する場合より遅くなります。Repeater オブジェクトについて詳しくは、コントロールおよびコンテナの動的な繰り返しを参照してください。

TileList コントロールには、複数のアイテムが同じサイズで並べて表示されます。通常は、リスト内のすべてのアイテムにアクセスできるように、リストの向きに応じて縦、横いずれか一方のスクロールバーを含みます。allowMultipleSelection プロパティの値に応じて、ユーザーはリストから単一または複数のアイテムを選択できます。

TileList コントロールでは、子を 1 つまたは複数の垂直列または水平行に配置し、必要に応じて新しい行や列を開始します。direction プロパティによってレイアウトの主な方向が決まります。direction プロパティに指定できる値は、1 つのレイアウトにつき horizontal（デフォルト）または vertical のいずれかです。horizontal レイアウトでは、タイルは行ごとに埋められ、各行がコントロール内の空きスペースを埋めていきます。表示領域に収まりきらない数のタイルがある場合、水平のコントロールには垂直スクロールバーが作成されます。vertical レイアウトでは、タイルは垂直の空きスペース内で列ごとに埋められ、コントロールには必要に応じて水平スクロールバーが作成されます。

次の図に TileList コントロールの例を示します。

TileList コントロールの作成

TileList コントロールを定義するには、<mx:TileList> タグを使用します。MXML の他の場所（別のタグまたは ActionScript ブロック）のコンポーネントを参照する場合は、id 値を指定します。

TileList コントロールは多数のプロパティおよびメソッドを List コントロールと共有しています。一部の共有プロパティの使用方法については、List コントロールを参照してください。TileList コントロールは、リストベースのデータプロバイダを使用します。詳しくは、データプロバイダおよびコレクションの使用を参照してください。

TileList コントロールのデータは、次の例のように、<mx:TileList> タグの dataProvider プロパティを使用して指定します。

<?xml version="1.0"?>
<!-- dpcontrols/TileListDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
   initialize="initData();" >
   <mx:Script>
   <![CDATA[
      import mx.controls.Button;
      import mx.collections.*;
      private var listArray:Array=[
         {label: "item0", data: 0},{label: "item1", data: 1},
         {label: "item2", data: 2},{label: "item3", data: 3},
         {label: "item4", data: 4},{label: "item5", data: 5},
         {label: "item6", data: 6},{label: "item7", data: 7},
         {label: "item8", data: 8}];
      [Bindable]
      public var TileListdp:ArrayCollection;
      
      private function initData():void {
         TileListdp = new ArrayCollection(listArray);
      }
   ]]>
   </mx:Script>

   <mx:TileList dataProvider="{TileListdp}"
      itemRenderer="mx.controls.Button"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、ラベルとデータ値を定義するストリングの配列が格納される ArrayCollection を使用してデータプロバイダを作成します。次に itemRenderer プロパティを使用して、Button コントロールをアイテムレンダラーに指定します。Button コントロールにはデータプロバイダのラベル値が表示されます。TileList コントロールには、指定したラベルを持つ 9 つの Button コントロールが表示されます。

TileList コントロールのユーザー操作

ユーザーは、個々のリストアイテムをクリックしてそれらを選択します。複数のアイテムを選択するには Ctrl キーや Shift キーを押しながらアイテムをクリックします。

マウスやキーボードを使用してアイテムの選択操作が行われるたびに、change イベントがブロードキャストされます。マウスの操作では、マウスボタンを離すと TileList コントロールからイベントがブロードキャストされます。アイテムの上からコントロールの外にマウスがドラッグされると、コントロールが上または下にスクロールします。

キーボード操作

TileList コントロールでは次のキーボード操作ができます。