Flex 4 でコンテナにスクロールバーを表示する
Flex 4 (Gumbo) フレームワークでは、コンテナ内にたくさんの子コンポーネントを配置しても自動的にスクロールバーを表示する処理を行いません。
コンテナにスクロールバーを表示させるためには次の二つの方法があります。
方法1）スキンを利用する。
スクロールバーを表示するためにはコンテナのスキンに spark.components.Scroller を追加します。
まずは MXML でスキンを作成します。
skins/ApplicationSkin.mxml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <?xml version="1.0" encoding="utf-8"?> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"> <fx:Metadata> [HostComponent("spark.components.Application")] </fx:Metadata> <!-- ビューステート --> <s:states> <s:State name="normal"/> <s:State name="disabled"/> </s:states> <!-- 背景とか --> <s:Rect top="0" bottom="0" left="0" right="0"> <s:fill> <s:SolidColor color="{hostComponent.backgroundColor as uint}"/> </s:fill> </s:Rect> <!-- コンテナを Scroller でラップ --> <s:Scroller top="0" bottom="0" left="0" right="0"> <!-- 子コンポーネントを内包するためのコンテナ --> <s:Group id="contentGroup" top="0" bottom="0" left="0" right="0"/> </s:Scroller> </s:SparkSkin> |
これはデフォルトのスキン「spark.skins.ApplicationSkin」に <s:Scroller> を追加しているだけです。（25行目、29行目）
あとは、Application にスキンを適用するだけ。
1 2 3 4 5 6 7 8 9 | <?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" skinClass="skins.ApplicationSkin"> ・ ・ ・ </s:Application> |
これで子コンポーネントが多い場合にはスクロールバーが表示されます。
方法2）スキンを使わずコンテナに Scroller を追加して、その中に子コンポーネントを配置する
こちらは手っ取り早くスキンを使わないで、コンテナに Scroller を直接配置する方法です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?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"> <s:Scroller width="100%" height="100%"> <s:Group width="100%" height="100%"> ・ ・ ・ </s:Group> </s:Scroller> </s:Application> |
やっていることは方法1と同じですが、こうすると1段 DisplayObject の階層が深くなるのでスキンを利用する方がベターかなと思います。
Flex 3 まではスクロールバーが必要なくても内部的には実装されてたけど、Flex 4 は必要な場合には自分で追加するって感じ。
標準のコンポーネントから余分なコードがなくなってちょっとすっきりしたかな。
Categories: Flex 4 (Gumbo)
