標準コンポーネントの TileList の紹介です。

TileList †

タイルリスト(TileList)は、タイル状に多数のアイテムを表示します。 Flexのデモによくある画像付きの商品の一覧は、これを利用しています。標準コンポーネントです。

基本的な使い方 †

タイルリスト(TileList)は、タイル状にアイテムを表示するコンポーネントです。 Flex のデモによくある画像付きの商品の一覧は、このコンポーネントが利用されることが多いように思います。

アイテムの描画方法をカスタマイズする方法（アイテムレンダラー）が提供されているので、カタログなど商品一覧の表示や、さまざまなビューワーなどを作るのに便利です。

※ HorizontalList もほとんど同じように使うことができます。

以下のようなタグをソースに挿入します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <!-- データの定義 -->
    <mx:ArrayCollection id="menu_data">
        <mx:String>カレー</mx:String>
        <mx:String>ハンバーグ</mx:String>
        <mx:String>たぬきうどん</mx:String>
        <mx:String>親子丼</mx:String>
        <mx:String>野菜炒め</mx:String>
        <mx:String>ラーメン</mx:String>
    </mx:ArrayCollection>
    
    <!-- コンポーネントの定義 -->
    <mx:TileList x="19" y="10" width="276" height="222"
        dataProvider="{menu_data}"
        direction="horizontal"
        columnWidth="100"
        columnCount="2"
        rowHeight="50"/>

</mx:Application>

アイテムに画像をつける場合、以下のように記述します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <!-- 画像の埋め込み -->
    <mx:Script><![CDATA[
        [Bindable]
            [Embed(source='kingyo.png')]
            public var KingyoPic:Class; 
        [Bindable]
            [Embed(source='monster.png')]
            public var MonsterPic:Class; 
        [Bindable]
            [Embed(source='panda.png')]
            public var PandaPic:Class; 
    ]]></mx:Script>
    <!-- データの定義 -->
    <mx:ArrayCollection id="menu_data">
        <mx:Object label="金魚" icon="{KingyoPic}"/>
        <mx:Object label="怪獣" icon="{MonsterPic}"/>
        <mx:Object label="パンダ" icon="{PandaPic}"/>
        <mx:Object label="金魚2" icon="{KingyoPic}"/>
        <mx:Object label="怪獣2" icon="{MonsterPic}"/>
        <mx:Object label="パンダ2" icon="{PandaPic}"/>
    </mx:ArrayCollection>
    <!-- コンポーネントの定義 -->
    <mx:TileList x="19" y="10" width="276" height="222"
        dataProvider="{menu_data}"
        direction="horizontal"
        columnWidth="120"
        columnCount="2"
        rowHeight="130"/>
</mx:Application>

その他の使い方は、リスト/Listと似ています。