2012/12/18

これからのAndroidアプリはxhdpiとhdpi

今まではアプリの画像リソースを用意する時は、hdpiをメインに余力があれば、mdpiも用意するというのが主流でしたが、Android4.0以上の端末がたくさん発売されて、それにともない、高解像度の端末も増えてきました。

公式の情報によると2012年12月3日時点でldpiが約2%、mdpiが約18%、hdpiが約51%、xhdpiが約29%になっています。
これからはldpi、mdpiの端末が減っていき、xhdpiの端末が増えていくはずなので、画像リソースはhdpi、xhdpi用の2種類を用意するのがよさそうです。

xhdpiの端末でもhdpiの画像リソースがあれば、表示されるようになっていますが、表示する上で問題があります。

わざとhdpiにだけ画像をおいて、試してみます。
今回はAndroidのマーク(280x280の大きさ)の画像を用いました。
左が、hdpiで、右がxhdpiのキャプチャー画像です。


見た目の大きさを同じにするためにxhdpiの端末では画像がシステムによって拡大されています。
拡大するということは、画面に描画する際に画像処理が入るので、バッテリーとメモリを消費することになります。
今回のテストでは、画像が一つなので、あまり問題ありませんが、アプリをフルデザインしていると、アプリが強制終了する原因にもなります。

最近はアプリのデザイン自体は1280x720(xhdpi)で作ることが理想的(詳細は「デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips」)なのですが、その大きさで作った画像素材を何も考えずにhdpiに入れて実装し、苦労してレイアウトを調整(viewのサイズをハードコーディングしたり)して、作ってたことがありました。そのアプリは、リリース後、リソースが見つからないなどのバグ報告がちょこちょこ上がってきていました。

そしてリソース画像の用意ですが、デザイナーさんがxhdpiとhdpiの2種類を用意してくれる時はそれでいいのですが、1280x720でデザインして、プログラマーのもとにやってくるのはxhdpi用の画像だけという場合があります。
自分が関わっているプロジェクトでも、xhdpi用の画像だけしか渡されませんでした。

なのでこちらですべての画像をリサイズしなければいけませんでした。

自分が画像をリサイズする際に、一つ一つ変換するのはとてもめんどくさかったので、macに標準で入っているAutomatorを使いました。

Windowsで開発されている方は、画像を一括変換できるフリーソフトがあると思うので、そちらを使ってください。

Automatorはあまり複雑なことはできませんが、単純な作業を任せるのに向いているので、まだ使ったことない人は色々ためしてみるといいですよ。

今回はxhdpiの画像をhdpiの画像に変換するための使い方を紹介します。
mdpiを1とした時に、hdpiは1.5、xhdpiは2の割合なので、xhdpiの画像を75%にしたものがhdpiの画像になります。

その作業をAutomatorでやってみます。
  1. まずは、変換作業に使うフォルダを作ります。どこでもいいので「xhdpi」と「hdpi」のフォルダをつくり「xhdpi」に画像リソースをすべて入れます。
  2. Automatorを起動し、「ワークフロー」を選択します。
  3. 左のメニューから「ファイルとフォルダ」→「Finder項目を検索」を選び、右のスペースにドラッグ&ドロップします。
  4. 「Finder項目を検索」の詳細を設定します。検索を「xhdpi」にして、「ファイル拡張子」が「png」「である」に設定します。
  5. 左のメニューから「写真」→「イメージをサイズ調整」を選び、右のスペースの「Finder項目を検索」の下にドラッグ&ドロップします。
  6. 途中「Finder項目のコピー」を追加するかどうかのダイアログが表示されるので、「追加」を選択します。
  7. 「Finder項目をコピー」の保存先を「hdpi」に設定します。
  8. 「イメージサイズを調整」で「比率(パーセント)指定」「75」に設定します。

上記の手順でxhdpiの画像からhdpiの画像を複製するワークフローの完成です。
あとは右上の「実行」ボタンをクリックすれば、処理が走って、すべての画像を複製してくれます。Automator便利!
xhdpiとhdpiで同じ名前の画像ファイルができるので、Androidプロジェクトのresフォルダにそのまま入れて大丈夫です。

0 件のコメント:

コメントを投稿