トップ » 技術記事 » Android で再開する Java プログラミング(5) - Button と EditText で遊ぶ

Android で再開する Java プログラミング(5) - Button と EditText で遊ぶ

タグ: Android GUI

Android とは、Googleが発表した携帯電話向けのプラットフォームの名称です。2007年11月に発表され、国内でも2009年夏にDocomoから実機がリリースされます。また、今後も、Androidを搭載したネットブックや音楽プレイヤーなど、さまざまな端末で Android が動くようになります。

既に、Android 1.5 SDK が無償で配布されており、これを利用することで誰でも Android の開発を行うことができます。本連載では、Java で Android アプリケーションを開発する方法を紹介しています。

ボタンを押すとメッセージが表示される簡単なアプリの制作

前回、Android 1.5 SDK の環境を構築し、簡単なアプリを作ってみました。これから、ボタンやエディタなどのインターフェイス系のコンポーネントに注目して紹介します。今回は、Button と EditText を中心に見てみます。

はじめに、ボタンをクリックするとダイアログを表示するという簡単なプログラムから作ってみます。

http://aoikujira.com/demo/hakkaku/rc/20090616YJnTA-run1.png

手順(1)新規プロジェクト

Eclipseを起動したら、[File > New > Project..]をクリックします。プロジェクトの種類は、Androidプロジェクトを選択して[Next]をクリックします。

http://aoikujira.com/demo/hakkaku/rc/20090616aiud1-AndroidProject.png

手順(2)「HelloButton」プロジェクトの作成

「New Android Project」のダイアログが出たら、プロジェクト名(Project name)を「HelloButton」にします。ビルド(Build Target)は「Android 1.5」にチェックを入れます。

そしてプロパティは、次のように設定します。

項目
Application name HelloButton
Package name com.example.hello
Create Activity [チェック] HelloButton
Min SDK Version 3
http://aoikujira.com/demo/hakkaku/rc/20090616VSutw~-NewProject.png

手順(3)プログラムの編集

Package Explorerで、src/com.example.hello にある、HelloButton.java をダブルクリックして、編集を行います。

http://aoikujira.com/demo/hakkaku/rc/20090616JUMgcV-OpenHelloButtonSrc.png

プログラムは、下記のように記述します。

file: HelloButton.java

package com.example.hello;

import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;

public class HelloButton extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //----------------------------------
        // 以下の部分を追加
        //----------------------------------
        // レイアウトを作成
        LinearLayout layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);
        setContentView(layout);
        // ボタンを作成
        Button btn = new Button(this);
        btn.setText("挨拶します");
        layout.addView(btn);
        // ボタンのイベントを設定
        btn.setOnClickListener(new OnClickListener(){
            public void onClick(View v) {
                AlertDialog.Builder dlg;
                dlg = new AlertDialog.Builder(v.getContext());
                dlg.setTitle("挨拶");
                dlg.setMessage("こんにちは!");
                dlg.show();
            }
        });
    }
}

手順(4)実行してみる

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

http://aoikujira.com/demo/hakkaku/rc/20090616baKL93-Run.png

下記のように、「挨拶します」というボタンが表示されます。

http://aoikujira.com/demo/hakkaku/rc/20090616YJnTA-run1.png

そして、ボタンをクリックすると、ダイアログが表示されます。

http://aoikujira.com/demo/hakkaku/rc/20090616Y9TOZ-run2.png

ちなみに、下記のボタンをクリックすると、ダイアログは閉じられます。

http://aoikujira.com/demo/hakkaku/rc/20090616t_fos-back-button.png

ボタンをクリックするアプリケーションの解説

無事実行できたら、もう少し細かい部分を確認していきます。ボタンを画面に乗せるために、レイアウトを作成します。ここでは、LinearLayout を利用しています。これは、各パーツを線上にレイアウトするためのものです。setOrientation()で、縦横方向を指定して配置することができます。

        // レイアウトを作成
        LinearLayout layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);
        setContentView(layout);

続いて、ボタンを作成しています。作成しただけでは、画面に表示されません。LinearLayout の addView() メソッドでビュー上に追加することにより、ボタンを画面上に表示できます。

        // ボタンを作成
        Button btn = new Button(this);
        btn.setText("挨拶します");
        layout.addView(btn);

そして、クリックした時の動作を指定するのが、以下の部分です。ボタンの setOnClickListener() を設定することでボタンをクリックした時の動作を指定できます。ここでは、AlertDialog を表示しています。(この AlertDialog は、SDK1.5になって使い方が変わった部分です。)

        // ボタンのイベントを設定
        btn.setOnClickListener(new OnClickListener(){
            public void onClick(View v) {
                AlertDialog.Builder dlg;
                dlg = new AlertDialog.Builder(v.getContext());
                dlg.setTitle("挨拶");
                dlg.setMessage("こんにちは!");
                dlg.show();
            }
        });

単位変換アプリの作成

次に単位変換を行うアプリケションを作ってみます。ここでは、インチ→センチメートルの変換を行うアプリケーションを作ってみます。

http://aoikujira.com/demo/hakkaku/rc/20090616pF_lh-run-InchToCm.png

手順(1)プロジェクトの作成

