これで作れる！ Androidのアプリケーション 第4回

Androidアプリを構成する「アクティビティ」を実際に作る

レイアウトエディターを使って、実際に画面を作ってみる

　それでは、レイアウトエディターを使って、実際に画面を作ってみるましょう。今回はまた最初からプロジェクトを作ります。名前は「Sample04」としますが、各自適当な名前を付けてください。

　プロジェクトができたら、res/layoutにあるmain.xmlをダブルクリックして開きます。Layoutタブをクリックしてレイアウトエディターを表示させます。このレイアウトエディターにはバグのせいか、ときどき表示がおかしくなったり、うまく動かなかったりすることがあります。そういうときには、一度Eclipseを終了させて再起動してみてください。また、Localeで英語以外の日本語のメッセージなどを表示させるとうまくいかないことがあります。このようなときには「Any」を選択して英語表示にします。

　さて、新規プロジェクトを作るとmain.xmlというレイアウトファイルが作られ、そこにLinerLayoutとTextViewが含まれています。まずは、これを元にサンプルを作ってみることにしましょう。

　レイアウトエディターは、左側にLayoutsとViewsというリストがあり、ここから部品をドラッグして中央の黒地の領域に落とせば、配置が行えます。このとき、挿入先が枠でしめされます。

レイアウトエディターでは、左側のリストからビュー部品をドラッグしてくると、挿入可能な場所が黄色い線と○と×の組合せで表示される

　まずは、LayoutsからLinerLayoutをつかんで、黒地の領域に持っていきます。この時点では最初からあるLinerLayoutが縦に部品を配置するものであるため、TextViewの前後にしか置くことができません。マウスカーソルを動かすと、黄色い線と○に×印のマークがテキストの上下に表示されるはずです。

この場合、すでに挿入されているTextViewの前後しか挿入することができない

　最初から置かれているLinerLayoutが縦配置なのは、画面全体の配置を制御するためです。なので、これより前にレイアウトを配置する必要はありません。まずは、テキストの後ろにLinerLayoutを配置しましょう。

　次に右側のアウトラインで、いま配置したLinerLayout（LinerLayout01という名前が付いているはずです）をクリックして、下でプロパティタブを開きます。プロパティに「Orientation」という項目があるので、それを探し、マウスでクリックしたら、右端の三角マークをクリックして、リストから「Horizontal」（水平）を選びます。これで、水平方向にビューを並べるLinearLayoutができました。

ListView01を選択してプロパティから「Orientation」選択する。右側のボタンを押せば、設定可能な値として「Vertiacl」（縦方向に配置）、「Horizontail」（横方向に配置）がリストとして表示される

　今度は、このLinearLayoutに「テキスト（TextView）」「テキスト入力欄（EditText）」「ボタン（Button）」を入れてみましょう。同様にViewsからこれらをドラッグして下に配置していきます。このままだと、LinearLayout01と同じレベルに縦にならんでしまいます。

ビューを挿入した段階では、入れ子関係が正しくできていないため、一番外側のLinearLayoutの影響をうけてビューが縦に並ぶ

　そこでアウトラインで、TextViewを選択して上矢印ボタンを押します。すると、TextView01がインデントされました。これで、このTextView01は、LinearLayout01の中に入りました。同様にEditTextとButtonを入れます。

入れ子関係を正しくした状態。ただし、ビューそれぞれの設定が終わっていないため、ビューのサイズなどが変な状態のままになっている

　少々変な状態になってしまいましたが、これは個々のViewの設定をしていないのと、配置ルールをなにも設定していないからです。

　このXMLによるレイアウト設定は、すべてプロパティで行ないます。実行時に形が変化する（たとえば表示する文字列が変化するTextViewなど）でない限り、レイアウトの編集時にプロパティで設定しておけば、別途コードでパラメータを修正する必要はありません。

　表示がおかしいのは、それぞれのデフォルトのテキストが設定されておらず、デフォルト値であるid名になっているからです。まずは、これを直しましょう。

　今度は、res/valuesでstrings.xmlをダブルクリックして文字列リソースエディターを開きます。

ビューに文字列を設定するため、まず文字列リソースを作る。Addボタンでリソースを追加できる

　ここでAddボタンを押して、ダイアログで「String」を選択してOKを押します。

ダイアログでは「String」を選択して文字列リソースの作成を指示する

　すると、リソースエディターの右側にNameとValueという欄が表示されるので、文字列リソースの名前と値を入れます。

リソースの名前（Name）と値（Value）を指定する入力欄が表示される。ここにリソース名と文字列を設定する

　ここでは、以下の3つのStringリソースを作ります。

名前（Name）	値（Value）
editNameLabel	NAME
defaultNAMEText	Enter NAME
NameButtonLabel	Set

　これらを入れたら、ツールバーのフロッピーアイコンやファイルメニューを使ってstrings.xmlを保存します。

　main.xmlタブをクリックしてレイアウトエディターに戻ります。アウトラインで、TextView01を選択し、プロパティで「Text」を選択します。現在は「@+id/TextView01」という文字列が入っています。ここで、右端のボタンを押します。すると、strings.xmlに定義されたStringリソースのリストが表示されます（strings.xmlをセーブしていないと設定したリソースが表示されないので注意）。

プロパティのTextの設定で定義済み（string.xml）の文字列リソース名が表示されるので、この中から選択するだけでいい

　ここで「editNameLabel」を選択します。するとプロパティの値には、「@string/editNameLabel」という値が入ります。これが、文字列リソースの参照方法です。この@と/を使う記法は、プロパティ設定では頻繁に使うので、覚えておけば、直接入力ができます。

　前回も紹介したようにstring.xmlは、違う言語用の「values」フォルダ（たとえばvalues-ja）を使って、他の言語用のものを作成できます。このときレイアウトファイル側では、同じ名前を持つリソースが使われます。リソースを使えば、直接文字列をプロパティに指定してしまうことなしに、表示させる文字列を指定できるのです。