アプリの背景に画像を配置
アプリの背景に画像を配置したいけど、デフォルトパッケージやコンポーネントのプロパティにはbackground-image的なプロパティがなくて困っていました。
しかし、かなりあっけなく解決したのでご紹介しておきます。
まず、この様なボタンを押したらブラウザが起動するアプリがあるとします。
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="piyopiyo" xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import flash.net.navigateToURL;
protected function clickHandler(event:MouseEvent):void
{
switch(event.currentTarget.id){
case "button0":
navigateToURL(new URLRequest("http://www.google.co.jp/"));
break;
case "button1":
navigateToURL(new URLRequest("http://www.bing.com/"));
break;
case "button2":
navigateToURL(new URLRequest("http://twitter.com/"));
break;
case "button3":
navigateToURL(new URLRequest("http://www.facebook.com/"));
break;
case "button4":
navigateToURL(new URLRequest("http://www.adobe.com/"));
break;
}
}
]]>
</fx:Script>
<s:VGroup left="10" right="10" top="10" bottom="10" gap="20">
<s:Button width="100%" id="button0" click="clickHandler(event)" label="google"/>
<s:Button width="100%" id="button1" click="clickHandler(event)" label="bing"/>
<s:Button width="100%" id="button2" click="clickHandler(event)" label="twitter"/>
<s:Button width="100%" id="button3" click="clickHandler(event)" label="facebook"/>
<s:Button width="100%" id="button4" click="clickHandler(event)" label="adobe"/>
</s:VGroup>
</s:View>
この背景に画像を配置しようと思うと、VGroupのプロパティやViewそのものに何かプロパティがあるんじゃないのかと疑うと思いますが、そんな必要はありません。
一番最初にImageコンポーネントを書けば済む、たったそれだけの話です。
<s:Image source="assets/piyo.jpg"/> <s:VGroup left="10" right="10" top="10" bottom="10" gap="20"> .........
ちなみにImageのプロパティにはfillModeというものがあり、
- “repeat”：画像を繰り返し
- “scale”：Imageで指定した幅・高さに画像を伸縮
- “clip”：Imageで指定した幅・高さを超える部分は削除
と用途に合わせて使い分けることもできますよ。
注意することはImageをGroup内に含むと背景に配置されないのと、Groupより後ろに書くとGroupの上に重なってしまうことです。
製品版の時にはこの辺わかりやすいプロパティとかほしいですね。
ちなみになぜpiyoなのかというと、テストでhogeというプロジェクトを作成していただけのことです。
コメント
コメントを残す
誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。