Tweet Yahoo!ブックマークに登録 しよう!
  1. 1.開発環境の構築
  2. 2.HelloWorld
  3. 3.Androidアプリの特徴
  4. 4.アクセス許可
  5. 5.インターフェイス

5_基本的ユーザー・インターフェイス構成要素

F_Androidの測定単位

各種単位の理解の必要性
 以前に説明したソースコードで「バディング(Padding) 」の"長さ"を指定するのに「px:ピクセル」という単位を使用した。
 Androidでは、他の目的で使用する単位も存在する事を強調したい。Androidは多数の端末製造社で使用されている「開発型プラットフォーム」なので、皆さんが開発したアプリケーションは如何なる解像度の端末でも実行可能である。しかし、その目的に適した単位を適切に利用する事によってそれが可能となる。従って、各種単位を正確に理解し、解像度の違いによってその単位を用いた画像がどう表示されるか?自分の目で確認する必要がある。
 この単位の理解はとても重要なので、しばし「レイアウト」の事は忘れて、この各種「単位」に焦点を当てて学んでいこう。
 
Androidで扱う各種単位 
 Androidには"長さ"を扱う単位として「px:ピクセル」以外に「dp」「sp」「in」「mm」「pt」などがあるが、ここでは「px」と「dp」について言及する。

1.pxピクセル」は、画面上に点1つを表示する単位である。いま、貴方が見ているこのモニターの画面は、無数の点の集合体であり、この「点の個数」は「モニターの大きさ」や「グラフィックカードの性能」の違いによって変ってくる。
 仮に、モニターの解像度が1680×1050であれば、画面に横1680個、縦1050個の点を出力できるわけだ。
 又、解像度が320×480のAndroidフォンであれば、横に320個の点、縦に480個の点を出力できる、即ち合計320×480=153600個の点を用いた画像を出力できるという事だ。
 ところで「px:ピクセル」を利用した画面表示には一つ問題がある。即ち、解像度の違いによって視覚的な差が生じてしまう。例えば、解像度320×480のAndroidフォン用にアプリケーションを開発するのだが、この時「px:ピクセル」単位を使用して、ウイジェットの余白大きさを調節し、アプリケーションが完成したと仮定しよう。開発環境では、思った通りのインターフェイスを出力できるが、解像度の違う他のAndroidフォンでそのアプリケーションを見た場合、ウイジェットの位置や間隔が不自然に見える、という問題だ。

2.dp(dip)=Density-independent Pixel: 密度非依存ピクセル」は、上記の問題を解決した表示方法における「単位」だ。コード上に記述する時は「dp」とか「dip」を使う。「dp(dip) 密度非依存ピクセル」では、LCDピクセル密度(density)が160の時の画面では、1dpの画像と1px(ピクセル)の画像は同じ大きさになる。 しかし、LCDピクセル密度(density)が240の画面になると、1dpの画像より、1px(ピクセル)の画像は小さくなる。1px(ピクセル)を1.5倍すれば同じ大きさになる。
 要するに、ピクセル密度(density)の違いによってpxとdpの比例関係は異なってくる。この比例関係は、下記の数式で表せる。

 px(ピクセル) = dp ×  (density<ピクセル密度 / 160 ) 

 しかし数式での説明は直感的に分りにくい。従って、実際にアプリを動作させて、その画像を見ながら説明したほうがいいようだ。
これから行う順序を説明すると、
*プロジェクトの
「レイアウト画面」に「ボタン」や「テキスト・ビユー」を準備する。
*解像度・densityの違う2つの「エミュレータ」AVDを準備する。
*「レイアウト画面」と「ボタン」が、2つの「エミュレータ」AVDでどう表示されるか、観察する。
 という手順だ。


先ず、既につくった「MutipleActivityプロジェクト」を開き、下記 ~ の処理をする。

「MutipleActivityプロジェクト」を修正する
「res > layout」フォルダに「linearlayout.xml」ファイルを追加し、以下のように修正する。このレイアウトxmlファイルの追加の方法は以前に学んだ
 ポイントは、縦横のサイズを「px(ピクセル)」と「dip(密度非依存ピクセル)」の2種類の単位を使用して設定している点だ。
 修正が完了したら、緑枠の「Graphical Layout 」をクリックすると、下画像右のように表示される。なお、この「Graphical Layout 」画面は、正確な表示をしてくれないので、ある程度の目安として見る。
 
 上から、順に50px(ピクセル)のテキストビュー、100px(ピクセル)のボタン、次に100dp(密度非依存ピクセル)のボタンが並んでいる。

5_f_01.png


main.xmlに「ボタン」を追加する。①のレイアウトにジャンプする為の「ボタン」だ。

5_f_02.png


