XY 행렬형태의 배치에서 includeInLayout과 visible을 활용하여 위와 같이 화면 배치를 조절할 수 있습니다.
아래 코드를 참조하여 다양한 형태로 메뉴구성을 조절 한다면 멋질거 같네요 ^^
소스코드보기 ▼
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Button;
private function screenChecker(targetRow:HBox):void{
//해당 라인 항목이 다 지워졌는지 확인하기
var hideRow:Boolean = true;
for(var i:uint=0;i<targetRow.numChildren;i++){
var tmpBox:Box = targetRow.getChildAt(i) as Box;
if(tmpBox.includeInLayout) {
hideRow = false;
break;
}
}
if(hideRow) { //해당 ROW의 모든 항목이 지워진 경우에는 해당 ROW를 지운다.
targetRow.includeInLayout = false;
targetRow.visible = false;
}else{
targetRow.includeInLayout = true;
targetRow.visible = true;
}
//모든 항목이 다 지워졌는지 확인하기
var hideAll:Boolean = true;
for(var j:uint=0;j<contents.numChildren;j++){
var tmpContents:HBox = contents.getChildAt(j) as HBox;
if(tmpContents.includeInLayout) {
hideAll = false;
break;
}
}
if(hideAll) { //모든 항목이 지워진 경우에는 contents를 제거한다.
contents.includeInLayout = false;
contents.visible = false;
}else{
contents.includeInLayout = true;
contents.visible = true;
}
}
private function openHandler(e:MouseEvent):void{
var target:Button = e.currentTarget as Button;
//테스트용은 9이하로 제작 : 안그럼 범위를 벗어남.
var rowNum:uint = Number(target.id.charAt(1));
var colNum:uint = Number(target.id.charAt(2));
//선택 항목을 화면에서 보여주기
var targetRow:HBox = contents.getChildAt(rowNum) as HBox;
var targetBox:Box = targetRow.getChildAt(colNum) as Box;
targetBox.includeInLayout = true;
targetBox.visible = true;
//메뉴에서 활성화 버튼 제거하기
for(var i:uint=0;i<menu.numChildren;i++){
var tmpBtn:Button = menu.getChildAt(i) as Button;
if(tmpBtn.id == "m"+rowNum+colNum) {
menu.removeChildAt(i);
break;
}
}
//화면 체크
screenChecker(targetRow);
}
private function closeHandler(e:MouseEvent):void{
var target:Button = e.currentTarget as Button;
//테스트용은 9이하로 제작 : 안그럼 범위를 벗어남.
var rowNum:uint = Number(target.id.charAt(1));
var colNum:uint = Number(target.id.charAt(2));
//선택 항목을 화면에서 지우기
var targetRow:HBox = contents.getChildAt(rowNum) as HBox;
var targetBox:Box = targetRow.getChildAt(colNum) as Box;
targetBox.includeInLayout = false;
//메뉴에서 활성화 버튼 추가하기
var menuBtn:Button = new Button;
menuBtn.label = "SHOW "+rowNum+colNum;
menuBtn.id = "m"+rowNum+colNum;
menuBtn.setStyle("fillColors",[0xffffff,targetBox.getStyle("backgroundColor")]);
menuBtn.addEventListener(MouseEvent.CLICK,openHandler);
menu.addChild(menuBtn);
//화면 체크
screenChecker(targetRow);
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%" verticalGap="0">
<!-- 메뉴-->
<mx:HBox id="menu" width="100%" height="30"/>
<!--실제 내용-->
<mx:VBox id="contents" width="100%" height="100%" verticalGap="0">
<mx:HBox width="100%" height="100%" horizontalGap="0">
<mx:Box id="b00" width="100%" height="100%" backgroundColor="#000011">
<mx:Button id="t00" label="CLOSE 00" click="closeHandler(event)"/>
</mx:Box>
<mx:Box id="b01" width="100%" height="100%" backgroundColor="#001100">
<mx:Button id="t01" label="CLOSE 01" click="closeHandler(event)"/>
</mx:Box>
<mx:Box id="b02" width="100%" height="100%" backgroundColor="#110000">
<mx:Button id="t02" label="CLOSE 02" click="closeHandler(event)"/>
</mx:Box>
</mx:HBox>
<mx:HBox width="100%" height="100%" horizontalGap="0">
<mx:Box id="b10" width="100%" height="100%" backgroundColor="#000033">
<mx:Button id="t10" label="CLOSE 10" click="closeHandler(event)"/>
</mx:Box>
<mx:Box id="b11" width="100%" height="100%" backgroundColor="#003300">
<mx:Button id="t11" label="CLOSE 11" click="closeHandler(event)"/>
</mx:Box>
<mx:Box id="b12" width="100%" height="100%" backgroundColor="#330000">
<mx:Button id="t12" label="CLOSE 12" click="closeHandler(event)"/>
</mx:Box>
</mx:HBox>
<mx:HBox width="100%" height="100%" horizontalGap="0">
<mx:Box id="b20" width="100%" height="100%" backgroundColor="#000055">
<mx:Button id="t20" label="CLOSE 20" click="closeHandler(event)"/>
</mx:Box>
<mx:Box id="b21" width="100%" height="100%" backgroundColor="#005500">
<mx:Button id="t21" label="CLOSE 21" click="closeHandler(event)"/>
</mx:Box>
<mx:Box id="b22" width="100%" height="100%" backgroundColor="#550000">
<mx:Button id="t22" label="CLOSE 22" click="closeHandler(event)"/>
</mx:Box>
</mx:HBox>
</mx:VBox>
</mx:VBox>
</mx:Application>
'etc > old' 카테고리의 다른 글
소니, 신형 슬라이드 ‘PSP go’ 공개 (0) | 2009.06.01 |
---|---|
Label 에 오버시 마우스 커서 손모양 만들기 (0) | 2009.05.29 |
Layout 배치 테스트 (0) | 2009.05.29 |
구글-네이버, ‘오픈’의 엇갈림 (0) | 2009.05.28 |
TabBar 스타일 적용하기 (0) | 2009.05.26 |