Android で再開する Java プログラミング

• 環境設定～HelloWorld
• 図形の描画
• モグラ叩き
• モグラ叩き２
• Button と EditText で遊ぶ
• SDK1.5でのインストールから実行までを10ステップで学ぶ
• XMLでUIを作る
• 基本的なUIをマスターしよう
• docomo HT-03A を入手～実機で Android アプリを動かしてみよう
• 手書きメモを作る
• Android で遊べるスクリプト環境 ASE で遊ぶ
• Android ライフサイクルを考慮-手書きメモを作り込む
• Android Market で作品を公開しよう！
• ダイアログを制するものがAndroidを制する！

Android の基礎を手軽に学べる連載です。前回よりUIに関したトピックを扱っています。本連載は、Google が中心となって開発した携帯電話向けのプラットフォーム Android のアプリ開発について紹介します。

前回までのあらすじ

Android とは、Googleが発表した携帯電話向けのプラットフォームの名称です。2007年11月に発表され、2009年夏には日本でも発売されます。既に Android の SDK が無償で配布されており、これを利用して、多くのアプリケーションが公開されています。Android は、Java で自作ソフトを開発できる点も話題になっています。本連載では、Android をきっかけに、かつてやったことのある Java プログラミングを再開しようというものです。

以下は、Docomo から発売される Android 携帯 HT03A の紹介ページです。

• Docomo HT03A

前回より、Android の UI に注目して、使い方を紹介してきました。今回は、XMLを利用したUIの扱いについて紹介します。

GUIの作成に droiddraw を使ってみる

Android でGUIの作成を行う場合、Android 1.5 SDK の Eclipse プラグインにも、簡単な WYSIWYG のエディタがついています。しかし、現状では、あまり操作性が良くないのが難点です。そこで、はじめに、droiddraw というツールを紹介して、簡単にGUIの配置を行ってみようと思います。

• droiddraw (Windows/Mac OS X/Linux)
  • http://code.google.com/p/droiddraw/

このツールは、Java で作られており、各プラットフォームに対応しています。

とても気軽にポイポイとボタンやエディタを配置することができます。その機能は「ただ配置するだけ」に絞られているので覚えるのも簡単です。そして、配置が終わったら右下の[Generate]ボタンをクリックすると XML が生成されます。

では、とにかく使ってみましょう。前回の復習として、単位変換アプリを作ってみたいと思います。

（１）新規プロジェクトの作成

Eclipse を起動して、新規 Android プロジェクトを作成します。[File > New > Project] で Android Project を選択して、[Next]ボタンをクリックします。ここでは、「InchToCm2」というプロジェクトを作成します。

プロジェクトの設定ダイアログでは、下記のように設定します。

（２）droiddraw でレイアウトの作成

droiddraw を起動して、レイアウトを作成します。以下の図のように配置します。

そして、[Generate]ボタンをクリックして、レイアウトのXMLを作成します。

（３）XMLをプロジェクトに貼り付け

Package Explorer から、res/layout/main.xml を開き、main.xml を編集状態にします。そのままクリックしただけでは、Eclipse の GUIエディタが出るので、画面下側のタブで、main.xml をクリックします。編集画面になったら、そこへ先ほど取得したXMLを貼り付けして保存します。

file:main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/widget27"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
>
<TextView
android:id="@+id/txtInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="インチを入力してください。"
>
</TextView>
<EditText
android:id="@+id/edtInch"
android:layout_width="315px"
android:layout_height="wrap_content"
android:text="21"
android:textSize="18sp"
>
</EditText>
<Button
android:id="@+id/btnConv"
android:layout_width="316px"
android:layout_height="wrap_content"
android:text="変換"
>
</Button>
<TextView
android:id="@+id/txtResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="***"
android:textSize="28sp"
>
</TextView>
</LinearLayout>

（４）プログラムを記述

「src/com.example.test/InchToCm2.java」を開いて、これを下記のように書き換えます。前回のプログラムと比べてみると分かりますが、画面のレイアウトをXMLに任せてしまうと、ずいぶん見晴らしがよくなりますね。

file:InchToCm2.java

package com.example.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class InchToCm2 extends Activity {
	public Button btnConv;
	public EditText edtInch;
	public TextView txtResult;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //
        btnConv = (Button)findViewById(R.id.btnConv);
        edtInch = (EditText)findViewById(R.id.edtInch);
        txtResult = (TextView)findViewById(R.id.txtResult);
        //
        btnConv.setOnClickListener(new View.OnClickListener(){
			public void onClick(View v) {
				String s_inch = edtInch.getText().toString();
				double inch = Double.valueOf(s_inch);
				double cm = 2.54 * inch;
				String s_cm = String.valueOf(cm);
				txtResult.setText(s_cm);
			}
        });
    }
}

