blog

Android開発入門 第2回 ~GUIコンポーネントの使い方~

2011.06.13

システムソリューション部 秋久です。

今回は、AndroidのGUIコンポーネント(ウィジェット)の使い方について紹介していきます。

Androidの開発環境の構築については、Android開発入門 ~AndroidでHelloWorld~を参照してください。

■GUI画面をプログラムコードで作成
前回の記事でのHelloWorldは、こちらの方法を使用して表示しました。

上記例では、テキストを表示するウィジェットのTextViewを1つだけ表示しています。
アクティビティのコンテンツビューにViewオブジェクト(ここではTextView)をsetContentViewメソッドを使用して設定していますが、コンテンツビューにはViewオブジェクトを1つしか設定できません。

複数のウィジェットを画面に表示させるには、ViewGroupクラスのオブジェクトを使用します。
ViewGroupクラスはaddViewメソッドにより、Viewクラスを複数配置することができます。
では、複数のウィジェットを配置した画面を作成してみましょう。

上記のサンプルプログラムでは、テーブルにビューを配置していくTableLayoutクラスを使用して、「名前」、「メールアドレス」、「メッセージ」を入力し、ボタンを押下して送信する画面を作成しています。

まず、TableLayoutクラスのインスタンスを生成し、コンテンツビューに設定します。
TableLayoutクラスは、TableRowクラスのオブジェクトを格納していくクラスとなります。
TableRowクラスは、テーブルの1行に相当するクラスです。
よって、必要な行の数だけTableRowクラスのオブジェクトをTableLayoutクラスのオブジェクトに格納していくことになります。
サンプルプログラムでは4つのオブジェクトを作成しています。
TableRowクラスのオブジェクトにaddViewメソッドを使用してビューを格納していきます。

各項目を入力する行では、TextViewとEditTextの2つのオブジェクトをTableRowに格納しています。2つのオブジェクトを格納することにより、1行に2列の構成が出来上がっています。
ボタンの行では、格納するオブジェクトは1つです。
2列は必要ないので、2列にまたがってオブジェクトを表示することにします。

複数列を1つにまとめるには、LayoutParamsクラスのspanフィールドを使用します。

TableLayoutクラスのオブジェクトにTableRowクラスのオブジェクトを格納するには、addViewメソッドを使用します。

addViewメソッドでは、引数1に追加するビュー、引数2にLayoutParamsクラスのオブジェクトを指定します。
LayoutParamsクラスは、レイアウトパラメーターを保持するクラスです。
引数1に幅、引数2に高さを指定します。
指定方法はピクセルの数値を指定するか、ViewGroup.LayoutParams.FILL_PARENT、ViewGroup.LayoutParams.WRAP_CONTENTを指定できます。

■XMLで作成
上記のようにコードにより画面を作成することもできますが、XMLによってGUI画面を定義することもできます。

Eclipseのパッケージ・エクスプローラーより、「/プロジェクト名/res/layout/main.xml」をダブルクリックして開きます。


上記の画面で、画面レイアウトを作成できますが今回はxmlソースを修正していきます。
画面左下部のタブ「main.xml」をクリックしてxmlソースを表示し、修正します。

次に、「/プロジェクト名/values/strings.xml」を開き、xmlソースを修正します。

最後に、ソースコードを修正します。
(Eclipseでプロジェクトを新規作成した場合は手を入れる必要はありません。)

これで、コードで作成した画面と同じ画面が作成できます。

今回は以上となります。

次回は個々のGUI部品について紹介していきます。