Tile コンテナの子のサイズと位置の制御 -- Flex 2.01

Flex では、各 Tile セルのデフォルトサイズとして、最も高い子の高さと最も幅の広い子の幅が適用されます。すべてのセルのデフォルトサイズは同一です。tileHeight および tileWidth プロパティを使用して明示的にセルのサイズを設定した場合など、子のデフォルトサイズがセルよりも大きくなるときは、子のサイズはセルの境界線内に収まるように自動的に制御されます。その結果、コントロールの内容が切り取られる場合があります。たとえば、ボタン自体はセル内に収まっても、ボタンのラベルが切り取られることがあります。子のサイズを tileHeight または tileWidth プロパティ値より大きな値に明示的に指定すると、子は自動的に切り取られます。

子の幅または高さのデフォルト値がセルよりも小さい場合、デフォルトでは、セル内の子の水平方向の整列は left で、垂直方向の整列は top です。子の配置を制御するには、<mx:Tile> タグの horizontalAlign および verticalAlign プロパティを使用します。

子のサイズをパーセントベースで指定すると、子はセルの指定のパーセントに従って拡大または縮小されます。Tile レイアウトコンテナの作成の例では、text2 という名前の TextInput コントロールの幅が 100 ピクセルでした。したがって、すべての Tile セルのデフォルト幅は 100 ピクセルとなり、ほとんどの子のサイズはセルサイズより小さくなります。すべての子コントロールのサイズをセル幅に合わせて拡大するには、次の例に示すように、各子の width プロパティを 100 % に設定します。この例では、Tile コントロールの tileWidth プロパティを使用してタイルの幅を指定する方法も示します。

<?xml version="1.0"?>
<!-- containers\layouts\TileSizing.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Tile id="myFlow" 
        direction="horizontal" 
        borderStyle="solid" 
        paddingTop="10" paddingBottom="10" 
        paddingRight="10" paddingLeft="10" 
        verticalGap="15" horizontalGap="10" 
        tileWidth="100">
        
        <mx:TextInput id="fname" text="1" height="50" width="100%"/>
        <mx:TextInput id="lname" text="2" height="50" width="100%"/>
        <mx:TextInput id="addr1" text="3" height="50" width="100%"/>
        <mx:TextInput id="addr2" text="4" height="50" width="100%"/>
        <mx:TextInput id="addr3" text="5" height="50" width="100%"/>
    </mx:Tile>
</mx:Application>