（５）実行してみる

実行ボタンをクリックするか、メニューから[Run > Run]をクリックすると、どのように実行するのかを尋ねられます。「Android Application」を選択するとアプリケーションが実行されます。

すると、下記のようにインチからセンチへの単位変換が行えます。

XMLを使ったGUIの使い方

res/layout ディレクトリに、XMLを保存すると、自動的に、リソースIDを定義したクラスが生成されます。そして、そのIDを指定することで、そのインスタンスを得ることができます。

Button btnConv = (Button)findViewById(R.id.btnConv);

UIを改良してみる

次に、単位変換ツールをもう少し使いやすく改良してみます。Spinner コンポーネントを使って、インチ→センチと、センチ→インチを相互に切り替えられるように工夫してみます。

はじめ、Spinner という名前から、数値の値を上下するものと思っていたのですが、Android の Spinner は、コンボボックスにあたるコンポーネントです。Spinner をクリックすると選択肢が現れます。

Spinner を使う際には、まず、アイテムを表示するためにレイアウトを作っておく必要があります。（これは、アイテムを表示する時の外観を決定するためのものです。）

Package Exploerer で res/layout に、以下のような list.xml を追加します。

file: res/layout/list.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:padding="3dip"
  android:textColor="#000000"
/>

そして、メインのXMLに <Spinner>タグを追加します。ここでは、id に「spinUnit」という名前をつけました。

～～～
	<Spinner android:id="@+id/spinUnit"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"></Spinner>
～～～

これで、準備完了です。InchToCm2.java を次のように書き換えます。

package com.example.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Spinner;
import android.widget.SpinnerAdapter;
import android.widget.TextView;

public class InchToCm2 extends Activity {
	public Button btnConv;
	public EditText edtValue;
	public Spinner spinUnit;
	public TextView txtResult;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        // id からインスタンスを取得する
        btnConv = (Button)findViewById(R.id.btnConv);
        edtValue = (EditText)findViewById(R.id.edtInch);
        txtResult = (TextView)findViewById(R.id.txtResult);
        spinUnit = (Spinner)findViewById(R.id.spinUnit);
        // Spinner に表示するアイテムを指定する
        String[] s_items = {"inch to cm", "cm to inch"};
        ArrayAdapter<String> adapter =
        	new ArrayAdapter<String>(this, R.layout.list, s_items);
        spinUnit.setAdapter(adapter);
        //
        btnConv.setOnClickListener(new View.OnClickListener(){
			public void onClick(View v) {
				String s = edtValue.getText().toString();
				double value = Double.valueOf(s);
				int i = spinUnit.getSelectedItemPosition();
				switch(i) {
				case 0: // inch to cm
					value = 2.54 * value;
					break;
				case 1: // cm to inch
					value = 0.393700787 * value;
					break;
				}
				s = String.valueOf(value);
				txtResult.setText(s);
			}
        });
    }
}

ここで、注目したいのは、Spinner へアイテムをセットしている箇所です。

はじめに、ArrayAdapterクラスを生成し、これを Spinner の setAdapter() でセットします。ArrayAdapter のコンストラクタの第一引数には、Activity 自身を、そして、第二引数には、どのようにアイテムを表示するのかレイアウトを指定し、第三引数には、String[] 型の変数を指定します。

spinUnit = (Spinner)findViewById(R.id.spinUnit);
String[] s_items = {"inch to cm", "cm to inch"};
ArrayAdapter<String> adapter =
	new ArrayAdapter<String>(this, R.layout.list, s_items);
spinUnit.setAdapter(adapter);

まとめると、Spinner を使うためには、まず、アイテムをどのように表示するのかレイアウトを用意しなくてはならず、その情報を、ArrayAdapter に設定した後、Spinner にセットするという流れになります。ちょっと面倒でしょうか。

• （１）メインビューのレイアウトに Spinner の定義を追加する
• （２）Spinner のアイテムをどのように表示するのか res/layout に XML で定義する
• （３）実際に表示したいデータを String[] 型で用意する
• （４）ArrayAdapter を生成して、上記（２）と（３）の情報をセットする
• （５）Spinner の setAdapter()メソッド で（４）で作ったアダプタをセットする

実行してみると、下記のように inch to cm / cm to inch のように変換方法を選べるようになっています。

まとめ

以上、XMLを使ってUIを構築する方法を紹介しました。droiddraw などを利用することで、とても簡単にUIを作ることができることが分かったのではないでしょうか。また、今回は扱わなかったものの、テキストデータなどは、「@string/resource_name」の形式で文字列リソースとして、別ファイルに記述できるようにもなっています。

Spinner の扱い方が分かれば、ListView なども同じように作ることができます。次回、Android の UI コンポーネントの使い方をさらに研究していこうと思います。お楽しみに。