anyDensity="false"から脱出するためにAndroidの画面サイズ関連を理解する
Titanium Mobileで開発していると、iOSアプリで確認してからAndroidアプリで確認してみると、レイアウトが崩れてしまうことが多い。
当初は「anyDensity="false"」に設定して誤魔化してきたけど、どのAndroid端末でも同じユーザーインターフェイスになるように画面サイズに関する資料を読んでみたときの覚書。
まずは公式ドキュメントを読む。
- Supporting Multiple Screens | Android Developers
- 2. マルチ画面のサポート - ソフトウェア技術ドキュメントを勝手に翻訳
（公式ドキュメントの日本語訳）
用語と概念を理解する
| Screen size 画面サイズ | 端末の物理的な画面の大きさ。 Androidでは、すべての画面サイズを４つに分類している。 small normal large xlarge (extra large) |
| Screen density 画面密度 | 画面に対するピクセル数の密度。 単位はdpi (dots per inch) ディスプレイではピクセルとドットが1体1で対応するので、ppi (pixel per inch)でも同じ意味になる。（wikipedia） Androidでは、全ての画面密度を４つに分類している。最近１つ増えた。 ldpi (low) mdpi (medium) hdpi (high) 端末例）Samsung S2 (SC-02C), Xperia arc (SO-01C) xhdpi (extra high) 端末例）Samsung S3 (SC-06D), Xperia A (SO-02E) xxhdpi 端末例）Samsung S4 (SC-04E), HTC J One (HTL22) 参考：Androidアプリーリソース画像サイズ＆種類ー : Excite Designer's Blog 参考：最新スマホ26機種徹底比較｜スマートフォンガイド 参考：画面サイズと画面密度のシェア率 | Android Developers |
| Orientation オリエンテーション | 画面の向き。 横長か縦長か。 |
| Resolution 画面解像度 | 画面のピクセル数の総数。 横ピクセル数ｘ縦ピクセル数（例：1024x768）で表記される。 開発するときは画面のサイズと密度のみを意識し、解像度を意識することはない。 |
| Density-independent pixel(dp) 密度非依存ピクセル | 画面密度に影響されない仮想的なピクセル単位。 これが見た目の長さになる。 px = dp * (dpi / 160) この「dp」単位を用いて画面レイアウトすべき。dipも同じ意味 |
Titaniumのデフォルトでは
Androidは「pixel」
iOSは「dp」
を使う。詳しくは公式ドキュメントで。
開発するときに長さを指定する箇所は共通関数を使う記述するようにしていると楽。
frameView = Titanium.UI.createView({
width: Titanium.UI.FILL,
height: Titanium.UI.SIZE,
top: this.$.utils.len(20) // ← 各クラスに必ず渡す「$」に共通関数を定義してある
});
< 2015/07/28 Modified >
tiapp.xmlでデフォルトの単位を指定出来る。最近は新しいプロジェクトを作成するとデフォルトで「dp」が設定してある。
<property name="ti.ui.defaultunit" type="string">dp</property>
画面密度に対応した画像を用意する
iOSのRetina対応は倍の大きさの画像を同じディレクトリに「@2x」をつけて置いとけばいい。これはTitaniumではなくiOS開発のルール。
Androidの場合は指定のディレクトリを用意しておけば自動で読み込んでくれる。
Androidは「9-patch」という仕組みがあるので、要素に合わせて背景画像が伸縮する場合も綺麗に表示できる。
- [Android アプリの UI デザイン] 9-patch の作りかたのまとめと Tips ｜ Developers.IO
- 9patchを覚えよう！ - 明日の鍵
- Draw 9-patchを使ってAndroidアプリを解像度に応じたリキッドデザインする｜caraldo.net | WebとiPhoneとロードバイクが大好き！
アイコンの作成に関するTipsも参考になる。
< Related Posts >