2009/6/4
さて、前回は空のクラスだけを用意しただけですが、今回はこのクラスを実装していきます。
まずは、Tabに×（バツ）ボタンを表示するところを実装しましょう。
対象となるクラスは、CustomTabクラスです。
とりあえず、バツを表示する画像を用意してください。
私は自分で
のような画像を作成しました。
もし面倒ならこれを使ってください。サイズは 24×16です。このサイズは後でソースで記述します。
さて、まずはこのボタンをタブに表示します。
package com.coltware.cise.ui {
import mx.controls.tabBarClasses.Tab;
import mx.controls.Image;
public class CustomTab extends Tab{
[Embed(source="/com/coltware/cise/ui/assets/close.png")]
private var tabCloseClass:Class;
private var closeImage:Image;
// ボタンの画像を指定する
private var btnWidth:int = 24;
private var btnHeight:int = 16;
public function CustomTab() {
super();
}
override protected function createChildren():void{
super.createChildren();
closeImage = new Image();
closeImage.visible = true;
closeImage.buttonMode = true;
closeImage.width = btnWidth;
closeImage.height = btnHeight;
var imageObj:Object = new tabCloseClass();
closeImage.source = imageObj;
addChild(closeImage);
}
}
}
これで表示はできます。ただし、思った場所に表示されないのです。
こんな感じに、おかしな場所に表示されてしまいます。
ここで、これを調整するメソッドをここに実装していきましょう。
まずは、ソースです。
/**
* タブのサイズを大きくする
*
*/
override protected function measure():void{
super.measure();
measuredMinWidth = measuredMinWidth + btnWidth + 6;
measuredWidth = measuredWidth + btnWidth + 6;
}
/**
* 再表示処理
*/
override protected function updateDisplayList(nscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
this.updateCloseButton();
this.textField.x-=10;
}
/**
* 閉じるボタンを再表示する
*/
private function updateCloseButton():void{
closeImage.visible = true;
setChildIndex(closeImage, numChildren - 1);
closeImage.move(width - btnWidth - 6, this.textField.y + 1);
}
初めの、measure()は、サイズを決定するメソッドです。
これでバツボタンを表示するためのエリアを確保するため、横に大きくしましょう。
+6って書いたのは、実際やってみての私の気分です。このあたりは適当に調整してみてください。
次に、updateDisplayListです。この処理は画面更新時に呼ばれるメソッドですが、ここでボタンの位置をずらします。
updateCloseButton()の中でmoveしているところが実際、位置ずらしです。
ただ、バツ画像をずらしても、テキスト（ラベル）にかかってしまう可能性があるので、こちらもずらします。
さらにアイコンを表示している場合にはアイコンも調整が必要になるでしょう。このあたりは、ぜひ試してみてください。
これで、きれいに表示されました。
次回は、このバツを押せるようにしていきます。
Posted in 
