• 追加された行はこの色です。
  • 削除された行はこの色です。
[[ワーキンググループ/ハンズオンセッション]]

* ボタンを作ってみよう [#cc95c738]

ユーザー操作を受け取るために、画面上にボタンを作ってみましょう。
ここでは、AndroidのEclipseプラグインを用いてボタンを定義します。

** プロジェクトを作成する [#i5871fbd]

必要に応じて、File > New > Android Projectで新規のプロジェクトを作成します。

ここでは、以下のようなプロジェクトを作成してみます。

#ref(Project.jpg)

|Project Name|HelloButtonProject|
|Build Target|Google APIs|
|Application Name|HelloButton|
|Package Name|jp.hews.hellobutton|
|Create Activity|HelloButtonActivity|
|Min SDK Version|3（Bild Targetを指定すると自動的に設定される）|


** 画面にボタンを配置する [#v40ce8cd]

画面にボタンを配置するには、レイアウトを定義したXMLファイルを編集します。

まず、レイアウトを定義したres/layout/main.xmlを開いて、画面上にボタンを配置します。

この画面でボタンを配置するには、GUIで挿入する方法と、下部の「main.xml」タブから直接XMLを編集する方法があります。ここでは、GUIを用いて定義します。

#ref(AddButton.jpg)

- Package Explorerでres/layout/main.xmlをダブルクリックしてmain.xmlを開きます。
- Viewsのフォルダーのなかの「Button」要素をドラッグして、画面に挿入します。
- Button01という文字の表示されたボタンが配置されます

** ボタンに表示するラベルを定義する [#za6a8b15]

ボタンのラベルは、res/values/strings.xmlで定義します。ここでは、ボタンのプロパティから開かれるResource Chooserを使用して、文字列を定義します。

#ref(ButtonLabel.jpg)

- 下部のPropertiesタブで、Text要素を選択して、Resource Chooserを選択します。

#ref(ResourceChooser.jpg)

- 下部の「New String」を選択するとCreate Android Stringの画面が開きます。
- Stringに表示する文字として「Push Me!」を入力します
- New R.stringに、定義した文字列のIDとして、「button_label」を入力します
- Previewを押して文字列がstring.xmlに反映されることを確認します。
- OKを押して、Resource Chooserの画面に戻ります
- いま定義した「button_lable」を選択して、「OK」を押します

** ボタンが押された時の処理を追加する [#o3fa95fc]

ボタンクラス（android.widget.Button）にリスナーを登録することで、ボタンが押された時の処理を追加することができます。
ボタンが押された時に呼び出されるリスナーの型は、android.view.View.OnClickListenerです。

ここでは、メインのアクティビティクラスであるHelloButtonActivityにリスナーを実装します。

- HelloButtonActivityをダブルクリックして開きます
- 先頭のインポート文の最後に実装に必要なボタンクラスとリスナークラスをインポートします。
 ...
 import android.view.View;
 import android.widget.Button;
 
- HelloButtonActivityクラスに「implements View.OnClickListener」を追加して、リスナーの実装を宣言します。
 
 public class HelloButtonActivity extends Activity implements View.OnClickListener {
 
- HelloButtonActivityクラスに「public void onClick(View v)」メソッドを追加して、リスナーを実装します。
-- リスナーのメソッドの中では、finish()を呼び出します。このメソッドを呼び出すと、そのアクティビティを終了します。
     public void onClick(View v) {
         finish();
     }

- HelloButtonActivityクラスのonCreateメソッドで、ボタンにリスナーを登録します。
-- setContentViewメソッドで、main.xmlで定義した要素を表示します
-- findViewByIdメソッドで、main.xmlで定義したボタンのインスタンスを取り出します。
-- 取り出したボタンクラスのsetOnClickListenerメソッドにthisを渡すことで、リスナーを登録します
 
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);
         
         Button button = (Button)findViewById(R.id.Button01);
         button.setOnClickListener(this);
     }

- 作成したソースコードは、以下のようになっています。

 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 implements View.OnClickListener {
 
     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);
         
         Button button = (Button)findViewById(R.id.Button01);
         button.setOnClickListener(this);
     }
 
     public void onClick(View v) {
         finish();
     }
 }

** プログラムを実行する [#z1370123]

修正したプログラムを実行して、表示されたボタンを押すことで、アクティビティが終了することが確認できます。

#ref(HelloButton.png)

- RunメニューのRunでRun As画面を表示する
- 「Android Application」を選択することで、アプリケーションが実行される
- 「Push Me!」というボタンを押すと画面が閉じて、ランチャーの画面が表示される

** 演習問題 [#yce513d6]

- ボタンをふたつ横に並べて配置してみましょう。
- 二つのボタンのクリックを一つのリスナーのメソッドで受けて、どちらのボタンが押されたのかを判定してみましょう。
- イメージボタンや、ラジオボタンなど、別の種類のボタンを作ってみましょう。

** PDF版の資料 [#aa1a1746]
#ref(HelloButton.pdf)
----
[[ワーキンググループ/ハンズオンセッション]]