AIR for iOS/Android で 複数DPIに対応する


新しいiPadが発表されて、また1つ検証端末が増えましたね。
従来のiPad向けに AIRで開発したアプリが、高解像度の新しいiPadでどのように表示されるのか。。。
今回は、AIRアプリで複数DPIに対応するための、プロパティやクラスをご紹介します。

applicationDPI を使う

Flex には、DPIに関するプロパティが主に3つあります。

  1. Capabilities.screenDPI: 実行端末の生のDPIの値
  2. Application.runtimeDPI: screenDPIの値を端数処理した値(160/240/320)
  3. Application.applicationDPI: 開発しているアプリのターゲットとするDPIの値(160/240/320)

applicationDPI に値を設定すると runtimeDPI と比較して、
実行端末のDPIに合わせてコンテンツを自動的に拡大・縮小してくれます。

例えば、applicationDPI =160のアプリを、screenDPI=320の端末で表示すると、
コンテンツが200%に自動スケーリングされるわけです。
これは便利そうですね! 実際に使ってみました。(applicationDPI を指定しないと、runtimeDPIの値が入ります)



左は applicationDPI の指定なし、右は applicationDPI を160で指定したもので、
上にFXGのベクターアセットと、下にPNGのビットマップアセット
を並べています。
検証端末は Galaxy nexus  なので、screenDPIは320になってます。

applicationDPI プロパティを使うことで自動的にスケーリングされて、
DPIの異なる端末でも、見た目上はほぼ同じ大きさに表示されます。
ユーザが選択するボタンのように、小さく表示されては困るコンポーネントなどにはとても有効ですね。

applicationDPI はFlash Builder でモバイルプロジェクトを作成する際に、デフォルトで160DPIが指定されます。
<s:ViewNavigatorApplication> タグまたは <s:TabbedViewNavigatorApplication> で指定可能です。

<s:ViewNavigatorApplication xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
firstView=”views.HomeView”
applicationDPI=”160″>

MultiDPIBitmapSource を使う

applicationDPI プロパティが便利そうだ、ということで使ってみると、
テキストとベクターアセットはキレイに拡大されても 、ビットマップは汚くなってしまうデメリットがあるようです。
そこで登場するのが、MultiDPIBitmapSource クラスです。

<s:Image id=”multiDPIImg”>
<s:source>
<s:MultiDPIBitmapSource
source160dpi = “@Embed(‘/assets/DPI160.png’)”
source240dpi = “@Embed(‘/assets/DPI240.png’)”
source320dpi = “@Embed(‘/assets/DPI320.png’)”
/>
</s:source>
</s:Image>

上記のコードのように、DPI毎のビットマップ画像を用意しておき、
runtimeDPI の値に応じたビットマップを表示してくれるクラスです。

上に通常の1ソースの Image と、下に MultiDPIBitmapSource Imageを並べています。
MultiDPIBitmapSource を使うと、実行端末の320DPIに応じて、320DPI用のビットマップアセットが表示されており、
上下を比べると、やはり強制的に拡大された上のビットマップよりも、下のビットマップがキレイに表示されていますね。
(サムネイルクリックで拡大表示)

まとめ

以上のように、複数DPIに対応したアプリ開発に有用なプロパティとクラスを紹介しました。

  1. applicationDPI プロパティを指定して自動スケーリングを活用する。
  2. アイコンやボタンなどは出来るだけ  FXG を使うようにする。
  3. 写真等のビットマップを使うときは MultiDPIBitmapSource クラスを使う。

今回はDPIに注目してマルチデバイス対応に取り組んでみましたが、
新のマルチデバイス 対応の道のりは遠く、以下の要素に対応した画面が必要になります。

「プラットフォーム(OS)」×「回転(縦・横)」×「画面サイズ(スマホ・タブレット)」×「密度(DPI)」

自動スケーリングの機能を使ったタブレット向けアプリを、スマホで実行したらコンテンツが見切れていたり、
レイアウトが崩れたり、、、対応しなければならない端末に合わせたマルチデバイス対応が必要になります。

以下の参考URLにより詳しいマルチデバイス対応の手法が紹介されているので、
ぜひチェックしてみてください。

【参考URL】
モバイルアプリケーションでの複数のスクリーンサイズと DPI 値のサポート
Best Practices for Building Flex Tablet Applications
How to Develop Amazing Enterprise AIR Apps for Tablets and Smartphone