勉強会

ボタンを作ってみよう †

ユーザー操作を受け取るために、画面上にボタンを作ってみましょう。ここでは、XMLのレイアウトファイルで画面に表示させる方法について説明します。

↑

プロジェクトを作成しましょう †

  • "File -> New -> Project"を選択して、開いたダイアログで"Android Poroject"を選択して、"Next"ボタンを押します。
  • 開いたダイアログで、以下のように入力してFinishボタンを押します。
    • Project Name: HelloButton
    • Package name: jp.hews.hellobutton
    • Activity Name: HelloButtonActivity
    • Application Name: ハローボタン
↑

ボタンに表示するラベルを定義してみましょう †

  • res/values/strings.xmlを開いて、ボタンに表示するための文字列を定義しておきます。GUIでaddボタンを押してStringを選択して挿入する方法と、下部の「strings.xml」タブでXMLを表示して、入力する方法があります
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, HelloButtonActivity</string>
    <string name="app_name">ハローボタン</string>
   
    <!-- 押しボタンに表示する文字列  -->
    <string name="button_label">押してね</string>
</resources>
↑

画面上の押しボタンを定義してみましょう †

  • res/layout/main.xmlを開いて、XMLのレイアウトリソースで、押しボタンを定義します。下部の「main.xml」タブを選択して、XMLを表示して、編集します。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />

<!-- ボタンの定義。android:idを定義することでJavaから取り出せる　 -->
<Button
    android:id="@+id/button_id"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/button_label"
    />
</LinearLayout>
  • ここでのポイントは、で、プログラムからアクセスできるように、「android:id="@+id/button_id"」を追加していることです。
  • 表示するテキストは、res/values/strings.xmlで定義したbutton_lableを使用しています。
  • この時点で実行すると、画面上にボタンが表示されることが確認できます。しかし、まだ、このボタンを押してもなにもおこりません。
    button.010.Initial.png
↑

プログラムで押しボタンに振る舞いを追加してみましょう †

  • HelloButtonActivity.javaを開いて、XMLレイアウトで定義したButtonのインスタンスを取り出します。 
        public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        /* ボタンを取り出して、リスナーを登録する */
        Button b = (Button)findViewById(R.id.button_id);
        /* .... 取り出したｂにふるまいを追加できる */
    }
    • XMLのidで定義したidに対応する、button_idというフィールドが、Rというクラスに自動的に生成されています。これは、EclispeのADTプラグインがXMLファイルの変更を検出して自動的に生成してます。
    • Ctl-shift-Oでオーガナイズインポートを呼び出して、「import android.widget.Button;」文を挿入しておきましょう。
  • 取り出したボタンにリスナーを登録して、ボタンをおされた時の振る舞いを記述します。ここでは、サンプルとして、ボタンのテキストを変更するコードを記述してみましょう。 
            b.setOnClickListener( new View.OnClickListener() {
                       @Override
                       public void onClick(View v) {
                               Button b = (Button)v;
                               b.setText("押したね");
                       }});
  • これでプログラムを再度実行してみましょう。ボタンを押すとテキストが変更されているのが確認できると思います。
    button.020.after.png
  • 完成したプログラムの全体は、以下のようになっています。 
    package jp.hews.hellobutton;

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

public class HelloButtonActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        /* ボタンを取り出して、リスナーを登録する */
        Button b = (Button)findViewById(R.id.button_id);
        b.setOnClickListener( new View.OnClickListener() {
                       @Override
                       public void onClick(View v) {
                               Button b = (Button)v;
                               b.setText("押したね");
                       }});
    }
}

#ref(): File not found: "ボタンを作ってみよう.pdf" at page "勉強会/ボタンをつくってみよう"