デザイナー・ディレクターと共有したいAndroidのUI仕様

2011年02月16日10:00

カテゴリ

ブックマーク数

開発部の井上（@inonb）です。12月に位置情報サービス・ロケタッチのAndroidアプリをリリースしました。スマートフォンと非常に相性がいいサービスですので、ぜひお試しいただければと思います。

さて、今回はAndroidアプリのUI仕様について書いてみたいと思います。

Androidは端末ごとにディスプレイサイズや解像度が違うため、iPhoneアプリと比べても画面デザインの仕様が複雑です。ロケタッチAndroidの開発にあたっては、事前にUI仕様についてデザイナーやディレクターと確認を行いました。

マルチディスプレイ対応、HTMLと似たところもあるレイアウトXML、画像表示のしくみなど、とくに重要な5点について整理してみます。

■さまざまなディスプレイ

Androidは端末ごとにディスプレイのサイズ、解像度が違います。これはディスプレイサイズが固定で解像度も2種類しかないiPhoneと大きく異なるところです。

主な現行機種のディスプレイは次の通りです。

	インチ数	ドット数	解像度
Galaxy S	4型	480×800	240dpi
IS03	3.5型	640x960	320dpi
Lynx 3D	3.8型	480×800	240dpi
Xperia	4型	480×854	240dpi
Galaxy Tab	7型	600×1024	240dpi

UIのレイアウトでも、Androidではさまざまなディスプレイを前提に、その差異を吸収するような作り方をします。

■レイアウトXML

UIの構成はレイアウトXMLと呼ぶファイルに記述します。これはiPhoneのxibファイル、WebアプリケーションのHTMLテンプレートにあたります。

サイズとポジション

サイズはlayout_width(height)、ポジションはgravityで指定します。

■pxにかわる単位 dp

レイアウトのサイズ指定では、px（ピクセル）やmm（ミリ）などいろいろな単位が使えるのですが、dpを使うのが推奨されています。

dpとは「density independent pixcel」の略です。ディスプレイの解像度の高さ（density）をpxにかけ合わせたものです。

dpでサイズをきめると、解像度が異なる端末でも、ほぼ大きさが揃って表示されるようになっています。

	解像度	density	dp
Galaxy S	240dpi	1.5	320×533
IS03	320 dpi	2.0	320×480
Lynx 3D	240dpi	1.5	320×533
Xperia	240dpi	1.5	320×569
Galaxy Tab	240dpi	1.5	400×683

たとえばGalaxy Sだと、densityが1.5なので、1dpは1.5pxになります。ディスプレイのドット数は480x800なので、画面サイズをdpで表すと320dp×533dpとなります。

■画像表示のしくみ

たとえば40dp角のコンテナに画像を配置するという場合でも、元画像の大きさ、配置のポジショニングなどで、選択肢がわかれます。

画像の描画にあたり、Androidはまず元画像のスケーリング（拡大縮小）を行い、その後設定にしたがって配置を行います。スケーリングはプレスケールとオートスケールの2つがあります。

スケーリング

Androidは端末の解像度の高さを4つに区分しますが、それぞれの解像度用のリソースフォルダを設定することができます。

低(120dpi)	ldpi
中(160dpi)	mdpi
高(240dpi)	hdpi
最高(320dpi)	xhdpi

アプリケーションアイコンであれば、mdpi用は48px角、hdpi用は72px角になります。それぞれの画像をres/drawable-mdpiとres/drawable-hdpiディレクトリに入れておくと、hdpi端末では72pxの画像が選択されます（プレスケール）。

もしhdpiディレクトリに画像がない場合、他のディレクトリから画像を探して、160dpiを基準に拡大縮小を行います（オートスケール）。

配置バリエーション

ImageViewに画像を配置するポジショニングが8種あり、scaleType属性で指定します。HTMLのimgタグに比べて自由度がかなり高いです。

MATRIX	左上からベタに配置
CENTER	中央に配置
CENTER_CROP	中央に配置し、短辺をコンテナに合わせる
CENTER_INSIDE	中央に配置し、長辺をコンテナに合わせる
FIT_CENTER	長辺をコンテナに合わせ、短辺を中央寄せ
FIT_START	長辺をコンテナに合わせ、短辺を上（左）寄せ
FIT_END	長辺をコンテナに合わせ、短辺を下（右）寄せ
FIT_XY	両辺をコンテナに合わせる

■ ナビゲーション

アプリ全体の遷移、流れとしてのUIの組み立てという点では、昨年7月にGoogle IOで行われたAndroid UIのセッション資料があります。

Twitterの公式アプリをケーススタディに、ダッシュボードやアクションバーといった、Androidのデザイントレンドが具体的に解説されています。

Android UI Design Tips

View more presentations from Android Developers.

GoogleのAndroidチームによるプレゼンなので、ドキュメントではわかりづらいAndroidのデザイン上の思想といったあたりも述べられていて、おすすめです。

ということで、Android UI仕様のおもなところを駆け足でまとめてみました。

ちなみに、上の画像はロケタッチでタッチをするともらえるシールです。現在「ローソンからあげクンキャンペーン」中ですので、よろしくお願いします。