Android で再開する Java プログラミング（9） - 基本的なUIをマスターしよう
Android の基礎を手軽に学べる連載です。本連載は、Google が中心となって開発した携帯電話向けのプラットフォーム Android に関する記事です。ここ数回、UIの使い方について紹介していますが、今回は基本的なUIについて改めて使い方をまとめてみます。
前回までのあらすじ
Android とは、Googleが発表した携帯電話向けのプラットフォームの名称です。2007年11月に発表され、2009年夏には日本でも発売されます。既に Android の SDK が無償で配布されており、これを利用して、多くのアプリケーションが公開されています。
Android は、Java で自作ソフトを開発できる点も話題になっています。本連載では、ある程度、Java に触れたことのある方に、Android プログラミングを勧めるものとなっています。
今回は、アンドロイドで用意されている基本的なUIをまとめてみました。
Android のプログラミングスタイル
Android の画面レイアウトは、XMLで定義することができます。Adobe Flex や、Microsoft Silverlight など、最近の開発ツールでは、XMLでUIコンポーネントの配置方法を指定し、ユーザーのアクション（クリックした、マウスを動かしたなど）に応じたイベントをプログラムで記述するようになっています。Android も同様で、XML でUIの配置を指定し、UIの振る舞いやイベントを Java のプログラムで記述します。もちろん、XML を使うのが面倒、まどろっこしいという方は、全部Javaで記述することもできます。
UIの配置をXMLで記述します
基本となる画面（Activity）
Android でUIを持ったアプリケーションを作るとき、一番の土台となるのが Activity です。これは、Windows アプリケーションで言うなら、ウィンドウ(あるいは、フォーム)に当たるものです。
自分でアプリケーションを作るときは、この Activity クラスを継承したクラスを中心に開発を始めることになります。Activity を複数個作っておいて、自由に切り替えることができることができます。
描画とレイアウト（View）
基本となる画面 Activity クラス自体には描画機能はありません。実際に描画を行うのが、View クラスです。View クラスは描画機能や各種イベントの機能を提供しています。ボタンや、チェックボックスなどの各UIコンポーネントも、View オブジェクトを継承して作られています。
そして、各 Activity オブジェクトには、描画を行うメインコンテンツを１つ指定することになっています。通常は、部品の配置を担う ViewGroup を継承したレイアウトオブジェクトを指定します。
例えば、一行に１つずつUIコンポーネントを配置する LinearLayout を配置する場合には、次のようなプログラムを記述します。以下は、メインコンテンツとして、LinearLayout のインスタンスを指定し、その上に Button を２つ載せたものです。
package com.example.android;
import android.app.Activity;
import android.os.Bundle;
import android.widget.*;
public class TestWidgets extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// メインコンテンツとして LinearLayout を指定
LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.VERTICAL);
setContentView(layout);
// レイアウトにボタンを載せる
Button btn1 = new Button(this);
btn1.setText("hoge1");
layout.addView(btn1);
Button btn2 = new Button(this);
btn2.setText("hoge2");
layout.addView(btn2);
}
}
Activity には、描画用に View オブジェクトを指定することになっていますので、別にレイアウトを指定しなくても、View オブジェクトを継承した Button を指定することもできます（！）以下は、実験的に、Button をメインコンテンツとしてしたものです。
～～～
public class MyActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Button btn = new Button(this);
btn.setText("hoge");
setContentView(btn);
}
}
これは、ゲームを作る場合などに使うと便利です。以前、本連載でモグラたたきを作ったときも、このように、直接画面いっぱいの View を指定しました。
ラベル（TextView）
Eclipse で Androidのプロジェクトを作ってみると、ラベルが１つ置かれたプログラムがサンプルとして作成されます。ところが、メインクラスを開いて見ても、ラベルを作成しているようなコードは見あたりません。
実は、このラベル(TextView)は、XMLで定義されているのです。Package Explorer の、「res/layout/main.xml」を開いて見ると、このラベルが宣言されていることが分かります。また、実際に表示されるテキストは、「res/values/strings.xml」で定義されています。国際化などでラベルに表示する文字を変えたいことがあるので、文字列をリソースとして定義し、これを埋め込むことができるように工夫されているのです。
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
Java のコードだけで TextView を生成するには次のようにします。
package com.example.android;
import android.app.Activity;
import android.os.Bundle;
import android.widget.*;
public class TestWidgets extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// LinearLayout を View に指定
LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.VERTICAL);
setContentView(layout);
// ラベルを作る
TextView txt = new TextView(this);
txt.setText("我が輩は猫である"); // テキストをセット
layout.addView(txt); // レイアウト上に載せる
}
ボタン (Button)
UIコンポーネントの中でも、一番よく使うのが、ボタン（Button）です。ボタンの使用例を紹介します。以下は、ラベル(TextView)とボタン(Button)を画面に配置し、ボタンを押すとラベルのテキストを書き換えるというプログラムです。
package com.example.android;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
public class TestWidgets extends Activity {
public TextView txt;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// LinearLayout を View に指定
LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.VERTICAL);
setContentView(layout);
// ラベルを作る
txt = new TextView(this);
txt.setText("ボタンを押してください。");
layout.addView(txt);
// ボタンを作る
Button btn = new Button(this);
btn.setText("Test"); // テキストをセット
layout.addView(btn); // レイアウトに載せる
// クリックする
btn.setOnClickListener(new OnClickListener(){
public void onClick(View v) {
txt.setText("Hello!");
}
});
}
}
ポイントとなる点として、ボタンのテキストをセットするのは「setText("***")」で、クリックした時の動作には「setOnClickListener()」を利用するという点です。この書き方は、Java の GUIプログラミングに慣れた方にはお馴染みですが、別の書き方もできます。
以下のプログラムは、メインクラスに implements OnClickListener を追加し、自身の onClick() メソッドの中でイベントを処理しています。
package com.example.android;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
public class TestWidgets extends Activity
implements OnClickListener {
// UI を指定
public TextView txt;
public Button btn;
// UI生成時に呼ばれるメソッド
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// LinearLayout を View に指定
LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.VERTICAL);
setContentView(layout);
// ラベルを作る
txt = new TextView(this);
txt.setText("ボタンを押してください。");
layout.addView(txt);
// ボタンを作る
btn = new Button(this);
btn.setText("Test"); // テキストをセット
btn.setOnClickListener(this); // リスナを自身にセット
layout.addView(btn); // レイアウトに載せる
}
// クリックした時に呼ばれるメソッド
public void onClick(View v) {
if (v == btn) {
txt.setText("Hello, World!");
}
}
}
テキストボックス(EditText)
次にテキストボックス(EditText)ですが、これもボタンと同じように扱えます。
以下は、インチ→センチ、センチ→インチの変換ツールのプログラムですが、インチを入力する EditText に値を入力すると同時に、センチを入力する EditText に変換結果を表示します。
package com.example.android;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnKeyListener;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.TextView;
public class TestWidgets extends Activity
implements OnKeyListener {
// UI を指定
public EditText edtInch, edtCm;
// UI生成時に呼ばれるメソッド
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// LinearLayout を View に指定
LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.VERTICAL);
setContentView(layout);
// UIコンポーネントを作る
createText(layout, "インチを入力");
edtInch = createEditor(layout, "21");
createText(layout, "センチを入力");
edtCm = createEditor(layout,"53.34");
}
// TextView を生成するメソッド
public TextView createText(ViewGroup parent, String s) {
TextView txt = new TextView(this);
txt.setText(s);
parent.addView(txt);
return txt;
}
// EditText を生成するメソッド
public EditText createEditor(ViewGroup parent, String s) {
EditText edt = new EditText(this);
edt.setText(s);
edt.setOnKeyListener(this);
parent.addView(edt);
return edt;
}
// setOnKeyListener(this)の結果、キーを押した時に呼ばれるメソッド
// キーが押されたらリアルタイムに単位変換して変換先のエディタに表示する
public boolean onKey(View v, int arg1, KeyEvent event) {
String s;
double d;
try {
if (v == edtInch) {
s = edtInch.getText().toString();
d = Double.valueOf(s) * 2.54;
edtCm.setText(String.valueOf(d));
}
if (v == edtCm) {
s = edtCm.getText().toString();
d = Double.valueOf(s) * 0.393700787;
edtInch.setText(String.valueOf(d));
}
} catch (Exception e) {
}
return false;
}
}
EditText でポイントとなるのは、テキストの設定が、setText()で、テキストを取得するのが、getText()、そして、キーが押されたときに処理するイベントを、setOnKeyListener() で設定するという部分です。
まとめ
以上、Activity、View、TextView、Button、EditText と Android のUIの基本についてまとめてみました。テキストボックスとボタン、ラベルさえあれば、簡単なアプリを作ることができると思います。ある程度、Java ができる人にとって本稿が、Android をはじめるきっかけになれば幸いです。
このサイトについて
執筆者紹介
クジラ飛行机
TrackBack URL :
技術記事のRSSフィード
News&TopicsのRSSフィード
製品紹介のRSSフィード
この執筆者のRSSフィード