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

次の図に 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>
前の例で実行する SWF ファイルは以下のとおりです。

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

次の例のように、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>
前の例で実行する SWF ファイルは以下のとおりです。

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

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>
前の例で実行する SWF ファイルは以下のとおりです。

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