anyDensity="false"から脱出するためにAndroidの画面サイズ関連を理解する

screen-adjust-for-androidTitanium Mobileで開発していると、iOSアプリで確認してからAndroidアプリで確認してみると、レイアウトが崩れてしまうことが多い。

当初は「anyDensity="false"」に設定して誤魔化してきたけど、どのAndroid端末でも同じユーザーインターフェイスになるように画面サイズに関する資料を読んでみたときの覚書。

まずは公式ドキュメントを読む。

用語と概念を理解する

Screen size
画面サイズ
端末の物理的な画面の大きさ。
Androidでは、すべての画面サイズを4つに分類している。

small
normal
large
xlarge (extra large)
Screen density
画面密度
画面に対するピクセル数の密度。
単位はdpi (dots per inch)
ディスプレイではピクセルとドットが1体1で対応するので、ppi (pixel per inch)でも同じ意味になる。(wikipedia
Androidでは、全ての画面密度を4つに分類している。最近1つ増えた。

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
画面解像度
画面のピクセル数の総数。
横ピクセル数x縦ピクセル数(例: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」という仕組みがあるので、要素に合わせて背景画像が伸縮する場合も綺麗に表示できる。

 

アイコンの作成に関するTipsも参考になる。

 

 

< Related Posts >