2013/10/23

Flex:: MultiDPIBitmapSourceの使い方について（ビットマップ画像を解像度に合わせて設定）

Flex 4.10:: MultiDPIBitmapSourceは知ってますか？マルチプラットフォーム（デバイス）対応のアプリではとても重宝する機能です。
ご存知のように、Bitmap（ビットマップ）画像はデバイスの解像度に合わせて最適なものを使用しないと、綺麗に表示されません。なので、プログラマーは自分でデバイスの解像度に合わせて画像を選択するプログラムを書くはめになります。
しかし、このMultiDPIBitmapSourceは勝手にデバイスの解像度に合わせた最適な画像を選んで表示してくれるので、そんな面倒な処理を書かなくてもいいのです！いぇーい！

※とは言っても、いつもMultiDPIBitmapSourceが使えるとは限りません。使えない時もあります。そんな時は、「FlexGlobals.topLevelApplication.runtimeDPI」APIを使って、デバイスのDPIを取得し、それにあったビットマップを設定する必要があります。下の「IconItemRendererのIcon」を設定する際にこの方法で行っています。

MultiDPIBitmapSourceの使い方を紹介します。

■結果（画像）
iPhone 3G DPI:163
iPhone 5 DPI:326

■ButtonのIconに使用する方法
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<?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="Button">
 
 <s:Button>
  <s:icon>
   <s:MultiDPIBitmapSource source160dpi="@Embed('assets/images/160DPI.png')"
         source240dpi="@Embed('assets/images/240DPI.png')"
         source320dpi="@Embed('assets/images/320DPI.png')"
         source480dpi="@Embed('assets/images/480DPI.png')"/>
  </s:icon>
 </s:Button>
 
</s:View>

■Imageに使用する方法
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<?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="Image">
 
 <s:Image>
  <s:source>
   <s:MultiDPIBitmapSource source160dpi="@Embed('assets/images/160DPI.png')"
         source240dpi="@Embed('assets/images/240DPI.png')"
         source320dpi="@Embed('assets/images/320DPI.png')"
         source480dpi="@Embed('assets/images/480DPI.png')"/>
  </s:source>
 </s:Image>
 
</s:View>

■IconItemRendererに使用する方法（decorator, iconPlaceholder, icon）
 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<?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="decorator">
 
 <s:List width="100%" height="100%">
  <s:dataProvider>
   <s:ArrayList>
    <fx:Object iconPath="item1.png" 
         itemName="テストアイテム１" 
         itemDesc="テストアイテム１についての説明。"/>
    <fx:Object iconPath="item2.png" 
         itemName="テストアイテム２" 
         itemDesc="テストアイテム２についての説明"/>
    <fx:Object iconPath="item3.png" 
         itemName="テストアイテム３" 
         itemDesc="テストアイテム３についての説明"/>
   </s:ArrayList>
  </s:dataProvider>
  <s:itemRenderer>
   <fx:Component>
    <s:IconItemRenderer iconFunction="getIcon" iconWidth="24" iconHeight="24"
         labelField="itemName"
         messageField="itemDesc">
     <fx:Script>
      <![CDATA[
       import mx.core.DPIClassification;
       import mx.core.FlexGlobals;
       
       private var strIconPath:String;
       
       private function getIcon(item:Object):Object
       { 
        switch (FlexGlobals.topLevelApplication.runtimeDPI)
        {
         case DPIClassification.DPI_160:
          strIconPath = "assets/images/160_" + item.iconPath;
          break;
         case DPIClassification.DPI_240:
          strIconPath = "assets/images/240_" + item.iconPath;
          break;
         case DPIClassification.DPI_320:
          strIconPath = "assets/images/320_" + item.iconPath;
          break;
         case DPIClassification.DPI_480:
          strIconPath = "assets/images/480_" + item.iconPath;
          break;
         default:
          break;
        }
        trace(strIconPath);
        return strIconPath;
       }
      ]]>
     </fx:Script>
     <s:iconPlaceholder>
      <s:MultiDPIBitmapSource source160dpi="@Embed('assets/images/160DPI.png')"
            source240dpi="@Embed('assets/images/240DPI.png')"
            source320dpi="@Embed('assets/images/320DPI.png')"
            source480dpi="@Embed('assets/images/480DPI.png')"/>
     </s:iconPlaceholder>
     <s:decorator>
      <s:MultiDPIBitmapSource source160dpi="@Embed('assets/images/160DPI.png')"
            source240dpi="@Embed('assets/images/240DPI.png')"
            source320dpi="@Embed('assets/images/320DPI.png')"
            source480dpi="@Embed('assets/images/480DPI.png')"/>
     </s:decorator>
    </s:IconItemRenderer>
   </fx:Component>
  </s:itemRenderer>
 </s:List>
 
</s:View>


http://www.adobe.com/devnet/flex/articles/mobile-skinning-part2.html
http://blog.denivip.ru/index.php/2012/12/multiscreen-support-in-mobile-air-applications/?lang=en
http://forums.adobe.com/message/4154447
http://forums.adobe.com/thread/1026501
Labels: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)