tana_ash's diary

プログラミングや電子工作など。やってみたこと、わかったことをまとめておく場所。

drawableとrawの違い、謎の拡大

全ての始まり

Android端末のバッテリー情報や電波強度を遠隔で確認するアプリを作成している途中。
BitmapFactory.decodeResource(R.drawable.なんとか) を使って画像を読み込み、
その画像に文字や図形を描画しPNG画像として書きだすプログラムを作っていました。
しかし、何故か描画位置がずれます。しかし、画像を見てみるとこれは座標を2倍すれば正しい位置に表示されるのではないかと思いました。
案の定、座標の数字を全て2倍にしてみると正常に描画されました。
何故そんな現象が起こったのかはわかりませんでしたが、そのまま別の部分を作ることにしました。
その時の私は、後に謎の動作に悩まされることになるとは思ってもいなかったのです。

ブラウザの違い?

このアプリは、Android端末上にHTTPサーバーを立て、Webページとして端末状態を表示します。
そのため私は表示されるページのHTMLを書いていました。
それは思っていたよりも厳しい道となりました。思い通りに画面に表示させるCSSやHTMLを書くのは大変です。
ましてや、複数の端末、ブラウザに対応させるとなるとさらに面倒になります。
画像と文字を表示するHTMLがおおかた完成すると、実際の端末のブラウザで動作を確認しました。
まずは普段使用しているOpera Mobile。これは正常に動作します。
次に、標準ブラウザと同じエンジンを利用するAngel Browser。
widthを50%に指定していたものの、何故か大きな画像が表示され、画面の横幅に近くなってしまいます。
無論、画像の右には文字を表示するスペースなどありませんでした。
次に標準ブラウザ。長い起動時間を待ちページを読み込むと、Angel Browserと同じ結果となりました。
画像のサイズが大きくなるのは何が原因だったのでしょう。
私は考えました。まず、これはブラウザの違いによるものではないかと。
しかし、解決の仕方が思いつきません。
そこで私は、PCで表示し、画像のサイズを確認しました。
縦横160pxのはずの画像は、何故か縦横320pxに拡大されていました。
そこでふと私は、以前出会った描画がずれる問題を思い出しました。
2倍に拡大された画像、座標を2倍すると正しく描画される図形。
二つの事実がつながりました。
drawableリソースから画像を読み込んだ時点で、画像は2倍に拡大されていました。
drawableリソースについて検索し、
http://www.techdoctranslator.com/android/guide/resources/available-resources/drawable-resource
このページを読んでみると、drawableの画像は最適化されることがあるとのことです。
確認はできませんが、最適化の関係で画像が拡大された可能性もあります。

エピローグ

こうして私は謎の現象の原因に気づき、画像をdrawableリソースからrawリソースに変更しました。
rawリソースはopenRawResourceでInputStreamを取得し、BitmapFactory.decodeStreamで読み込みます。
無事、画像サイズは正しいサイズになりました。
しかし、私は別の問題が発生することに気づいていませんでした。
拡大されていたために描画する図形の座標を2倍にしていたため、描画される図形がずれてしまいます。
こうして私はプログラミングに戻ることにしました。

おわり