nariyu memo » Scroller http://nariyu.playwell.jp メモ Wed, 18 Aug 2010 09:19:00 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 Flex 4 でコンテナにスクロールバーを表示する http://nariyu.playwell.jp/2009/09/how-to-add-a-scrollbar-to-containe/ http://nariyu.playwell.jp/2009/09/how-to-add-a-scrollbar-to-containe/#comments Tue, 08 Sep 2009 10:15:35 +0000 nariyu http://www.playwell.jp/blog/nariyu/?p=361 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 は必要な場合には自分で追加するって感じ。

標準のコンポーネントから余分なコードがなくなってちょっとすっきりしたかな。

]]> http://nariyu.playwell.jp/2009/09/how-to-add-a-scrollbar-to-containe/feed/ 0