さて、前回は空のクラスだけを用意しただけですが、今回はこのクラスを実装していきます。

まずは、Tabに×(バツ)ボタンを表示するところを実装しましょう。

対象となるクラスは、CustomTabクラスです。

とりあえず、バツを表示する画像を用意してください。

私は自分でcloseのような画像を作成しました。
もし面倒ならこれを使ってください。サイズは 24×16です。このサイズは後でソースで記述します。

さて、まずはこのボタンをタブに表示します。
[AS]
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);
}

}

}
[/AS]
これで表示はできます。ただし、思った場所に表示されないのです。
closetab_sample1
こんな感じに、おかしな場所に表示されてしまいます。

ここで、これを調整するメソッドをここに実装していきましょう。
まずは、ソースです。
[AS]
/**
* タブのサイズを大きくする
*
*/
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);

}
[/AS]

初めの、measure()は、サイズを決定するメソッドです。
これでバツボタンを表示するためのエリアを確保するため、横に大きくしましょう。
+6って書いたのは、実際やってみての私の気分です。このあたりは適当に調整してみてください。

次に、updateDisplayListです。この処理は画面更新時に呼ばれるメソッドですが、ここでボタンの位置をずらします。
updateCloseButton()の中でmoveしているところが実際、位置ずらしです。

ただ、バツ画像をずらしても、テキスト(ラベル)にかかってしまう可能性があるので、こちらもずらします。
さらにアイコンを表示している場合にはアイコンも調整が必要になるでしょう。このあたりは、ぜひ試してみてください。

これで、きれいに表示されました。
closetab_sample2

次回は、このバツを押せるようにしていきます。

お仕事のご依頼・相談を承ります
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら

Leave a Reply

お仕事のご依頼・相談
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら
ソフトウェア&ライブラリ




ライブラリ
airxmail(en)
AIR版メール送受信ライブラリ
airxzip
AIR版ZIP圧縮・解凍ライブラリ
執筆書籍
本、雑誌等

WEB記事:CodeZine
執筆記事はこちら
カレンダー
2009年6月
« 5月   7月 »
1234567
891011121314
15161718192021
22232425262728
2930  

カスタム検索
RSS
Add to Google < !–adsense–>
アーカイブ
カテゴリ
にほんブログ村 IT技術ブログへ