FlexでScrollBarのスキンを替える方法 thumb編
こんにちは。オシャレな女性向けSNS(男性も可)に登録してみて居場所のなさを思い知った安藤です。
Flexにおいて、例えば子Objectが親Canvasの表示領域を超えてしまった時などに表示されるスクロールバー。このスクロールバーのスキンを変更してみましょう。
まず始めに、今回のFlexプロジェクトのフォルダ構成は以下のようになっています。
./imageフォルダ内にあるkirin.jpgがスクロールさせる縦長の画像です。
scrollThumb.pngが、スクロールバーのthumb用カスタムスキンとして利用されます。
次にmxmlファイルのコーディングです。
<?xml version = "1.0" encoding = "utf-8"?> <mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute"> <mx:Style source = "./myStyles.css" /> <mx:Canvas width = "200" height = "150" borderColor = "0xff0000" borderStyle = "solid" verticalScrollPolicy = "on" horizontalScrollPolicy = "off" verticalScrollBarStyleName = "vScrollBarStyle"> <mx:Image source = "@Embed('./image/kirin.jpg')" /> </mx:Canvas> </mx:Application>
まず<mx:Style>タグ内でスクロールバーのスキンが定義されたスタイルシートを指定します。
その下では<mx:Canvas>内にてキリンの画像を表示しています。
では次にスタイルシートmyStyles.cssファイルを見てみます。
.vScrollBarStyle{ thumbOverSkin: Embed("./image/scrollThumb.png", scaleGridLeft="3", scaleGridRight="17", scaleGridTop="12", scaleGridBottom="48"); thumbUpSkin: Embed("./image/scrollThumb.png", scaleGridLeft="3", scaleGridRight="17", scaleGridTop="12", scaleGridBottom="48"); thumbDownSkin: Embed("./image/scrollThumb.png", scaleGridLeft="3", scaleGridRight="17", scaleGridTop="12", scaleGridBottom="48"); }
thumbOverSkin、thumbUpSkin、thumbDownSkinそれぞれに先ほどのscrollThumb.pngを指定しています。
さらにscaleGridを指定しています。スクロールバーのthumbはスクロールする内容(今回はキリンの画像)とコンテナオブジェクトの幅によって、厳密に計算されてスケールされます。スクロールする幅が大きいとthumbは小さくなり、逆にそれほどスクロールしない時は大きいthumbになります。そのためthumbのスキンに画像を指定する場合、scale9Gridのようにスライスするポイントを指定してスケールされても見栄えが悪くならないようにしてやる必要があります。
以上のコーディングでFlexを実行すると以下のようになります。
FlexTest.swfCanvasのheightを変更しても、スクロールバーのthumbは綺麗にスケールされているのが確認できるかと思います。YATTA!