ワーキンググループ/ハンズオンセッション

ボタンを作ってみよう

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

プロジェクトを作成する

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

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

Project.jpg
Project NameHelloButtonProject
Build TargetGoogle APIs
Application NameHelloButton
Package Namejp.hews.hellobutton
Create ActivityHelloButtonActivity
Min SDK Version3(Bild Targetを指定すると自動的に設定される)

画面にボタンを配置する

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

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

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

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

ボタンに表示するラベルを定義する

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

ButtonLabel.jpg
  • 下部のPropertiesタブで、Text要素を選択して、Resource Chooserを選択します。
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」を押します

ボタンが押された時の処理を追加する

ボタンクラス(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();
    }
}

プログラムを実行する

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

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

演習問題

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

PDF版の資料


ワーキンググループ/ハンズオンセッション

添付ファイル: fileHelloButton.pdf 3982件 [詳細] fileResourceChooser.jpg 1824件 [詳細] fileProject.jpg 1791件 [詳細] fileHelloButton.png 43件 [詳細] fileButtonLabel.jpg 1662件 [詳細] fileAddButton.jpg 2014件 [詳細]