HorizontalList コントロールには、アイテムの横並びのリストが表示されます。HorizontalList コントロールは、カスタムアイテムレンダラーと組み合わせて、イメージなどのデータのリストを表示する場合に特に有効です。カスタムアイテムレンダラーについて詳しくは、アイテムレンダラーとアイテムエディタの使用を参照してください。

詳しくは、『Adobe Flex リファレンスガイド』の「HorizontalList」を参照してください。

HorizontaList コントロールについて

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

HorizontalList コントロールでは、アイテムは常に左から右に表示されます。通常、このコントロールには、リスト内のすべてのアイテムにアクセスするための水平スクロールバーが含まれます。オプションの垂直スクロールバーは、リストアイテムが垂直方向に収まらない場合に、ユーザーがアイテムを表示するために使用します。allowMultipleSelection プロパティの値に応じて、ユーザーはリストから単一または複数のアイテムを選択できます。

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

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

HorizontalList コントロールの作成

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

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

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

<?xml version="1.0"?>
<!-- dpcontrols/HListDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

   <mx:Script>
      <![CDATA[
         import mx.collections.*;
         import mx.controls.Image;

         private var catalog:ArrayCollection;

         private static var cat:Array = [
            "../assets/Nokia_6820.gif", "../assets/Nokia_3595.gif",
            "../assets/Nokia_3650.gif", "../assets/Nokia_6010.gif"
         ];

         // Initialize the HorizontalList control by setting its dataProvider
         // property to an ArrayCollection containing the items parameter.
         private function initCatalog(items:Array):void
         {
            catalog = new ArrayCollection(items);
            myList.dataProvider = catalog;
         }
      ]]>   
   </mx:Script>

   <!-- A four-column HorizontalList.
       The itemRenderer is a Flex Image control.
       When the control is created, pass the cat array to the 
       initialization routine. -->
   <mx:HorizontalList id="myList" 
        columnWidth="100" 
        rowHeight="100" 
        columnCount="4" 
        itemRenderer="mx.controls.Image" 
        creationComplete="initCatalog(cat);"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、creationComplete イベントを使用してデータプロバイダにイメージファイルの ArrayCollection を取り込み、itemRenderer プロパティを使用して Image コントロールをアイテムレンダラーとして指定しています。（割り当てでコントロールの完全なパッケージ名を使用しているのは、このコードが mx.controls パッケージを読み込まないためです）。こうすると、データプロバイダによって指定された 4 つのイメージが HorizontalList コントロールに表示されます。

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

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

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

HorizontalList コントロールでは、一度に表示できるレコード数のアイテムを表示します。4 つのリストをページングすると、1 ～ 4 番目、5 ～ 8 番目というようにレコードが表示され、前後のページで表示されるレコードが重複することはありません。

キーボード操作

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