Eclipseを起動して、[File > New > Project]をクリックして、Android プロジェクトを作成します。ここでは、以下の通り、プロジェクトを設定しました。

項目 設定した値
Project name InchToCm
Application name InchToCm
Package name com.example.test
Create Activity [チェック] InchToCm
Min SDK Version 3
http://aoikujira.com/demo/hakkaku/rc/20090616ubiHs-NewProjectInchToCm.png

手順(2)プログラムの編集

Package Explorerから、src/com.example.test/InchToCm.java をダブルクリックして編集状態にします。そして、プログラムを下記のように編集します。

package com.example.test;

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

public class InchToCm extends Activity {
    // -------------------------------------
    // 利用する部品
    public TextView txtInfo;
    public EditText edtInch;
    public Button btn;
    public TextView txtResult;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //----------------------------------
        // レイアウトを作成
        LinearLayout layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);
        setContentView(layout);
        //----------------------------------
        // 部品を作成していく
        // ラベル
        txtInfo = new TextView(this);
        txtInfo.setText("インチを入力してください:");
        layout.addView(txtInfo);
        // エディタ
        edtInch = new EditText(this);
        layout.addView(edtInch);
        // ボタン
        btn = new Button(this);
        btn.setText("変換");
        layout.addView(btn);
        // 結果表示用ラベル
        txtResult = new TextView(this);
        txtResult.setTextSize(30f);
        layout.addView(txtResult);
        //----------------------------------
        // ボタンのイベントを設定
        btn.setOnClickListener(new OnClickListener(){
            public void onClick(View v) {
                String strInch = edtInch.getText().toString();
                double inch = Double.valueOf(strInch);
                double cm = 2.54 * inch;
                String strCm = String.valueOf(cm);
                txtResult.setText(strCm);
             }
        });
    }
}

手順(3)実行

これを実行してみると、下記のような単位変換アプリケーションが完成します。

http://aoikujira.com/demo/hakkaku/rc/20090616pF_lh-run-InchToCm.png

単位変換アプリケーションの解説

このプログラムの中では、下記のコンポーネントを利用しています。

名前 機能
TextView テキストを表示するためのラベル
EditText 編集可能なテキストボックス
Button ボタン

単位変換アプリの中では、これらのコンポーネントを次のような名前で利用しています。

    // 利用する部品
    public TextView txtInfo;   // 入力を促すラベル
    public EditText edtInch;   // インチの値を入力してもらうエディタ
    public Button btn;         // 変換実行ボタン
    public TextView txtResult; // 結果を表示するラベル

これらの配置は、先ほど見た LinearLayout を利用して縦に配置していきます。各コンポーネントを生成しては「addView()」でレイアウトに乗せていくという要領です。

        //----------------------------------
        // レイアウトを作成
        LinearLayout layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);
        setContentView(layout);
        //----------------------------------
        // 部品を配置
        // ラベル
        txtInfo = new TextView(this);
        txtInfo.setText("インチを入力してください:");
        layout.addView(txtInfo);
        // エディタ
        edtInch = new EditText(this);
        layout.addView(edtInch);
        // ボタン
        btn = new Button(this);
        btn.setText("変換");
        layout.addView(btn);
        // 結果表示用ラベル
        txtResult = new TextView(this);
        txtResult.setTextSize(30f);
        layout.addView(txtResult);

ボタンをクリックしたときには、エディタにある値を取得して、センチメートルの値に変換し、これを結果表示用のTextView 「txtResult」に設定しています。

        // ボタンのイベントを設定
        btn.setOnClickListener(new OnClickListener(){
            public void onClick(View v) {
                String strInch = edtInch.getText().toString();
                double inch = Double.valueOf(strInch);
                double cm = 2.54 * inch;
                String strCm = String.valueOf(cm);
                txtResult.setText(strCm);
             }
        });

Java に慣れている方なら、軽く書く事ができるプログラムだと思います。筆者はあまり慣れていないので、TextView の setText() にうまく値を設定できなくて、ちょっと悩みました。setText は下記のように使います。

TextView.setText(CharSequence text)

この、CharSequence って何?という感じだったのですが、調べてみると、String クラスの基底クラスです。つまり、String 型のオブジェクトを設定すれば良いだけだったのです。

まとめ

以上、今回は、Android の GUIコンポーネントの基本となる Button/EditText/TextView の使い方を紹介しました。ボタンとエディタの使い方さえ分かれば、簡単なアプリをいろいろと作ることができると思います。本記事を参考にいろいろ作ってみてください。

Series Navigation«モグラ叩き2XMLでUIを作る»

執筆者紹介

クジラ飛行机

クジラ飛行机

くじらはんど(http://kujirahand/)にて、日本語プログラミング言語「なでしこ」(IPA未踏ユース採択)、テキスト音楽「サクラ」(OSPオンラインソフト大賞入賞)など多くのオンラインソフトを開発。著書に「Flexプロフェッショナルガイド」「なでしこ公式バイブル」、「一週間でマスターするActionScript3.0」など。

TrackBack URL :

Easiest way to develop an Android app…

八角研究所 : Android で再開する Java プログラミング(5) - Button と EditText で遊ぶ…