タイトルを付けたフレーム(枠)を作る

Flex/AIR


上のイメージのような枠付きのタイトルを作る場合、
というかそういうシチュエーションがあるか分かりませんが、
sparkのLineクラスを使う方法があるかと思います。
もしくはBorderContainerやらでサクっと出来るのかもしれませんが、
タイトルラベルの後ろのラインを消す方法が分からなかった＆ライン幅と高さを動的に変えたかったので、
sparkのPathクラスというのを使って実現してみようと思います。


まず、Pathクラスにはdataプロパティというものがあります。
これはあるルールに沿ってStringを設定し、
いわゆる一筆書きみたいな感じでラインを引く事が出来ます。
例えば"M 10 10"と設定すると、ラインの開始位置を(x, y) = (10, 10)に移動します。
それから"L 20 10"と設定すると、先ほどの(10, 10)の位置から(20, 10)の位置までラインを引きます。
続けてLセグメントを足していきます。


上のイメージのソースです。
・TitleFrame.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Declarations>
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			/**
			 * タイトルラベルテキストのSetter
			 * 
			 */
			public function set text(value:String):void {
				titleLabel.text = value;
			}

			/**
			 * フレームカラーのSetter
			 * 
			 */
			public function set color(value:uint):void {
				stroke.color = value;
			}
		]]>
	</fx:Script>
	
	<s:Path data="
			M 0 0
			L 10 0
			M {10 + titleLabel.width + 10} 0
			L {this.width} 0
			L {this.width} {this.height}
			L 0 {this.height}
			L 0 0">
		<s:stroke>
			<s:SolidColorStroke id="stroke"/>
		</s:stroke>
	</s:Path>
			
	<s:Label id="titleLabel" y="-5" x="15"/>
</s:Group>

フレームの幅と高さはGroupと同じにしています。
Pathのdataプロパティの3行目は、Labelの幅のオフセットとして左右10ピクセル分を加えています。
PathのstrokeにはSolidColorStrokeを設定し、colorを変えれるようにSetterを定義しています。
デフォルトは黒です。
セグメントには他にもVerticalのVやHorizontalのHなどがありますが、
座標で管理した方が直感的に分かりやすいかなと思ったのですべてLで統一しました。


・Application側のソース

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:local="*"
			   minWidth="955" minHeight="600"
			   usePreloader="false" xmlns:ctrl="controls.*">
	
	<fx:Declarations>
	</fx:Declarations>

	<s:VGroup x="20" y="20" gap="20">

		<ctrl:TitleFrame text="タイトル" width="200" height="100"/>
		
		<ctrl:TitleFrame text="長い長いタイトル" width="200" height="100" color="0xff0000"/>
	</s:VGroup>
</s:Application>


・結果(イメージ)


・結果(SWF)
TestProject.swf 直


詳しくはコチラ
http://help.adobe.com/ja_JP/AS3LCR/Flex_4.0/spark/primitives/Path.html?allClasses=1#data