ボタンのタップに反応するシンプルなアプリケーションを作成する - Android

ボタンを配置してボタンのタップに反応するシンプルなアプリケーションを作成します。

プロジェクトの作成

Android アプリケーションプロジェクトを作成します。
[New Android Application]ダイアログボックスが表示されますので、以下を設定します。
  • Application Name: "SimpleButton"
  • Project Name: "SimpleButton"
  • Package Name: "com.iPentec.simplebutton"
  • Minimum Required SDK: "API 8: Android 2.2 (Froyo)"
  • Target SDK: "API 17: Android 4.2 (Jelly Bean)"
  • Compile With: "API 17: Android 4.2 (Jelly Bean)"
  • Theme: "Holo Light with Dark Action Bar"

設定後[Next]ボタンを押します。


他の設定項目はデフォルトのままとします。[Next]ボタンで進み、[Finish]ボタンでプロジェクトの作成を完了します。


プロジェクトの作成ができると下図の画面が表示されます。


画面デザイナが表示されない場合は左側の"Package Explorer"の作成したプロジェクトのノードを開き"/res/layout/activity_main.xml"をダブルクリックして開きます。

画面のデザイン

プロジェクトが作成できましたので画面をデザインします。デザイナーの左側にある"Palette"から"Button"をドラッグアンドドロップします。


正しくドロップできるとデザイナーの画面にボタンが配置されます。


デザイナ画面のツールバーの[虫眼鏡(+)(-)アイコン]のボタンをクリックするとデザイナの画面を拡大、縮小できます。


画面に配置したボタンをクリックすると青枠が表示されます。青枠の周囲の8か所の[点](ハンドル)をドラッグするとボタンのサイズを変更できます。ただし、任意の大きさには変更できません。

プロパティの編集

ボタンのプロパティを編集します。
デザイナ画面に配置したボタンをクリックして選択し、右側のプロパティウィンドウの[On Click]を表示します。


[On Click]のラベルの右側のプロパティの値を入力するエリアに"button1_click"と入力します。


入力後ファイルを保存します。ツールバーの保存ボタンをクリックするか、[File]メニューの[Save]メニューを選択します。

コードの編集

ボタンがタップされた際の処理を記述します。"Package Explorer"のプロジェクトノードの"/src/com.iPentec.simplebutton/MainActivity.java"をダブルクリックして開きます。


Javaのソースコードファイルが表示されます。


コードを編集します。

編集前

package com.iPentec.simplebutton;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
  }
}

編集後

package com.iPentec.simplebutton;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;       //追加
import android.widget.Toast;    //追加

public class MainActivity extends Activity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
  }

  //追加
  public void button1_click(View view){
    Toast ts = Toast.makeText(this, "ボタンが押されました。", Toast.LENGTH_LONG);
    ts.show();
  }
}

解説

  public void button1_click(View view){
    Toast ts = Toast.makeText(this, "ボタンが押されました。", Toast.LENGTH_LONG);
    ts.show();
  }
上記がボタンがタップされた時に処理されるコードです。
メソッド名"button1_click"は画面デザイナでボタンの"On Click"プロパティに設定した名称と一致させます。

Toast ts = Toast.makeText(this, "ボタンが押されました。", Toast.LENGTH_LONG);
ts.show();
部分がトーストと呼ばれる機能で、画面にメッセージを表示するコードです。

実行結果

アプリケーションを実行します。下図の画面が表示されます。ボタンをタップするとメッセージが表示されます。

補足

下記のコードを追記するとビープ音が鳴ります。
package com.iPentec.simplebutton;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;       //追加
import android.widget.Toast;    //追加
import android.media.AudioManager;//追加
import android.media.ToneGenerator;//追加

public class MainActivity extends Activity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
  }

  //追加
  public void button1_click(View view){
    ToneGenerator toneGenerator 
      = new ToneGenerator(AudioManager.STREAM_SYSTEM, ToneGenerator.MAX_VOLUME);
    toneGenerator.startTone(ToneGenerator.TONE_PROP_BEEP);

    Toast ts = Toast.makeText(this, "ボタンが押されました。", Toast.LENGTH_LONG);
    ts.show();
  }
}
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
掲載日: 2013-03-14
iPentec all rights reserverd.