ちょっと試して Android アプリ開発
STEP-01
ダイアログ型タイマ
（C）2013 皆無軟体 / KeinSoft
※ STEP-00の手順に従って、Android Developer Toolsのインストールおよび実機 Android端末または仮想デバイスの設定が既に完了しているものとします。 【目標】 ProgressDialog を使って、タイマアプリをつくること。文字列を出力する TextView, 画
像を出力する ImageView, 処理を選択する RadioButton も利用します。
1 プロジェクトの生成
(１) ADT起動
１-（２）で展開し、移動したフォルダを開くと、”eclipse”というフォルダがあります。 さらに、”eclipse”フォルダを開き、”eclipse”または”eclipse.exe”,
“eclipse.app”というファイルのアイコンをダブルクリックしてください。 最初に Workspace (作成したプログラムや画像ファイルを保存する場所）のパス
（ファイルシステム上の位置）を確認するダイアログが開きます。通常は、ホームディレク トリ内の書類（Documents)フォルダにある workspace というフォルダに設定されます。今回 は[OK]をクリックします。
(２) デバイスの起動
アプリを実機で動作させるには、USB ケーブル等でパソコンに接続します。
実機ではなく仮想デバイス上でアプリを実行する場合には、仮想デバイス(AVD)を起動し ます。
Eclipse (ADT)のメニューから[Window]-[Android Virtual Device Manager]をク リックします。
起動したい仮想デバイス（Android Virtual Device）をクリックして 選択してから［Start...］をクリックします。
左図のように設定して、［Launch］をクリックします。
(３) プロジェクト作成
[File]-[New]-[Android Application Project]をクリック
して、プロジェクトを生成します。
Application Name : ProgressDialogTimer Activity Name : ProgressDialogTimer
その他の部分は変更せず、[Next >]。
<2>
(４) プロジェクトのビルドと起動
ここまでの操作で、画面に”Hello World”と出力されるプログラムが自動的に作成され ました。これをビルドしてから仮想デバイスまたは実機で実行してみましょう。
ア Run Configurarions設定
[Run]-[Run Configurations...]をクリックします。
i （開発環境構築時に一回だけ行う操作）
[Android Application]をダブルクリックして、[New_configuration]を作ります。
テキストボックスName:に EXECと入力します。
ii （プロジェクトごとに行う操作）
テキストボックスProject: にProgressDialogTimerと入力します。
イ 起動
[Run]-[Run Configurations...]をクリックします。
[Android Application]をクリックして、[New_configuration]をクリックします。
右下の[Run]をクリックすると、アプリが仮想デバイスまたは実機上で実行されます。
2 画像の追加と表示
(１) ImageViewの追加
“Hello world!” という TextView の上に ImageView を配置します。 ImageView のアイコンは、[Palette]の[Images&Media]内にあります。
[ImageView]のアイコンを”Hello world!”の上にドラッグ＆ドロップします。
(２) 画像ファイルのリソースへの 登録
ドロップした後、画像のリソー スを選択します。ここでは、
[ic_launcher]をクリックし
(３) 画像の表示確認
[File]-[Save All]をクリックして、ファイルを保存します。 [Run]-[Run Configurations...]をクリックします。 [Android Application]をクリックして、
[New_configuration]をクリックします。
右下の[Run]をクリックすると、アプリが仮想デバイスまたは実機上で実行さ
れます。
3 画像をクリックすると何かが起きる
画像をクリックすると、”Hello world!”が”Ready”に変わるプログラムを追加してみます。
(１) イベント処理の追加(XMLへ）
左にある[Package Explorer]内の[res]→[layout]の順にダブルクリックして開きます。 （開いている場合は必要ありません）この中にある
[activity_progress_dialog_timer.xml]をダブルクリックして開きます。
[activity_progress_dialog_timer.xml]タブをクリックして、XML ファイルの ImageView セクションを次のように編集します。斜体部分の行を追記します。
<ImageView
android:onClick="startTimer"
android:id="@+id/imageView1"android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/textView1" android:layout_centerHorizontal="true" android:src="@drawable/ic_launcher" />
(２) イベント処理のコードを (ProgressDialogTimer.java) へ追加
左にある[Package Explorer]内の[src]→[com.example.progressdialogtimer]
の順にダブルクリックして開きます。（開いている場合は必要ありません）この中にある
[ProgressDialogTimer.java]をダブルクリックして開きます。
ProgressDialogTimer
クラスを次のように編集します。斜体部分の行を追記します。
ア TextView用変数の定義
TextView を、タイマー内のあらゆる関数から呼び出し可能にするため、変数を定義します。
public class ProgressDialogTimer extends Activity {
private TextView textview;
@Override
protected void onCreate(Bundle savedInstanceState) {
<4> ることを教えてくれています。
そこで、この小さなアイコンをクリックすると、エラー訂正のヒントが表示されます。 ここでは、最上部のImport 'TextView'をクリックします。
これにより、TextView の機能が追加されます。
イ TextViewを扱うための情報を読み込む
”Hello world!”という文字列が格納されているのは TextView という部品です。これをプ ログラムから制御するための情報を取得するために、onCreate メソッドの中に下記の斜体字 の部分を追記します。
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_progress_dialog_timer);
textview = (TextView) findViewById(R.id.textView1);
}ウ 画像をクリックしたときに実行されるメソッド”startTimer”を定義
protected void onCreate(Bundle savedInstanceState)メソッドと public boolean onCreateOptionsMenu(Menu menu)メソッドの間に、次のコードを追記します。
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_progress_dialog_timer); textview = (TextView) findViewById(R.id.textView1); }
public void startTimer(View v) {
textview.setText("Ready.");
// TextView
を“
Ready.”
に設定
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
上記のように追記すると、またもや、小さな電球に x 印がついたアイコンが表示されます。 この小さな電球 x アイコンをクリックすると、エラー訂正のヒントが表示されます。
ここでは、最上部のImport 'View'をクリックします。 これにより、View の機能が追加されます。
(３) アプリの実行確認
[File]-[Save All]をクリックして、ファイルを保存します。 [Run]-[Run Configurations...]をクリックします。
[Android Application]をクリックして、[New_configuration]をクリックします。
右下の[Run]をクリックすると、アプリが仮想デバイスまたは実機上で実行されます。
4 プログレスダイアログを使ったタイマー
(１) ProgressDialogのインスタンスの作成と設定 ア ProgressDialogを表示するコードの追記
Progress Dialog をタイマー内で表示するため、[ProgressDialogTimer.java]内の startTimer関数内にコードを追記します。
public void startTimer(View v) { textview.setText("Ready.");
//
final ProgressDialog progress = new ProgressDialog(this);
//
ダイアログ生成
progress.setTitle("Timer"); //
タイトル
progress.setMessage("Please Wait");
//
メッセージ
progress.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
//
水平線形のプログレスダイアログ
progress.setCancelable(true);
//
戻るボタンでキャンセル可能
progress.setMax(TimeLimit); //
バーの最大値は
TimeLimit
progress.show(); //
ダイアログを表示
}
行の左端に X 印の小さな電球のアイコン が表示されます。これは、なにかエラーがあ ることを教えてくれています。
そこで、この小さなアイコンをクリックすると、エラー訂正のヒントが表示されます。 ここでは、最上部のImport 'ProgressDialog'をクリックします。
これにより、ProgressDialog の機能が追加されます。
このアプリを実行すると、いつまでもダイアログが表示されたままです。戻るボタンをク リックするとダイアログボックスが消えます。
イ Countdown Timerの追加
これまでの変更により Progress Dialog は表示されました。しかし、ダイアログはいつま でも表示されたままです。そこで、タイマ機能を追加して、決められた時間だけダイアログ ボックスが表示されるようにします。
先ほど入力したコードの続きに追記してきます。（斜体字の部分を入力します。）
private int TimeLimit = 5000; //
制限時間（単位は
ms
）
public void startTimer(View v) { textview.setText("Ready."); //
final ProgressDialog progress = new ProgressDialog(this); // ダイアログ生成 progress.setTitle("Timer"); // タイトル
progress.setMessage("Please Wait"); // メッセージ
progress.setCancelable(true); // 戻るボタンでキャンセル可能にする progress.setMax(100); // プログレスバーの最大値を100とする progress.show(); // ダイアログを表示
//
new CountDownTimer(TimeLimit, 100) {
//
指定間隔（
100ms
）で
TimeLimit
からカウントダウン
<6>
progress.dismiss(); //
プログレスダイアログを終了
}
public void onTick(long amount) { //
指定間隔で実行
progress.setProgress((int) (TimeLimit - amount));
}
}.start(); // CountDownTimer
の開始
}
行の左端に X 印の小さな電球のアイコンが表示されます。この小さなアイコンをクリック すると、エラー訂正のヒントが表示されます。
ここでは、最上部のImport 'CountDownTimer'をクリックします。 これにより、カウントダウンタイマの機能が追加されます。
(２) アプリの実行確認
[File]-[Save All]をクリックして、ファイルを保存します。 [Run]-[Run Configurations...]をクリックします。 [Android Application]をクリックして、
[New_configuration]をクリックします。
右下の[Run]をクリックすると、アプリが仮想デバイスまたは実機上で実
行されます。
画像をクリックすると、文字列が”Ready.”に変わり、Progress Dialog が表示されます。カウントダウンが終了すると、ダイアログボックスが閉じます。
戻るボタンのクリックやダイアログ外をクリックするとカウントダウンを中断し、ダイアログボックスを 閉じます。
5 ラジオグループ、ラジオボタンを追加して、制限時間を選べるようにする
これまでのコードでは、5 秒でタイマが切れました。本章では、タイマが切れる時間を5 秒, 10秒, 3 分のうちから選べるようにしてみましょう。いくつかの選択肢から値を選ぶには RadioGroup と RadioButton を使います。
(１) ラジオグループ（RadioGroup）追加（activity_progress_dialog_timer.xml へ） 左にある[Package Explorer]内の[res]→[layout]の順
にダブルクリックして開きます。（開いている場合は必要 ありません）この中にある
[activity_progress_dialog_timer.xml]をダブル
クリックして開きます。
[Graphical Layout]タブをクリックします。 RadioGroup のアイコンは、
[Palette]の[Form Widgets]内にあります。 [RadioGroup]のアイコン を
TextView (Hello world!)の下にドラッグ＆ドロップしま す。
(２) ラジオボタン（RadioButton）を設定
上記操作に続いて[activity_progress_dialog_timer.xml]タブをクリックします。 ３つの RadioButton の android:text の値を次の斜体字のように変更します。
<RadioButton
android:id="@+id/radio0"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true"
android:text="5sec" />
android:id="@+id/radio1"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="10sec" />
<RadioButton
android:id="@+id/radio2"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="3min" />
変更したら、[File]-[Save]で保存しておいてください。
(３) ラジオボタンの処理（制限時間変更）を追加（[ProgressDialogTimer.java]へ）
[ProgressDialogTimer.java]をエディタで開きます。
ア イベントリスナ機能の追加と RadioGroup, RadioButton 変数の宣言
ProgressDialogTimerクラス内で、斜体字のように RadioGroup と RadioButton 用のコード を追加します。
public class ProgressDialogTimer extends Activity
implements RadioGroup.OnCheckedChangeListener {
private TextView textview; // 主画面上の文字列の変数private RadioGroup radiogroup;
//
主画面上の
RadioGroup
の変数
private RadioButton radio0, radio1, radio2;
//
主画面上の
RadioButton0
〜
2
の変数
@Override
protected void onCreate(Bundle savedInstanceState) { （以下略）
上記コードの追加により、行の左端に X 印の小さな電球のアイコンが表示されます。この 小さなアイコンをクリックすると、エラー訂正のヒントが表示されます。
implementsの行では、Add unimplemented methodsをクリックします。
次にRadioGroupの行に対しては最上部のImport 'RadioGroup'をクリックします。 最後に、RadioButtonの行では、Import 'RadioButton'をクリックします。
これにより、ラジオボタンの機能が追加されます。
イ ラジオボタンの設定を追加
onCreate関数を以下のように変更します。
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_progress_dialog_timer);
textview = (TextView) findViewById(R.id.textView1); // 文字列 //
radiogroup = (RadioGroup) findViewById(R.id.radioGroup1);
//
ラジオグループ
radio0 = (RadioButton) findViewById(R.id.radio0);
//
ラジオボタン
0
radio1 = (RadioButton) findViewById(R.id.radio1);
//
ラジオボタン
1
radio2 = (RadioButton) findViewById(R.id.radio2);
<8>
//
radiogroup.setOnCheckedChangeListener(this);
//
ラジオグループが変更されたことを検出するイベントリスナを設定
radiogroup.check(radio0.getId());
//
最初の状態ではラジオボタン
0
をチェックする。
}
ウ コールバックメソッドの追加
ProgressDialogTimer クラス内に、ラジオボタンが変化したときに呼び出される関数＝
コールバックメソッドを追記します。onCheckedChanged関数は、
ProgressDialogTimer.java の最後の方にあります。
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) { // TODO Auto-generated method stub
if (checkedId == radio0.getId()) {
TimeLimit = 5000;//
ラジオボタン
0
のとき制限時間
5sec
} else if (checkedId == radio1.getId()) {
TimeLimit = 10000;//
ラジオボタン
1
のとき制限時間
10sec
} else if (checkedId == radio2.getId()) {
TimeLimit = 180000;
//
ラジオボタン
2
のとき制限時間
180sec (3min)
} else {
TimeLimit = 1;
}
}
(４) アプリの実行確認
[File]-[Save All]をクリックして、ファイルを保存します。 [Run]-[Run Configurations...]をクリックします。
[Android Application]をクリックして、[New_configuration]をクリックします。
右下の[Run]をクリックすると、アプリが仮想デバイスまたは実機上で実行されます。
