Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > コントロールの使用 > HRule コントロールと VRule コントロール

HRule コントロールと VRule コントロール

HRule (Horizontal Rule) コントロールは水平方向の罫線を、VRule (Vertical Rule) コントロールは垂直方向の罫線を作成するものです。一般に、この 2 つのコントロールは、コンテナ内に境界線を引くときに使用します。

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

HRule コントロールと VRule コントロールには、次のデフォルトプロパティがあります。

サブトピック

HRule コントロールと VRule コントロールの作成

HRule コントロールと VRule コントロールは、次のように、<mx:HRule> タグおよび <mx:VRule> タグを使用して MXML 内で定義します。MXML の他の場所 (別のタグまたは ActionScript ブロック) のコンポーネントを参照する場合は、id 値を指定します。

<?xml version="1.0"?>
<!-- controls\rule\RuleSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:VBox>
        <mx:Label text="Above"/>
        <mx:HRule/>
        <mx:Label text="Below"/>
    </mx:VBox>
    <mx:HBox>
        <mx:Label text="Left"/>
        <mx:VRule/>
        <mx:Label text="Right"/>
    </mx:HBox>
</mx:Application>

この例では、前出の図のような出力結果が生成されます。

次の例のように、HRule コントロールと VRule コントロールのプロパティを使用して、線幅、線のカラー、陰影色などを指定することもできます。

<?xml version="1.0"?>
<!-- controls\rule\RuleProps.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:VBox>
        <mx:Label text="Above"/>
        <mx:HRule shadowColor="0xEEEEEE"/>
        <mx:Label text="Below"/>
    </mx:VBox>
    <mx:HBox>
        <mx:Label text="Left"/>
        <mx:VRule strokeWidth="10" strokeColor="0xC4CCCC"/>
        <mx:Label text="Right"/>
    </mx:HBox>
</mx:Application>

このコードでは、次のイメージが作成されます。

HRule コントロールと VRule コントロールのサイズ

HRule コントロールと VRule コントロールでは、罫線の描画方法が strokeWidth プロパティによって次のように決定されます。

• strokeWidth プロパティを 1 に設定した場合、1 ピクセル幅の直線が描画されます。
• strokeWidth プロパティを 2 に設定した場合、1 ピクセル幅の 2 本の罫線が描画されます。この 2 本の罫線は HRule コントロールの場合は水平に、VRule コントロールの場合は垂直に、それぞれ平行に描画されます。これがデフォルト値です。
• strokeWidth プロパティに 2 より大きい値を設定した場合、1 ピクセル幅の枠を持つ、くぼみのある四角形として描画されます。

次の例に、この 3 つのパターンで描画した結果を示します。

HRule コントロールの height プロパティに、strokeWidth プロパティを超える値を設定した場合、罫線は指定された高さの矩形内に描画され、矩形の中央に配置されます。罫線の高さは、strokeWidth プロパティに指定した高さになります。

VRule コントロールの width プロパティに、strokeWidth プロパティを超える値を設定した場合、罫線は指定された幅の矩形内に水平に描画され、矩形の中央に配置されます。罫線の幅は、strokeWidth プロパティに指定した幅になります。

HRule コントロールの height プロパティまたは VRule コントロールの width プロパティに、strokeWidth プロパティより小さい値を設定した場合は、strokeWidth プロパティが height プロパティまたは width プロパティと等しいものとして罫線が描画されます。

HRule コントロールと VRule コントロールの色は、strokeColor プロパティと shadowColor プロパティによって決定されます。strokeColor プロパティでは、次のようにして線の色が指定されます。

• strokeWidth プロパティに 1 が設定されている場合、罫線全体に色が指定されます。
• strokeWidth プロパティに 2 が設定されている場合、HRule の場合は上側の直線に、VRule コントロールの場合は左側の直線に色が指定されます。
• strokeWidth プロパティに 2 より大きい値を設定した場合、矩形の上辺および左辺に対して色が指定されます。

shadowColor プロパティでは、次のようにして線の陰影色が指定されます。

• strokeWidth プロパティに 1 を設定した場合、処理は一切適用されません。
• strokeWidth プロパティに 2 が設定されている場合、HRule の場合は下側の直線に、VRule コントロールの場合は右側の直線に色が指定されます。
• strokeWidth プロパティに 2 より大きい値を設定した場合、矩形の底辺および右辺に対して色が指定されます。

スタイルプロパティの設定

strokeWidth、strokeColor、shadowColor は、スタイルのプロパティです。したがって、タグの定義の一部として MXML を設定することも、MXML の <mx:Style> タグを使って設定することもできます。あるいは、ActionScript から setStyle() メソッドを使って設定することも可能です。

次の例では、<mx:Style> タグを使って、すべての HRule コントロールの strokeColor プロパティと shadowColor プロパティに、デフォルト値として、それぞれ #00FF00 (ライムグリーン) と #0000FF (青) を設定しています。この例では、strokeWidth を 5 に設定した、thickRule というクラスセレクタを定義しています。次の例のように、HRule コントロールまたは VRule コントロールのあらゆるインスタンスに使用できます。

<?xml version="1.0"?>
<!-- controls\rule\RuleStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
        .thickRule {strokeWidth:5}
        HRule {strokeColor:#00FF00; shadowColor:#0000FF}
    </mx:Style>

    <mx:HRule styleName="thickRule"/>
</mx:Application>

この例では、次のイメージが作成されます。

Flex 2.01