上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




コンテナ(Canvas、TitleWindow)内にViewStackを用いている場合、
ViewStackの子コンテナサイズに合わせて親コンテナのリサイズ方法を記載します。



Main.mxml



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="100%" height="100%"
creationComplete="{onMainCreationComplete()}">
<mx:Script>
<![CDATA[

[Bindable]
private var _text:String; //TextArea出力文字列
[Bindable]
private var _resizeflag:Boolean; //プロパティresizeToContentの値(true/false)

/**
* CreationComplete  イベント
*/
private function onMainCreationComplete():void {
// 初期化
_resizeflag = true;
_text = "";

// 数字0~1000を文字列として取得
for(var i:int = 0; i <= 1000; i++){
_text += (i.toString() + " ");
}
}
]]>
</mx:Script>

<mx:VBox width="100%" height="100%">
<mx:TitleWindow id="titleWindowMain" title="コンテナーリサイズ" >
<mx:Label text="{'resizeToContent:' + _resizeflag}" fontWeight="bold"/>

<!-- ViewStack -->
<mx:ViewStack id="viewstack" creationPolicy="all" resizeToContent="{_resizeflag}">
<mx:Canvas id="canvas1" label="キャンバス1" width="200" height="200">
<mx:TextArea text="{'【キャンバス1 width=200、height=200】 ' + _text}" width="200" height="200" />
</mx:Canvas>
<mx:Canvas id="canvas2" label="キャンバス2" width="400" height="200">
<mx:TextArea text="{'【キャンバス2 width=400、height=200】 ' + _text}" width="400" height="200" />
</mx:Canvas>
<mx:Canvas id="canvas3" label="キャンバス3" width="200" height="400">
<mx:TextArea text="{'【キャンバス3 width=200、height=400】 ' + _text}" width="200" height="400" />
</mx:Canvas>
</mx:ViewStack>
</mx:TitleWindow>

<mx:Canvas>
<mx:VBox>
<mx:HBox>
<mx:Button label="キャンバス1表示" click="{this.currentState = 'stateCanvas1'}" />
<mx:Button label="キャンバス2表示" click="{this.currentState = 'stateCanvas2'}" />
<mx:Button label="キャンバス3表示" click="{this.currentState = 'stateCanvas3'}" />
</mx:HBox>
<mx:HBox>
<mx:Button label="Resize無効" click="{_resizeflag = false}" />
<mx:Button label="Resize有効" click="{_resizeflag = true}" />
</mx:HBox>
</mx:VBox>
</mx:Canvas>
</mx:VBox>

<!-- States -->
<mx:states>
<mx:State name="stateCanvas1">
<mx:SetProperty target="{viewstack}" name="selectedChild" value="{canvas1}" />
</mx:State>
<mx:State name="stateCanvas2">
<mx:SetProperty target="{viewstack}" name="selectedChild" value="{canvas2}" />
</mx:State>
<mx:State name="stateCanvas3">
<mx:SetProperty target="{viewstack}" name="selectedChild" value="{canvas3}" />
</mx:State>
<mx:State>
<mx:SetProperty target="{viewstack}" name="selectedChild" value="{canvas1}" />
</mx:State>
</mx:states>

<!-- Transition -->
<mx:transitions>
<mx:Transition>
<mx:Resize duration="400" target="{titleWindowMain}" />
</mx:Transition>
</mx:transitions>

</mx:Application>


Resize無効(resizeToContent=false)


親コンテナのサイズは変更されず、親コンテナのスクロールバーと
ViewStackの子コンテナ内にスクロールバーが表示されてしまいます。
表示するサイズにもよりますが、スクロールバーが2重になっていると使いにくいですよね^^;

Resize有効(resizeToContent=true)


親コンテナのサイズがViewStackの子コンテナのサイズにリサイズされる為、
親コンテナのスクロールバーは表示されず子コンテナ内のスクロールバーのみ表示されます。


実行結果は以下のようになります


少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。