次に下図の順序で、ManifestファイルにLinearActivityという「アクティビティ」を追加する。すると、LinearActivity.java がsrcフォルダのパッケージに自動生成される。
「アクティビティ」追加の詳しい方法は、以前に学んだ。

5_f_03.png


自動生成されたLinearActivity.java を下画像のように修正する。ここが実行されると①でつくった「レイアウト」が呼び出され表示させる。

5_f_04.png


上画像②の「ボタン(リニア・レイアウト)」のイベントを受けて、LinearActivityアクティビティ を実行する為のコードを書く。

5_f_05.png


以上で、プロジェクトは完成だ。最後に「ビルド」をすれば修正されたアプリが完成する。 

 

AVDを2つ準備する
次に「解像度」と「density」の違う2つのAVDを作成する。
先ず下画像の「Android 2.2 - API Level 8」を選択。何故これを選ぶかというと、プロジェクトがこのバージョンでつくられているからだ(^^)。

5_f_06.png


次に、下画像の要領で「320_480_density_160」の名前のAVDをつくる。
Skinの欄で「HVGA」を選択すれば、自動的に「320×480 density 160」のAVDを生成してくれる。

5_f_07.png


次は上と同じ方法で、「480_800_density_240」の名前のAVDを生成する。
ここではSkinで「WVGA800」を選択すれば、自動的に「480×800 density 240」のAVDを生成してくれる。

5_f_08.png


プロジェクトの実行
次に2つのAVD「エミュレータ」を起動させ、①のレイアウトが解像度の違いでどう表示されるかを比較したい。
下画像の要領で、プロジェクトを「320×480 density 160」と「480×800 density 240」の2つのAVDで実行する。
注意) なお、ここでTarget > Automatic > AVD > Appy を押すと、プロジェクトの自動実行時には、指定したこのAVDが起動することになる。対象AVDを固定したい時にチェックを入れる。
 下画像の実行方法で対象AVDを、その都度確実に選択し実行する方法で、解像度の違うAVDを起動させる。

5_f_09.png


2つのAVDが立ち上がった。下画像(左)が「480×800 density 240」で、右が「320×480 density 160」だ。
下画像のAVD違う大きさで表示された。何故か?それは、AVDの解像度が違うから、パソコン上では違う大きさに表示されたのだ。
 なるほど、と納得は出来る。しかし、AVD違う大きさだと「ボタン」などの表示の比較は難しい。

5_f_10.png


解決策という事でいろいろ調べた結果、解像度の違うAVDを同じ大きさで表示する方法があった。

解像度の違う2つのAVDを同じサイズで表示する
⑪-A  解像度の違う2つのAVDをモニター上に同じサイズで表示する為に、下画像の順序でAVDを起動させる。
 ポイントはLaunch Optionの「スクリーンサイズ」を7とし、「モニターdpi(1インチ当りのドット数)」を100とする。この値を2つのAVDで、それぞれ同じにしてやる。
 この数字は皆さんのPC環境に合わせる。最後の「Launch」を押せばAVD「エミュレータ」が起動する。
5_f_10a.png

-B 解像度の違うAVDが同じサイズで表示された(下画像)。
 さあ、これで比較し易くなった。左が解像度が高いほうの 480×800 density 240 だ。
 density 240 を見ると、px(ピクセル)で指定した「ボタン」や「テキスト・ビュー」が、小さく表示された。それに、中の文字列は一部欠けて見えない。
 ここで重要視したいのは、px(ピクセル)の事よりもdp( 密度非依存ピクセル)の存在だ。一番下の「ボタン」100dpを見てみよう。
このdp単位を使った「ボタン」は、解像度に関係なくサイズがほぼ同一だ。
5_f_10b.png

それならば、レイアウトの長さの単位を全てdp( 密度非依存ピクセル)に変更すればいい、と言う事になる。
 下画像のxmlファイルの、赤丸の単位を全てpx(ピクセル)からdp(密度非依存ピクセル)に修正・変更する。変更後は「ビルド」を・・・

5_f_11.png


そして2つのAVDで実行し比べて見る。
AVD2つが既に動作中の場合は、下画像の方法で選択してやればいい。変更した内容が反映された状態でアプリが再起動する。
5_f_11b.png

下画像が2つのAVDの結果表示だ。
右の「density 160」を見ると「ボタン」も「文字列」も正常に表示されている。
そして、高解像度(左)の「density 240」も「ボタン」や「文字列」が正常に表示されている。

5_f_12.png


結論dp(dip): 密度非依存ピクセル(単位)を使ってレイアウトを構成すれば、解像度の違う端末でも同一のレイアウト表示が可能だ。
実際、Androidが提供しているサンプルアプリも、サイズ(大きさ)に関するコードはdp(dip)単位を利用している。インターネットで検索しても、dp(dip)単位を奨励しているサイトが多数存在する。
 従って、これから学ぶレイアウト関連もこのdp(dip)単位を活用する事にする。